@fibery/ui-kit 1.37.0 → 1.38.1

package/src/tab-nav/tab-nav.tsx

@@ -14,6 +14,7 @@ import {
 import {forwardRef, ReactNode, RefObject, useLayoutEffect, useRef} from "react";
 import {border, fontWeight, space, textStyles, themeVars} from "../design-system";
 import {ellipsis} from "../styles-utils";
+import {mobileRootSelector} from "../mobile-styles";
 import {TooltipIfOverflown} from "../tooltip-if-overflown";
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {useResizeObserver} from "@fibery/react/src/use-resize-observer";
@@ -35,7 +36,11 @@ const tabNavItem = css`
   list-style: none;
 `;
 
-const tabButton = css`
+const tabNavItemWide = css`
+  flex: 1 0 0;
+`;
+
+export const tabButton = css`
   all: unset;
   display: flex;
   align-items: center;
@@ -54,23 +59,40 @@ const tabButton = css`
   font-weight: ${fontWeight.medium};
   line-height: 16px;
 
-  &:hover,
-  &:focus-visible {
-    background-color: ${themeVars.colorBgTabHover};
-    color: ${themeVars.textColor};
+  @media (any-hover: hover) {
+    &:hover {
+      background-color: ${themeVars.colorBgTabHover};
+      color: ${themeVars.textColor};
+    }
   }
 
   &:focus-visible {
+    color: ${themeVars.textColor};
+    background-color: ${themeVars.colorBgTabHover};
     outline: 2px solid ${themeVars.colorBorderNeutralFocusRing};
   }
 
   &[data-active] {
     color: ${themeVars.textColor};
   }
+
+  .${tabNavItemWide} & {
+    justify-content: center;
+    text-align: center;
+  }
+
+  ${mobileRootSelector} & {
+    padding: ${space.s4}px ${space.s8}px ${space.s8}px ${space.s4}px;
+    font-size: ${textStyles.regular.fontSize}px;
+  }
 `;
 
 const tabNavButtonText = css`
   padding: 0 ${space.s4}px;
+
+  ${mobileRootSelector} & {
+    padding: 0 ${space.s6}px;
+  }
 `;
 
 const tabNavIndicatorTrack = css`
@@ -145,15 +167,15 @@ const useTabNavIndicator = ({active, itemRef}: {active?: boolean; itemRef: RefOb
   useResizeObserver(itemRef, () => updateIndicator());
 };
 
-export const TabNavItem = forwardRef<HTMLLIElement, NavigationMenuItemProps & {active?: boolean}>(
-  ({className, children, active, ...props}, forwardedRef) => {
+export const TabNavItem = forwardRef<HTMLLIElement, NavigationMenuItemProps & {active?: boolean; wide?: boolean}>(
+  ({className, children, active, wide, ...props}, forwardedRef) => {
     const itemRef = useRef(null);
     const ref = useComposedRefs(itemRef, forwardedRef);
 
     useTabNavIndicator({active, itemRef});
 
     return (
-      <NavigationMenuItem ref={ref} className={cx(tabNavItem, className)} {...props}>
+      <NavigationMenuItem ref={ref} className={cx(tabNavItem, wide && tabNavItemWide, className)} {...props}>
         {children}
       </NavigationMenuItem>
     );
@@ -165,9 +187,13 @@ export const TabNavLink = forwardRef<
   Omit<NavigationMenuLinkProps, "asChild"> & {
     before?: ReactNode;
     after?: ReactNode;
+    wide?: boolean;
     itemClassName?: string;
   }
->(function TabNavLink({children, className, itemClassName, active, before, after, href, ...linkProps}, forwardedRef) {
+>(function TabNavLink(
+  {children, className, itemClassName, active, wide, before, after, href, ...linkProps},
+  forwardedRef
+) {
   const renderAsButton = typeof href === "undefined";
 
   const Component = renderAsButton ? "button" : "a";
@@ -178,7 +204,7 @@ export const TabNavLink = forwardRef<
   return (
     <TooltipIfOverflown title={children}>
       {({setNode}) => (
-        <TabNavItem className={itemClassName} active={active}>
+        <TabNavItem className={itemClassName} active={active} wide={wide}>
           <NavigationMenuLink
             ref={forwardedRef}
             className={cx(tabButton, className)}

package/src/toast/primitives.tsx

@@ -5,6 +5,12 @@ import {ElementRef, forwardRef} from "react";
 import {IconButton} from "../button/icon-button";
 import {border, space, textStyles, themeVars, transition} from "../design-system";
 import CloseIcon from "../icons/react/Close";
+import {
+  safeAreaInsetBottomVar,
+  safeAreaInsetLeftVar,
+  safeAreaInsetRightVar,
+  safeAreaInsetTopVar,
+} from "../mobile-styles";
 
 const viewportCss = css`
   position: fixed;
@@ -17,7 +23,8 @@ const viewportCss = css`
   gap: ${space.s16}px;
   margin: 0;
   z-index: 1010; // inherited from old toast implementation
-  padding: 0;
+  padding: var(${safeAreaInsetTopVar}) var(${safeAreaInsetRightVar}) var(${safeAreaInsetBottomVar})
+    var(${safeAreaInsetLeftVar});
   list-style: none;
 
   transition: bottom ${transition}; // bottom may change dynamically

package/src/toggle-button/round-toggle-button.tsx

@@ -0,0 +1,23 @@
+import {ComponentRef, forwardRef} from "react";
+import {ToggleButton, ToggleButtonProps} from "./toggle-button";
+import {css, cx} from "@linaria/core";
+
+const roundToggleButtonCss = css`
+  &:is(&) {
+    border-radius: 100%;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    justify-content: center;
+  }
+`;
+
+export const RoundToggleButton = forwardRef<ComponentRef<typeof ToggleButton>, Omit<ToggleButtonProps, "iconStart">>(
+  function RoundToggleButton({children, className, ...props}, ref) {
+    return (
+      <ToggleButton ref={ref} className={cx(roundToggleButtonCss, className)} {...props}>
+        {children}
+      </ToggleButton>
+    );
+  }
+);

package/src/toggle-button/toggle-button-group.tsx

@@ -0,0 +1,34 @@
+import {css, cx} from "@linaria/core";
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+  ToggleGroupItemProps,
+  ToggleGroupMultipleProps,
+  ToggleGroupSingleProps,
+} from "@radix-ui/react-toggle-group";
+import {ComponentRef, forwardRef} from "react";
+import {ToggleButton, ToggleButtonProps} from "./toggle-button";
+import {space} from "../design-system";
+
+export const toggleButtonGroupCss = css`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const ToggleButtonGroup = forwardRef<
+  ComponentRef<typeof ToggleGroup>,
+  (ToggleGroupSingleProps | ToggleGroupMultipleProps) & {gap?: number}
+>(function ToggleButtonGroup({className, gap = space.s4, ...props}, ref) {
+  return <ToggleGroup ref={ref} style={{gap}} className={cx(toggleButtonGroupCss, className)} {...props} />;
+});
+
+export const ToggleButtonGroupItem = forwardRef<
+  ComponentRef<typeof ToggleGroupItem>,
+  ToggleGroupItemProps & ToggleButtonProps
+>(function ToggleButtonGroupItem({className, children, asChild, ...props}, ref) {
+  return (
+    <ToggleGroupItem ref={ref} className={className} {...props} asChild>
+      {asChild ? children : <ToggleButton>{children}</ToggleButton>}
+    </ToggleGroupItem>
+  );
+});

package/src/toggle-button/toggle-button.tsx

@@ -0,0 +1,164 @@
+import {css, cx} from "@linaria/core";
+import {Toggle, ToggleProps} from "@radix-ui/react-toggle";
+import {forwardRef} from "react";
+import {border, space, textStyles, themeVars} from "../design-system";
+import {iconColorVar, iconSizeVar} from "../icons/Icon";
+
+export const toggleButtonCss = css`
+  button:where(&) {
+    all: unset;
+  }
+
+  padding-inline: ${space.s6}px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  font-size: ${textStyles.small.fontSize}px;
+  border-radius: ${border.radius8}px;
+
+  transition-property: border, background-color, color, opacity, box-shadow;
+  transition-duration: 0.15s;
+
+  color: ${themeVars.textColor};
+  ${iconColorVar}: ${themeVars.colorIconButtonGhostNeutral};
+
+  ${iconSizeVar}: 16px;
+
+  border: 1.5px solid ${themeVars.colorBorderReactionsHover};
+  background-color: ${themeVars.colorBgReactionsDefault};
+
+  &[aria-readonly="true"] {
+    background-color: ${themeVars.colorBgReactionsHover};
+    border-color: ${themeVars.colorBgReactionsHover};
+  }
+
+  cursor: pointer;
+  line-height: 16px;
+  user-select: none;
+
+  &[data-size="medium"] {
+    min-height: 28px;
+  }
+
+  &[data-size="large"] {
+    min-height: 32px;
+    padding-inline: 7px;
+  }
+
+  &:not(:disabled, [aria-readonly="true"]) {
+    &:hover {
+      background-color: ${themeVars.colorBgReactionsHover};
+      border-color: ${themeVars.colorBorderReactionsHover};
+    }
+
+    &:is(:active, [aria-expanded="true"]) {
+      background-color: ${themeVars.colorBgReactionsHover};
+      border-color: ${themeVars.colorBorderReactionsHover};
+    }
+  }
+
+  &:disabled,
+  &[aria-readonly="true"] {
+    cursor: default;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    background-color: ${themeVars.colorBgReactionsHover};
+    outline: 2px solid ${themeVars.colorBorderReactionsHover};
+  }
+
+  &:is([aria-pressed="true"], [aria-checked="true"]) {
+    color: ${themeVars.colorTextReactionsSelected};
+    ${iconColorVar}: ${themeVars.colorIconButtonGhostAccent};
+    background-color: ${themeVars.colorBgReactionsSelectedDefault};
+    border-color: ${themeVars.colorBorderReactionsSelectedDefault};
+
+    &[aria-readonly="true"] {
+      background-color: ${themeVars.colorBgReactionsSelectedDefault};
+      border-color: ${themeVars.colorBgReactionsSelectedDefault};
+    }
+
+    &:not(:disabled, [aria-readonly="true"]) {
+      &:hover {
+        background-color: ${themeVars.colorBgReactionsSelectedHover};
+        border-color: ${themeVars.colorBorderReactionsSelectedHover};
+      }
+
+      &:active {
+        background-color: ${themeVars.colorBgReactionsSelectedDefault};
+        border-color: ${themeVars.colorBorderReactionsSelectedHover};
+      }
+    }
+  }
+`;
+
+export const toggleButtonCssWithIconStart = css`
+  padding-left: ${space.s4}px;
+`;
+
+export const toggleButtonContent = css`
+  display: flex;
+  align-items: center;
+  gap: ${space.s4}px;
+  height: 100%;
+
+  transition-property: opacity;
+  transition-duration: 0.15s;
+
+  .${toggleButtonCss}:is(:active, [aria-expanded="true"]) > & {
+    opacity: 0.8;
+  }
+
+  .${toggleButtonCss}:disabled > & {
+    opacity: 0.6;
+  }
+
+  overflow: hidden;
+`;
+
+export type ToggleButtonVariant = "outline";
+export type ToggleButtonSize = "small" | "medium" | "large";
+
+export type ToggleButtonProps = {
+  iconStart?: React.ReactNode;
+  variant?: ToggleButtonVariant;
+  size?: ToggleButtonSize;
+  readOnly?: boolean;
+} & Omit<ToggleProps, "asChild">;
+
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  (
+    {
+      className,
+      iconStart,
+      size = "small",
+      variant = "outline",
+      children,
+      "aria-readonly": ariaReadonly,
+      readOnly = ariaReadonly,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    return (
+      <Toggle
+        ref={ref}
+        className={cx(toggleButtonCss, iconStart && toggleButtonCssWithIconStart, className)}
+        data-variant={variant}
+        data-size={size}
+        aria-readonly={readOnly}
+        {...props}
+      >
+        <div className={toggleButtonContent}>
+          {iconStart}
+          {children}
+        </div>
+      </Toggle>
+    );
+  }
+);

package/src/toggle.tsx

@@ -2,9 +2,10 @@ import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
 import chroma from "chroma-js";
 import {ComponentProps, FC, ReactNode} from "react";
-import {layout, space, textStyles, transition} from "./design-system";
+import {space, textStyles, transition} from "./design-system";
 import _ from "lodash";
 import SpinnerIcon from "./icons/react/Spinner";
+import {mobileRootSelector} from "./mobile-styles";
 
 const toggleIconHeightVar = "--fibery-toggle-icon-height";
 const toggleIconWidthVar = "--fibery-toggle-icon-width";
@@ -26,15 +27,16 @@ const Input = styled.input<{outlineColor: string}>`
   }
 
   &:focus-visible {
-    box-shadow: ${({outlineColor}) => `inset 0 0 0 1px ${outlineColor}`};
+    outline: ${({outlineColor}) => `2px solid ${outlineColor}`};
+    outline-offset: 1px;
   }
 `;
 
 const Label = styled.div<{labelPosition: "last" | "first"; disabled?: boolean}>`
+  display: flex;
   margin-left: ${({labelPosition}) => (labelPosition === "last" ? `${space.s8}px` : 0)};
   margin-right: ${({labelPosition}) => (labelPosition === "first" ? `${space.s8}px` : 0)};
   opacity: ${({disabled}) => (disabled ? 0.5 : 1)};
-  line-height: ${layout.checkboxSize}px;
   width: 100%;
   min-width: 0;
 `;
@@ -94,10 +96,16 @@ const toggleSize = {
   large: css`
     ${textStyles.regular}
     ${toggleIconHeightVar}: 18px;
+    ${mobileRootSelector} & {
+      ${textStyles.big}
+    }
   `,
   "extra-large": css`
     ${textStyles.regular}
     ${toggleIconHeightVar}: 20px;
+    ${mobileRootSelector} & {
+      ${textStyles.big}
+    }
   `,
 };
 const toggleSizeStyle = css`

package/src/tooltip.tsx

@@ -2,7 +2,6 @@ import {css, cx} from "@linaria/core";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import {forwardRef, type ReactNode, type SyntheticEvent} from "react";
 import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./design-system";
-import {ShortcutBadge} from "./shortcut-badge";
 
 const isFlagPresent = (flag: string) => new RegExp(`[?&]${flag}\\b`).test(window.location.search);
 
@@ -24,10 +23,10 @@ const descriptionStyle = css`
 `;
 
 export const tooltipStyle = css`
-  font-size: 13px;
+  font-size: 12px;
   color: ${themeVars.whiteColor};
   z-index: 100000;
-  min-height: 30px;
+  min-height: 28px;
   max-width: 300px;
   background-color: ${themeVars.tooltipBgColor};
   padding: ${space.s6}px ${space.s8}px;
@@ -76,27 +75,37 @@ const whiteBgStyle = css`
 `;
 
 export const TooltipTitle = ({children}: {children: ReactNode}) => <div className={titleStyle}>{children}</div>;
+
 export const TooltipDescription = ({children}: {children: ReactNode}) => (
   <div className={descriptionStyle}>{children}</div>
 );
 
-export const TooltipContent = ({title, shortcut}: {title: string; shortcut?: string}) => (
-  <div
-    className={css`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: ${space.s4}px;
-    `}
-  >
-    <TooltipTitle>{title}</TooltipTitle>
-    {shortcut ? (
-      <TooltipDescription>
-        <ShortcutBadge shortcut={shortcut} />
-      </TooltipDescription>
-    ) : null}
-  </div>
-);
+export const TooltipContent = ({
+  direction = "horizontal",
+  className,
+  ...rest
+}: {direction?: "horizontal" | "vertical"} & React.ComponentProps<"div">) => {
+  return (
+    <div
+      className={cx(
+        className,
+        direction === "horizontal"
+          ? css`
+              display: flex;
+              align-items: center;
+              gap: ${space.s8}px;
+            `
+          : css`
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              gap: ${space.s4}px;
+            `
+      )}
+      {...rest}
+    />
+  );
+};
 
 export const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> = (props) => (
   <TooltipPrimitive.Provider disableHoverableContent skipDelayDuration={150} {...props} />

package/src/type-badge.tsx

@@ -150,6 +150,7 @@ type TypeBadgeProps = {
   tooltip?: ReactNode;
   faded?: boolean;
   big?: boolean;
+  style?: CSSProperties;
   vertical?: boolean;
   className?: string;
   noTooltip?: boolean; // pass true to force disable tooltip for abbr
@@ -173,6 +174,7 @@ export const TypeBadge = memo(
       vertical = false,
       className,
       noTooltip,
+      style,
     },
     ref
   ) {
@@ -206,7 +208,8 @@ export const TypeBadge = memo(
       light2: baseColor,
     });
 
-    const style = {
+    const resultingStyle = {
+      ...style,
       [colorProp]: baseColor ? textBadgeColor : colors.inversedTextColor,
       //[colorProp]: baseColor ? getTextColor(baseColor) : colors.inversedTextColor,
       [colorBackgroundProp]: backgroundBadgeColor || colors.shades.opacity25,
@@ -220,7 +223,7 @@ export const TypeBadge = memo(
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         ref={ref}
-        style={style}
+        style={resultingStyle}
         className={cx(
           typeBadgeStyle,
           big ? bigTypeBadgeStaticStyle : compact ? compactTypeBadgeStaticStyle : normalTypeBadgeStaticStyle,

package/src/unit/styles.ts

@@ -146,14 +146,14 @@ export const unitContentContainerClassName = css`
 `;
 
 export const unitDescriptionClassName = css`
-  margin-bottom: ${space.s4}px;
+  margin-bottom: ${space.s1}px;
 `;
 
 export const fullUnitWrapperClassName = css`
   display: flex;
   align-items: center;
   padding: ${space.s6}px;
-  border-radius: ${space.s4 + space.s1}px;
+  border-radius: ${space.s5}px;
   background-color: ${themeVars.cardBg};
   margin-bottom: ${space.s4}px;
 `;

package/src/unit/unit-with-tooltip.tsx

@@ -31,7 +31,7 @@ export const UnitWithTooltip = ({children, title, description}: Props) => {
       // Had to use additional way to validate if we are still over unit
       if (isHoveredRef.current && unitElementRef.current && unitElementRef.current.matches(":hover")) {
         setShouldDisplayTooltip(true);
-        const intervalId = setInterval(() => {
+        const intervalId = window.setInterval(() => {
           if (isHoveredRef.current && unitElementRef.current) {
             if (!unitElementRef.current.matches(":hover")) {
               isHoveredRef.current = false;

package/src/use-is-phone.tsx

@@ -1,12 +1,58 @@
-import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
+import {ReactNode, useLayoutEffect} from "react";
 import {createContext} from "@fibery/react/src/create-context";
-import {ReactNode} from "react";
+import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
+import {getMediaQueryList} from "./media-query-utils";
 
 const [Provider, useIsPhone] = createContext<boolean>("PhoneContext", false);
 
 export {useIsPhone};
 
+declare global {
+  const __DISABLE_VERTICAL_MOBILE_BREAKPOINT__: boolean | undefined;
+}
+
+function isVerticalMobileBreakpointDisabled() {
+  // noinspection PointlessBooleanExpressionJS
+  if (
+    typeof __DISABLE_VERTICAL_MOBILE_BREAKPOINT__ !== "undefined" &&
+    __DISABLE_VERTICAL_MOBILE_BREAKPOINT__ === true
+  ) {
+    return true;
+  }
+  const urlParams = new URLSearchParams(window.location.search);
+  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 phoneMediaQuery = isVerticalMobileBreakpointDisabled()
+  ? "(max-width: 450px)"
+  : "(max-width: 450px), (max-height: 450px)";
+
+export function isPhoneMode() {
+  return isPhoneApp || getMediaQueryList(phoneMediaQuery).matches;
+}
+
 export function IsPhoneProvider({children}: {children: ReactNode}) {
-  const isPhone = useIsMediaQueryMatched("(max-width: 440px), (max-height: 440px)");
-  return <Provider value={isPhone}>{children}</Provider>;
+  const isPhone = useIsMediaQueryMatched(phoneMediaQuery);
+  useLayoutEffect(() => {
+    const htmlElement = document.querySelector("html");
+    if (!htmlElement || isPhoneApp) {
+      return;
+    }
+    if (isPhone) {
+      htmlElement.classList.add("fibery-mobile");
+    } else {
+      htmlElement.classList.remove("fibery-mobile");
+    }
+    // eslint-disable-next-line consistent-return
+    return () => {
+      htmlElement.classList.remove("fibery-mobile");
+    };
+  }, [isPhone]);
+  return <Provider value={isPhoneApp || isPhone}>{children}</Provider>;
 }

package/src/use-is-support-hover.ts

@@ -1,5 +1,5 @@
 import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
 
 export function useIsSupportHover() {
-  return !useIsMediaQueryMatched("(any-hover: none)");
+  return useIsMediaQueryMatched("(any-hover: hover)");
 }

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

@@ -0,0 +1,66 @@
+import {ReactNode, useEffect, useState} from "react";
+import {createContext} from "@fibery/react/src/create-context";
+import _ from "lodash";
+import {useIsPhone} from "./use-is-phone";
+import {keyboardHeightVar, mobileKeyboardOpenClassName} from "./mobile-styles";
+
+const defaultKeyboardHeight = 350;
+
+const [OnScreenKeyboardHeightValueProvider, useOnScreenKeyboardHeight] = createContext<number>(
+  "OnScreenKeyboardHeightProvider",
+  defaultKeyboardHeight
+);
+
+const [IsOnScreenKeyboardOpenedValueProvider, useIsOnScreenKeyboardOpened] = createContext<boolean>(
+  "IsOnScreenKeyboardOpenedValueProvider",
+  false
+);
+
+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) {
+      return _.noop;
+    }
+
+    function viewportHandler() {
+      if (viewport) {
+        // console.log({height: viewport.height, initialViewPortHeight, windowHeight: window.innerHeight});
+        // Calculate keyboard height as difference between window height and viewport height
+        const calculatedHeight = Math.max(0, initialViewPortHeight - viewport.height);
+        if (calculatedHeight && keyboardHeight !== calculatedHeight && calculatedHeight > 200) {
+          setKeyboardHeight(calculatedHeight);
+          document.body.style.setProperty(keyboardHeightVar, `${calculatedHeight}px`);
+        }
+        if (viewport.height !== initialViewPortHeight && !keyboardVisible) {
+          const htmlElement = document.querySelector("html");
+          htmlElement?.classList.add(mobileKeyboardOpenClassName);
+          setKeyboardVisible(true);
+        } else if (viewport.height === initialViewPortHeight && keyboardVisible) {
+          setKeyboardVisible(false);
+          const htmlElement = document.querySelector("html");
+          htmlElement?.classList.remove(mobileKeyboardOpenClassName);
+        }
+      }
+    }
+
+    viewport.addEventListener("resize", viewportHandler);
+    // Initial calculation
+    viewportHandler();
+
+    return () => {
+      viewport.removeEventListener("resize", viewportHandler);
+    };
+  }, [initialViewPortHeight, isPhone, keyboardHeight, keyboardVisible]);
+  return (
+    <OnScreenKeyboardHeightValueProvider value={keyboardHeight}>
+      <IsOnScreenKeyboardOpenedValueProvider value={keyboardVisible}>{children}</IsOnScreenKeyboardOpenedValueProvider>
+    </OnScreenKeyboardHeightValueProvider>
+  );
+}
+
+export {useOnScreenKeyboardHeight, useIsOnScreenKeyboardOpened};