@vkontakte/vkui 6.7.2 → 6.7.4

package/src/hooks/useDateInput.ts

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import * as React from 'react';
 import { useDOM } from '../lib/dom';
 import { useBooleanState } from './useBooleanState';
@@ -17,6 +18,7 @@ export interface UseDateInputDependencies<T, D> {
   onInternalValueChange: (value: string[]) => void;
   getInternalValue: (value?: D | undefined) => string[];
   onChange?: (value?: D | undefined) => void;
+  onCalendarOpenChanged?: (opened: boolean) => void;
 }
 
 export function useDateInput<T extends HTMLElement, D>({
@@ -29,6 +31,7 @@ export function useDateInput<T extends HTMLElement, D>({
   onInternalValueChange,
   getInternalValue,
   value,
+  onCalendarOpenChanged,
 }: UseDateInputDependencies<T, D>): {
   rootRef: React.RefObject<HTMLDivElement>;
   calendarRef: React.RefObject<HTMLDivElement>;
@@ -51,14 +54,28 @@ export function useDateInput<T extends HTMLElement, D>({
   const [focusedElement, setFocusedElement] = React.useState<number | null>(null);
   const { window } = useDOM();
 
+  const _onCalendarClose = useCallback(() => {
+    if (open) {
+      closeCalendar();
+      onCalendarOpenChanged?.(false);
+    }
+  }, [closeCalendar, onCalendarOpenChanged, open]);
+
+  const _onCalendarOpen = useCallback(() => {
+    if (!open) {
+      openCalendar();
+      onCalendarOpenChanged?.(true);
+    }
+  }, [onCalendarOpenChanged, open, openCalendar]);
+
   const removeFocusFromField = React.useCallback(() => {
     if (focusedElement !== null) {
       setFocusedElement(null);
-      closeCalendar();
+      _onCalendarClose();
       window!.getSelection()?.removeAllRanges();
       setInternalValue(getInternalValue(value));
     }
-  }, [focusedElement, closeCalendar, getInternalValue, value, window]);
+  }, [focusedElement, _onCalendarClose, window, getInternalValue, value]);
 
   const handleClickOutside = React.useCallback(
     (e: MouseEvent) => {
@@ -101,14 +118,14 @@ export function useDateInput<T extends HTMLElement, D>({
 
     if (element) {
       element.focus();
-      openCalendar();
+      _onCalendarOpen();
       range.selectNodeContents(element as Node);
 
       const selection = window!.getSelection();
       selection?.removeAllRanges();
       selection?.addRange(range);
     }
-  }, [disabled, focusedElement, openCalendar, refs, window]);
+  }, [disabled, focusedElement, _onCalendarOpen, refs, window]);
 
   const clear = React.useCallback(() => {
     onChange?.(undefined);
@@ -190,8 +207,8 @@ export function useDateInput<T extends HTMLElement, D>({
     rootRef,
     calendarRef,
     open,
-    openCalendar,
-    closeCalendar,
+    openCalendar: _onCalendarOpen,
+    closeCalendar: _onCalendarClose,
     internalValue,
     focusedElement,
     setFocusedElement,

package/src/lib/floating/customResizeObserver.ts

@@ -68,7 +68,6 @@ export class CustomResizeObserver {
 
   observeUsingIframe(element: HTMLElement): void {
     const iframe = element.ownerDocument.createElement('iframe');
-    iframe.src = 'javascript:void(0)';
     iframe.ariaHidden = 'true';
     iframe.tabIndex = -1;
     Object.assign(iframe.style, defaultIframeStyles);

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

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 import type { UseFloatingMiddlewaresBootstrapOptions } from '../useFloatingMiddlewaresBootstrap';
 import type {
+  RestoreFocusType,
   UseFloatingWithInteractionsProps,
   UseFloatingWithInteractionsReturn,
 } from '../useFloatingWithInteractions';
@@ -44,7 +45,7 @@ export interface FloatingComponentProps
   /**
    * Нужно ли после закрытия всплывающего элемента возвращать фокус на предыдущий активный элемент.
    */
-  restoreFocus?: boolean;
+  restoreFocus?: RestoreFocusType;
   /**
    * Перебивает zIndex заданный по умолчанию.
    */

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

@@ -6,4 +6,6 @@ export type {
   UseFloatingWithInteractionsReturn,
 } from './types';
 
+export { type RestoreFocusType } from './types';
+
 export { DEFAULT_TRIGGER } from './constants';

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

@@ -11,6 +11,8 @@ export type ManualTriggerType = 'manual';
 
 export type TriggerType = ManualTriggerType | InteractiveTriggerType | InteractiveTriggerType[];
 
+export type RestoreFocusType = boolean | 'anchor-element' | HTMLElement;
+
 export type ShownChangeReason =
   | 'click-outside'
   | 'escape-key'
@@ -110,5 +112,5 @@ export interface UseFloatingWithInteractionsReturn<T extends HTMLElement = HTMLE
   middlewareData: UseFloatingData['middlewareData'];
   onClose: (this: void) => void;
   onEscapeKeyDown?: (this: void) => void;
-  onRestoreFocus: (this: void) => boolean;
+  onRestoreFocus: (restoreFocus?: RestoreFocusType) => boolean | HTMLElement;
 }

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

@@ -229,9 +229,21 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
     commitShownLocalState(false, 'callback');
   }, [commitShownLocalState]);
 
-  const handleRestoreFocus = React.useCallback(
-    () => (triggerOnFocus ? blockFocusRef.current : true),
-    [triggerOnFocus],
+  const handleRestoreFocus: UseFloatingWithInteractionsReturn['onRestoreFocus'] = React.useCallback(
+    (restoreFocus = true) => {
+      if (!restoreFocus) {
+        return false;
+      }
+      if (restoreFocus === true) {
+        return triggerOnFocus ? blockFocusRef.current : true;
+      } else if (restoreFocus === 'anchor-element') {
+        return refs.reference.current as HTMLElement;
+      } else if (restoreFocus instanceof HTMLElement) {
+        return restoreFocus;
+      }
+      return false;
+    },
+    [refs.reference, triggerOnFocus],
   );
 
   const handleEscapeKeyDown = React.useCallback(() => {