@fibery/ui-kit 1.38.0 → 1.38.2

package/src/select/components/menu-list-virtualized.tsx

@@ -5,6 +5,8 @@ import {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
 import {ItemContent, Virtuoso, VirtuosoHandle} from "react-virtuoso";
 import {layout} from "../../../src/design-system";
 import {GroupBase, ReactSelectRefContext} from "../util";
+import {useSelectControlSettings} from "../select-control-settings-context";
+import {useIsPhone} from "../../use-is-phone";
 
 const PADDING_BLOCK_HEIGHT = 6;
 
@@ -72,6 +74,8 @@ export function MenuListVirtualized<
   Group extends GroupBase<Option> = GroupBase<Option>
 >(props: MenuListProps<Option, IsMulti, Group>) {
   const {children, focusedOption, innerRef, maxHeight, theme, getStyles, cx, selectProps} = props;
+  const isPhone = useIsPhone();
+  const {inPopover} = useSelectControlSettings();
   const virtuoso = useRef<VirtuosoHandle>(null);
 
   // options props come non-filtered, and we have insufficient info (props) to render groups and options from here.
@@ -195,8 +199,8 @@ export function MenuListVirtualized<
         ref={virtuoso}
         // in reality only HTMLDiveElement | null will appear here. We do not use Virtuoso's useWindowScroll prop
         scrollerRef={innerRef as (ref: HTMLElement | Window | null) => void}
-        style={{height: menuHeight}}
-        fixedItemHeight={layout.menuItemHeight}
+        style={isPhone && inPopover ? undefined : {height: menuHeight}}
+        fixedItemHeight={isPhone ? layout.mobileMenuItemHeight : layout.menuItemHeight}
         data={flattenChildren}
         totalCount={flattenChildren.length}
         itemContent={drawListElement}

package/src/select/components/option.tsx

@@ -7,9 +7,13 @@ import {ListRowContent, ListRowSurface} from "../../lists/list-row-surface";
 import {TooltipIfOverflown} from "../../tooltip-if-overflown";
 import {GroupBase} from "../index";
 import {isPureTextChildren} from "../util";
+import {mobileRootSelector} from "../../mobile-styles";
 
 export const OptionNulledVitualizedStyles = {
   height: layout.menuItemHeight,
+  [`${mobileRootSelector} &`]: {
+    height: layout.mobileMenuItemHeight,
+  },
 };
 export const OptionNulledStyles = {
   minHeight: layout.menuItemHeight,

package/src/select/select-control-settings-context.tsx

@@ -1,6 +1,10 @@
 import {createContext, ReactNode, useContext, useMemo} from "react";
 
-const SelectControlSettings = createContext<{getPopupContainerElement?: () => HTMLElement | null; zIndex?: number}>({});
+const SelectControlSettings = createContext<{
+  getPopupContainerElement?: () => HTMLElement | null;
+  zIndex?: number;
+  inPopover?: boolean;
+}>({});
 
 // Overrides zIndex and getPopupContainerElement for all selects, except select-in-popover.
 // It has more priority than "menuPortalTarget" prop. Use at your own risk!
@@ -8,12 +12,17 @@ export function SelectControlSettingsProvider({
   children,
   getPopupContainerElement,
   zIndex,
+  inPopover = false,
 }: {
   children: ReactNode;
   getPopupContainerElement?: () => HTMLElement | null;
   zIndex?: number;
+  inPopover?: boolean;
 }) {
-  const settings = useMemo(() => ({getPopupContainerElement, zIndex}), [getPopupContainerElement, zIndex]);
+  const settings = useMemo(
+    () => ({getPopupContainerElement, zIndex, inPopover}),
+    [getPopupContainerElement, zIndex, inPopover]
+  );
   return <SelectControlSettings.Provider value={settings}>{children}</SelectControlSettings.Provider>;
 }
 

package/src/select/select-in-popover.tsx

@@ -15,7 +15,7 @@ import React, {
 } from "react";
 import {inputOverrides} from "../antd/styles";
 import {border, space, textStyles} from "../design-system";
-import {Popover} from "../popover";
+import {Popover, Placement} from "../popover";
 import {useIsPhone} from "../use-is-phone";
 import {MenuTransparent} from "./components/menu";
 import {
@@ -60,6 +60,8 @@ export const popupClassName = css`
   max-width: 440px;
 `;
 const mobileClassName = css`
+  display: grid;
+  min-height: 0;
   padding-top: ${space.s12}px;
   padding-left: ${space.s12}px;
   padding-right: ${space.s12}px;
@@ -161,6 +163,7 @@ type Props<T, U extends boolean, V extends GroupBase<T>> = {
   forbidValuesClearInCollnMode?: boolean;
   otherSelectProps?: Record<string, unknown>;
   isOptionDisabled?: (option: T) => boolean;
+  popoverPlacement?: Placement;
 };
 
 function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
@@ -200,6 +203,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     otherSelectProps,
     forbidValuesClearInCollnMode,
     isOptionDisabled,
+    popoverPlacement = "bottom-start",
   } = props;
   const [visible, setVisible] = useControllableState({
     value: menuIsOpen,
@@ -208,6 +212,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
       return value ? onMenuOpen?.() : onMenuClose?.();
     },
   });
+  const isPhone = useIsPhone();
   const blurTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const selectRef = useRef<SelectInstance<T, U, V>>(null);
   const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
@@ -268,8 +273,8 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
   }, [disabled, onMenuOpen, setVisible]);
 
   const styles = useMemo(() => {
-    return combineStyles<T, U, V>([makeSelectInPopoverStyles(), selectStyles]);
-  }, [selectStyles]);
+    return combineStyles<T, U, V>([makeSelectInPopoverStyles(isPhone), selectStyles]);
+  }, [selectStyles, isPhone]);
 
   const onTriggerClick: React.MouseEventHandler = useCallback(
     (event) => {
@@ -306,8 +311,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     [onHide, onSelectKeyDown, visible]
   );
 
-  const isPhone = useIsPhone();
-
   const onBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {
     if (isPhone) {
       return;
@@ -370,13 +373,13 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
           popupContainerClassName={popupContainerClassName}
           popupClassName={cx(popupClassName, popupStyles)}
           mobilePopupContentClassName={mobileClassName}
-          placement="bottom-start"
+          placement={popoverPlacement}
         >
           {title && !isPhone && <div className={titleClassName}>{title}</div>}
           {/*Usually we set popupContainerElement for react-select via context (SelectControlSettingsProvider). But here we render react-select in popover.*/}
           {/*Render target in controlled by Popover here. So we just override SelectControlContext here and set popupContainerElement to undefined. */}
           {/*So in dom react-select will be a child of popover. */}
-          <SelectControlSettingsProvider getPopupContainerElement={undefined}>
+          <SelectControlSettingsProvider inPopover={true} getPopupContainerElement={undefined}>
             <ReactSelect<T, U, V>
               ref={selectRef}
               styles={styles}

package/src/select/styles.ts

@@ -158,13 +158,23 @@ export const makeSingleLineStyles = <T, U extends boolean, V extends GroupBase<T
   control: makeControlStyle<T, U, V>({isSingleLine: true}).control,
 });
 
-export const makeSelectInPopoverStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
+export const makeSelectInPopoverStyles = <T, U extends boolean, V extends GroupBase<T>>(
+  isPhone: boolean
+): StylesConfig<T, U, V> => ({
   container: (props) => ({
     ...props,
     minWidth: 180,
     width: "100%",
     paddingTop: space.s6,
     paddingInline: space.s6,
+    ...(isPhone
+      ? {
+          display: "grid",
+          gridTemplateRows: "auto 1fr",
+          minHeight: 0,
+          paddingBottom: space.s20,
+        }
+      : {}),
   }),
   option: (props) => ({
     ...props,
@@ -182,6 +192,16 @@ export const makeSelectInPopoverStyles = <T, U extends boolean, V extends GroupB
     width: `calc(100% - ${space.s2 * 2}px)`,
     borderRadius: border.radius4,
   }),
+  menuList: (props) => {
+    if (isPhone) {
+      return {
+        ...props,
+        maxHeight: "100%",
+        height: "100%",
+      };
+    }
+    return props;
+  },
   menu: (props) => ({
     ...props,
     minWidth: 100,

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

@@ -40,7 +40,7 @@ const tabNavItemWide = css`
   flex: 1 0 0;
 `;
 
-const tabButton = css`
+export const tabButton = css`
   all: unset;
   display: flex;
   align-items: center;

package/src/toggle.tsx

@@ -5,6 +5,7 @@ import {ComponentProps, FC, ReactNode} from "react";
 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";
@@ -32,6 +33,7 @@ const Input = styled.input<{outlineColor: string}>`
 `;
 
 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)};
@@ -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);
 
@@ -76,33 +75,43 @@ 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} />
 );
 
-export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title"> & {
+export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title" | "content"> & {
   title?: ReactNode;
   description?: ReactNode;
   tooltipContentStyle?: string;

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/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,7 +1,8 @@
-import {ReactNode} from "react";
+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,15 +24,42 @@ function isVerticalMobileBreakpointDisabled() {
   return urlParams.has("no-vertical-mobile-breakpoint");
 }
 
-const phoneMediaQuery = isVerticalMobileBreakpointDisabled()
-  ? "(max-width: 440px)"
-  : "(max-width: 440px), (max-height: 440px)";
+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 getMediaQueryList(phoneMediaQuery).matches;
+  return isPhoneApp || getMediaQueryList(phoneMediaQuery).matches;
 }
 
 export function IsPhoneProvider({children}: {children: ReactNode}) {
   const isPhone = useIsMediaQueryMatched(phoneMediaQuery);
-  return <Provider value={isPhone}>{children}</Provider>;
+  useLayoutEffect(() => {
+    const htmlElement = document.querySelector("html");
+    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(mobileRootClassName);
+    } else {
+      htmlElement.classList.remove(mobileRootClassName);
+    }
+    return () => {
+      htmlElement.classList.remove(mobileRootClassName);
+    };
+  }, [isPhone]);
+  return <Provider value={isPhoneApp || isPhone}>{children}</Provider>;
 }

package/src/shortcut-badge.tsx

@@ -1,29 +0,0 @@
-import {css, cx} from "@linaria/core";
-import {textStyles, border, space, lineHeight, themeVars} from "./design-system";
-import {useIsSupportHardwareKeyboard} from "./use-is-support-hardware-keyboard";
-
-export const shortcutCss = css`
-  ${{
-    ...textStyles.small,
-    ...textStyles.numeric.tabularOn,
-    borderRadius: border.radius4,
-    border: themeVars.shortcutBorderColor,
-    color: themeVars.shortcutTextColor,
-    paddingTop: space.s2,
-    paddingBottom: space.s2,
-    paddingLeft: space.s4,
-    paddingRight: space.s4,
-    lineHeight: lineHeight.nowrap,
-    whiteSpace: "nowrap",
-    display: "inline-block",
-    userSelect: "none",
-  }}
-`;
-
-export const ShortcutBadge = ({className, shortcut}: {className?: string; shortcut: string}): JSX.Element | null => {
-  const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
-  if (!isSupportHardwareKeyboard) {
-    return null;
-  }
-  return <div className={cx(shortcutCss, className)}>{shortcut}</div>;
-};