@fibery/ui-kit 1.38.1 → 1.39.0

package/src/icons/svg/file-image.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14">
+    <path d="M13.75 0C14.9926 0 16 1.00736 16 2.25V11.75C16 12.9926 14.9926 14 13.75 14H2.25C1.00736 14 0 12.9926 0 11.75V2.25C0 1.00736 1.00736 0 2.25 0H13.75ZM2.25 1.5C1.83579 1.5 1.5 1.83579 1.5 2.25V11.75C1.5 12.1642 1.83579 12.5 2.25 12.5H13.75C14.1642 12.5 14.5 12.1642 14.5 11.75V2.25C14.5 1.83579 14.1642 1.5 13.75 1.5H2.25ZM12.1465 10.1465C12.4613 10.4614 12.2383 10.9999 11.793 11H4.20703C3.76165 10.9999 3.53861 10.4615 3.85352 10.1465L6 8L7 9L9 7L12.1465 10.1465ZM12 3C12.5523 3.00002 13 3.44773 13 4C13 4.55227 12.5523 4.99998 12 5C11.4477 4.99998 11 4.55227 11 4C11 3.44773 11.4477 3.00002 12 3Z" />
+</svg>

package/src/icons/svg/file-presentation.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path d="M12.7617 16.5723L12.8184 16.6348C13.0805 16.9633 13.0612 17.4486 12.7617 17.7549C12.4622 18.0611 11.9874 18.0805 11.666 17.8125L11.6045 17.7549L10.001 16.1152L8.39746 17.7549C8.07799 18.0812 7.56066 18.0812 7.24121 17.7549C6.9217 17.4282 6.92172 16.8989 7.24121 16.5723L8.77832 15H4.25C3.00736 15 2 13.9926 2 12.75V5.25C2 4.00736 3.00736 3 4.25 3H15.75C16.9926 3 18 4.00736 18 5.25V12.75C18 13.9926 16.9926 15 15.75 15H11.2236L12.7617 16.5723ZM4.25 4.5C3.83579 4.5 3.5 4.83579 3.5 5.25V12.75C3.5 13.1642 3.83579 13.5 4.25 13.5H15.75C16.1642 13.5 16.5 13.1642 16.5 12.75V5.25C16.5 4.83579 16.1642 4.5 15.75 4.5H4.25ZM10 9H12C12 9.39556 11.8828 9.78243 11.6631 10.1113C11.4434 10.4401 11.1309 10.6963 10.7656 10.8477C10.4002 10.999 9.99734 11.0391 9.60938 10.9619C9.22155 10.8847 8.86556 10.6937 8.58594 10.4141C8.30632 10.1344 8.1153 9.77845 8.03809 9.39062C7.96092 9.00266 8.00097 8.59983 8.15234 8.23438C8.30372 7.86906 8.55988 7.55662 8.88867 7.33691C9.21757 7.11715 9.60444 7 10 7V9Z" />
+</svg>

package/src/icons/svg/file-table.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" >
+    <path d="M11.7422 1.5C11.9405 1.5 12.131 1.5787 12.2715 1.71875L16.7764 6.21582C16.9173 6.35652 16.9971 6.54787 16.9971 6.74707V9.94141C16.9986 9.96076 17 9.98026 17 10C17 10.0194 16.9985 10.0386 16.9971 10.0576V13.9414C16.9986 13.9608 17 13.9803 17 14C17 14.0194 16.9985 14.0386 16.9971 14.0576V15.75C16.9971 17.2687 15.766 18.4999 14.248 18.5H5.74512C4.22716 18.4999 2.99708 17.2687 2.99707 15.75V4.25C2.99707 2.73127 4.22713 1.50008 5.74512 1.5H11.7422ZM8.75 17H14.248C14.938 16.9999 15.4971 16.4403 15.4971 15.75V14.75H8.75V17ZM4.49609 15.75C4.4961 16.4403 5.05519 16.9999 5.74512 17H7.25V14.75H4.49609V15.75ZM8.75 13.25H15.4971V10.75H8.75V13.25ZM4.49609 13.25H7.25V10.75H4.49609V13.25ZM5.74512 3C5.05516 3.00008 4.49609 3.55969 4.49609 4.25V9.25H15.4971V7.49707H12.5752C12.1555 7.49702 11.7528 7.33009 11.4561 7.0332C11.1593 6.73627 10.9932 6.33301 10.9932 5.91309V3H5.74512ZM12.4922 5.91309C12.4922 5.93519 12.501 5.95703 12.5166 5.97266C12.5322 5.98808 12.5533 5.99702 12.5752 5.99707H14.4346L12.4922 4.05762V5.91309Z" />
+</svg>

package/src/icons/svg/file-video.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path d="M15.75 4C16.9926 4 18 5.00736 18 6.25V13.75C18 14.9926 16.9926 16 15.75 16H4.25C3.00736 16 2 14.9926 2 13.75V6.25C2 5.00736 3.00736 4 4.25 4H15.75ZM4.25 5.5C3.83579 5.5 3.5 5.83579 3.5 6.25V13.75C3.5 14.1642 3.83579 14.5 4.25 14.5H15.75C16.1642 14.5 16.5 14.1642 16.5 13.75V6.25C16.5 5.83579 16.1642 5.5 15.75 5.5H4.25ZM7.5 7.80859C7.50028 7.43719 7.89134 7.19532 8.22363 7.36133L12.6055 9.55273C12.974 9.737 12.974 10.263 12.6055 10.4473L8.22363 12.6377C7.89133 12.8038 7.50034 12.5628 7.5 12.1914V7.80859Z" />
+</svg>

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import PhotoSwipeLightbox, {type PhotoSwipeEventsMap} from "photoswipe/lightbox";
 import "photoswipe/style.css";
 import {
@@ -9,17 +10,20 @@ import {PropsWithChildren, useCallback, useEffect, useMemo, useReducer, useRef,
 import {css} from "@linaria/core";
 import {createRoot} from "react-dom/client";
 import {space, themeVars} from "../design-system";
+import {safeAreaInsetLeftVar, safeAreaInsetRightVar, safeAreaInsetTopVar} from "../mobile-styles";
 import {useToast} from "../toast/toast-provider";
 import {ToastQueue} from "../toast/toast-queue";
 import {useThemeMode} from "../theme-provider";
 import {ThemeMode} from "../theme-settings";
 import {SlideButtons} from "./slide-buttons";
+import {useIsPhone} from "../use-is-phone";
 
 type Registry = Map<
   string,
   {
     src: string;
     type: "image" | "video" | "iframe";
+    contentType?: string;
     actions?: React.ReactNode;
     zoomed: boolean;
     setZoomed: (zoomed: boolean) => void;
@@ -37,13 +41,13 @@ type Methods = {
 const galleryMainClass = css`
   z-index: 1000;
   & .pswp__button--arrow--prev {
-    left: ${space.s20}px;
+    left: calc(${space.s20}px + var(${safeAreaInsetLeftVar}));
     height: ${space.s28}px;
     width: ${space.s28}px;
     margin-top: -${space.s14}px;
   }
   & .pswp__button--arrow--next {
-    right: ${space.s20}px;
+    right: calc(${space.s20}px + var(${safeAreaInsetRightVar}));
     height: ${space.s28}px;
     width: ${space.s28}px;
     margin-top: -${space.s14}px;
@@ -73,7 +77,7 @@ const galleryMainClass = css`
   }
 
   & .pswp__iframe-container {
-    padding: 0 ${space.s60}px 0 ${space.s60}px;
+    padding: ${space.s60}px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -82,13 +86,17 @@ const galleryMainClass = css`
   & .pswp__iframe-container iframe {
     width: 100%;
     height: 100%;
-    max-width: min(822px, calc(100vw - 40px));
     object-fit: contain;
     display: block;
     color: ${themeVars.textColor};
     background-color: ${themeVars.colorBgPopup};
     border: none;
   }
+
+  & .pswp__top-bar {
+    top: var(${safeAreaInsetTopVar});
+    left: var(${safeAreaInsetLeftVar});
+  }
 `;
 
 export function ImagesGalleryProvider2({children}: PropsWithChildren) {
@@ -132,10 +140,11 @@ export function ImagesGalleryProvider2({children}: PropsWithChildren) {
 
   const toast = useToast();
   const themeMode = useThemeMode();
+  const isPhone = useIsPhone();
 
   useEffect(() => {
     if (galleryState.activated) {
-      const value = initGallery(imagesRegistry, toast, themeMode);
+      const value = initGallery(imagesRegistry, {toastQueue: toast, isPhone, themeMode});
       value.on("close", () => {
         dispatchState({type: "set-activated", payload: false});
         markAllNotZoomed();
@@ -149,7 +158,7 @@ export function ImagesGalleryProvider2({children}: PropsWithChildren) {
       lightbox.current?.destroy();
       lightbox.current = null;
     };
-  }, [galleryState.activated, imagesRegistry, markAllNotZoomed, toast, themeMode]);
+  }, [galleryState.activated, imagesRegistry, markAllNotZoomed, toast, themeMode, isPhone]);
 
   return (
     <ImagesGalleryRegistryProvider value={imagesRegistry}>
@@ -183,6 +192,7 @@ function imagesGalleryReducer(state: State, action: Actions) {
 type GalleryEntry = {
   type: string;
   src: string;
+  contentType: string | null;
   zoomed: boolean;
   setZoomed: (value: boolean) => void;
   state: "none" | "loading" | "error" | "loaded";
@@ -190,11 +200,15 @@ type GalleryEntry = {
   height?: number;
 };
 
-function initGallery(imagesRegistry: Registry, toastQueue: ToastQueue, themeMode: ThemeMode) {
+function initGallery(
+  imagesRegistry: Registry,
+  {toastQueue, themeMode, isPhone}: {toastQueue: ToastQueue; themeMode: ThemeMode; isPhone: boolean}
+) {
   const items = [...imagesRegistry.values()];
   const dataSource: GalleryEntry[] = items.map((item) => ({
     ...item,
     state: "none",
+    contentType: item.contentType ?? null,
   }));
 
   const zoomedIndex = dataSource.findIndex((item) => item.zoomed);
@@ -293,6 +307,7 @@ function initGallery(imagesRegistry: Registry, toastQueue: ToastQueue, themeMode
         item,
         refreshSlide,
         getPswp: () => lightbox.pswp,
+        isPhone,
       };
 
       switch (item.type) {
@@ -319,10 +334,14 @@ function initGallery(imagesRegistry: Registry, toastQueue: ToastQueue, themeMode
   });
 
   const HIDE_UI_TIMEOUT_MS = 3000;
+  let forceShowUI = false;
   let hideTimeout: ReturnType<typeof setTimeout>;
   let isHidden = false;
 
   function hideUI() {
+    if (forceShowUI) {
+      return;
+    }
     lightbox.pswp?.element?.classList.remove("pswp--ui-visible");
     lightbox.pswp?.element?.classList.add("pswp--hide-cursor");
     isHidden = true;
@@ -351,6 +370,17 @@ function initGallery(imagesRegistry: Registry, toastQueue: ToastQueue, themeMode
     hideTimeout = setTimeout(hideUI, HIDE_UI_TIMEOUT_MS);
   });
 
+  const uiHandlers = {
+    showUI,
+    setForceShowUI: (value: boolean) => {
+      forceShowUI = value;
+      // resets timer
+      if (!forceShowUI) {
+        showUI();
+      }
+    },
+  };
+
   lightbox.on("uiRegister", () => {
     lightbox.pswp?.ui?.registerElement({
       name: "custom-nav",
@@ -358,7 +388,15 @@ function initGallery(imagesRegistry: Registry, toastQueue: ToastQueue, themeMode
       isButton: false,
       appendTo: "wrapper",
       onInit: (el, pswp) => {
-        createRoot(el).render(<SlideButtons items={items} pswp={pswp} toastQueue={toastQueue} themeMode={themeMode} />);
+        createRoot(el).render(
+          <SlideButtons
+            items={items}
+            pswp={pswp}
+            toastQueue={toastQueue}
+            themeMode={themeMode}
+            uiHandlers={uiHandlers}
+          />
+        );
       },
     });
   });
@@ -379,33 +417,62 @@ type ContentLoadArg = {
   item: GalleryEntry;
   refreshSlide: (index: number) => void;
   getPswp: () => PhotoSwipeLightbox["pswp"];
+  isPhone: boolean;
 };
 
 function onImageContentLoad({e, item, refreshSlide}: ContentLoadArg) {
   item.state = "loading";
-  const onLoad = () => {
+  // we ok if content type request fails
+  const contentTypePromise = item.contentType
+    ? Promise.resolve(item.contentType)
+    : fetch(item.src, {method: "HEAD"})
+        .then((response) => response.headers.get("content-type"))
+        .catch();
+
+  const contentPromise = new Promise<{width: number; height: number}>((resolve, reject) => {
+    const onLoad = () => {
+      resolve({
+        width: img.naturalWidth,
+        height: img.naturalHeight,
+      });
+    };
+
+    const img = new Image();
+    img.src = item.src;
+    if (img.complete) {
+      onLoad();
+    }
+    img.onload = () => onLoad();
+    img.onerror = () => {
+      reject("error");
+    };
+  });
+
+  Promise.allSettled([contentTypePromise, contentPromise]).then(([contentTypeResult, contentResult]) => {
+    if (contentResult.status === "rejected") {
+      item.state = "error";
+      refreshSlide(e.content.index);
+      e.content.onError();
+      return;
+    }
+
     item.state = "loaded";
-    item.width = img.naturalWidth;
-    item.height = img.naturalHeight;
+    item.width = contentResult.value.width;
+    item.height = contentResult.value.height;
+
+    // normalize
+    if (contentTypeResult.status === "fulfilled" && contentTypeResult.value?.startsWith("image/svg")) {
+      const scale = Math.min(3000 / item.width!, 3000 / item.height!);
+      item.width = Math.ceil(scale * item.width!);
+      item.height = Math.ceil(scale * item.height!);
+    }
 
     refreshSlide(e.content.index);
     e.content.onLoaded();
-  };
-
-  const img = new Image();
-  img.src = item.src;
-  if (img.complete) {
-    onLoad();
-  }
-  img.onload = () => onLoad();
-  img.onerror = () => {
-    item.state = "error";
-    refreshSlide(e.content.index);
-    e.content.onError();
-  };
+  });
 }
 
-function onVideoContentLoad({e, item, refreshSlide, getPswp}: ContentLoadArg) {
+function onVideoContentLoad({e, item, refreshSlide, getPswp, isPhone}: ContentLoadArg) {
   item.state = "loaded";
 
   e.content.element = document.createElement("div");
@@ -422,6 +489,19 @@ function onVideoContentLoad({e, item, refreshSlide, getPswp}: ContentLoadArg) {
     refreshSlide(e.content.index);
     e.content.onError();
   };
+  video.onclick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isPhone) {
+      return;
+    }
+    if (video.paused) {
+      video.play().catch();
+    } else {
+      video.pause();
+    }
+  };
+
   e.content.element.appendChild(video);
 }
 

package/src/images-gallery-2/slide-buttons.tsx

@@ -10,6 +10,7 @@ import RicheditorOpenLink from "../icons/react/RicheditorOpenLink";
 import Link from "../icons/react/Link";
 import Close from "../icons/react/Close";
 import {colors, createInlineTheme, getThemeColors, space} from "../design-system";
+import {safeAreaInsetRightVar, safeAreaInsetTopVar} from "../mobile-styles";
 import {Button} from "../button/button";
 import {copyToClipboard} from "../copy-to-clipboard";
 import {ToastProvider, useToast} from "../toast/toast-provider";
@@ -21,8 +22,8 @@ import {ThemeMode} from "../theme-settings";
 
 const barClassName = css`
   position: absolute;
-  top: ${space.s20}px;
-  right: ${space.s20}px;
+  top: calc(${space.s20}px + var(${safeAreaInsetTopVar}));
+  right: calc(${space.s20}px + var(${safeAreaInsetRightVar}));
 
   display: flex;
   flex-direction: row;
@@ -31,6 +32,11 @@ const barClassName = css`
   gap: ${space.s8}px; /* space between children */
 `;
 
+const wrapper = css`
+  width: 100%;
+  height: 100%;
+`;
+
 type SlideState = {
   currIndex: number;
   numItems: number;
@@ -41,8 +47,8 @@ type SlideState = {
 export function SlideButtons({
   pswp,
   toastQueue,
-  themeMode,
   items,
+  uiHandlers,
 }: {
   pswp: PhotoSwipe;
   toastQueue: ToastQueue;
@@ -51,6 +57,10 @@ export function SlideButtons({
     src: string;
     actions?: React.ReactNode;
   }[];
+  uiHandlers: {
+    showUI: () => void;
+    setForceShowUI: (value: boolean) => void;
+  };
 }) {
   const [slideState, setSliceState] = useState<SlideState>(getSlideData(pswp, items));
   useEffect(() => {
@@ -64,80 +74,109 @@ export function SlideButtons({
     };
   }, [items, pswp]);
 
+  const {theme, styles} = useMemo(() => {
+    const theme = getThemeColors(colors.brandColors.blue, "dark");
+    return {theme, styles: createInlineTheme(theme, emptyArray)};
+  }, []);
+
   return (
     <ToastProvider toastQueue={toastQueue}>
-      <div className={barClassName}>
-        <CopyURLButton pswp={pswp} />
-        <ZoomButton pswp={pswp} />
-        {slideState.actions ? (
-          <SlideActionsMenu actions={slideState.actions} themeMode={themeMode} />
-        ) : (
-          <IconButton
-            size="medium"
-            color="neutral"
-            variant="solid"
-            onClick={() => window.open(slideState.src, "_blank")}
-          >
-            <RicheditorOpenLink />
-          </IconButton>
-        )}
-
-        <IconButton onClick={() => pswp.close()} size="medium" color="neutral" variant="solid">
-          <Close />
-        </IconButton>
-      </div>
-      <div className="pswp__button--arrow--prev pswp__button--arrow">
-        <IconButton
-          disabled={slideState.currIndex === 0}
-          onClick={() => pswp.prev()}
-          size="medium"
-          color="neutral"
-          variant="solid"
-        >
-          <Back />
-        </IconButton>
-      </div>
-      <div className="pswp__button--arrow--next pswp__button--arrow">
-        <IconButton
-          disabled={slideState.currIndex === slideState.numItems - 1}
-          onClick={() => pswp.next()}
-          size="medium"
-          color="neutral"
-          variant="solid"
-        >
-          <ArrowForward />
-        </IconButton>
-      </div>
+      <ThemeProvider theme={theme}>
+        <div style={styles} className={wrapper}>
+          <div className={barClassName}>
+            <CopyURLButton pswp={pswp} showUI={uiHandlers.showUI} />
+            <ZoomButton pswp={pswp} showUI={uiHandlers.showUI} />
+            {slideState.actions ? (
+              <SlideActionsMenu actions={slideState.actions} uiHandlers={uiHandlers} />
+            ) : (
+              <IconButton
+                size="medium"
+                color="neutral"
+                variant="soft"
+                onClick={() => {
+                  window.open(slideState.src, "_blank");
+                  uiHandlers.showUI();
+                }}
+              >
+                <RicheditorOpenLink />
+              </IconButton>
+            )}
+
+            <IconButton
+              onClick={() => {
+                pswp.close();
+                uiHandlers.showUI();
+              }}
+              size="medium"
+              color="neutral"
+              variant="soft"
+            >
+              <Close />
+            </IconButton>
+          </div>
+          <div className="pswp__button--arrow--prev pswp__button--arrow">
+            <IconButton
+              disabled={slideState.currIndex === 0}
+              onClick={() => {
+                pswp.prev();
+                uiHandlers.showUI();
+              }}
+              size="medium"
+              color="neutral"
+              variant="soft"
+            >
+              <Back />
+            </IconButton>
+          </div>
+          <div className="pswp__button--arrow--next pswp__button--arrow">
+            <IconButton
+              disabled={slideState.currIndex === slideState.numItems - 1}
+              onClick={() => {
+                pswp.next();
+                uiHandlers.showUI();
+              }}
+              size="medium"
+              color="neutral"
+              variant="soft"
+            >
+              <ArrowForward />
+            </IconButton>
+          </div>
+        </div>
+      </ThemeProvider>
     </ToastProvider>
   );
 }
 
-function SlideActionsMenu({themeMode, actions}: {themeMode: ThemeMode; actions?: React.ReactNode}) {
+function SlideActionsMenu({
+  actions,
+  uiHandlers,
+}: {
+  actions?: React.ReactNode;
+  uiHandlers: {showUI: () => void; setForceShowUI: (value: boolean) => void};
+}) {
   const [container, setContainer] = useState<HTMLDivElement | null>();
-  const {theme, styles} = useMemo(() => {
-    const theme = getThemeColors(colors.brandColors.blue, themeMode === "dark" ? "light" : "dark");
-    return {theme, styles: createInlineTheme(theme, emptyArray)};
-  }, [themeMode]);
 
   return (
     <div>
       <ActionsMenu
+        onOpenChange={(value) => {
+          uiHandlers.setForceShowUI(value);
+        }}
         contentStyles={css`
           margin-top: ${space.s8}px;
         `}
         container={container}
-        trigger={<ActionsButtonCompact size="medium" color="neutral" variant="solid" />}
+        trigger={<ActionsButtonCompact size="medium" color="neutral" variant="soft" onClick={uiHandlers.showUI} />}
       >
         {actions}
       </ActionsMenu>
-      <ThemeProvider theme={theme}>
-        <div style={styles} ref={setContainer}></div>
-      </ThemeProvider>
+      <div ref={setContainer} />
     </div>
   );
 }
 
-function ZoomButton({pswp}: {pswp: PhotoSwipe}) {
+function ZoomButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
   const [zoomed, setZoomed] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
 
@@ -176,21 +215,23 @@ function ZoomButton({pswp}: {pswp: PhotoSwipe}) {
       onClick={() => {
         setZoomed(!zoomed);
         pswp.toggleZoom();
+        showUI();
       }}
       size="medium"
       color="neutral"
-      variant="solid"
+      variant="soft"
     >
       {zoomed ? <LoupeZoomOut /> : <LoupeZoomIn />}
     </IconButton>
   );
 }
 
-function CopyURLButton({pswp}: {pswp: PhotoSwipe}) {
+function CopyURLButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
   const toast = useToast();
   return (
     <Button
       onClick={() => {
+        showUI();
         if (!pswp?.currSlide?.data.src) {
           toast.error({title: "Unable to copy."});
           return;
@@ -208,7 +249,7 @@ function CopyURLButton({pswp}: {pswp: PhotoSwipe}) {
         }
       }}
       size="medium"
-      variant="solid"
+      variant="soft"
       color="neutral"
       iconStart={<Link />}
       type="button"

package/src/kbd.tsx

@@ -14,7 +14,7 @@ export const kbdCss = css`
   height: ${space.s18}px;
   padding: ${space.s2}px;
   border-radius: ${border.radius4}px;
-  border: ${themeVars.shortcutBorderColor};
+  border: ${themeVars.shortcutBorder};
   color: ${themeVars.shortcutTextColor};
   line-height: ${lineHeight.nowrap};
   white-space: nowrap;

package/src/loading-sausage.tsx

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cn from "classnames";
 import _ from "lodash";
-import {memo, useRef} from "react";
+import {ComponentType, memo, ReactNode, useRef} from "react";
 import {space, themeVars} from "./design-system";
 
 const getRandomWithSeed = _.memoize((seed: number) => {
@@ -141,7 +141,7 @@ type SausageListProps = {
   amount?: number;
   minAmount?: number;
   maxAmount?: number;
-  WrapperComponent?: ({children}: {children: JSX.Element}) => JSX.Element | null;
+  WrapperComponent?: ComponentType<{children: ReactNode}> | null;
 } & Omit<LoadingSausageProps, "index">;
 export const LoadingSausageList = memo<SausageListProps>(function LoadingSausageList({
   amount,

package/src/tooltip.tsx

@@ -111,7 +111,7 @@ export const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> =
   <TooltipPrimitive.Provider disableHoverableContent skipDelayDuration={150} {...props} />
 );
 
-export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title"> & {
+export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title" | "content"> & {
   title?: ReactNode;
   description?: ReactNode;
   tooltipContentStyle?: string;

package/src/use-is-phone.tsx

@@ -2,6 +2,7 @@ import {ReactNode, useLayoutEffect} from "react";
 import {createContext} from "@fibery/react/src/create-context";
 import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
 import {getMediaQueryList} from "./media-query-utils";
+import {mobileRootClassName} from "./mobile-styles";
 
 const [Provider, useIsPhone] = createContext<boolean>("PhoneContext", false);
 
@@ -23,36 +24,43 @@ function isVerticalMobileBreakpointDisabled() {
   return urlParams.has("no-vertical-mobile-breakpoint");
 }
 
-export const isPhoneApp = Boolean(
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore - injected by consumer app
-  window.__FIBERY_MOBILE_APP_API
-);
+export const isPhoneApp = () =>
+  Boolean(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - injected by consumer app
+    window.__FIBERY_MOBILE_APP_API
+  );
 
 export const phoneMediaQuery = isVerticalMobileBreakpointDisabled()
   ? "(max-width: 450px)"
   : "(max-width: 450px), (max-height: 450px)";
 
 export function isPhoneMode() {
-  return isPhoneApp || getMediaQueryList(phoneMediaQuery).matches;
+  return isPhoneApp() || getMediaQueryList(phoneMediaQuery).matches;
 }
 
 export function IsPhoneProvider({children}: {children: ReactNode}) {
   const isPhone = useIsMediaQueryMatched(phoneMediaQuery);
   useLayoutEffect(() => {
     const htmlElement = document.querySelector("html");
-    if (!htmlElement || isPhoneApp) {
+    if (!htmlElement || isPhoneApp()) {
+      if (htmlElement) {
+        htmlElement.classList.add(mobileRootClassName);
+        return () => {
+          htmlElement.classList.remove(mobileRootClassName);
+        };
+      }
+      // eslint-disable-next-line consistent-return
       return;
     }
     if (isPhone) {
-      htmlElement.classList.add("fibery-mobile");
+      htmlElement.classList.add(mobileRootClassName);
     } else {
-      htmlElement.classList.remove("fibery-mobile");
+      htmlElement.classList.remove(mobileRootClassName);
     }
-    // eslint-disable-next-line consistent-return
     return () => {
-      htmlElement.classList.remove("fibery-mobile");
+      htmlElement.classList.remove(mobileRootClassName);
     };
   }, [isPhone]);
-  return <Provider value={isPhoneApp || isPhone}>{children}</Provider>;
+  return <Provider value={isPhoneApp() || isPhone}>{children}</Provider>;
 }

package/src/use-on-screen-keyboard-data.tsx

@@ -1,7 +1,7 @@
 import {ReactNode, useEffect, useState} from "react";
 import {createContext} from "@fibery/react/src/create-context";
 import _ from "lodash";
-import {useIsPhone} from "./use-is-phone";
+import {isPhoneApp} from "./use-is-phone";
 import {keyboardHeightVar, mobileKeyboardOpenClassName} from "./mobile-styles";
 
 const defaultKeyboardHeight = 350;
@@ -17,13 +17,12 @@ const [IsOnScreenKeyboardOpenedValueProvider, useIsOnScreenKeyboardOpened] = cre
 );
 
 export function OnScreenKeyboardContextProvider({children}: {children: ReactNode}) {
-  const isPhone = useIsPhone();
   const [keyboardHeight, setKeyboardHeight] = useState<number>(defaultKeyboardHeight);
   const [keyboardVisible, setKeyboardVisible] = useState<boolean>(false);
   const [initialViewPortHeight] = useState(() => window.visualViewport?.height || 0);
   useEffect(() => {
     const viewport = window.visualViewport;
-    if (!viewport || !isPhone) {
+    if (!viewport || !isPhoneApp()) {
       return _.noop;
     }
 
@@ -55,7 +54,7 @@ export function OnScreenKeyboardContextProvider({children}: {children: ReactNode
     return () => {
       viewport.removeEventListener("resize", viewportHandler);
     };
-  }, [initialViewPortHeight, isPhone, keyboardHeight, keyboardVisible]);
+  }, [initialViewPortHeight, keyboardHeight, keyboardVisible]);
   return (
     <OnScreenKeyboardHeightValueProvider value={keyboardHeight}>
       <IsOnScreenKeyboardOpenedValueProvider value={keyboardVisible}>{children}</IsOnScreenKeyboardOpenedValueProvider>