@fibery/ui-kit 1.40.4 → 1.41.0

package/src/popover/index.tsx

@@ -7,7 +7,8 @@ import {createPopper, Modifier, Placement, State} from "@popperjs/core";
 import {Options as FlipOptions} from "@popperjs/core/lib/modifiers/flip";
 import {Options as PreventOverflowOptions} from "@popperjs/core/lib/modifiers/preventOverflow";
 import cx from "classnames";
-import _ from "lodash";
+import compact from "lodash/compact";
+import noop from "lodash/noop";
 import {
   cloneElement,
   CSSProperties,
@@ -19,19 +20,11 @@ import {
   useId,
   useImperativeHandle,
   useMemo,
+  useRef,
 } from "react";
-import {
-  safeAreaInsetBottomVar,
-  safeAreaInsetLeftVar,
-  safeAreaInsetRightVar,
-  safeAreaInsetTopVar,
-} from "../mobile-styles";
 import {createPortal} from "react-dom";
 import {usePopper} from "react-popper";
-import {space, textStyles, themeVars, transition} from "../design-system";
-import {IconButton} from "../button/icon-button";
-import CloseIcon from "../icons/react/Close";
-import ArrowLeftIcon from "../icons/react/ArrowLeft";
+import {space} from "../design-system";
 import {ThemeProvider} from "../theme-provider";
 import {$TSFixMe} from "../tsfixme";
 import {useIsPhone} from "../use-is-phone";
@@ -39,14 +32,129 @@ import {usePopupModifiers} from "./popup-modifiers-context";
 import {applyMaxSize, makeMaxSizeModifier, observeWidth} from "./modifiers";
 import {isElementReference, Reference} from "./reference";
 import {basicPopupClassName, basicPopupContainerClassName, hidePopupWhenTriggerIsHiddenClassName} from "./styles";
-import {MobilePopupProvider, useMobilePopup} from "./mobile-popup-context";
+import {MobilePopoverProvider} from "./mobile-popover-context";
 import {usePopupStackContext} from "./popup-stack-context";
-import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {composeRefs, useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {createContext} from "@fibery/react/src/create-context";
 import {Wrap} from "@fibery/react/src/wrap";
 import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
+import {getElementRef} from "./get-element-ref";
+import {MobilePopover} from "./mobile-popover";
+import {FocusScope, FocusScopeProps} from "@radix-ui/react-focus-scope";
+
+type PopoverContextValue = {
+  open: boolean;
+  disabled?: boolean;
+  onOpen?: () => unknown;
+  onClose?: (event: Event) => unknown;
+  triggerElement: Reference;
+  setTriggerElement: (value: Reference) => void;
+  popupElement: HTMLDivElement | null;
+  setPopupElement: (value: HTMLDivElement) => void;
+};
+
+const [PopoverProvider, usePopoverContext] = createContext<PopoverContextValue>("PopoverContext");
+
+type RootProps = {
+  children: ReactNode;
+  open: boolean;
+  disabled?: boolean;
+  onOpen?: () => unknown;
+  onClose?: (event: Event) => unknown;
+  // For legacy popup component support
+  triggerElement?: Reference;
+  setTriggerElement?: (value: Reference) => void;
+  popupElement?: HTMLDivElement | null;
+  setPopupElement?: (value: HTMLDivElement | null) => void;
+};
+
+const Root = ({children, open, disabled = false, onOpen, onClose, ...rest}: RootProps) => {
+  const id = useId();
+  const {registerEscapeCallback, registerPopup} = usePopupStackContext();
+
+  const [triggerElement, setTriggerElement] = useControllableState<Reference>({
+    value: rest.triggerElement,
+    onChange: rest.setTriggerElement,
+  });
+  const [popupElement, setPopupElement] = useControllableState<HTMLDivElement | null>({
+    value: rest.popupElement,
+    onChange: rest.setPopupElement,
+  });
+
+  const composedSetTriggerElement = useComposedRefs(setTriggerElement, rest.setTriggerElement);
+  const composedSetPopupElement = useComposedRefs(setPopupElement, rest.setPopupElement);
+
+  useEffect(() => {
+    let unregister: () => void;
+    if (registerPopup && open) {
+      unregister = registerPopup(id);
+    }
+    return () => {
+      unregister?.();
+    };
+  }, [registerPopup, id, open]);
+
+  useEffect(() => {
+    if (triggerElement && open) {
+      // Note: We don't check defaultPrevented because react-select and similar
+      // components call preventDefault() on all keydown events. We also don't
+      // expose onEscapeKeyDown prop to let consumers prevent default close behavior.
+      const onKeyDown = (evt: KeyboardEvent) => {
+        if (evt.key === "Escape") {
+          onClose?.(evt);
+          if (isElementReference(triggerElement)) {
+            triggerElement.focus();
+          }
+          evt.preventDefault();
+          evt.stopPropagation();
+        }
+      };
+
+      if (registerEscapeCallback) {
+        registerEscapeCallback(id, onKeyDown);
+      } else {
+        document.addEventListener("keydown", onKeyDown);
+      }
 
-export const mobileZIndex = 1002;
+      // if popup was opened but nothing was focused inside it we should catch 'Escape' key from trigger as well
+      // otherwise it can be caught by navigation panel
+      "addEventListener" in triggerElement && triggerElement.addEventListener("keydown", onKeyDown);
+
+      return () => {
+        if (!registerEscapeCallback) {
+          document.removeEventListener("keydown", onKeyDown);
+        }
+
+        "removeEventListener" in triggerElement && triggerElement.removeEventListener("keydown", onKeyDown);
+      };
+    }
+    return () => {};
+  }, [onClose, open, triggerElement, registerEscapeCallback, id]);
+
+  const contextValue = useMemo(() => {
+    return {
+      disabled,
+      triggerElement,
+      setTriggerElement: composedSetTriggerElement,
+      popupElement,
+      setPopupElement: composedSetPopupElement,
+      open,
+      onClose,
+      onOpen,
+    };
+  }, [
+    disabled,
+    triggerElement,
+    composedSetTriggerElement,
+    popupElement,
+    composedSetPopupElement,
+    open,
+    onClose,
+    onOpen,
+  ]);
+
+  return <PopoverProvider value={contextValue}>{children}</PopoverProvider>;
+};
 
 const Backdrop = ({className}: {className?: string}) => {
   return (
@@ -65,185 +173,55 @@ const Backdrop = ({className}: {className?: string}) => {
   );
 };
 
-const mobileAnimationClassName = css`
-  transition: transform ${transition}, opacity ${transition};
-  transform: translateY(0);
-  opacity: 1;
-
-  @media (prefers-reduced-motion: no-preference) {
-    @starting-style {
-      transform: translateY(20%);
-      opacity: 0;
-    }
-  }
-`;
-
-const popupContentClassName = css`
-  display: grid;
-  background: ${themeVars.actionMenuBg};
-  grid-template-rows: 60px 1fr;
-`;
-
-export function MobilePopup({
-  content,
-  mobilePopupStyle,
-  mobilePopupContentClassName,
-  title,
-  onClose,
-  height,
-  onNavigateBack,
-}: {
-  content: ReactNode;
-  mobilePopupStyle?: CSSProperties;
-  mobilePopupContentClassName?: string;
-  title: string;
-  height?: string;
-  onClose?: () => void;
-  onNavigateBack?: () => void;
-}) {
-  const {title: contextTitle, headerSlot} = useMobilePopup();
-
-  const headerContent = headerSlot ?? (
-    <>
-      {onNavigateBack && (
-        <IconButton onClick={onNavigateBack} size="xLarge">
-          <ArrowLeftIcon />
-        </IconButton>
-      )}
-      <div
-        className={css`
-          ${textStyles.heading3}
-          flex: 1;
-          min-width: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        `}
-      >
-        {contextTitle ?? title}
-      </div>
-      {onClose && (
-        <IconButton onClick={onClose} size="xLarge">
-          <CloseIcon />
-        </IconButton>
-      )}
-    </>
-  );
-
-  const popupContent = (
-    <>
-      <div
-        className={cx(
-          css`
-            display: flex;
-            align-items: center;
-            gap: ${space.s8}px;
-            padding: ${space.s8}px ${space.s8}px ${space.s8}px ${space.s20}px;
-            min-width: 0;
-          `,
-          onNavigateBack &&
-            css`
-              padding-left: ${space.s4}px;
-            `
-        )}
-      >
-        {headerContent}
-      </div>
-      <div
-        className={cx(
-          css`
-            border-top: ${themeVars.separators.opacity5};
-            min-width: 0;
-          `,
-          mobilePopupContentClassName
-        )}
-      >
-        {content}
-      </div>
-    </>
-  );
-
-  const res = (
-    <div
-      className={cx(
-        css`
-          position: absolute;
-          left: var(${safeAreaInsetLeftVar});
-          right: var(${safeAreaInsetRightVar});
-          top: var(${safeAreaInsetTopVar});
-          bottom: var(${safeAreaInsetBottomVar});
-          z-index: ${mobileZIndex};
-        `,
-        !height && mobileAnimationClassName,
-        !height && popupContentClassName,
-        height &&
-          css`
-            display: grid;
-          `
-      )}
-      style={{
-        ...mobilePopupStyle,
-        ...(height ? {gridTemplateRows: `1fr ${height}`} : {}),
-      }}
-      onClick={stopPropagation}
-    >
-      {height ? (
-        <>
-          <div
-            onClick={onClose}
-            className={css`
-              background-color: ${themeVars.modalBg};
-            `}
-          />
-          <div
-            className={cx(
-              css`
-                display: grid;
-                grid-template-rows: 60px 1fr;
-              `,
-              mobileAnimationClassName,
-              popupContentClassName
-            )}
-          >
-            {popupContent}
-          </div>
-        </>
-      ) : (
-        popupContent
-      )}
-    </div>
-  );
-  return <ThemeProvider portal>{res}</ThemeProvider>;
-}
-
 type PortalProps = {
   getPopupContainer?: () => HTMLElement;
   children: ReactNode;
 };
 
-const Portal = ({getPopupContainer: popupContainerOverride, children}: PortalProps) => {
+const Portal = ({getPopupContainer, children}: PortalProps) => {
   const popupModifiers = usePopupModifiers();
-  const getPopupContainer = popupContainerOverride ?? popupModifiers.getPopupContainer;
-  return createPortal(children, getPopupContainer());
+  const getPopupContainerResult = getPopupContainer ?? popupModifiers.getPopupContainer;
+  return createPortal(children, getPopupContainerResult());
 };
 
 type TriggerProps = {
   asChild?: boolean;
-  // Support case when popup trigger is virtual reference
+  /** Custom reference element for popover positioning. Use when the trigger element differs from the anchor point (e.g., virtual/detached elements). */
   reference?: Reference;
+  /** Event that opens the popover. "click" allows proper focus handling inside popover content. Default: "mousedown" */
+  triggerEvent?: "mousedown" | "click";
 } & React.ComponentPropsWithoutRef<"div">;
 
-const Trigger = ({asChild = false, reference, children, onMouseDown, ...props}: TriggerProps) => {
-  const {setTriggerElement, disabled, open, onOpen, onClose} = useContext();
-
-  const onMouseDownCb: React.MouseEventHandler<HTMLElement> = composeEventHandlers(onMouseDown, (e) => {
+const Trigger = ({
+  asChild = false,
+  reference,
+  children,
+  triggerEvent = "mousedown",
+  onMouseDown,
+  onClick,
+  ...props
+}: TriggerProps) => {
+  const {setTriggerElement, disabled, open, onOpen, onClose} = usePopoverContext();
+
+  const onToggle = (e: React.MouseEvent<HTMLElement>) => {
     if (disabled) {
       return;
     }
     if (e.button === 0) {
       open ? onClose?.(e as unknown as Event) : onOpen?.();
     }
-  });
+  };
+
+  const triggerEventHandlers =
+    triggerEvent === "click"
+      ? {
+          onClick: composeEventHandlers(onClick, onToggle),
+          onMouseDown,
+        }
+      : {
+          onMouseDown: composeEventHandlers(onMouseDown, onToggle),
+          onClick,
+        };
 
   useEffect(() => {
     if (reference) {
@@ -256,19 +234,21 @@ const Trigger = ({asChild = false, reference, children, onMouseDown, ...props}:
     return null;
   }
 
-  if (asChild && isValidElement<React.HTMLAttributes<HTMLElement>>(children)) {
-    return cloneElement<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>(children, {
+  if (asChild && isValidElement(children)) {
+    const childrenRef = getElementRef(children);
+
+    return cloneElement(children, {
       "aria-expanded": open,
       "aria-haspopup": true,
       ...props,
-      ref: setTriggerElement,
+      ref: composeRefs(setTriggerElement, childrenRef),
       className: cx(children.props.className, props.className),
-      onMouseDown: onMouseDownCb,
+      ...triggerEventHandlers,
     });
   }
 
   return (
-    <div ref={setTriggerElement} onMouseDown={onMouseDownCb} {...props}>
+    <div ref={setTriggerElement} {...triggerEventHandlers} {...props}>
       {children}
     </div>
   );
@@ -281,7 +261,7 @@ type ContentProps = {
   popupClassName?: string;
   popupContainerClassName?: string;
   offset?: [number, number];
-  onMouseLeave?: (e: MouseEvent<HTMLDivElement>) => void;
+  padding?: number;
   renderBackdrop?: boolean;
   backdropClassName?: string;
   preventOverflowOptions?: Partial<PreventOverflowOptions>;
@@ -303,17 +283,24 @@ type ContentProps = {
    * Marked as deprecated because it's better to avoid this prop
    */
   fixStackingContextAfterOpen?: boolean;
+  /** ran after Popup positioned the element the first time */
+  onFirstUpdate?: () => void;
+  onMouseLeave?: (e: MouseEvent<HTMLDivElement>) => void;
   /**
-   * ran after Popup positioned the element the first time
+   * Event handler called when auto-focusing on open.
+   * Can be prevented.
    */
-  onFirstUpdate?: () => void;
+  onOpenAutoFocus?: FocusScopeProps["onMountAutoFocus"];
+  /**
+   * Event handler called when auto-focusing on close.
+   * Can be prevented.
+   */
+  onCloseAutoFocus?: FocusScopeProps["onUnmountAutoFocus"];
 };
 
 export type ContentRef = {update: (() => Promise<unknown>) | null};
 
-const padding = space.s8;
-
-const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInner(
+const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
   {
     children,
     placement,
@@ -321,7 +308,7 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
     popupContainerClassName,
     popupClassName,
     offset = [0, 0],
-    onMouseLeave,
+    padding = space.s8,
     renderBackdrop,
     backdropClassName,
     preventOverflowOptions = {},
@@ -334,12 +321,15 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
     mobilePopupStyle,
     mobilePopupContentClassName,
     fixStackingContextAfterOpen = false,
-    onFirstUpdate,
     transform,
+    onFirstUpdate,
+    onMouseLeave,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
   },
   ref
 ) {
-  const {open, onClose, triggerElement, popupElement, setPopupElement} = useContext();
+  const {open, onClose, triggerElement, popupElement, setPopupElement} = usePopoverContext();
 
   const popupModifiers = usePopupModifiers();
   const isPhone = useIsPhone();
@@ -355,10 +345,10 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
           applyMaxSize,
         ]
       : [];
-  }, [preventOverflowOptions, shrinkable]);
+  }, [padding, preventOverflowOptions, shrinkable]);
 
   const modifiers = useMemo(() => {
-    return _.compact([
+    return compact([
       {
         name: "flip",
         options: {
@@ -393,6 +383,7 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
     additionalModifiers,
     flipOptions,
     offset,
+    padding,
     popupModifiers,
     preventOverflowOptions,
     shrinkableModifiers,
@@ -404,17 +395,20 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
 
   useImperativeHandle(ref, () => ({update}), [update]);
 
+  const hasInteractedOutsideRef = useRef(false);
+
   const {onPointerDownCapture} = usePointerDownOutside((event) => {
     if (!open || (isPhone && supportMobile)) {
       return;
     }
     const target = event.target;
     if (target instanceof Node) {
-      const ignoreElements = _.compact([isElementReference(triggerElement) && triggerElement]);
+      const ignoreElements = compact([isElementReference(triggerElement) && triggerElement]);
       if (ignoreElements.some((element) => element.contains(target))) {
         return;
       }
     }
+    hasInteractedOutsideRef.current = true;
     onClose?.(event);
   });
 
@@ -439,153 +433,66 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
 
   if (isPhone && supportMobile) {
     return (
-      <MobilePopupProvider>
-        <MobilePopup
+      <MobilePopoverProvider>
+        <MobilePopover
           onClose={onClose as $TSFixMe}
           title={title}
           mobilePopupContentClassName={mobilePopupContentClassName}
           mobilePopupStyle={mobilePopupStyle}
           content={children}
         />
-      </MobilePopupProvider>
+      </MobilePopoverProvider>
     );
   }
+
   return (
     <ThemeProvider portal>
       {renderBackdrop && <Backdrop className={backdropClassName} />}
-      <div
-        ref={setPopupElement}
-        className={cx(
-          basicPopupContainerClassName,
-          hidePopupWhenTriggerIsHidden && hidePopupWhenTriggerIsHiddenClassName,
-          popupContainerClassName
-        )}
-        onMouseLeave={onMouseLeave}
-        onClick={stopPropagation}
-        {...attributes.popper}
-        onPointerDownCapture={onPointerDownCapture}
-        style={contentStyles}
+      <FocusScope
+        asChild
+        loop
+        trapped={false}
+        onMountAutoFocus={onOpenAutoFocus}
+        onUnmountAutoFocus={(event) => {
+          onCloseAutoFocus?.(event);
+
+          if (!event.defaultPrevented) {
+            if (!hasInteractedOutsideRef.current) {
+              if (isElementReference(triggerElement)) {
+                triggerElement.focus();
+              }
+            }
+            // Always prevent auto focus because we either focus manually or want user agent focus
+            event.preventDefault();
+          }
+        }}
       >
-        <div className={cx(basicPopupClassName, popupClassName)} style={popupStyle} onAnimationEnd={onAnimationEnd}>
-          {children}
+        <div
+          role="dialog"
+          ref={setPopupElement}
+          className={cx(
+            basicPopupContainerClassName,
+            hidePopupWhenTriggerIsHidden && hidePopupWhenTriggerIsHiddenClassName,
+            popupContainerClassName
+          )}
+          onMouseLeave={onMouseLeave}
+          onClick={stopPropagation}
+          {...attributes.popper}
+          onPointerDownCapture={onPointerDownCapture}
+          style={contentStyles}
+        >
+          <div className={cx(basicPopupClassName, popupClassName)} style={popupStyle} onAnimationEnd={onAnimationEnd}>
+            {children}
+          </div>
         </div>
-      </div>
+      </FocusScope>
     </ThemeProvider>
   );
 });
 
-type ContextValue = {
-  open: boolean;
-  disabled?: boolean;
-  onOpen?: () => unknown;
-  onClose?: (event: Event) => unknown;
-  triggerElement: Reference;
-  setTriggerElement: (value: Reference) => void;
-  popupElement: HTMLDivElement | null;
-  setPopupElement: (value: HTMLDivElement) => void;
-};
-
-const [Provider, useContext] = createContext<ContextValue>("PopoverContext");
-
-type RootProps = {
-  children: ReactNode;
-  open: boolean;
-  disabled?: boolean;
-  closeOnEscape?: boolean;
-  onOpen?: () => unknown;
-  onClose?: (event: Event) => unknown;
-  // For legacy popup component support
-  triggerElement?: Reference;
-  setTriggerElement?: (value: Reference) => void;
-  popupElement?: HTMLDivElement | null;
-  setPopupElement?: (value: HTMLDivElement | null) => void;
-};
-
-const Root = ({children, open, disabled = false, closeOnEscape = true, onOpen, onClose, ...rest}: RootProps) => {
-  const id = useId();
-  const {registerEscapeCallback, registerPopup} = usePopupStackContext();
-
-  const [triggerElement, setTriggerElement] = useControllableState<Reference>({
-    value: rest.triggerElement,
-    onChange: rest.setTriggerElement,
-  });
-  const [popupElement, setPopupElement] = useControllableState<HTMLDivElement | null>({
-    value: rest.popupElement,
-    onChange: rest.setPopupElement,
-  });
-
-  const composedSetTriggerElement = useComposedRefs(setTriggerElement, rest.setTriggerElement);
-  const composedSetPopupElement = useComposedRefs(setPopupElement, rest.setPopupElement);
-
-  useEffect(() => {
-    let unregister: () => void;
-    if (registerPopup && open) {
-      unregister = registerPopup(id);
-    }
-    return () => {
-      unregister?.();
-    };
-  }, [registerPopup, id, open]);
-
-  useEffect(() => {
-    if (triggerElement && closeOnEscape && open) {
-      const onKeyDown = (evt: KeyboardEvent) => {
-        if (evt.defaultPrevented) {
-          return;
-        }
-        if (evt.key === "Escape") {
-          onClose?.(evt);
-          evt.preventDefault();
-          evt.stopPropagation();
-        }
-      };
-
-      if (registerEscapeCallback) {
-        registerEscapeCallback(id, onKeyDown);
-      } else {
-        document.addEventListener("keydown", onKeyDown);
-      }
-
-      // if popup was opened but nothing was focused inside it we should catch 'Escape' key from trigger as well
-      // otherwise it can be caught by navigation panel
-      "addEventListener" in triggerElement && triggerElement.addEventListener("keydown", onKeyDown);
-
-      return () => {
-        if (!registerEscapeCallback) {
-          document.removeEventListener("keydown", onKeyDown);
-        }
-
-        "removeEventListener" in triggerElement && triggerElement.removeEventListener("keydown", onKeyDown);
-      };
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return () => {};
-  }, [closeOnEscape, onClose, open, triggerElement, registerEscapeCallback, id]);
-
-  const contextValue = useMemo(() => {
-    return {
-      disabled,
-      triggerElement,
-      setTriggerElement: composedSetTriggerElement,
-      popupElement,
-      setPopupElement: composedSetPopupElement,
-      open,
-      onClose,
-      onOpen,
-    };
-  }, [
-    disabled,
-    triggerElement,
-    composedSetTriggerElement,
-    popupElement,
-    composedSetPopupElement,
-    open,
-    onClose,
-    onOpen,
-  ]);
+export {createPopper};
 
-  return <Provider value={contextValue}>{children}</Provider>;
-};
+export type {Placement, State, Reference, RootProps, TriggerProps, ContentProps};
 
 export const Popover = {
   Root,
@@ -594,14 +501,7 @@ export const Popover = {
   Content,
 };
 
-export {createPopper};
-
-export type {Placement, State, Reference, RootProps, TriggerProps, ContentProps};
-
-export type PopoverOldProps = Pick<
-  RootProps,
-  "children" | "open" | "onOpen" | "onClose" | "closeOnEscape" | "disabled"
-> &
+export type PopoverOldProps = Pick<RootProps, "children" | "open" | "onOpen" | "onClose" | "disabled"> &
   ContentProps &
   Pick<PortalProps, "getPopupContainer"> & {
     trigger?: ReactNode;
@@ -633,7 +533,7 @@ export type PopoverOldProps = Pick<
  *   onOpen={() => setIsOpen(true)}
  *   onClose={() => setIsOpen(false)}
  * >
- *   <Popover.Trigger>
+ *   <Popover.Trigger asChild triggerEvent="click">
  *     <button>Click me</button>
  *   </Popover.Trigger>
  *   <Popover.Portal>
@@ -659,14 +559,13 @@ export const PopoverOld = ({
   onMouseLeave,
   renderBackdrop,
   backdropClassName,
-  closeOnEscape = true,
   preventOverflowOptions = {},
   flipOptions = {},
   additionalModifiers = [],
   hidePopupWhenTriggerIsHidden = true,
   shrinkable,
-  onOpen = _.noop,
-  onClose = _.noop,
+  onOpen = noop,
+  onClose = noop,
   supportMobile = false,
   title = "",
   mobilePopupStyle,
@@ -677,7 +576,7 @@ export const PopoverOld = ({
   transform,
 }: PopoverOldProps) => {
   return (
-    <Popover.Root open={open} disabled={disabled} closeOnEscape={closeOnEscape} onOpen={onOpen} onClose={onClose}>
+    <Popover.Root open={open} disabled={disabled} onOpen={onOpen} onClose={onClose}>
       {triggerDomElement ? (
         <Popover.Trigger reference={triggerDomElement}></Popover.Trigger>
       ) : (