@fibery/ui-kit 1.34.8 → 1.36.0

package/src/popup/index.tsx

@@ -0,0 +1,382 @@
+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};
+          `,
+          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};

package/src/popup/modifiers.tsx

@@ -0,0 +1,70 @@
+import {Options as PreventOverflowOptions} from "@popperjs/core/lib/modifiers/preventOverflow";
+import {$TSFixMe} from "../tsfixme";
+import {Modifier, ModifierArguments} from "@popperjs/core";
+import maxSize from "popper-max-size-modifier";
+import {getResizeListener} from "@fibery/helpers/utils/resize-listener";
+import {isElementReference} from "./reference";
+import _ from "lodash";
+
+type PopupModifier = Modifier<$TSFixMe, $TSFixMe>;
+
+export const getMaxSize = (overflowOptions: Partial<PreventOverflowOptions>): PopupModifier[] => [
+  {
+    ...maxSize,
+    options: overflowOptions,
+  },
+  {
+    name: "applyMaxSize",
+    enabled: true,
+    phase: "beforeWrite",
+    requires: ["maxSize"],
+    fn({state}) {
+      const {width, height} = state.modifiersData.maxSize;
+      state.styles.popper.maxWidth = `${width}px`;
+      state.styles.popper.maxHeight = `${height}px`;
+    },
+  },
+];
+
+export const disableGpuAcceleration = {
+  name: "computeStyles",
+  options: {
+    gpuAcceleration: false,
+  },
+} as unknown as PopupModifier;
+
+const observeWidthEffect: (arg0: ModifierArguments<Record<string, unknown>>) => void = ({state, instance}) => {
+  const {popper, reference} = state.elements;
+
+  const resizeListener = getResizeListener();
+
+  const onResize = () => {
+    instance.update();
+  };
+  resizeListener.subscribe(popper, onResize);
+  /* We don't really need to observe reference's size
+   * but because we might have our tree wrapped in <Suspense>
+   * reference element might be rendered with display:none
+   * and as a result popup would be placed wrong.
+   * This should be fixed in React 18 and may be removed after upgrade
+   * More details here https://github.com/facebook/react/issues/14536
+   */
+  if (isElementReference(reference)) {
+    resizeListener.subscribe(reference as HTMLElement, onResize);
+  }
+
+  return () => {
+    resizeListener.unsubscribe(popper, onResize);
+    if (isElementReference(reference)) {
+      resizeListener.unsubscribe(reference as HTMLElement, onResize);
+    }
+  };
+};
+
+export const observeWidth: PopupModifier = {
+  name: "observeWidth",
+  enabled: true,
+  phase: "main",
+  fn: _.noop,
+  effect: observeWidthEffect,
+};

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

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

package/src/popup/popup-stack-context.tsx

@@ -0,0 +1,44 @@
+import {createContext} from "@fibery/react/src/create-context";
+import {ReactNode, useEffect} from "react";
+
+const callbacksMap = new Map<string, ((e: KeyboardEvent) => void) | null>();
+const registerEscapeCallback = (id: string, fn: (e: KeyboardEvent) => void) => {
+  callbacksMap.set(id, fn);
+  return () => {
+    callbacksMap.set(id, null);
+  };
+};
+const registerPopupCallback = (id: string) => {
+  callbacksMap.set(id, null);
+  return () => {
+    callbacksMap.delete(id);
+  };
+};
+
+const value = {registerEscapeCallback, registerPopup: registerPopupCallback};
+
+type RegisterEscapeCallback = typeof registerEscapeCallback;
+const [Provider, usePopupStackContext] = createContext<{
+  registerEscapeCallback?: RegisterEscapeCallback;
+  registerPopup?: typeof registerPopupCallback;
+}>("PopupStackContextProvider", {});
+
+export function PopupStackContextProvider({children}: {children: ReactNode}) {
+  useEffect(() => {
+    const escapeHandler = (event: KeyboardEvent) => {
+      const reverse = [...callbacksMap].reverse();
+      reverse.forEach(([_id, cb]) => {
+        if (cb) {
+          cb(event);
+        }
+      });
+    };
+    document.addEventListener("keydown", escapeHandler);
+    return () => {
+      document.removeEventListener("keydown", escapeHandler);
+    };
+  }, []);
+  return <Provider value={value}>{children}</Provider>;
+}
+
+export {usePopupStackContext};

package/src/popup/reference.ts

@@ -0,0 +1,7 @@
+import {VirtualElement} from "@popperjs/core";
+
+export type Reference = HTMLElement | VirtualElement | null;
+
+export const isElementReference = (reference: Reference): reference is Element => {
+  return reference instanceof Element;
+};

package/src/popup/styles.ts

@@ -0,0 +1,62 @@
+import {css} from "@linaria/core";
+import {border, themeVars} from "../design-system";
+
+export const basicPopupClassName = css`
+  box-shadow: ${themeVars.shadowPopup};
+  border-radius: ${border.radius8}px;
+  background-color: ${themeVars.colorBgPopup};
+  max-height: inherit;
+  max-width: inherit;
+`;
+
+export const basicPopupContainerClassName = css`
+  @keyframes slide {
+    from {
+      opacity: 0;
+      transform: translate(var(--fibery-popup-slide-offset-x, 0), var(--fibery-popup-slide-offset-y, 0));
+    }
+    to {
+      opacity: 1;
+      transform: translate(0);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .${basicPopupClassName} {
+      animation-duration: 400ms;
+      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+      animation-fill-mode: forwards;
+      will-change: transform, opacity;
+      animation-name: slide;
+
+      &[data-fix-stacking-context] {
+        animation-name: none;
+        will-change: unset;
+      }
+    }
+
+    &[data-popper-placement^="top"] .${basicPopupClassName} {
+      --fibery-popup-slide-offset-y: 2px;
+    }
+    &[data-popper-placement^="bottom"] .${basicPopupClassName} {
+      --fibery-popup-slide-offset-y: -2px;
+    }
+    &[data-popper-placement^="left"] .${basicPopupClassName} {
+      --fibery-popup-slide-offset-x: 2px;
+    }
+    &[data-popper-placement^="right"] .${basicPopupClassName} {
+      --fibery-popup-slide-offset-x: -2px;
+    }
+  }
+`;
+
+export const hidePopupWhenTriggerIsHiddenClassName = css`
+  &[data-popper-reference-hidden="true"] {
+    visibility: hidden;
+    pointer-events: none;
+    & * {
+      visibility: hidden;
+    }
+    // Children can be visible if {visibility: visible} is set on them
+    // for some reason, so we need to override the value
+  }
+`;

package/src/popup/use-click-outside.ts

@@ -0,0 +1,22 @@
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
+import {useEffect} from "react";
+
+export const useClickOutside = (
+  onClose: (e: Event) => unknown,
+  getElementsToIgnore: () => Array<Element | null> = () => []
+): void => {
+  const handleClickOutside = useCallbackRef((event: Event) => {
+    const target = event.target;
+    if (target instanceof Node) {
+      const elementsToIgnore = getElementsToIgnore();
+      if (elementsToIgnore.every((element) => element && !element.contains(target))) {
+        onClose(event);
+      }
+    }
+  });
+
+  useEffect(() => {
+    document.addEventListener("pointerdown", handleClickOutside, true);
+    return () => document.removeEventListener("pointerdown", handleClickOutside, true);
+  }, [handleClickOutside]);
+};

package/src/progress.tsx

@@ -0,0 +1,14 @@
+import {Line, Circle, ProgressProps} from "rc-progress";
+import {FC} from "react";
+
+interface CircleProgressProps extends ProgressProps {}
+
+export const CircleProgress: FC<CircleProgressProps> = (props) => {
+  return <Circle trailWidth={12} strokeWidth={12} {...props} />;
+};
+
+interface ProgressBarProps extends ProgressProps {}
+
+export const ProgressBar: FC<ProgressBarProps> = (props) => {
+  return <Line className={props.className} trailWidth={8} strokeWidth={8} {...props} />;
+};

package/src/reactions/get-word-divider.tsx

@@ -0,0 +1,15 @@
+export function getWordDivider(length: number, index: number, trailDivider = " ") {
+  if (length === 1) {
+    return trailDivider;
+  }
+  if (length === 2 && index === 0) {
+    return <>&nbsp;and </>;
+  }
+  if (length > 2 && length === index + 2) {
+    return <>,&nbsp;and </>;
+  }
+  if (length === index + 1) {
+    return trailDivider;
+  }
+  return ", ";
+}