@fibery/ui-kit 2.0.0 → 2.1.0

package/src/popover/index.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable max-lines */
+// oxlint-disable max-lines
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {usePointerDownOutside} from "@fibery/react/src/use-pointer-down-outside";
@@ -8,7 +8,6 @@ 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 compact from "lodash/compact";
-import noop from "lodash/noop";
 import {
   cloneElement,
   CSSProperties,
@@ -16,6 +15,7 @@ import {
   isValidElement,
   MouseEvent,
   ReactNode,
+  useCallback,
   useEffect,
   useId,
   useImperativeHandle,
@@ -36,17 +36,18 @@ import {MobilePopoverProvider} from "./mobile-popover-context";
 import {usePopupStackContext} from "./popup-stack-context";
 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";
+import {useOpenPopoverTracker} from "../open-popover-tracker";
 
 type PopoverContextValue = {
+  contentId: string;
   open: boolean;
   disabled?: boolean;
-  onOpen?: () => unknown;
-  onClose?: (event: Event) => unknown;
+  onOpen: () => unknown;
+  onClose: (event: Event) => unknown;
   triggerElement: Reference;
   setTriggerElement: (value: Reference) => void;
   popupElement: HTMLDivElement | null;
@@ -55,22 +56,43 @@ type PopoverContextValue = {
 
 const [PopoverProvider, usePopoverContext] = createContext<PopoverContextValue>("PopoverContext");
 
-type RootProps = {
+type PopoverRootProps = {
   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;
+  onOpenChange?: (value: boolean) => void;
+  /** @deprecated Use onOpenChange prop instead **/
+  onOpen?: () => unknown;
+  /** @deprecated Use onOpenChange prop instead **/
+  onClose?: (event: Event) => unknown;
 };
 
-const Root = ({children, open, disabled = false, onOpen, onClose, ...rest}: RootProps) => {
-  const id = useId();
-  const {registerEscapeCallback, registerPopup} = usePopupStackContext();
+const Root = (props: PopoverRootProps) => {
+  const {children, open, disabled = false, onOpenChange, onOpen, onClose, ...rest} = props;
+  const contentId = useId();
+  const {onOpenChange: onOpenPopoverChange} = useOpenPopoverTracker();
+
+  const onOpenComposed = useCallback(() => {
+    onOpenChange?.(true);
+    onOpen?.();
+  }, [onOpenChange, onOpen]);
+  const onCloseComposed = useCallback(
+    (event: Event) => {
+      onOpenChange?.(false);
+      onClose?.(event);
+    },
+    [onOpenChange, onClose]
+  );
+
+  useEffect(() => {
+    onOpenPopoverChange(open);
+    return () => onOpenPopoverChange(false);
+  }, [open, onOpenPopoverChange]);
 
   const [triggerElement, setTriggerElement] = useControllableState<Reference>({
     value: rest.triggerElement,
@@ -84,73 +106,28 @@ const Root = ({children, open, disabled = false, onOpen, onClose, ...rest}: Root
   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);
-      }
-
-      // 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 {
+      contentId,
       disabled,
       triggerElement,
       setTriggerElement: composedSetTriggerElement,
       popupElement,
       setPopupElement: composedSetPopupElement,
       open,
-      onClose,
-      onOpen,
+      onOpen: onOpenComposed,
+      onClose: onCloseComposed,
     };
   }, [
+    contentId,
     disabled,
     triggerElement,
     composedSetTriggerElement,
     popupElement,
     composedSetPopupElement,
     open,
-    onClose,
-    onOpen,
+    onOpenComposed,
+    onCloseComposed,
   ]);
 
   return <PopoverProvider value={contextValue}>{children}</PopoverProvider>;
@@ -173,18 +150,18 @@ const Backdrop = ({className}: {className?: string}) => {
   );
 };
 
-type PortalProps = {
+type PopoverPortalProps = {
   getPopupContainer?: () => HTMLElement;
   children: ReactNode;
 };
 
-const Portal = ({getPopupContainer, children}: PortalProps) => {
+const Portal = ({getPopupContainer, children}: PopoverPortalProps) => {
   const popupModifiers = usePopupModifiers();
   const getPopupContainerResult = getPopupContainer ?? popupModifiers.getPopupContainer;
   return createPortal(children, getPopupContainerResult());
 };
 
-type TriggerProps = {
+type PopoverTriggerProps = {
   asChild?: boolean;
   /** Custom reference element for popover positioning. Use when the trigger element differs from the anchor point (e.g., virtual/detached elements). */
   reference?: Reference;
@@ -192,23 +169,16 @@ type TriggerProps = {
   triggerEvent?: "mousedown" | "click";
 } & React.ComponentPropsWithoutRef<"div">;
 
-const Trigger = ({
-  asChild = false,
-  reference,
-  children,
-  triggerEvent = "mousedown",
-  onMouseDown,
-  onClick,
-  ...props
-}: TriggerProps) => {
-  const {setTriggerElement, disabled, open, onOpen, onClose} = usePopoverContext();
+const Trigger = forwardRef<HTMLDivElement, PopoverTriggerProps>((props, ref) => {
+  const {asChild = false, reference, children, triggerEvent = "mousedown", onMouseDown, onClick, ...rest} = props;
+  const {contentId, 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?.();
+      open ? onClose(e as unknown as Event) : onOpen();
     }
   };
 
@@ -229,6 +199,8 @@ const Trigger = ({
     }
   }, [reference, setTriggerElement]);
 
+  const composedRef = useComposedRefs(ref, setTriggerElement);
+
   // Reference is passed
   if (reference !== undefined) {
     return null;
@@ -238,23 +210,24 @@ const Trigger = ({
     const childrenRef = getElementRef(children);
 
     return cloneElement(children, {
+      "aria-haspopup": "dialog",
       "aria-expanded": open,
-      "aria-haspopup": true,
-      ...props,
-      ref: composeRefs(setTriggerElement, childrenRef),
-      className: cx(children.props.className, props.className),
+      "aria-controls": contentId,
+      ...rest,
+      ref: composeRefs(composedRef, childrenRef),
+      className: cx(children.props.className, rest.className),
       ...triggerEventHandlers,
     });
   }
 
   return (
-    <div ref={setTriggerElement} {...triggerEventHandlers} {...props}>
+    <div ref={composedRef} {...triggerEventHandlers} {...rest}>
       {children}
     </div>
   );
-};
+});
 
-type ContentProps = {
+type PopoverContentProps = {
   children: ReactNode;
   placement?: Placement;
   popupStyle?: $TSFixMe;
@@ -296,12 +269,12 @@ type ContentProps = {
    * Can be prevented.
    */
   onCloseAutoFocus?: FocusScopeProps["onUnmountAutoFocus"];
-};
+} & React.ComponentProps<"div">;
 
 export type ContentRef = {update: (() => Promise<unknown>) | null};
 
-const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
-  {
+const Content = forwardRef<ContentRef, PopoverContentProps>((props, ref) => {
+  const {
     children,
     placement,
     popupStyle,
@@ -323,16 +296,62 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
     fixStackingContextAfterOpen = false,
     transform,
     onFirstUpdate,
-    onMouseLeave,
     onOpenAutoFocus,
     onCloseAutoFocus,
-  },
-  ref
-) {
-  const {open, onClose, triggerElement, popupElement, setPopupElement} = usePopoverContext();
+    ...rest
+  } = props;
+  const {contentId, open, onClose, triggerElement, popupElement, setPopupElement} = usePopoverContext();
 
   const popupModifiers = usePopupModifiers();
   const isPhone = useIsPhone();
+  const {registerEscapeCallback, registerPopup} = usePopupStackContext();
+
+  useEffect(() => {
+    let unregister: () => void;
+    if (registerPopup && open) {
+      unregister = registerPopup(contentId);
+    }
+    return () => {
+      unregister?.();
+    };
+  }, [registerPopup, contentId, 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(contentId, 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);
+      };
+    }
+    return () => {};
+  }, [onClose, open, triggerElement, registerEscapeCallback, contentId]);
 
   // We get infinite popup renders if this is not in a separate memo
   const shrinkableModifiers = useMemo(() => {
@@ -418,9 +437,7 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
     }
   };
 
-  const contentStyles = useMemo(() => {
-    return {...styles.popper, ...popupStyle};
-  }, [popupStyle, styles.popper]);
+  const contentStyles = useMemo(() => ({...styles.popper, ...popupStyle}), [popupStyle, styles.popper]);
 
   if (!open) {
     return null;
@@ -469,13 +486,15 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
       >
         <div
           role="dialog"
+          id={contentId}
           ref={setPopupElement}
+          {...rest}
           className={cx(
+            rest.className,
             basicPopupContainerClassName,
             hidePopupWhenTriggerIsHidden && hidePopupWhenTriggerIsHiddenClassName,
             popupContainerClassName
           )}
-          onMouseLeave={onMouseLeave}
           onClick={stopPropagation}
           {...attributes.popper}
           onPointerDownCapture={onPointerDownCapture}
@@ -490,123 +509,16 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContent(
   );
 });
 
-export {createPopper};
-
-export type {Placement, State, Reference, RootProps, TriggerProps, ContentProps};
+const Popover = {Root, Trigger, Portal, Content};
 
-export const Popover = {
-  Root,
-  Trigger,
-  Portal,
-  Content,
-};
-
-export type PopoverOldProps = Pick<RootProps, "children" | "open" | "onOpen" | "onClose" | "disabled"> &
-  ContentProps &
-  Pick<PortalProps, "getPopupContainer"> & {
-    trigger?: ReactNode;
-    triggerDomElement?: Reference;
-    renderInPortal?: boolean;
-  };
+export {createPopper, Popover};
 
-/**
- * @deprecated Use the new `Popover` compound component instead.
- *
- * The `PopoverOld` component is deprecated and will be removed in a future version.
- * Please migrate to the new `Popover` API which provides better composition and flexibility:
- *
- * @example
- * ```tsx
- * // Instead of PopoverOld:
- * <PopoverOld
- *   trigger={<button>Click me</button>}
- *   open={isOpen}
- *   onOpen={() => setIsOpen(true)}
- *   onClose={() => setIsOpen(false)}
- * >
- *   <div>Popover content</div>
- * </PopoverOld>
- *
- * // Use Popover compound components:
- * <Popover.Root
- *   open={isOpen}
- *   onOpen={() => setIsOpen(true)}
- *   onClose={() => setIsOpen(false)}
- * >
- *   <Popover.Trigger asChild triggerEvent="click">
- *     <button>Click me</button>
- *   </Popover.Trigger>
- *   <Popover.Portal>
- *     <Popover.Content>
- *       <div>Popover content</div>
- *     </Popover.Content>
- *   </Popover.Portal>
- * </Popover.Root>
- * ```
- */
-export const PopoverOld = ({
-  trigger,
-  triggerDomElement,
-  children,
-  placement,
-  open,
-  popupStyle,
-  popupContainerClassName,
-  popupClassName,
-  renderInPortal,
-  offset = [0, 0],
-  disabled = false,
-  onMouseLeave,
-  renderBackdrop,
-  backdropClassName,
-  preventOverflowOptions = {},
-  flipOptions = {},
-  additionalModifiers = [],
-  hidePopupWhenTriggerIsHidden = true,
-  shrinkable,
-  onOpen = noop,
-  onClose = noop,
-  supportMobile = false,
-  title = "",
-  mobilePopupStyle,
-  mobilePopupContentClassName,
-  getPopupContainer,
-  fixStackingContextAfterOpen = false,
-  onFirstUpdate,
-  transform,
-}: PopoverOldProps) => {
-  return (
-    <Popover.Root open={open} disabled={disabled} onOpen={onOpen} onClose={onClose}>
-      {triggerDomElement ? (
-        <Popover.Trigger reference={triggerDomElement}></Popover.Trigger>
-      ) : (
-        <Popover.Trigger>{trigger}</Popover.Trigger>
-      )}
-      <Wrap with={Popover.Portal} if={renderInPortal} getPopupContainer={getPopupContainer}>
-        <Popover.Content
-          children={children}
-          placement={placement}
-          popupStyle={popupStyle}
-          popupContainerClassName={popupContainerClassName}
-          popupClassName={popupClassName}
-          offset={offset}
-          onMouseLeave={onMouseLeave}
-          renderBackdrop={renderBackdrop}
-          backdropClassName={backdropClassName}
-          preventOverflowOptions={preventOverflowOptions}
-          flipOptions={flipOptions}
-          additionalModifiers={additionalModifiers}
-          hidePopupWhenTriggerIsHidden={hidePopupWhenTriggerIsHidden}
-          shrinkable={shrinkable}
-          supportMobile={supportMobile}
-          title={title}
-          mobilePopupStyle={mobilePopupStyle}
-          mobilePopupContentClassName={mobilePopupContentClassName}
-          fixStackingContextAfterOpen={fixStackingContextAfterOpen}
-          onFirstUpdate={onFirstUpdate}
-          transform={transform}
-        />
-      </Wrap>
-    </Popover.Root>
-  );
+export type {
+  Placement,
+  State,
+  Reference,
+  PopoverRootProps,
+  PopoverTriggerProps,
+  PopoverContentProps,
+  PopoverPortalProps,
 };

package/src/popover/mobile-popover.tsx

@@ -16,7 +16,9 @@ import {ThemeProvider} from "../theme-provider";
 import {useMobilePopover} from "./mobile-popover-context";
 
 const mobileAnimationClassName = css`
-  transition: transform ${transition}, opacity ${transition};
+  transition:
+    transform ${transition},
+    opacity ${transition};
   transform: translateY(0);
   opacity: 1;
 
@@ -104,7 +106,7 @@ export function MobilePopover({
       <div
         className={cx(
           css`
-            border-top: ${themeVars.separators.opacity5};
+            border-top: ${themeVars.borderSeparatorDimmed};
             min-width: 0;
           `,
           mobilePopupContentClassName

package/src/popover/popup-modifiers-context.ts

@@ -1,12 +1,12 @@
 import {createContext} from "@fibery/react/src/create-context";
-import {getPopupContainerElement} from "../utils-dom";
+import {getPopupContainerElement} from "../dom-utils";
 import {$TSFixMe} from "../tsfixme";
 import {Modifier} from "react-popper";
-import {PopoverOldProps} from "./index";
+import {PopoverContentProps} from "./index";
 
 export const [PopupModifiersProvider, usePopupModifiers] = createContext<{
   getPopupContainer: () => HTMLElement;
   additionalModifiers?: Array<Partial<Modifier<$TSFixMe, $TSFixMe>>>;
-  preventOverflowOptions?: PopoverOldProps["preventOverflowOptions"];
-  flipOptions?: PopoverOldProps["flipOptions"];
+  preventOverflowOptions?: PopoverContentProps["preventOverflowOptions"];
+  flipOptions?: PopoverContentProps["flipOptions"];
 }>("PopupModifiersProvider", {getPopupContainer: getPopupContainerElement});