@fibery/ui-kit 1.37.0 → 1.38.0

package/src/popup/index.tsx

@@ -1,383 +0,0 @@
-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 {
-  CSSProperties,
-  forwardRef,
-  MouseEvent,
-  ReactNode,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import {createPortal} from "react-dom";
-import {usePopper} from "react-popper";
-import {createInlineTheme, fontWeight, space, themeVars} from "../design-system";
-import {IconButton} from "../button/icon-button";
-import CloseIcon from "../icons/react/Close";
-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 {usePopupStackContext} from "./popup-stack-context";
-
-export type Props = {
-  trigger?: ReactNode;
-  children: ReactNode;
-  placement: Placement;
-  open: boolean;
-  popupStyle?: $TSFixMe;
-  mobilePopupStyle?: CSSProperties;
-  mobilePopupContentClassName?: string;
-  popupClassName?: string;
-  popupContainerClassName?: string;
-  renderInPortal?: boolean;
-  offset?: [number, number];
-  disabled?: boolean;
-  triggerDomElement?: Reference;
-  onMouseLeave?: (e: MouseEvent<HTMLDivElement>) => void;
-  renderBackdrop?: boolean;
-  backdropClassName?: string;
-  closeOnEscape?: boolean;
-  preventOverflowOptions?: Partial<PreventOverflowOptions>;
-  flipOptions?: Partial<FlipOptions>;
-  additionalModifiers?: Array<Partial<Modifier<$TSFixMe, $TSFixMe>>>;
-  hidePopupWhenTriggerIsHidden?: boolean;
-  shrinkable?: boolean;
-  onOpen?: () => unknown;
-  onClose?: (event: Event) => unknown;
-  supportMobile?: boolean;
-  title?: string;
-  getPopupContainer?: () => HTMLElement;
-
-  /**
-   * @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 {State};
-
-export type PopupApi = {popupElement: HTMLDivElement | null; update: (() => Promise<unknown>) | null};
-
-function MobilePopup({
-  content,
-  mobilePopupStyle,
-  mobilePopupContentClassName,
-  title,
-  onClose,
-}: {
-  content: ReactNode;
-  mobilePopupStyle?: CSSProperties;
-  mobilePopupContentClassName?: string;
-  title: string;
-  onClose: () => void;
-}) {
-  const theme = useTheme();
-
-  return createPortal(
-    <div
-      className={css`
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: ${themeVars.actionMenuBg};
-        z-index: 1002;
-        display: grid;
-        grid-template-rows: 45px 1fr;
-      `}
-      style={{...createInlineTheme(theme), ...mobilePopupStyle}}
-    >
-      <div
-        className={css`
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: ${space.s8}px;
-          padding: 0 ${space.s8}px 0 ${space.s12}px;
-        `}
-      >
-        <div
-          className={css`
-            font-weight: ${fontWeight.medium};
-            font-size: 16px;
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          `}
-        >
-          {title}
-        </div>
-        <IconButton onClick={onClose} size={"large"}>
-          <CloseIcon />
-        </IconButton>
-      </div>
-      <div
-        className={cx(
-          css`
-            border-top: ${themeVars.separators.opacity5};
-            min-width: 0;
-          `,
-          mobilePopupContentClassName
-        )}
-      >
-        {content}
-      </div>
-    </div>,
-    document.body
-  );
-}
-
-export const Popup = forwardRef<PopupApi, Props>(
-  (
-    {
-      trigger,
-      children,
-      placement,
-      open,
-      popupStyle,
-      popupContainerClassName,
-      popupClassName,
-      renderInPortal,
-      offset = [0, 0],
-      disabled = false,
-      triggerDomElement,
-      onMouseLeave,
-      renderBackdrop,
-      backdropClassName,
-      closeOnEscape = true,
-      preventOverflowOptions = {},
-      flipOptions = {},
-      additionalModifiers = [],
-      hidePopupWhenTriggerIsHidden = true,
-      shrinkable,
-      onOpen = _.noop,
-      onClose = _.noop,
-      supportMobile = false,
-      title = "",
-      mobilePopupStyle,
-      mobilePopupContentClassName,
-      getPopupContainer: popupContainerOverride,
-      fixStackingContextAfterOpen = false,
-      onFirstUpdate,
-    },
-    ref
-  ) => {
-    const popupModifiers = usePopupModifiers();
-    const getPopupContainer = popupContainerOverride ?? popupModifiers.getPopupContainer;
-    const id = useId();
-    const theme = useTheme();
-    const {registerEscapeCallback, registerPopup} = usePopupStackContext();
-    const isPhone = useIsPhone();
-    const updateRef = useRef<(() => Promise<unknown>) | null>(null);
-    const [triggerElement, setTriggerElement] = useControllableState<Reference>({value: triggerDomElement});
-    const [popupElement, setPopupElement] = useState<HTMLDivElement | null>(null);
-
-    const shrinkableModifiers = useMemo(() => {
-      return shrinkable ? getMaxSize(preventOverflowOptions) : [];
-    }, [preventOverflowOptions, shrinkable]);
-    // migrate to floating-ui https://floating-ui.com/docs/migration
-    const {styles, attributes, update} = usePopper(triggerElement, popupElement, {
-      placement,
-      onFirstUpdate,
-      modifiers: [
-        {
-          name: "flip",
-          options: {
-            ...popupModifiers.flipOptions,
-            ...flipOptions,
-          },
-        },
-        {
-          name: "preventOverflow",
-          options: {
-            tether: false,
-            padding: space.s6,
-            ...popupModifiers.preventOverflowOptions,
-            ...preventOverflowOptions,
-          },
-        },
-        {
-          name: "offset",
-          options: {
-            offset: offset,
-          },
-        },
-        observeWidth,
-        ...shrinkableModifiers,
-        ...additionalModifiers,
-        ...(popupModifiers.additionalModifiers ?? []),
-      ],
-    });
-    updateRef.current = update;
-    useImperativeHandle(
-      ref,
-      () => {
-        return {popupElement, update};
-      },
-      [popupElement, update]
-    );
-    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 {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);
-    });
-
-    if (isPhone && supportMobile) {
-      return open ? (
-        <MobilePopup
-          onClose={onClose}
-          title={title}
-          mobilePopupContentClassName={mobilePopupContentClassName}
-          mobilePopupStyle={mobilePopupStyle}
-          content={children}
-        />
-      ) : null;
-    }
-
-    const renderPopup = () => {
-      return (
-        <>
-          {renderBackdrop && (
-            <div
-              id={"popup-backdrop"}
-              data-testid={"popup-backdrop"}
-              className={cx(
-                backdropClassName,
-                css`
-                  position: absolute;
-                  inset: 0;
-                  z-index: 1000;
-                `
-              )}
-            />
-          )}
-          <div
-            className={cx(
-              basicPopupContainerClassName,
-              hidePopupWhenTriggerIsHidden && hidePopupWhenTriggerIsHiddenClassName,
-              popupContainerClassName
-            )}
-            onMouseLeave={onMouseLeave}
-            ref={setPopupElement}
-            onClick={stopPropagation}
-            {...attributes.popper}
-            onPointerDownCapture={onPointerDownCapture}
-            style={{...styles.popper, ...createInlineTheme(theme), ...popupStyle}}
-          >
-            <div
-              className={cx(basicPopupClassName, popupClassName)}
-              onAnimationEnd={
-                fixStackingContextAfterOpen
-                  ? (e) => (e.target as HTMLElement).setAttribute("data-fix-stacking-context", "")
-                  : undefined
-              }
-              style={popupStyle}
-            >
-              {children}
-            </div>
-          </div>
-        </>
-      );
-    };
-
-    // TODO: ui-kit should not know about portal container in main ui
-    if (triggerDomElement) {
-      return open ? (renderInPortal ? createPortal(renderPopup(), getPopupContainer()) : renderPopup()) : null;
-    }
-
-    const onMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
-      if (e.button === 0) {
-        open ? onClose(e as unknown as Event) : onOpen();
-      }
-    };
-
-    return (
-      <div>
-        <div ref={setTriggerElement} onMouseDown={disabled ? undefined : onMouseDown}>
-          {trigger}
-        </div>
-        {open ? (renderInPortal ? createPortal(renderPopup(), getPopupContainer()) : renderPopup()) : null}
-      </div>
-    );
-  }
-);
-
-export {createPopper};
-
-export type {Placement};