@fibery/ui-kit 1.37.0 → 1.38.0

package/src/icons/svg/richeditor/history/redo.svg

@@ -1,2 +1,3 @@
-<?xml version="1.0" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon"><path d="M15.05 11.225C13.5986 9.80981 11.6485 9.0226 9.62138 9.03351C7.59423 9.04443 5.65279 9.85259 4.21667 11.2833C3.50854 11.9851 2.94262 12.817 2.55 13.7333L2.45 14H0.666666C0.766666 13.6917 0.874998 13.3833 0.999998 13.0833C1.59463 11.6717 2.52608 10.4273 3.7129 9.45892C4.89971 8.49054 6.30572 7.82772 7.80795 7.52843C9.31017 7.22913 10.8629 7.30248 12.3302 7.74206C13.7975 8.18164 15.1348 8.97406 16.225 10.05L19 7.275V14H12.275L15.05 11.225Z" class="richEditorIcons"></path></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.64001 11.3477C4.64001 8.94531 6.26302 7.28711 8.91152 7.28711H12.3861L13.7279 7.3457L12.7669 6.54883L11.4369 5.24805C11.2962 5.11328 11.2025 4.94922 11.2025 4.7207C11.2025 4.30469 11.4955 4 11.9349 4C12.1283 4 12.3275 4.08203 12.4798 4.22852L15.7728 7.48633C15.9193 7.62695 16.0013 7.83789 16.0013 8.03711C16.0013 8.24219 15.9193 8.45312 15.7728 8.59375L12.4798 11.8457C12.3275 11.9922 12.1283 12.0801 11.9349 12.0801C11.4955 12.0801 11.2025 11.7695 11.2025 11.3535C11.2025 11.125 11.2962 10.9609 11.4369 10.8262L12.7669 9.52539L13.7279 8.72852L12.3861 8.79297H8.92321C7.14781 8.79297 6.12242 9.83008 6.12242 11.3125C6.12242 12.7891 7.14781 13.8555 8.92321 13.8555H10.3119C10.7513 13.8555 11.0736 14.1953 11.0736 14.6113C11.0736 15.0215 10.7513 15.3613 10.3119 15.3613H8.84702C6.23962 15.3613 4.64001 13.7793 4.64001 11.3477Z" />
+</svg>

package/src/icons/svg/richeditor/history/undo.svg

@@ -1,2 +1,3 @@
-<?xml version="1.0" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon"><path d="M4.95 11.225C6.40144 9.80981 8.35147 9.0226 10.3786 9.03351C12.4058 9.04443 14.3472 9.85259 15.7833 11.2833C16.4915 11.9851 17.0574 12.817 17.45 13.7333L17.55 14H19.3333C19.2333 13.6917 19.125 13.3833 19 13.0833C18.4054 11.6717 17.4739 10.4273 16.2871 9.45892C15.1003 8.49054 13.6943 7.82772 12.1921 7.52843C10.6898 7.22913 9.13715 7.30248 7.66982 7.74206C6.2025 8.18164 4.86524 8.97406 3.775 10.05L1 7.275V14H7.725L4.95 11.225Z" class="richEditorIcons"></path></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3613 11.3477C15.3613 8.94531 13.7383 7.28711 11.0898 7.28711H7.61523L6.27344 7.3457L7.23438 6.54883L8.56445 5.24805C8.70508 5.11328 8.79883 4.94922 8.79883 4.7207C8.79883 4.30469 8.50586 4 8.06641 4C7.87305 4 7.67383 4.08203 7.52148 4.22852L4.22852 7.48633C4.08203 7.62695 4 7.83789 4 8.03711C4 8.24219 4.08203 8.45312 4.22852 8.59375L7.52148 11.8457C7.67383 11.9922 7.87305 12.0801 8.06641 12.0801C8.50586 12.0801 8.79883 11.7695 8.79883 11.3535C8.79883 11.125 8.70508 10.9609 8.56445 10.8262L7.23438 9.52539L6.27344 8.72852L7.61523 8.79297H11.0781C12.8535 8.79297 13.8789 9.83008 13.8789 11.3125C13.8789 12.7891 12.8535 13.8555 11.0781 13.8555H9.68945C9.25 13.8555 8.92773 14.1953 8.92773 14.6113C8.92773 15.0215 9.25 15.3613 9.68945 15.3613H11.1543C13.7617 15.3613 15.3613 13.7793 15.3613 11.3477Z" />
+</svg>

package/src/icons/svg/search-filled.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.875 8.75C13.875 5.91954 11.5805 3.625 8.75 3.625C5.91954 3.625 3.625 5.91954 3.625 8.75C3.625 11.5805 5.91954 13.875 8.75 13.875C10.1655 13.875 11.4453 13.3027 12.374 12.374C13.3026 11.4454 13.875 10.1654 13.875 8.75ZM16.125 8.75C16.125 10.3801 15.5937 11.8867 14.6982 13.1074L18.2959 16.7041C18.7352 17.1435 18.7352 17.8566 18.2959 18.2959C17.8565 18.7352 17.1434 18.7352 16.7041 18.2959L13.1074 14.6982C11.8867 15.5937 10.3801 16.125 8.75 16.125C4.6769 16.125 1.375 12.8231 1.375 8.75C1.375 4.6769 4.6769 1.375 8.75 1.375C12.8231 1.375 16.125 4.6769 16.125 8.75Z" />
+</svg>

package/src/icons/svg/settings-filled.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 1.34961C10.8958 1.35078 11.2824 1.47186 11.6084 1.69629C11.9343 1.92065 12.1847 2.23836 12.3272 2.60742L12.7539 3.70898L14.0703 4.4668L15.2568 4.28613C15.6429 4.23378 16.036 4.29728 16.3858 4.46875C16.7355 4.64028 17.0266 4.91185 17.2217 5.24902L17.2236 5.25293L17.707 6.09961C17.9066 6.44122 17.9986 6.83577 17.9707 7.23047C17.9427 7.62564 17.7961 8.0032 17.5498 8.31348L16.8242 9.23828V10.7559L17.5723 11.6836C17.8198 11.9944 17.967 12.3732 17.9951 12.7695C18.0231 13.1642 17.931 13.5588 17.7315 13.9004L17.2481 14.7471L17.2461 14.751C17.0511 15.0881 16.7599 15.3597 16.4102 15.5312C16.0604 15.7027 15.6672 15.7662 15.2813 15.7139L15.2686 15.7129L14.0947 15.5332L12.7783 16.291L12.3516 17.3916C12.2091 17.7609 11.9589 18.0792 11.6328 18.3037C11.3068 18.5282 10.9203 18.6492 10.5244 18.6504H9.50001C9.10419 18.6492 8.71765 18.5281 8.39161 18.3037C8.06583 18.0794 7.81537 17.7615 7.67286 17.3926L7.24611 16.291L5.9297 15.5332L4.74318 15.7139C4.35716 15.7662 3.96405 15.7027 3.61427 15.5312C3.26453 15.3597 2.97339 15.0882 2.77833 14.751L2.77638 14.7471L2.29298 13.9004C2.09345 13.5588 2.00138 13.1642 2.02931 12.7695C2.05734 12.3744 2.20395 11.9968 2.45021 11.6865L3.17579 10.7617V9.24414L2.42775 8.31641C2.18022 8.00564 2.03301 7.62676 2.0049 7.23047C1.97697 6.83577 2.06903 6.44122 2.26857 6.09961L2.75392 5.24902C2.94895 4.91188 3.24016 4.64028 3.58986 4.46875C3.93974 4.29723 4.33361 4.2337 4.71974 4.28613L4.73146 4.28711L5.90822 4.4668L7.24708 3.70703L7.67286 2.6084C7.81537 2.23947 8.06583 1.92059 8.39161 1.69629C8.71765 1.47185 9.10418 1.35078 9.50001 1.34961H10.5ZM10 7.25C8.48124 7.25001 7.25001 8.48122 7.25001 10C7.25001 11.5188 8.48124 12.75 10 12.75C11.5188 12.75 12.75 11.5188 12.75 10C12.75 8.48122 11.5188 7.25 10 7.25Z" />
+</svg>

package/src/icons/svg/slide-menu-filled.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18 5.75c0-1.51878-1.2312-2.75-2.75-2.75h-10.5c-1.51878 0-2.75 1.23122-2.75 2.75v8.5c0 1.5188 1.23122 2.75 2.75 2.75h10.5c1.5188 0 2.75-1.2312 2.75-2.75zm-11-1.25c.69036 0 1.25.55964 1.25 1.25v8.5c0 .6904-.55964 1.25-1.25 1.25h-2.25c-.69036 0-1.25-.5596-1.25-1.25v-8.5c0-.69036.55964-1.25 1.25-1.25z" fill-rule="evenodd"/></svg>

package/src/icons/svg/type/date.svg

@@ -1,2 +1,3 @@
-<?xml version="1.0" standalone="no"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon"><path d="M15.6 3.6H14V2.8C14 2.58783 13.9157 2.38434 13.7657 2.23431C13.6157 2.08429 13.4122 2 13.2 2C12.9878 2 12.7843 2.08429 12.6343 2.23431C12.4843 2.38434 12.4 2.58783 12.4 2.8V3.6H7.6V2.8C7.6 2.58783 7.51571 2.38434 7.36569 2.23431C7.21566 2.08429 7.01217 2 6.8 2C6.58783 2 6.38434 2.08429 6.23431 2.23431C6.08429 2.38434 6 2.58783 6 2.8V3.6H4.4C3.76348 3.6 3.15303 3.85286 2.70294 4.30294C2.25286 4.75303 2 5.36348 2 6V15.6C2 16.2365 2.25286 16.847 2.70294 17.2971C3.15303 17.7471 3.76348 18 4.4 18H15.6C16.2365 18 16.847 17.7471 17.2971 17.2971C17.7471 16.847 18 16.2365 18 15.6V6C18 5.36348 17.7471 4.75303 17.2971 4.30294C16.847 3.85286 16.2365 3.6 15.6 3.6ZM16.4 15.6C16.4 15.8122 16.3157 16.0157 16.1657 16.1657C16.0157 16.3157 15.8122 16.4 15.6 16.4H4.4C4.18783 16.4 3.98434 16.3157 3.83431 16.1657C3.68429 16.0157 3.6 15.8122 3.6 15.6V10H16.4V15.6ZM16.4 8.4H3.6V6C3.6 5.78783 3.68429 5.58434 3.83431 5.43431C3.98434 5.28429 4.18783 5.2 4.4 5.2H6V6C6 6.21217 6.08429 6.41566 6.23431 6.56569C6.38434 6.71571 6.58783 6.8 6.8 6.8C7.01217 6.8 7.21566 6.71571 7.36569 6.56569C7.51571 6.41566 7.6 6.21217 7.6 6V5.2H12.4V6C12.4 6.21217 12.4843 6.41566 12.6343 6.56569C12.7843 6.71571 12.9878 6.8 13.2 6.8C13.4122 6.8 13.6157 6.71571 13.7657 6.56569C13.9157 6.41566 14 6.21217 14 6V5.2H15.6C15.8122 5.2 16.0157 5.28429 16.1657 5.43431C16.3157 5.58434 16.4 5.78783 16.4 6V8.4Z" class="typeIcons"></path></svg>
+<svg height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6 3H14V1.80391C14 1.59174 13.9157 1.38825 13.7657 1.23822C13.6157 1.0882 13.4122 1.00391 13.2 1.00391C12.9878 1.00391 12.7843 1.0882 12.6343 1.23822C12.4843 1.38825 12.4 1.59174 12.4 1.80391V3H7.6V1.80391C7.6 1.59174 7.51571 1.38825 7.36569 1.23822C7.21566 1.0882 7.01217 1.00391 6.8 1.00391C6.58783 1.00391 6.38434 1.0882 6.23431 1.23822C6.08429 1.38825 6 1.59174 6 1.80391V3H4.4C3.76348 3 3.15303 3.25286 2.70294 3.70294C2.25286 4.15303 2 4.76348 2 5.4V14.6C2 15.2365 2.25286 15.847 2.70294 16.2971C3.15303 16.7471 3.76348 17 4.4 17H15.6C16.2365 17 16.847 16.7471 17.2971 16.2971C17.7471 15.847 18 15.2365 18 14.6V5.4C18 4.76348 17.7471 4.15303 17.2971 3.70294C16.847 3.25286 16.2365 3 15.6 3ZM16.1657 15.1657C16.3157 15.0157 16.4 14.8122 16.4 14.6V9H3.6V14.6C3.6 14.8122 3.68429 15.0157 3.83431 15.1657C3.98434 15.3157 4.18783 15.4 4.4 15.4H15.6C15.8122 15.4 16.0157 15.3157 16.1657 15.1657ZM3.6 7.4H16.4V5.4C16.4 5.18783 16.3157 4.98434 16.1657 4.83431C16.0157 4.68429 15.8122 4.6 15.6 4.6H4.4C4.18783 4.6 3.98434 4.68429 3.83431 4.83431C3.68429 4.98434 3.6 5.18783 3.6 5.4V7.4Z" />
+</svg>

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/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

@@ -5,18 +5,38 @@ import {
   sidebarMenuItemHeightVar,
   sidebarMenuIconSizeVar,
   textStyles,
+  menuItemHeightVar,
 } from "./design-system";
-import {mobileRootClassName} from "./mobile-styles";
+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, 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;
@@ -152,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}
@@ -159,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",
@@ -204,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/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
+  );
+}

package/src/mobile-styles.ts

@@ -1,2 +1,10 @@
 export const mobileRootClassName = "fibery-mobile";
 export const mobileRootSelector = `.${mobileRootClassName}`;
+export const mobileKeyboardOpenClassName = "fibery-mobile-keyboard-open";
+export const mobileKeyboardOpenSelector = `.${mobileKeyboardOpenClassName}`;
+export const keyboardHeightVar = "--fibery-on-screen-keyboard-height";
+export const safeAreaInsetLeftVar = "--safe-area-inset-left";
+export const safeAreaInsetRightVar = "--safe-area-inset-right";
+export const safeAreaInsetTopVar = "--safe-area-inset-top";
+export const safeAreaInsetBottomVar = "--safe-area-inset-bottom";
+export const keyboardInsetBottomVar = "--keyboard-inset-bottom";

package/src/modal-menu/contexts/modal-menu-context.tsx

@@ -0,0 +1,22 @@
+import {createContext} from "@fibery/react/src/create-context";
+
+export type SubmenuItem = {
+  id: string;
+  title: string;
+};
+
+export type ModalMenuContext = {
+  open: boolean;
+  title: string;
+  submenuStack: SubmenuItem[];
+  contentContainer: HTMLDivElement | null;
+  setContentContainer: (el: HTMLDivElement | null) => void;
+  onOpenSubmenu: (item: SubmenuItem) => void;
+  onNavigateBack: () => void;
+  onOpenChange: (open: boolean) => void;
+  height?: string;
+};
+
+const [ModalMenuContextProvider, useModalMenu] = createContext<ModalMenuContext>("ModalMenuContext");
+
+export {ModalMenuContextProvider, useModalMenu};