@fibery/ui-kit 1.40.3 → 1.41.0

package/src/popover/{mobile-popup-context.tsx → mobile-popover-context.tsx}

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

package/src/popover/mobile-popover.tsx

@@ -0,0 +1,169 @@
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {css} from "@linaria/core";
+import cx from "classnames";
+import {CSSProperties, ReactNode} from "react";
+import {
+  safeAreaInsetBottomVar,
+  safeAreaInsetLeftVar,
+  safeAreaInsetRightVar,
+  safeAreaInsetTopVar,
+} from "../mobile-styles";
+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 {ThemeProvider} from "../theme-provider";
+import {useMobilePopover} from "./mobile-popover-context";
+
+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 const mobileZIndex = 1002;
+
+export function MobilePopover({
+  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} = useMobilePopover();
+
+  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>;
+}

package/src/popover/modifiers.tsx

@@ -3,7 +3,7 @@ import {Modifier, ModifierArguments, Placement, Boundary, RootBoundary, Padding,
 import maxSize from "popper-max-size-modifier";
 import {getResizeListener} from "@fibery/helpers/utils/resize-listener";
 import {isElementReference} from "./reference";
-import _ from "lodash";
+import noop from "lodash/noop";
 
 type MaxSizeOptions = {
   placement: Placement;
@@ -65,6 +65,6 @@ export const observeWidth: Modifier<"observeWidth", Record<string, never>> = {
   name: "observeWidth",
   enabled: true,
   phase: "main",
-  fn: _.noop,
+  fn: noop,
   effect: observeWidthEffect,
 };

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

@@ -25,17 +25,16 @@ const [Provider, usePopupStackContext] = createContext<{
 
 export function PopupStackContextProvider({children}: {children: ReactNode}) {
   useEffect(() => {
-    const escapeHandler = (event: KeyboardEvent) => {
-      const reverse = [...callbacksMap].reverse();
-      reverse.forEach(([_id, cb]) => {
-        if (cb) {
-          cb(event);
-        }
-      });
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        const callbacks = [...callbacksMap.values()].filter(Boolean);
+        const topmost = callbacks[callbacks.length - 1];
+        topmost?.(event);
+      }
     };
-    document.addEventListener("keydown", escapeHandler);
+    document.addEventListener("keydown", onKeyDown);
     return () => {
-      document.removeEventListener("keydown", escapeHandler);
+      document.removeEventListener("keydown", onKeyDown);
     };
   }, []);
   return <Provider value={value}>{children}</Provider>;

package/src/progress.tsx

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

package/src/reactions/reaction-button.tsx

@@ -1,7 +1,8 @@
 import {css} from "@linaria/core";
-import {Fragment, ReactEventHandler, ReactNode, useCallback, useState, useRef} from "react";
+import {Fragment, ReactEventHandler, ReactNode, useCallback, useRef, useState} from "react";
 import {createPortal} from "react-dom";
 import {fontSize, fontWeight, space, themeVars} from "../design-system";
+import {ThemeProvider} from "../theme-provider";
 import {Emoji} from "../emoji-picker/emoji";
 import {ToggleButton} from "../toggle-button/toggle-button";
 import {Tooltip} from "../tooltip";
@@ -10,7 +11,7 @@ import {mobileRootSelector, safeAreaInsetBottomVar} from "../mobile-styles";
 import {useLongPress} from "../use-long-press";
 import {getWordDivider} from "./get-word-divider";
 import {EmojiTooltipDescription, EmojiTooltipTitle} from "./tootltip";
-import {TabNavLink, TabNavRoot, TabNavList, tabButton} from "../tab-nav/tab-nav";
+import {tabButton, TabNavLink, TabNavList, TabNavRoot} from "../tab-nav/tab-nav";
 import {AvatarImage} from "../avatar";
 import {getPopupContainerElement} from "../utils-dom";
 
@@ -46,7 +47,12 @@ const overlayClassName = css`
 `;
 
 function TouchOverlay({onClick}: {onClick: () => void}) {
-  return createPortal(<div className={overlayClassName} onClick={onClick} />, getPopupContainerElement());
+  return createPortal(
+    <ThemeProvider portal>
+      <div className={overlayClassName} onClick={onClick} />
+    </ThemeProvider>,
+    getPopupContainerElement()
+  );
 }
 
 function MobileOverlay({content, onClose}: {content: ReactNode; onClose: () => void}) {
@@ -57,7 +63,7 @@ function MobileOverlay({content, onClose}: {content: ReactNode; onClose: () => v
     },
     [onClose]
   );
-  return createPortal(
+  const res = (
     <div className={overlayClassName}>
       <div
         onPointerDown={handleClose}
@@ -79,9 +85,9 @@ function MobileOverlay({content, onClose}: {content: ReactNode; onClose: () => v
       >
         {content}
       </div>
-    </div>,
-    getPopupContainerElement()
+    </div>
   );
+  return createPortal(<ThemeProvider portal>{res}</ThemeProvider>, getPopupContainerElement());
 }
 
 const navLinkClassName = css`