@fibery/ui-kit 1.36.2 → 1.38.0

package/src/images-gallery/images-gallery.tsx

@@ -0,0 +1,254 @@
+import {ReactNode, useCallback, useEffect, useMemo, useReducer, useRef, useState} from "react";
+import _ from "lodash";
+import {createContext} from "@fibery/react/src/create-context";
+import {useIsPhone} from "../use-is-phone";
+import {safeAreaInsetBottomVar} from "../mobile-styles";
+import {buttonGroup, ButtonGroup} from "../button/button-group";
+import {IconButton} from "../button/icon-button";
+import ArrowRight from "../icons/react/ArrowRight";
+import ArrowLeft from "../icons/react/ArrowLeft";
+import {css} from "@linaria/core";
+import cx from "classnames";
+
+type Registry = Map<string, {zoomed: boolean; setZoomed: (zoomed: boolean) => void}>;
+
+const [ImagesGalleryRegistryProvider, useImagesGalleryRegistry] = createContext(
+  "ImagesGalleryRegistryContext",
+  new Map()
+);
+
+export {useImagesGalleryRegistry};
+
+type Methods = {
+  setVisible: (visible: boolean) => void;
+  setActivated: (activated: boolean) => void;
+  update: () => void;
+  nextImage: () => void;
+  prevImage: () => void;
+};
+const [ImagesGalleryMethodsProvider, useImagesGalleryMethods] = createContext<Methods>("ImagesGalleryMethodsProvider", {
+  setVisible: _.noop,
+  setActivated: _.noop,
+  update: _.noop,
+  nextImage: _.noop,
+  prevImage: _.noop,
+});
+type State = {visible: boolean; activated: boolean; _inc: number};
+
+const [ImagesGalleryStateProvider, useImagesGalleryState] = createContext<State>("ImagesGalleryStateContext", {
+  visible: false,
+  activated: false,
+  _inc: 0,
+});
+
+export {useImagesGalleryMethods, useImagesGalleryState};
+
+type Actions = {type: "set-visible"; payload: boolean} | {type: "set-activated"; payload: boolean} | {type: "inc"};
+
+function initialState(): State {
+  return {visible: false, activated: false, _inc: 0};
+}
+
+function imagesGalleryReducer(state: State, action: Actions) {
+  if (action.type === "set-visible") {
+    return {...state, visible: action.payload};
+  }
+  if (action.type === "set-activated") {
+    return {...state, activated: action.payload};
+  }
+  if (action.type === "inc") {
+    return {...state, _inc: state._inc + 1};
+  }
+  return state;
+}
+
+const controlsGroupStyle = css`
+  &.${buttonGroup} {
+    display: none;
+  }
+`;
+
+export function Controls() {
+  const imagesRegistry = useImagesGalleryRegistry();
+  const {visible} = useImagesGalleryState();
+  const isPhone = useIsPhone();
+  const {prevImage, nextImage, setVisible} = useImagesGalleryMethods();
+  // Determine if there is a zoomed image and its position in the registry
+  let activeNext = true;
+  let activePrev = true;
+  let i = 0;
+  for (const image of imagesRegistry.values()) {
+    if (image.zoomed) {
+      if (i === 0) {
+        activePrev = false;
+      }
+      if (i === imagesRegistry.size - 1) {
+        activeNext = false;
+      }
+      break;
+    }
+    i++;
+  }
+  const visibleState = visible || isPhone;
+  if (imagesRegistry.size > 1) {
+    const size = isPhone ? "xLarge" : "small";
+    return (
+      <div
+        className={css`
+          position: fixed;
+          bottom: max(var(${safeAreaInsetBottomVar}), 12px);
+          left: 0;
+          right: 0;
+          display: grid;
+          align-items: center;
+          justify-content: center;
+          &:hover .${controlsGroupStyle}.${buttonGroup} {
+            display: flex;
+          }
+        `}
+      >
+        <ButtonGroup
+          className={cx(
+            controlsGroupStyle,
+            visibleState &&
+              css`
+                &.${controlsGroupStyle}.${buttonGroup} {
+                  display: flex;
+                }
+              `
+          )}
+        >
+          <IconButton
+            variant={"outline"}
+            size={size}
+            onClick={() => {
+              prevImage();
+              setVisible(true);
+            }}
+            disabled={!activePrev}
+          >
+            <ArrowLeft />
+          </IconButton>
+          <IconButton
+            variant={"outline"}
+            size={size}
+            onClick={() => {
+              nextImage();
+              setVisible(true);
+            }}
+            disabled={!activeNext}
+          >
+            <ArrowRight />
+          </IconButton>
+        </ButtonGroup>
+      </div>
+    );
+  }
+  return null;
+}
+
+export function ImagesGalleryProvider({children}: {children: ReactNode}) {
+  const [imagesRegistry] = useState<Registry>(() => new Map());
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const [galleryState, dispatchState] = useReducer(imagesGalleryReducer, [], initialState);
+  const setVisible = useCallback((visible: boolean) => dispatchState({type: "set-visible", payload: visible}), []);
+  const setActivated = useCallback(
+    (activated: boolean) => dispatchState({type: "set-activated", payload: activated}),
+    []
+  );
+  const update = useCallback(() => dispatchState({type: "inc"}), []);
+  const {visible} = galleryState;
+  const timeout = 3000;
+  useEffect(() => {
+    if (visible) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        setVisible(false);
+      }, timeout);
+    }
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, [setVisible, visible]);
+  const nextImage = useCallback(() => {
+    let i = 0;
+    for (const image of imagesRegistry.values()) {
+      if (image.zoomed) {
+        if (i === imagesRegistry.size - 1) {
+          break;
+        }
+        image.setZoomed(false);
+        const nextImage = Array.from(imagesRegistry.values())[i + 1];
+        nextImage.setZoomed(true);
+        break;
+      }
+      i++;
+    }
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setVisible(false);
+    }, timeout);
+  }, [imagesRegistry, setVisible]);
+
+  const prevImage = useCallback(() => {
+    let i = 0;
+    for (const image of imagesRegistry.values()) {
+      if (image.zoomed) {
+        if (i === 0) {
+          break;
+        }
+        image.setZoomed(false);
+        const prevImage = Array.from(imagesRegistry.values())[i - 1];
+        prevImage.setZoomed(true);
+        break;
+      }
+      i++;
+    }
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setVisible(false);
+    }, timeout);
+  }, [imagesRegistry, setVisible]);
+
+  const methods = useMemo(
+    () => ({setVisible, setActivated, update, nextImage, prevImage}),
+    [setVisible, setActivated, update, nextImage, prevImage]
+  );
+
+  useEffect(() => {
+    const listener = (evt: KeyboardEvent) => {
+      const hasActive = Array.from(imagesRegistry.values()).some((image) => image.zoomed);
+      if (!hasActive) {
+        return;
+      }
+      if (evt.key === "Escape") {
+        for (const image of imagesRegistry.values()) {
+          if (image.zoomed) {
+            image.setZoomed(false);
+            break;
+          }
+        }
+      }
+      if (evt.key === "ArrowRight") {
+        nextImage();
+      }
+      if (evt.key === "ArrowLeft") {
+        prevImage();
+      }
+    };
+    document.addEventListener("keydown", listener, {capture: true});
+    return () => {
+      document.removeEventListener("keydown", listener, {capture: true});
+    };
+  }, [imagesRegistry, nextImage, prevImage]);
+
+  return (
+    <>
+      <ImagesGalleryRegistryProvider value={imagesRegistry}>
+        <ImagesGalleryMethodsProvider value={methods}>
+          <ImagesGalleryStateProvider value={galleryState}>{children}</ImagesGalleryStateProvider>
+        </ImagesGalleryMethodsProvider>
+      </ImagesGalleryRegistryProvider>
+    </>
+  );
+}

package/src/images-gallery/zoom.tsx

@@ -0,0 +1,112 @@
+import {css} from "@linaria/core";
+import React, {ReactNode, useCallback} from "react";
+import {Controlled} from "react-medium-image-zoom";
+import "react-medium-image-zoom/dist/styles.css";
+import {themeVars} from "../design-system";
+import {IconButton} from "../button/icon-button";
+import Close from "../icons/react/Close";
+import {Controls, useImagesGalleryMethods} from "./images-gallery";
+import {useIsPhone} from "../use-is-phone";
+
+const dialogCss = css`
+  :global() {
+    [data-rmiz-modal-overlay="hidden"] {
+      background-color: transparent;
+    }
+    [data-rmiz-modal-overlay="visible"] {
+      background-color: ${themeVars.colorBgEditorImageZoomed};
+    }
+    [data-rmiz-content="found"] > img {
+      cursor: auto;
+    }
+  }
+`;
+
+type ModalState = "LOADED" | "LOADING" | "UNLOADED" | "UNLOADING";
+
+const ZoomContent = ({
+  img,
+  modalState,
+  onUnzoom,
+}: {
+  img: React.ReactElement | null;
+  modalState: ModalState;
+  onUnzoom: (e: Event) => void;
+}) => {
+  const imagesGalleryMethods = useImagesGalleryMethods();
+  const isPhone = useIsPhone();
+
+  const button = modalState === "LOADED" && (
+    <IconButton
+      size={isPhone ? "xLarge" : "small"}
+      color="neutral"
+      variant="ghost"
+      className={css`
+        position: absolute;
+        inset: 20px 20px auto auto;
+        z-index: 1;
+      `}
+      onClick={onUnzoom as () => void}
+    >
+      <Close />
+    </IconButton>
+  );
+  return (
+    <>
+      <div
+        onMouseMove={() => {
+          imagesGalleryMethods.setVisible(true);
+        }}
+        className={css`
+          position: absolute;
+          inset: 0;
+        `}
+      >
+        {img}
+        {button}
+      </div>
+      <Controls />
+    </>
+  );
+};
+
+type Props = {
+  zoomed: boolean;
+  onZoomedChange: (value: boolean) => void;
+  children: ReactNode;
+  className?: string;
+  openOnClick?: boolean;
+  zoomImg?: {src: string; alt?: string};
+};
+
+export const Zoom = (props: Props) => {
+  const {zoomed, onZoomedChange, children, className, openOnClick, zoomImg} = props;
+  const imagesGalleryMethods = useImagesGalleryMethods();
+  const onClick = useCallback(() => {
+    if (zoomed) {
+      onZoomedChange(false);
+    } else if (openOnClick) {
+      onZoomedChange(true);
+    }
+  }, [zoomed, onZoomedChange, openOnClick]);
+
+  const onDoubleClick = useCallback(() => {
+    if (!zoomed) {
+      onZoomedChange(true);
+    }
+  }, [zoomed, onZoomedChange]);
+
+  return (
+    <div className={className} onClick={onClick} onDoubleClick={openOnClick ? undefined : onDoubleClick}>
+      <Controlled
+        zoomImg={zoomImg}
+        onZoomChange={imagesGalleryMethods.update}
+        classDialog={dialogCss}
+        isZoomed={zoomed}
+        ZoomContent={ZoomContent}
+      >
+        {children}
+      </Controlled>
+    </div>
+  );
+};

package/src/integration-compact-info-button.tsx

@@ -34,7 +34,9 @@ export const IntegrationCompactInfoButton: React.FC<{
   if (error) {
     iconNode = <WarningIcon color={colors.errorButtonColor} iconSize={18} containerSize={24} />;
   } else if (loading) {
-    iconNode = <Spinner color={colors.accentTextColor} backgroundColor={colors.mainBg} size={16} containerSize={24} />;
+    iconNode = (
+      <Spinner color={colors.accentTextColor} backgroundColor={colors.mainBg} iconSize={16} containerSize={24} />
+    );
   }
 
   const className = cx(buttonCss, loading && loadingCss);

package/src/is-in-popup.ts

@@ -1,4 +1,4 @@
-import {basicPopupClassName} from "./popup/styles";
+import {basicPopupClassName} from "./popover/styles";
 import {$TSFixMe} from "./tsfixme";
 
 const selectors = [

package/src/layout-styles.ts

@@ -0,0 +1,43 @@
+import {css} from "@linaria/core";
+import {
+  layout,
+  listRowSurfaceFontSizeVar,
+  sidebarMenuItemHeightVar,
+  sidebarMenuIconSizeVar,
+  textStyles,
+  menuItemHeightVar,
+} from "./design-system";
+import {
+  keyboardHeightVar,
+  keyboardInsetBottomVar,
+  mobileRootClassName,
+  safeAreaInsetLeftVar,
+  safeAreaInsetRightVar,
+  safeAreaInsetTopVar,
+  safeAreaInsetBottomVar,
+} from "./mobile-styles";
+
+export const layoutStyles = css`
+  :global() {
+    html:root {
+      ${safeAreaInsetLeftVar}: var(--app-safe-area-inset-left, env(safe-area-inset-left));
+      ${safeAreaInsetRightVar}: var(--app-safe-area-inset-right, env(safe-area-inset-right));
+      ${safeAreaInsetTopVar}: var(--app-safe-area-inset-top, env(safe-area-inset-top));
+      ${safeAreaInsetBottomVar}: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom));
+      ${keyboardInsetBottomVar}: var(--app-current-keyboard-height, 0px);
+      ${keyboardHeightVar}: 350px;
+
+      ${menuItemHeightVar}: ${layout.menuItemHeight}px;
+      ${sidebarMenuItemHeightVar}: ${layout.newMenuItemHeight}px;
+      ${sidebarMenuIconSizeVar}: ${layout.newMenuIconSize}px;
+      ${listRowSurfaceFontSizeVar}: ${textStyles.regular.fontSize}px;
+
+      &.${mobileRootClassName} {
+        ${menuItemHeightVar}: ${layout.mobileMenuItemHeight}px;
+        ${sidebarMenuItemHeightVar}: ${layout.mobileSidebarMenuItemHeight}px;
+        ${sidebarMenuIconSizeVar}: ${layout.mobileSidebarIconSize}px;
+        ${listRowSurfaceFontSizeVar}: ${textStyles.big.fontSize}px;
+      }
+    }
+  }
+`;

package/src/lists/actions-menu-row-surface.tsx

@@ -7,6 +7,7 @@ import {useActionsMenuContext} from "../actions-menu";
 import {ActionsMenuItemProps} from "../actions-menu/actions-menu-item";
 import {useActiveDangerousRow, useSetActiveDangerousRow} from "../actions-menu/contexts/actions-menu-dangerous-rows";
 import {colors, layout, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {useIsSupportHover} from "../use-is-support-hover";
 import {
   ListRowContent,
   ListRowContentProps,
@@ -66,6 +67,7 @@ export const actionMenuItemSurface = css`
 export const ActionMenuItemSurface = forwardRef<HTMLDivElement, ActionMenuItemSurfaceProps>(
   ({testId, className, loading, selected, hovered, focused, title, disabled, children, dangerous, ...props}, ref) => {
     const id = useId();
+    const platformSupportsHover = useIsSupportHover();
     const activeDangerousRow = useActiveDangerousRow();
     const showWarning = activeDangerousRow === id;
     const onSelect = useCallbackRef(props.onSelect || _.noop);
@@ -100,7 +102,7 @@ export const ActionMenuItemSurface = forwardRef<HTMLDivElement, ActionMenuItemSu
           listRowSurfaceStylesBase,
           actionMenuItemSurface,
           className,
-          hovered === undefined && NATURAL_HOVER_CLASS,
+          platformSupportsHover && hovered === undefined && NATURAL_HOVER_CLASS,
           focused === undefined && NATURAL_FOCUS_CLASS,
           focused && "focus",
           disabled && "done",

package/src/lists/list-row-surface.tsx

@@ -1,6 +1,8 @@
 import {css, cx} from "@linaria/core";
 import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
-import {border, space, textStyles, themeVars, transition} from "../design-system";
+import {border, layoutVars, space, textStyles, themeVars, transition} from "../design-system";
+import {useIsSupportHover} from "../use-is-support-hover";
+import {mobileRootSelector} from "../mobile-styles";
 
 interface ListRowSurfaceBase extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
@@ -28,6 +30,7 @@ export const listRowSurfaceStylesBase = css`
   padding: 0 ${space.s4}px;
   column-gap: ${space.s4}px;
   ${{...textStyles.regular}};
+  font-size: ${layoutVars.listRowSurfaceFontSize};
   color: ${themeVars.textColor};
   border-radius: ${border.radius6}px;
   transition: background-color ${transition};
@@ -151,6 +154,7 @@ export const listRowSurfaceStatesDark = css`
 
 export const ListRowSurface = forwardRef<HTMLDivElement, ListRowSurfaceProps>(
   ({selected, focused, darker, hovered, done, className, children, ...rest}, ref) => {
+    const platformSupportsHover = useIsSupportHover();
     return (
       <div
         {...rest}
@@ -158,7 +162,7 @@ export const ListRowSurface = forwardRef<HTMLDivElement, ListRowSurfaceProps>(
           listRowSurfaceStylesBase,
           darker ? listRowSurfaceStatesDark : listRowSurfaceStatesDefault,
           className,
-          hovered === undefined && NATURAL_HOVER_CLASS,
+          platformSupportsHover && hovered === undefined && NATURAL_HOVER_CLASS,
           focused === undefined && NATURAL_FOCUS_CLASS,
           focused && "focus",
           hovered && "hover",
@@ -203,6 +207,9 @@ const ListRowContentSegment = css`
   min-width: 0; // allows ellipsis in flex contexts :)
   max-width: 100%;
   width: 100%;
+  ${mobileRootSelector} & {
+    ${textStyles.big}
+  }
 `;
 export const ListRowContent = forwardRef<HTMLDivElement, ListRowContentProps>(
   (

package/src/loaders.tsx

@@ -105,7 +105,7 @@ const ContainerSpinner = styled.div<{containerSize: number}>`
 `;
 
 type Props = {
-  size?: number;
+  iconSize?: number;
   containerSize?: number;
   width?: number;
   color?: string;
@@ -114,7 +114,7 @@ type Props = {
 
 export const Spinner = memo<Props>(
   ({
-    size = 20,
+    iconSize = 20,
     containerSize = 15,
     width = 2,
     color = themeVars.iconColor,
@@ -122,14 +122,14 @@ export const Spinner = memo<Props>(
   }) => {
     const style = useMemo(() => {
       return {
-        width: size,
-        height: size,
-        ...getShiftStyle({elementSize: size, containerSize}),
+        width: iconSize,
+        height: iconSize,
+        ...getShiftStyle({elementSize: iconSize, containerSize}),
         borderWidth: width,
         borderColor: backgroundColor,
         borderTopColor: color,
       };
-    }, [backgroundColor, color, containerSize, size, width]);
+    }, [backgroundColor, color, containerSize, iconSize, width]);
 
     return (
       <ContainerSpinner containerSize={containerSize}>

package/src/logo.tsx

@@ -10,40 +10,47 @@ export const Logo: FC<LogoProps> = ({size = 40}) => {
   return (
     <svg width={size} height={size} viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M4.03423 14.4218C3.21412 13.9208 2.98021 12.7899 3.50892 12.0007L9.78271 2.68903C10.3144 1.96674 11.3497 1.78689 12.0902 2.296C12.8324 2.80633 13.0464 3.84401 12.577 4.61037L6.30323 13.9221C5.81148 14.6516 4.79323 14.8855 4.03423 14.4218Z"
+        d="M3.5181 14.7077C2.61266 14.1545 2.35441 12.906 2.93813 12.0346L9.86469 1.75412C10.4517 0.956677 11.5947 0.758115 12.4123 1.3202C13.2317 1.88362 13.468 3.02927 12.9497 3.87537L6.02318 14.156C5.48027 14.9614 4.35607 15.2196 3.5181 14.7077Z"
         fill="#4FC5B3"
       />
       <path
-        d="M12.5824 5.76052L14.4262 5.62076C15.0707 5.57197 15.7022 5.909 16.0235 6.47175C16.4824 7.27568 16.2062 8.3398 15.4042 8.80787L7.37161 13.4944L12.5824 5.76052Z"
+        d="M12.9561 5.1453L14.9917 4.99099C15.7033 4.93713 16.4005 5.30922 16.7552 5.93053C17.2619 6.8181 16.9569 7.99294 16.0715 8.50971L7.20312 13.6839L12.9561 5.1453Z"
         fill="#4FC5B3"
       />
       <path
-        d="M7.9007 15.2941L7.54998 14.143L9.39081 13.069L10.9608 13.6928L11.1421 14.2861C11.4113 15.1703 10.9111 16.1473 10.0244 16.4244C9.13418 16.6992 8.17086 16.1782 7.9007 15.2941Z"
+        d="M7.78663 15.671L7.39941 14.4001L9.43178 13.2144L11.1651 13.9031L11.3653 14.5581C11.6625 15.5343 11.1102 16.6129 10.1313 16.9189C9.14845 17.2223 8.08489 16.6471 7.78663 15.671Z"
         fill="#4FC5B3"
       />
       <path
-        d="M13.8573 10.463L10.1048 12.6524L13.1951 13.8803C14.1762 14.262 15.2829 13.6203 15.4739 12.6003C15.6223 11.8078 15.1831 10.9898 14.4313 10.6908L13.8573 10.463Z"
+        d="M14.3627 10.3369L10.2197 12.7541L13.6316 14.1098C14.7147 14.5312 15.9366 13.8227 16.1475 12.6966C16.3113 11.8216 15.8264 10.9185 14.9964 10.5884L14.3627 10.3369Z"
         fill="#4FC5B3"
       />
       <path
-        d="M6.62886 6.21191L4.19346 9.82661C3.94456 9.84546 3.69329 9.87829 3.44344 9.87829C2.53771 9.87954 1.78415 9.13161 1.75116 8.23166C1.71817 7.33154 2.41483 6.52941 3.31826 6.46286L6.62886 6.21191Z"
+        d="M6.38255 5.64331L3.69375 9.63411C3.41895 9.65492 3.14154 9.69117 2.86569 9.69117C1.86572 9.69255 1.03376 8.8668 0.997336 7.87321C0.960913 6.87944 1.73006 5.99385 2.72749 5.92037L6.38255 5.64331Z"
         fill="#4FC5B3"
       />
       <path
-        d="M7.47702 2.86321L8.28896 3.74803L7.052 5.58397L5.46788 5.70755L4.99456 5.19028C4.36761 4.50647 4.40795 3.40642 5.08509 2.77166C5.76095 2.13811 6.85128 2.1807 7.47702 2.86321Z"
+        d="M7.31897 1.94643L8.21539 2.92332L6.84973 4.95028L5.10078 5.08672L4.57821 4.51563C3.88603 3.76067 3.93057 2.54616 4.67816 1.84536C5.42435 1.14589 6.62812 1.19291 7.31897 1.94643Z"
         fill="#4FC5B3"
       />
     </svg>
   );
 };
 
-const logoPadding = (layout.newMenuIconSize - layout.logoSize) / 2;
-
 export const logoContainerStyle = css`
   ${{
-    padding: logoPadding,
     width: layout.newMenuIconSize,
     height: layout.newMenuIconSize,
     lineHeight: 0,
   }}
 `;
+
+export const mobileLogoSize = 28;
+
+export const mobileLogoContainerStyle = css`
+  ${{
+    width: mobileLogoSize,
+    height: mobileLogoSize,
+    lineHeight: 0,
+  }}
+`;

package/src/mobile-keyboard-aware-popup.tsx

@@ -0,0 +1,87 @@
+import {ReactNode, useEffect, useRef} from "react";
+import {createPortal} from "react-dom";
+import _ from "lodash";
+import {css, cx} from "@linaria/core";
+import {border, space, themeVars} from "./design-system";
+import {keyboardInsetBottomVar, safeAreaInsetBottomVar} from "./mobile-styles";
+
+export const mobileKeyboardAwarePopupZIndex = 1001;
+
+export function MobileKeyboardAwarePopup({children, className}: {children: ReactNode; className?: string}) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const viewport = window.visualViewport;
+    if (!viewport) {
+      return _.noop;
+    }
+
+    const manualKeyboardModeHandler = document.documentElement.classList.contains("fibery-manual-keyboard-mode");
+
+    let pendingUpdate = false;
+    const layoutViewport = document.getElementById("root") as HTMLDivElement;
+    const timeoutId = setTimeout(() => {
+      if (viewport.offsetTop >= 0 && ref.current) {
+        ref.current.style.transform = `translateY(${
+          manualKeyboardModeHandler
+            ? viewport.offsetTop
+            : viewport.height - layoutViewport.getBoundingClientRect().height + viewport.offsetTop
+        }px)`;
+      }
+    }, 0);
+
+    function viewportHandler() {
+      clearTimeout(timeoutId);
+      if (pendingUpdate) {
+        return;
+      }
+      pendingUpdate = true;
+
+      requestAnimationFrame(() => {
+        pendingUpdate = false;
+
+        if (viewport && viewport.offsetTop >= 0 && ref.current) {
+          ref.current.style.transform = `translateY(${
+            manualKeyboardModeHandler
+              ? viewport.offsetTop
+              : viewport.height - layoutViewport.getBoundingClientRect().height + viewport.offsetTop
+          }px)`;
+        }
+      });
+    }
+
+    viewport.addEventListener("scroll", viewportHandler);
+    viewport.addEventListener("resize", viewportHandler);
+    return () => {
+      clearTimeout(timeoutId);
+      viewport.removeEventListener("scroll", viewportHandler);
+      viewport.removeEventListener("resize", viewportHandler);
+    };
+  }, []);
+  return createPortal(
+    <div
+      ref={ref}
+      className={cx(
+        css`
+          box-shadow: ${themeVars.shadow200};
+          background-color: ${themeVars.actionMenuBg};
+          position: fixed;
+          bottom: max(max(var(${keyboardInsetBottomVar}), var(${safeAreaInsetBottomVar})), 8px);
+          left: 0;
+          right: 0;
+          z-index: ${mobileKeyboardAwarePopupZIndex};
+          transform: translateY(0px);
+          border-radius: ${border.radius16}px;
+          border: 1px solid ${themeVars.separatorColor};
+          margin: 0 ${space.s8}px;
+          .fibery-manual-keyboard-mode & {
+            margin-bottom: 8px;
+          }
+        `,
+        className
+      )}
+    >
+      {children}
+    </div>,
+    document.body
+  );
+}