@vkontakte/vkui 6.5.1 → 6.5.2

package/dist/vkui.js.tmp

@@ -5737,6 +5737,9 @@ function AppRoot_unsupported_iterable_to_array(o, minLen) {
     }, props), content);
 };
 
+;// CONCATENATED MODULE: ./src/components/RootComponent/RootComponent.module.css
+// extracted by mini-css-extract-plugin
+
 ;// CONCATENATED MODULE: ./src/components/RootComponent/RootComponent.tsx
 function RootComponent_define_property(obj, key, value) {
     if (key in obj) {
@@ -5795,6 +5798,7 @@ function RootComponent_object_without_properties_loose(source, excluded) {
 }
 
 
+
 /**
  * Базовый корневой компонент.
  */ var RootComponent_RootComponent = function(_param) {
@@ -5806,7 +5810,7 @@ function RootComponent_object_without_properties_loose(source, excluded) {
     ]);
     return /*#__PURE__*/ react.createElement(Component, RootComponent_object_spread({
         ref: getRootRef,
-        className: clsx(baseClassName, className)
+        className: clsx(className, baseClassName, "vkuiRootComponent", restProps.hidden === true && "vkuiRootComponent--hidden")
     }, restProps));
 };
 
@@ -9395,7 +9399,7 @@ function useIsClient_unsupported_iterable_to_array(o, minLen) {
  * ВНИМАНИЕ: Этот подход сделает ваши компоненты медленнее, потому что они
  * должны рендериться дважды, поэтому используйте хук с осторожностью.
  *
- * @see {@link https://beta.reactjs.org/apis/react-dom/hydrate#handling-different-client-and-server-content React Docs}
+ * @see {@link https://react.dev/reference/react-dom/hydrate#handling-different-client-and-server-content React Docs}
  */ function useIsClient_useIsClient() {
     var initial = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
     var _React_useState = useIsClient_sliced_to_array(react.useState(initial), 2), isClient = _React_useState[0], setIsClient = _React_useState[1];
@@ -13085,6 +13089,7 @@ function useEnsuredControl_unsupported_iterable_to_array(o, minLen) {
 
 
 
+
 function useEnsuredControl_useEnsuredControl(_param) {
     var onChangeProp = _param.onChange, disabled = _param.disabled, props = useEnsuredControl_object_without_properties(_param, [
         "onChange",
@@ -13107,14 +13112,27 @@ function useEnsuredControl_useEnsuredControl(_param) {
         onChange
     ];
 }
+var useEnsuredControl_warn = warnOnce('useCustomEnsuredControl');
 function useEnsuredControl_useCustomEnsuredControl(param) {
     var value = param.value, defaultValue = param.defaultValue, disabled = param.disabled, onChangeProp = param.onChange;
     var isControlled = value !== undefined;
     var _React_useState = useEnsuredControl_sliced_to_array(react.useState(defaultValue), 2), localValue = _React_useState[0], setLocalValue = _React_useState[1];
-    var preservedControlledValueRef = react.useRef(value);
+    var preservedControlledValueRef = react.useRef();
     useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function() {
         preservedControlledValueRef.current = value;
     });
+    /*
+   * Для ситуации, когда nextValue это пользовательская функция,
+   * и в качестве аргумента мы должны передать prevValue.
+   * Обычно в качестве prevValue используется preservedControlledValueRef, но оно может быть undefined, если
+   * некотролируемое value вдруг стало контролируемым
+   * (value = undefined ---> value = true)
+   * Если в момент вызова onChange preservedControlledValueRef ещё не был
+   * обновлён в useEffect, то мы не можем использовать preservedControlledValueRef как prevValue
+   * В качестве запасного варианта мы храним текущее значение value в currentFallbackValueRef, чтобы
+   * использовать его вместо preservedControlledValueRef.
+   */ var currentFallbackValueRef = react.useRef(value);
+    currentFallbackValueRef.current = value;
     var onChange = react.useCallback(function(nextValue) {
         if (disabled) {
             return;
@@ -13129,8 +13147,14 @@ function useEnsuredControl_useCustomEnsuredControl(param) {
                     return resolvedValue;
                 });
             } else if (onChangeProp) {
-                var resolvedValue = nextValue(preservedControlledValueRef.current);
-                onChangeProp(resolvedValue);
+                if (false) {}
+                var prevValue = preservedControlledValueRef.current === undefined ? currentFallbackValueRef.current : preservedControlledValueRef.current;
+                // В теории prevValue не может быть undefined,
+                // но лучше не вызывать nextValue с таким значением
+                if (prevValue !== undefined) {
+                    var resolvedValue = nextValue(prevValue);
+                    onChangeProp(resolvedValue);
+                }
             }
         } else {
             if (onChangeProp) {
@@ -28230,12 +28254,16 @@ function Footer_object_without_properties_loose(source, excluded) {
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
  */ var Footer = function(_param) {
-    var children = _param.children, className = _param.className, restProps = Footer_object_without_properties(_param, [
+    var children = _param.children, className = _param.className, _param_Component = _param.Component, Component = _param_Component === void 0 ? 'footer' : _param_Component, roleProp = _param.role, restProps = Footer_object_without_properties(_param, [
         "children",
-        "className"
+        "className",
+        "Component",
+        "role"
     ]);
+    var role = roleProp !== null && roleProp !== void 0 ? roleProp : Component === 'footer' ? 'contentinfo' : undefined;
     return /*#__PURE__*/ React.createElement(Footnote, Footer_object_spread_props(Footer_object_spread({
-        Component: "footer"
+        Component: Component,
+        role: role
     }, restProps), {
         className: classNames("vkuiFooter", className)
     }), children);
@@ -30676,7 +30704,8 @@ function Search_unsupported_iterable_to_array(o, minLen) {
         onPointerDown: onIconCancelClickStart,
         onClick: onCancel,
         className: "vkuiSearch__icon",
-        tabIndex: hasValue ? undefined : -1
+        tabIndex: hasValue ? undefined : -1,
+        disabled: inputProps.disabled
     }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, clearLabel), platform === 'ios' ? /*#__PURE__*/ React.createElement(Icon16Clear, null) : /*#__PURE__*/ React.createElement(Icon24Cancel, null)), adaptiveSizeY.compact && onFindButtonClick && /*#__PURE__*/ React.createElement(Button, {
         mode: "primary",
         size: "m",
@@ -35013,7 +35042,7 @@ var FormLayoutGroup_sizeYClassNames = FormLayoutGroup_define_property({
     return /*#__PURE__*/ React.createElement(RootComponent, FormLayoutGroup_object_spread({
         getRootRef: rootEl,
         Component: "fieldset",
-        baseClassName: classNames("vkuiFormLayoutGroup", sizeY !== 'regular' && FormLayoutGroup_sizeYClassNames[sizeY], mode === 'horizontal' && classNames("vkuiFormLayoutGroup--mode-horizontal", 'vkuiInternalFormLayoutGroup--mode-horizontal'), mode === 'vertical' && classNames("vkuiFormLayoutGroup--mode-vertical", 'vkuiInternalFormLayoutGroup--mode-vertical'), isRemovable && classNames("vkuiFormLayoutGroup--removable", 'vkuiInternalFormLayoutGroup--removable'), segmented && classNames("vkuiFormLayoutGroup--segmented", 'vkuiInternalFormLayoutGroup--segmented'))
+        baseClassName: classNames("vkuiFormLayoutGroup", sizeY !== 'regular' && FormLayoutGroup_sizeYClassNames[sizeY], mode === 'horizontal' && classNames("vkuiFormLayoutGroup--mode-horizontal", 'vkuiInternalFormLayoutGroup--mode-horizontal'), mode === 'vertical' && 'vkuiInternalFormLayoutGroup--mode-vertical', isRemovable && classNames("vkuiFormLayoutGroup--removable", 'vkuiInternalFormLayoutGroup--removable'), segmented && classNames("vkuiFormLayoutGroup--segmented", 'vkuiInternalFormLayoutGroup--segmented'))
     }, restProps), isRemovable ? /*#__PURE__*/ React.createElement(Removable, {
         className: "vkuiFormLayoutGroup__removable",
         align: "start",
@@ -37717,14 +37746,6 @@ var overscrollBehaviorClassNames = {
 // extracted by mini-css-extract-plugin
 
 ;// CONCATENATED MODULE: ./src/components/CustomSelectDropdown/CustomSelectDropdown.tsx
-function CustomSelectDropdown_array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function CustomSelectDropdown_array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
 function CustomSelectDropdown_define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -37738,33 +37759,6 @@ function CustomSelectDropdown_define_property(obj, key, value) {
     }
     return obj;
 }
-function CustomSelectDropdown_iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function CustomSelectDropdown_non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
 function CustomSelectDropdown_object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -37807,35 +37801,20 @@ function CustomSelectDropdown_object_without_properties_loose(source, excluded)
     }
     return target;
 }
-function CustomSelectDropdown_sliced_to_array(arr, i) {
-    return CustomSelectDropdown_array_with_holes(arr) || CustomSelectDropdown_iterable_to_array_limit(arr, i) || CustomSelectDropdown_unsupported_iterable_to_array(arr, i) || CustomSelectDropdown_non_iterable_rest();
-}
-function CustomSelectDropdown_unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return CustomSelectDropdown_array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return CustomSelectDropdown_array_like_to_array(o, minLen);
-}
 
 
 
 
 
 
-var calcIsTop = function(placement) {
-    return placement.startsWith('top');
-};
 var CustomSelectDropdown_CustomSelectDropdown = function(_param) {
-    var children = _param.children, targetRef = _param.targetRef, scrollBoxRef = _param.scrollBoxRef, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement, fetching = _param.fetching, parentOnPlacementChange = _param.onPlacementChange, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 0 : _param_offsetDistance, _param_autoWidth = _param.autoWidth, autoWidth = _param_autoWidth === void 0 ? false : _param_autoWidth, _param_forcePortal = _param.forcePortal, forcePortal = _param_forcePortal === void 0 ? true : _param_forcePortal, autoHideScrollbar = _param.autoHideScrollbar, autoHideScrollbarDelay = _param.autoHideScrollbarDelay, className = _param.className, _param_noMaxHeight = _param.noMaxHeight, noMaxHeight = _param_noMaxHeight === void 0 ? false : _param_noMaxHeight, // CustomScrollView
+    var children = _param.children, targetRef = _param.targetRef, scrollBoxRef = _param.scrollBoxRef, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement, fetching = _param.fetching, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 0 : _param_offsetDistance, _param_autoWidth = _param.autoWidth, autoWidth = _param_autoWidth === void 0 ? false : _param_autoWidth, _param_forcePortal = _param.forcePortal, forcePortal = _param_forcePortal === void 0 ? true : _param_forcePortal, autoHideScrollbar = _param.autoHideScrollbar, autoHideScrollbarDelay = _param.autoHideScrollbarDelay, className = _param.className, _param_noMaxHeight = _param.noMaxHeight, noMaxHeight = _param_noMaxHeight === void 0 ? false : _param_noMaxHeight, // CustomScrollView
     overscrollBehavior = _param.overscrollBehavior, restProps = CustomSelectDropdown_object_without_properties(_param, [
         "children",
         "targetRef",
         "scrollBoxRef",
         "placement",
         "fetching",
-        "onPlacementChange",
         "offsetDistance",
         "autoWidth",
         "forcePortal",
@@ -37845,24 +37824,12 @@ var CustomSelectDropdown_CustomSelectDropdown = function(_param) {
         "noMaxHeight",
         "overscrollBehavior"
     ]);
-    var _React_useState = CustomSelectDropdown_sliced_to_array(React.useState(function() {
-        return calcIsTop(placement);
-    }), 2), isTop = _React_useState[0], setIsTop = _React_useState[1];
-    var onPlacementChange = React.useCallback(function(placement) {
-        setIsTop(calcIsTop(placement));
-        if (parentOnPlacementChange) {
-            parentOnPlacementChange(placement);
-        }
-    }, [
-        parentOnPlacementChange
-    ]);
     return /*#__PURE__*/ React.createElement(Popper, CustomSelectDropdown_object_spread({
         targetRef: targetRef,
         offsetByMainAxis: offsetDistance,
         sameWidth: !autoWidth,
-        onPlacementChange: onPlacementChange,
         placement: placement,
-        className: classNames("vkuiCustomSelectDropdown", 'vkuiInternalCustomSelectDropdown', offsetDistance === 0 && (isTop ? "vkuiCustomSelectDropdown--top" : "vkuiCustomSelectDropdown--bottom"), autoWidth && classNames("vkuiCustomSelectDropdown--wide", 'vkuiInternalCustomSelectDropdown--wide'), className),
+        className: classNames("vkuiCustomSelectDropdown", 'vkuiInternalCustomSelectDropdown', offsetDistance === 0 && (placement.includes('top') ? "vkuiCustomSelectDropdown--top" : "vkuiCustomSelectDropdown--bottom"), autoWidth && classNames("vkuiCustomSelectDropdown--wide", 'vkuiInternalCustomSelectDropdown--wide'), className),
         usePortal: forcePortal,
         autoUpdateOnTargetResize: true
     }, restProps), /*#__PURE__*/ React.createElement(CustomScrollView, {
@@ -38641,6 +38608,13 @@ var ChipsSelect_findIndexBefore = function() {
     var inputRef = useExternRef(getRef, inputRefHook);
     // Связано с CustomSelectDropdownProps
     var _React_useState = ChipsSelect_sliced_to_array(React.useState(placementProp), 2), dropdownVerticalPlacement = _React_useState[0], setDropdownVerticalPlacement = _React_useState[1];
+    var onDropdownPlacementChange = React.useCallback(function(placement) {
+        if (placement.startsWith('top')) {
+            setDropdownVerticalPlacement('top');
+        } else if (placement.startsWith('bottom')) {
+            setDropdownVerticalPlacement('bottom');
+        }
+    }, []);
     var dropdownId = React.useId();
     var dropdownCurrentItemId = focusedOptionIndex !== null ? "".concat(dropdownId, "-").concat(focusedOptionIndex) : undefined;
     var dropdownScrollBoxRef = React.useRef(null);
@@ -38769,13 +38743,6 @@ var ChipsSelect_findIndexBefore = function() {
         focusedOptionIndex,
         setFocusedOption
     ]);
-    var onDropdownPlacementChange = React.useCallback(function(placement) {
-        /* istanbul ignore next:  */ if (placement.startsWith('top')) {
-            setDropdownVerticalPlacement('top');
-        } else if (placement.startsWith('bottom')) {
-            setDropdownVerticalPlacement('bottom');
-        }
-    }, []);
     var onDropdownMouseLeave = React.useCallback(function() {
         setFocusedOptionIndex(null);
     }, [
@@ -38788,7 +38755,7 @@ var ChipsSelect_findIndexBefore = function() {
     ]);
     useGlobalOnClickOutside(handleClickOutside, opened ? rootRef : null, opened ? dropdownScrollBoxRef : null);
     var openedClassNames = React.useMemo(function() {
-        return opened && dropdownOffsetDistance === 0 && ((dropdownVerticalPlacement === null || dropdownVerticalPlacement === void 0 ? void 0 : dropdownVerticalPlacement.includes('top')) ? "vkuiChipsSelect--pop-up" : "vkuiChipsSelect--pop-down") || undefined;
+        return opened && dropdownOffsetDistance === 0 && (dropdownVerticalPlacement.includes('top') ? "vkuiChipsSelect--pop-up" : "vkuiChipsSelect--pop-down") || undefined;
     }, [
         dropdownOffsetDistance,
         opened,
@@ -38832,7 +38799,7 @@ var ChipsSelect_findIndexBefore = function() {
     })), opened && /*#__PURE__*/ React.createElement(CustomSelectDropdown, {
         "data-testid": dropdownTestId,
         targetRef: rootRef,
-        placement: placementProp,
+        placement: dropdownVerticalPlacement,
         scrollBoxRef: dropdownScrollBoxRef,
         onPlacementChange: onDropdownPlacementChange,
         onMouseLeave: onDropdownMouseLeave,
@@ -41351,7 +41318,7 @@ var filter = function(options, inputValue, filterFn) {
         selectedOptionIndex
     ]);
     var openedClassNames = React.useMemo(function() {
-        return opened && dropdownOffsetDistance === 0 && ((popperPlacement === null || popperPlacement === void 0 ? void 0 : popperPlacement.includes('top')) ? "vkuiCustomSelect--pop-up" : "vkuiCustomSelect--pop-down") || undefined;
+        return opened && dropdownOffsetDistance === 0 && (popperPlacement.includes('top') ? "vkuiCustomSelect--pop-up" : "vkuiCustomSelect--pop-down") || undefined;
     }, [
         dropdownOffsetDistance,
         opened,
@@ -41884,7 +41851,7 @@ var filter = function(options, inputValue, filterFn) {
         });
     })), opened && /*#__PURE__*/ React.createElement(CustomSelectDropdown, {
         targetRef: containerRef,
-        placement: popupDirection,
+        placement: popperPlacement,
         scrollBoxRef: setScrollBoxRef,
         onPlacementChange: setPopperPlacement,
         onMouseLeave: resetFocusedOption,

package/package.json

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

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -235,8 +235,17 @@ export const ChipsSelect = <Option extends ChipOption>({
 
   // Связано с CustomSelectDropdownProps
   const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<
-    Extract<Placement, 'top' | 'bottom'> | undefined
+    'top' | 'bottom'
   >(placementProp);
+
+  const onDropdownPlacementChange = React.useCallback((placement: Placement) => {
+    if (placement.startsWith('top')) {
+      setDropdownVerticalPlacement('top');
+    } else if (placement.startsWith('bottom')) {
+      setDropdownVerticalPlacement('bottom');
+    }
+  }, []);
+
   const dropdownId = React.useId();
   const dropdownCurrentItemId =
     focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;
@@ -393,15 +402,6 @@ export const ChipsSelect = <Option extends ChipOption>({
     }
   }, [options, focusedOptionIndex, setFocusedOption]);
 
-  const onDropdownPlacementChange = React.useCallback((placement: Placement) => {
-    /* istanbul ignore next:  */
-    if (placement.startsWith('top')) {
-      setDropdownVerticalPlacement('top');
-    } else if (placement.startsWith('bottom')) {
-      setDropdownVerticalPlacement('bottom');
-    }
-  }, []);
-
   const onDropdownMouseLeave = React.useCallback(() => {
     setFocusedOptionIndex(null);
   }, [setFocusedOptionIndex]);
@@ -420,7 +420,7 @@ export const ChipsSelect = <Option extends ChipOption>({
     () =>
       (opened &&
         dropdownOffsetDistance === 0 &&
-        (dropdownVerticalPlacement?.includes('top')
+        (dropdownVerticalPlacement.includes('top')
           ? styles['ChipsSelect--pop-up']
           : styles['ChipsSelect--pop-down'])) ||
       undefined,
@@ -475,7 +475,7 @@ export const ChipsSelect = <Option extends ChipOption>({
         <CustomSelectDropdown
           data-testid={dropdownTestId}
           targetRef={rootRef}
-          placement={placementProp}
+          placement={dropdownVerticalPlacement}
           scrollBoxRef={dropdownScrollBoxRef}
           onPlacementChange={onDropdownPlacementChange}
           onMouseLeave={onDropdownMouseLeave}

package/src/components/CustomSelect/CustomSelect.tsx

@@ -3,7 +3,7 @@ import { classNames, debounce } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useDOM } from '../../lib/dom';
-import type { PlacementWithAuto } from '../../lib/floating';
+import type { Placement } from '../../lib/floating';
 import { defaultFilterFn, type FilterFn } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
@@ -230,9 +230,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     calculateInputValueFromOptions(optionsProp, nativeSelectValue),
   );
 
-  const [popperPlacement, setPopperPlacement] = React.useState<PlacementWithAuto | undefined>(
-    popupDirection,
-  );
+  const [popperPlacement, setPopperPlacement] = React.useState<Placement>(popupDirection);
   const [options, setOptions] = React.useState(optionsProp);
   const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number | undefined>(
     findSelectedIndex(optionsProp, props.value ?? defaultValue, allowClearButton),
@@ -266,7 +264,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     () =>
       (opened &&
         dropdownOffsetDistance === 0 &&
-        (popperPlacement?.includes('top')
+        (popperPlacement.includes('top')
           ? styles['CustomSelect--pop-up']
           : styles['CustomSelect--pop-down'])) ||
       undefined,
@@ -851,7 +849,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       {opened && (
         <CustomSelectDropdown
           targetRef={containerRef}
-          placement={popupDirection}
+          placement={popperPlacement}
           scrollBoxRef={setScrollBoxRef}
           onPlacementChange={setPopperPlacement}
           onMouseLeave={resetFocusedOption}

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -32,15 +32,12 @@ export interface CustomSelectDropdownProps
   noMaxHeight?: boolean;
 }
 
-const calcIsTop = (placement: Placement) => placement.startsWith('top');
-
 export const CustomSelectDropdown = ({
   children,
   targetRef,
   scrollBoxRef,
   placement = 'bottom',
   fetching,
-  onPlacementChange: parentOnPlacementChange,
   offsetDistance = 0,
   autoWidth = false,
   forcePortal = true,
@@ -52,30 +49,19 @@ export const CustomSelectDropdown = ({
   overscrollBehavior,
   ...restProps
 }: CustomSelectDropdownProps): React.ReactNode => {
-  const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));
-
-  const onPlacementChange = React.useCallback(
-    (placement: Placement) => {
-      setIsTop(calcIsTop(placement));
-      if (parentOnPlacementChange) {
-        parentOnPlacementChange(placement);
-      }
-    },
-    [parentOnPlacementChange],
-  );
-
   return (
     <Popper
       targetRef={targetRef}
       offsetByMainAxis={offsetDistance}
       sameWidth={!autoWidth}
-      onPlacementChange={onPlacementChange}
       placement={placement}
       className={classNames(
         styles['CustomSelectDropdown'],
         'vkuiInternalCustomSelectDropdown',
         offsetDistance === 0 &&
-          (isTop ? styles['CustomSelectDropdown--top'] : styles['CustomSelectDropdown--bottom']),
+          (placement.includes('top')
+            ? styles['CustomSelectDropdown--top']
+            : styles['CustomSelectDropdown--bottom']),
         autoWidth &&
           classNames(
             styles['CustomSelectDropdown--wide'],

package/src/components/Footer/Footer.tsx

@@ -9,9 +9,21 @@ export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
  */
-export const Footer = ({ children, className, ...restProps }: FooterProps): React.ReactNode => {
+export const Footer = ({
+  children,
+  className,
+  Component = 'footer',
+  role: roleProp,
+  ...restProps
+}: FooterProps): React.ReactNode => {
+  const role = roleProp ?? (Component === 'footer' ? 'contentinfo' : undefined);
   return (
-    <Footnote Component="footer" {...restProps} className={classNames(styles['Footer'], className)}>
+    <Footnote
+      Component={Component}
+      role={role}
+      {...restProps}
+      className={classNames(styles['Footer'], className)}
+    >
       {children}
     </Footnote>
   );

package/src/components/FormField/FormField.module.css

@@ -111,14 +111,33 @@
   background-color: var(--vkui--color_field_background);
 }
 
+.FormField--hover {
+  background-color: var(--vkui--color_field_background);
+}
+
+.FormField--mode-default.FormField--hover .FormField__border {
+  border-color: var(--vkui--color_field_border_alpha--hover);
+  z-index: var(--vkui_internal--z_index_form_field_border_hover);
+}
+
+/**
+ * useFocusVisibleClassName()
+ */
+/* increase specificity for selects */
+.FormField--focus-visible.FormField--focus-visible .FormField__border {
+  border-color: var(--vkui--color_stroke_accent);
+}
+
 /**
  * CMP:
  * FormItem
  * [start]
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormItem--status-error) .FormField__border,
-.FormField--status-error .FormField__border {
+:global(.vkuiInternalFormItem--status-error) .FormField--mode-default .FormField__border,
+:global(.vkuiInternalFormItem--status-error) .FormField--focus-visible .FormField__border,
+.FormField--status-error.FormField--mode-default .FormField__border,
+.FormField--status-error.FormField--focus-visible .FormField__border {
   border-color: var(--vkui--color_stroke_negative);
   z-index: var(--vkui_internal--z_index_form_field_status);
 }
@@ -129,12 +148,21 @@
   background-color: var(--vkui--color_background_negative_tint);
 }
 
+/* increase specificity to cover --mode-default case */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormItem--status-valid) .FormField__border,
-.FormField--status-valid .FormField__border {
+:global(.vkuiInternalFormItem--status-valid) .FormField--mode-default .FormField__border,
+:global(.vkuiInternalFormItem--status-valid) .FormField--focus-visible .FormField__border,
+.FormField--status-valid.FormField--mode-default .FormField__border,
+.FormField--status-valid.FormField--focus-visible .FormField__border {
   border-color: var(--vkui--color_stroke_positive);
   z-index: var(--vkui_internal--z_index_form_field_status);
 }
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+:global(.vkuiInternalFormItem--status-valid) .FormField:not(.FormField--mode-default),
+.FormField--status-valid:not(.FormField--mode-default) {
+  background-color: var(--vkui--color_background_positive_tint);
+}
 /* [end] */
 
 .FormField--disabled {
@@ -143,15 +171,6 @@
   pointer-events: none;
 }
 
-.FormField--hover {
-  background-color: var(--vkui--color_field_background);
-}
-
-.FormField--mode-default.FormField--hover .FormField__border {
-  border-color: var(--vkui--color_field_border_alpha--hover);
-  z-index: var(--vkui_internal--z_index_form_field_border_hover);
-}
-
 /**
  * CMP:
  * NativeSelect
@@ -221,11 +240,3 @@
   border-end-start-radius: var(--vkui--size_border_radius--regular);
   border-end-end-radius: var(--vkui--size_border_radius--regular);
 }
-
-/**
- * useFocusVisibleClassName()
- */
-/* increase specificity for selects */
-.FormField--focus-visible.FormField--focus-visible .FormField__border {
-  border-color: var(--vkui--color_stroke_accent);
-}

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -64,11 +64,7 @@ export const FormLayoutGroup = ({
             styles['FormLayoutGroup--mode-horizontal'],
             'vkuiInternalFormLayoutGroup--mode-horizontal',
           ),
-        mode === 'vertical' &&
-          classNames(
-            styles['FormLayoutGroup--mode-vertical'],
-            'vkuiInternalFormLayoutGroup--mode-vertical',
-          ),
+        mode === 'vertical' && 'vkuiInternalFormLayoutGroup--mode-vertical',
         isRemovable &&
           classNames(
             styles['FormLayoutGroup--removable'],

package/src/components/RootComponent/RootComponent.module.css

@@ -0,0 +1,10 @@
+.RootComponent[hidden='hidden'],
+.RootComponent--hidden {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+
+.RootComponent[hidden='until-found'] {
+  /* stylelint-disable-next-line declaration-no-important */
+  content-visibility: hidden !important;
+}

package/src/components/RootComponent/RootComponent.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { HasComponent, HasRootRef } from '../../types';
+import type { HasComponent, HasRootRef } from '../../types';
+import styles from './RootComponent.module.css';
 
 export interface RootComponentProps<T>
   extends React.AllHTMLAttributes<T>,
@@ -19,5 +20,14 @@ export const RootComponent = <T,>({
   getRootRef,
   ...restProps
 }: RootComponentProps<T>): React.ReactNode => (
-  <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />
+  <Component
+    ref={getRootRef}
+    className={classNames(
+      className,
+      baseClassName,
+      styles['RootComponent'],
+      restProps.hidden === true && styles['RootComponent--hidden'],
+    )}
+    {...restProps}
+  />
 );

package/src/components/Search/Search.tsx

@@ -206,6 +206,7 @@ export const Search = ({
             onClick={onCancel}
             className={styles['Search__icon']}
             tabIndex={hasValue ? undefined : -1}
+            disabled={inputProps.disabled}
           >
             <VisuallyHidden>{clearLabel}</VisuallyHidden>
             {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}