@fibery/ui-kit 1.37.0 → 1.38.0

package/src/popover/index.tsx

@@ -0,0 +1,687 @@
+/* eslint-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";
+import {css} from "@linaria/core";
+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 {
+  cloneElement,
+  CSSProperties,
+  forwardRef,
+  isValidElement,
+  MouseEvent,
+  ReactNode,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo,
+} from "react";
+import {
+  safeAreaInsetBottomVar,
+  safeAreaInsetLeftVar,
+  safeAreaInsetRightVar,
+  safeAreaInsetTopVar,
+} from "../mobile-styles";
+import {createPortal} from "react-dom";
+import {usePopper} from "react-popper";
+import {createInlineTheme, 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 {useTheme} from "../theme-provider";
+import {$TSFixMe} from "../tsfixme";
+import {useIsPhone} from "../use-is-phone";
+import {usePopupModifiers} from "./popup-modifiers-context";
+import {getMaxSize, observeWidth} from "./modifiers";
+import {isElementReference, Reference} from "./reference";
+import {basicPopupClassName, basicPopupContainerClassName, hidePopupWhenTriggerIsHiddenClassName} from "./styles";
+import {MobilePopupProvider, useMobilePopup} from "./mobile-popup-context";
+import {usePopupStackContext} from "./popup-stack-context";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {createContext} from "@fibery/react/src/create-context";
+import {Wrap} from "@fibery/react/src/wrap";
+
+const Backdrop = ({className}: {className?: string}) => {
+  return (
+    <div
+      id={"popup-backdrop"}
+      data-testid={"popup-backdrop"}
+      className={cx(
+        className,
+        css`
+          position: absolute;
+          inset: 0;
+          z-index: 1000;
+        `
+      )}
+    />
+  );
+};
+
+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 theme = useTheme();
+
+  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>
+      <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>
+    </>
+  );
+
+  return (
+    <div
+      className={cx(
+        css`
+          position: absolute;
+          left: var(${safeAreaInsetLeftVar});
+          right: var(${safeAreaInsetRightVar});
+          top: var(${safeAreaInsetTopVar});
+          bottom: var(${safeAreaInsetBottomVar});
+          z-index: 1002;
+        `,
+        !height && mobileAnimationClassName,
+        !height && popupContentClassName,
+        height &&
+          css`
+            display: grid;
+          `
+      )}
+      style={{
+        ...createInlineTheme(theme),
+        ...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>
+  );
+}
+
+type PortalProps = {
+  getPopupContainer?: () => HTMLElement;
+  children: ReactNode;
+};
+
+const Portal = ({getPopupContainer: popupContainerOverride, children}: PortalProps) => {
+  const popupModifiers = usePopupModifiers();
+  const getPopupContainer = popupContainerOverride ?? popupModifiers.getPopupContainer;
+  return createPortal(children, getPopupContainer());
+};
+
+type TriggerProps = {
+  asChild?: boolean;
+  // Support case when popup trigger is virtual reference
+  reference?: Reference;
+  children?: ReactNode;
+};
+
+const Trigger = ({asChild = false, reference, children}: TriggerProps) => {
+  const {setTriggerElement, disabled, open, onOpen, onClose} = useContext();
+
+  const onMouseDown: React.MouseEventHandler<HTMLElement> = (e) => {
+    if (disabled) {
+      return;
+    }
+    if (e.button === 0) {
+      open ? onClose?.(e as unknown as Event) : onOpen?.();
+    }
+  };
+
+  useEffect(() => {
+    if (reference) {
+      setTriggerElement(reference);
+    }
+  }, [reference, setTriggerElement]);
+
+  if (reference) {
+    return null;
+  }
+
+  if (asChild && isValidElement(children)) {
+    return cloneElement(children, {
+      // @ts-expect-error: React.cloneElement typing does not include `ref`, but it's valid at runtime
+      ref: setTriggerElement,
+      "aria-expanded": open,
+      "aria-haspopup": true,
+      onMouseDown,
+    });
+  }
+
+  return (
+    <div ref={setTriggerElement} onMouseDown={onMouseDown}>
+      {children}
+    </div>
+  );
+};
+
+type ContentProps = {
+  children: ReactNode;
+  placement?: Placement;
+  popupStyle?: $TSFixMe;
+  popupClassName?: string;
+  popupContainerClassName?: string;
+  offset?: [number, number];
+  onMouseLeave?: (e: MouseEvent<HTMLDivElement>) => void;
+  renderBackdrop?: boolean;
+  backdropClassName?: string;
+  preventOverflowOptions?: Partial<PreventOverflowOptions>;
+  flipOptions?: Partial<FlipOptions>;
+  additionalModifiers?: Array<Partial<Modifier<$TSFixMe, $TSFixMe>>>;
+  hidePopupWhenTriggerIsHidden?: boolean;
+  shrinkable?: boolean;
+  supportMobile?: boolean;
+  title?: string;
+  mobilePopupStyle?: CSSProperties;
+  mobilePopupContentClassName?: string;
+  transform?: boolean;
+  /**
+   * @deprecated
+   * Because of openning animation popup creates new stacking context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
+   * this might break any components that use position: fixed inside the popup (i.e. formula editor -> monaco editor)
+   * Pass true to restore stacking context after animation is finished.
+   *
+   * Marked as deprecated because it's better to avoid this prop
+   */
+  fixStackingContextAfterOpen?: boolean;
+  /**
+   * ran after Popup positioned the element the first time
+   */
+  onFirstUpdate?: () => void;
+};
+
+export type ContentRef = {update: (() => Promise<unknown>) | null};
+
+const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInner(
+  {
+    children,
+    placement,
+    popupStyle,
+    popupContainerClassName,
+    popupClassName,
+    offset = [0, 0],
+    onMouseLeave,
+    renderBackdrop,
+    backdropClassName,
+    preventOverflowOptions = {},
+    flipOptions = {},
+    additionalModifiers = [],
+    hidePopupWhenTriggerIsHidden = true,
+    shrinkable,
+    supportMobile = false,
+    title = "",
+    mobilePopupStyle,
+    mobilePopupContentClassName,
+    fixStackingContextAfterOpen = false,
+    onFirstUpdate,
+    transform,
+  },
+  ref
+) {
+  const {open, onClose, triggerElement, popupElement, setPopupElement} = useContext();
+
+  const popupModifiers = usePopupModifiers();
+  const theme = useTheme();
+  const isPhone = useIsPhone();
+
+  // We get infinite popup renders if this is not in a separate memo
+  const shrinkableModifiers = useMemo(() => {
+    return shrinkable ? getMaxSize(preventOverflowOptions) : [];
+  }, [preventOverflowOptions, shrinkable]);
+
+  const modifiers = useMemo(() => {
+    return _.compact([
+      {name: "flip", options: {...popupModifiers.flipOptions, ...flipOptions}},
+      {
+        name: "preventOverflow",
+        options: {
+          tether: false,
+          padding: space.s6,
+          ...popupModifiers.preventOverflowOptions,
+          ...preventOverflowOptions,
+        },
+      },
+      {name: "offset", options: {offset: offset}},
+      !transform && {name: "computeStyles", options: {gpuAcceleration: false}},
+      observeWidth,
+      ...shrinkableModifiers,
+      ...additionalModifiers,
+      ...(popupModifiers.additionalModifiers ?? []),
+    ]);
+  }, [
+    additionalModifiers,
+    flipOptions,
+    offset,
+    popupModifiers,
+    preventOverflowOptions,
+    shrinkableModifiers,
+    transform,
+  ]);
+
+  // migrate to floating-ui https://floating-ui.com/docs/migration
+  const {styles, attributes, update} = usePopper(triggerElement, popupElement, {placement, onFirstUpdate, modifiers});
+
+  useImperativeHandle(ref, () => ({update}), [update]);
+
+  const {onPointerDownCapture} = usePointerDownOutside((event) => {
+    if (!open || (isPhone && supportMobile)) {
+      return;
+    }
+    const target = event.target;
+    if (target instanceof Node) {
+      const ignoreElements = _.compact([isElementReference(triggerElement) && triggerElement]);
+      if (ignoreElements.some((element) => element.contains(target))) {
+        return;
+      }
+    }
+    onClose?.(event);
+  });
+
+  const onAnimationEnd: React.AnimationEventHandler = (e) => {
+    if (fixStackingContextAfterOpen) {
+      (e.target as HTMLElement).setAttribute("data-fix-stacking-context", "");
+    }
+  };
+
+  const contentStyles = useMemo(() => {
+    return {...styles.popper, ...createInlineTheme(theme), ...popupStyle};
+  }, [popupStyle, styles.popper, theme]);
+
+  if (!open) {
+    return null;
+  }
+
+  // When transform is disabled there is a noticeable blink on popup open (it's not positioned correctly)
+  if (!transform && !triggerElement) {
+    return null;
+  }
+
+  if (isPhone && supportMobile) {
+    return (
+      <MobilePopupProvider>
+        <MobilePopup
+          onClose={onClose as $TSFixMe}
+          title={title}
+          mobilePopupContentClassName={mobilePopupContentClassName}
+          mobilePopupStyle={mobilePopupStyle}
+          content={children}
+        />
+      </MobilePopupProvider>
+    );
+  }
+  return (
+    <>
+      {renderBackdrop && <Backdrop className={backdropClassName} />}
+      <div
+        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>
+    </>
+  );
+});
+
+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,
+  ]);
+
+  return <Provider value={contextValue}>{children}</Provider>;
+};
+
+export const Popover = {
+  Root,
+  Trigger,
+  Portal,
+  Content,
+};
+
+export {createPopper};
+
+export type {Placement, State, Reference, RootProps, TriggerProps, ContentProps};
+
+export type PopoverOldProps = Pick<
+  RootProps,
+  "children" | "open" | "onOpen" | "onClose" | "closeOnEscape" | "disabled"
+> &
+  ContentProps &
+  Pick<PortalProps, "getPopupContainer"> & {
+    trigger?: ReactNode;
+    triggerDomElement?: Reference;
+    renderInPortal?: boolean;
+  };
+
+/**
+ * @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>
+ *     <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,
+  closeOnEscape = true,
+  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} closeOnEscape={closeOnEscape} 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>
+  );
+};

package/src/popover/mobile-popup-context.tsx

@@ -0,0 +1,29 @@
+import _ from "lodash";
+import {FC, ReactNode, useState, useMemo} from "react";
+import {createContext} from "@fibery/react/src/create-context";
+
+type MobilePopupContext = {
+  title?: string;
+  headerSlot?: ReactNode;
+  setTitle: (title: string) => void;
+  setHeader: (header?: ReactNode) => void;
+};
+
+const [Provider, useMobilePopup] = createContext<MobilePopupContext>("MobilePopupContext", {
+  setTitle: _.noop,
+  setHeader: _.noop,
+});
+
+export const MobilePopupProvider: FC<{children?: ReactNode}> = ({children}) => {
+  const [title, setTitle] = useState<string | undefined>();
+  const [headerSlot, setHeader] = useState<ReactNode | undefined>();
+
+  const contextValue = useMemo(
+    () => ({title, headerSlot, setTitle, setHeader}),
+    [title, headerSlot, setTitle, setHeader]
+  );
+
+  return <Provider value={contextValue}>{children}</Provider>;
+};
+
+export {useMobilePopup};