@fibery/ui-kit 1.37.0 → 1.38.1

package/src/reactions/reaction-picker.tsx

@@ -1,16 +1,17 @@
 import {EmojiItem} from "@fibery/emoji-data";
-import {measureScrollbar} from "@fibery/helpers/utils/measure-scrollbar";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css} from "@linaria/core";
 import {CSSProperties, type FC, useCallback, useState} from "react";
 import {IconButton} from "../button/icon-button";
 import {layout, space, themeVars} from "../design-system";
 import {type EmojiPickerProps} from "../emoji-picker/emoji-picker";
+import {useResponsiveEmojiSize} from "../emoji-picker/use-responsive-emoji-size";
 import AddReactions from "../icons/react/AddReactions";
-import {Popup} from "../popup";
+import {Popover} from "../popover";
+import {ToggleButton} from "../toggle-button/toggle-button";
 import {Tooltip} from "../tooltip";
+import {mobileRootSelector} from "../mobile-styles";
 import {useIsPhone} from "../use-is-phone";
-import {reactionButtonCss} from "./reaction-button";
 
 type Props = {
   mode: "default" | "in-row";
@@ -28,6 +29,14 @@ const popupContainerCss = css`
   z-index: ${zIndex};
 `;
 
+const buttonCss = css`
+  ${mobileRootSelector} & {
+    min-width: ${space.s28}px;
+    height: ${space.s28}px;
+    padding-inline: ${space.s8}px;
+  }
+`;
+
 const popupCss = css`
   //background-color: transparent;
   //box-shadow: none;
@@ -52,7 +61,7 @@ const pickerOffset: [number, number] = [0, space.s4];
 export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}: Props): JSX.Element => {
   const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
   const [triggerDomElement, setTriggerDomElement] = useState<HTMLButtonElement | null>(null);
-  const isPhone = useIsPhone();
+  const emojiSize = useResponsiveEmojiSize();
   const onEmojiSelect = useCallback(
     (emojiData: EmojiItem) => {
       onSelect(emojiData.colons);
@@ -61,66 +70,64 @@ export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}
     [onSelect, setOpen]
   );
 
+  const isPhone = useIsPhone();
+
   return (
     <div>
       <Tooltip side="bottom" title="Add reaction">
         {mode === "in-row" ? (
-          <button
+          <ToggleButton
+            className={buttonCss}
             ref={setTriggerDomElement}
-            type="button"
-            onClick={() => {
-              setOpen(!isOpen);
+            onClick={() => setOpen(!isOpen)}
+            aria-expanded={isOpen}
+            aria-pressed={undefined}
+            style={{
+              // TODO: add IconToggleButton? or a separate prop?
+              width: "24px",
+              justifyContent: "center",
+              paddingInline: 0,
             }}
-            className={reactionButtonCss}
           >
-            <AddReactions viewBox={"0 0 20 20"} containerSize={16} iconSize={20} color={themeVars.iconColor} />
-          </button>
+            <AddReactions iconSize={isPhone ? 20 : 16} />
+          </ToggleButton>
         ) : (
           <IconButton
             ref={setTriggerDomElement}
+            aria-expanded={isOpen}
             onClick={() => {
               setOpen(!isOpen);
             }}
             size="small"
+            supportMobile
           >
             <AddReactions />
           </IconButton>
         )}
       </Tooltip>
-      {triggerDomElement ? (
-        <Popup
-          supportMobile
-          mobilePopupStyle={
-            {
-              "--fibery-emoji-container-width": "100%",
-              "--fibery-emoji-grid-height": "auto",
-              "--fibery-emoji-content-max-height": "auto",
-              zIndex: zIndex,
-            } as CSSProperties
-          }
-          title={"Add reaction"}
-          placement="auto"
-          offset={pickerOffset}
-          popupContainerClassName={popupContainerCss}
-          popupClassName={popupCss}
-          open={isOpen}
-          triggerDomElement={triggerDomElement}
-          trigger={<></>}
-          renderInPortal
-          onOpen={() => setOpen(true)}
-          onClose={() => setOpen(false)}
-        >
-          <EmojiPicker
-            emojiSize={
-              isPhone
-                ? Math.min(Math.floor((document.body.clientWidth - 24 - measureScrollbar() - 9 * 12) / 9), 40)
-                : 20
+      <Popover.Root open={isOpen} onOpen={() => setOpen(true)} onClose={() => setOpen(false)}>
+        <Popover.Trigger reference={triggerDomElement}></Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            supportMobile
+            mobilePopupStyle={
+              {
+                "--fibery-emoji-container-width": "100%",
+                "--fibery-emoji-grid-height": "auto",
+                "--fibery-emoji-content-max-height": "auto",
+                zIndex: zIndex,
+              } as CSSProperties
             }
-            showSkinTones
-            onSelect={onEmojiSelect}
-          />
-        </Popup>
-      ) : null}
+            title={"Add reaction"}
+            placement="auto"
+            offset={pickerOffset}
+            popupContainerClassName={popupContainerCss}
+            popupClassName={popupCss}
+          >
+            <EmojiPicker emojiSize={emojiSize} showSkinTones onSelect={onEmojiSelect} />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
     </div>
   );
 };

package/src/reactions/reactions.tsx

@@ -4,6 +4,7 @@ import {ReactionPicker} from "./reaction-picker";
 import {EmojiPickerProps} from "../emoji-picker/emoji-picker";
 import {space} from "../design-system";
 import {type FC} from "react";
+import {mobileRootSelector} from "../mobile-styles";
 
 type Props = {
   reactions: Array<Reaction>;
@@ -16,13 +17,22 @@ const blockReactionsCss = css`
   display: flex;
   flex-wrap: wrap;
   gap: ${space.s4}px;
+  ${mobileRootSelector} & {
+    gap: ${space.s6}px;
+  }
 `;
 
 export const Reactions: React.FC<Props> = ({reactions, onSelect, readonly, EmojiPicker}) => {
   return (
     <div className={blockReactionsCss}>
       {reactions.map((reaction) => (
-        <ReactionButton disabled={readonly} key={reaction.key} reaction={reaction} onSelect={onSelect} />
+        <ReactionButton
+          reactions={reactions}
+          disabled={readonly}
+          key={reaction.key}
+          reaction={reaction}
+          onSelect={onSelect}
+        />
       ))}
       {!readonly ? <ReactionPicker EmojiPicker={EmojiPicker} mode={"in-row"} onSelect={onSelect} /> : null}
     </div>

package/src/reactions/tootltip.tsx

@@ -0,0 +1,55 @@
+import {css, cx} from "@linaria/core";
+import {border, space, themeVars} from "../design-system";
+import {Emoji} from "../emoji-picker/emoji";
+import {useIsPhone} from "../use-is-phone";
+import {ReactNode} from "react";
+
+export const EmojiTooltipTitle = ({emoji}: {emoji: string}) => {
+  return (
+    <div
+      className={css`
+        padding-top: ${space.s6}px;
+        padding-left: ${space.s6}px;
+        padding-right: ${space.s6}px;
+        display: flex;
+        justify-content: center;
+      `}
+    >
+      <div
+        className={css`
+          display: flex;
+          background-color: ${themeVars.whiteColor};
+          padding: ${space.s4}px;
+          border-radius: ${border.radius4}px;
+        `}
+      >
+        <Emoji emoji={emoji} size={64} />
+      </div>
+    </div>
+  );
+};
+
+export const EmojiTooltipDescription = ({children}: {children: ReactNode}) => {
+  const isPhone = useIsPhone();
+  return (
+    <div
+      className={cx(
+        css`
+          padding-top: ${space.s8}px;
+          padding-bottom: ${space.s6}px;
+          padding-left: ${space.s6}px;
+          padding-right: ${space.s6}px;
+          text-align: center;
+          word-wrap: break-word;
+          color: ${themeVars.whiteColor};
+        `,
+        !isPhone &&
+          css`
+            max-width: 200px;
+          `
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/rich-text-embed-error.tsx

@@ -4,7 +4,8 @@ import ImageXmark from "./icons/react/ImageXmark";
 import {type ReactNode} from "react";
 
 export const richTextEmbedErrorStyle = css`
-  height: 380px;
+  min-height: 380px;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;

package/src/select/components/group-heading.tsx

@@ -4,6 +4,7 @@ import {layout, space, textStyles, themeVars} from "../../design-system";
 import {TooltipIfOverflown} from "../../tooltip-if-overflown";
 import {GroupBase} from "../index";
 import {isPureTextChildren} from "../util";
+import {mobileRootSelector} from "../../mobile-styles";
 
 export const groupHeadingNulledStyles = {
   paddingLeft: "",
@@ -15,6 +16,9 @@ export const groupHeadingNulledStyles = {
   ...textStyles.small,
   color: "",
   height: layout.menuItemHeight,
+  [`${mobileRootSelector} &`]: {
+    height: layout.mobileMenuItemHeight,
+  },
 };
 const groupHeadingClass = css`
   min-height: ${layout.menuItemHeight}px;
@@ -26,6 +30,10 @@ const groupHeadingClass = css`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  ${mobileRootSelector} & {
+    min-height: ${layout.mobileMenuItemHeight}px;
+    font-size: ${textStyles.regular.fontSize}px;
+  }
 `;
 const groupHeadingContentClass = css`
   white-space: nowrap;

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/index.tsx

@@ -7,6 +7,7 @@ import BaseSelect, {
   createFilter,
   MenuListProps,
   MenuProps,
+  ControlProps,
   mergeStyles,
   MultiValue,
   MultiValueProps,
@@ -44,6 +45,7 @@ export type {
   GroupBase,
   MenuListProps,
   MenuProps,
+  ControlProps,
   MultiValue,
   MultiValueProps,
   OnChangeValue,
@@ -53,6 +55,8 @@ export type {
   SingleValue,
   SingleValueProps,
   StylesConfig,
+  SelectInstance,
+  BaseSelectProps,
 };
 
 export {reactSelectComponents as components, MenuListVirtualized, createFilter};
@@ -207,8 +211,8 @@ export const Select = forwardRef(function Select<
     [onKeyDown, menuOpenState]
   );
 
-  const contextRef = useRef<SelectInstance<T, U, V> | null>(null);
-  const combined = useComposedRefs(forwardedRef, contextRef);
+  const selectRef = useRef<SelectInstance<T, U, V> | null>(null);
+  const composedRef = useComposedRefs(forwardedRef, selectRef);
 
   const selectComponents = useSelectComponents({
     components,
@@ -221,9 +225,9 @@ export const Select = forwardRef(function Select<
   const combinedStyles = useSelectStyles({virtualized, zIndex, styles});
 
   return (
-    <ReactSelectRefContext.Provider value={contextRef as RefObject<SelectInstance>}>
+    <ReactSelectRefContext.Provider value={selectRef as RefObject<SelectInstance>}>
       <BaseSelect<T, U, V>
-        ref={combined}
+        ref={composedRef}
         // There are places, where it is useful to override menuPortalTarget globally for all selects.
         // When you are already in some popup. e.g. user input in buttons, relation filter popover.
         menuPortalTarget={getPopupContainerElement ? getPopupContainerElement() : menuPortalTarget}

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

@@ -5,6 +5,7 @@ import React, {
   ForwardedRef,
   forwardRef,
   ReactNode,
+  RefObject,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -14,7 +15,7 @@ import React, {
 } from "react";
 import {inputOverrides} from "../antd/styles";
 import {border, space, textStyles} from "../design-system";
-import {Popup} from "../popup";
+import {Popover, Placement} from "../popover";
 import {useIsPhone} from "../use-is-phone";
 import {MenuTransparent} from "./components/menu";
 import {
@@ -33,6 +34,7 @@ import {ButtonColor, ButtonVariant} from "../button/base-button";
 import {makeSelectInPopoverStyles} from "./styles";
 import {SelectInstance} from "react-select";
 import {SELECT_IN_POPOVER_VALUE_MAX_HEIGHT} from "./constants";
+import {Wrap} from "@fibery/react/src/wrap";
 
 const offset = [0, space.s4] as [number, number];
 const popupHeightVH = 45;
@@ -58,12 +60,15 @@ 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;
 `;
 
-const valueClassName = css`
+const triggerCss = css`
+  min-width: 0;
   border-radius: ${border.radius6}px;
 
   &:focus {
@@ -109,7 +114,7 @@ export type TriggerProps = {
 
 const TriggerDefault = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
   return (
-    <div ref={innerRef} onClick={onClick} onKeyDown={onKeyDown} tabIndex={0} className={valueClassName}>
+    <div ref={innerRef} onClick={onClick} onKeyDown={onKeyDown} tabIndex={0} className={triggerCss}>
       {children}
     </div>
   );
@@ -119,9 +124,9 @@ export type SelectComponents<T, U extends boolean, V extends GroupBase<T>> = Sel
   Trigger?: ComponentType<TriggerProps>;
 };
 
-type SelectInPopoverRef<T, U extends boolean, V extends GroupBase<T>> = {
+export type SelectInPopoverRef<T, U extends boolean, V extends GroupBase<T>> = {
   valueRef: HTMLDivElement | null;
-  selectRef: SelectInstance<T, U, V> | null;
+  selectRef: RefObject<SelectInstance<T, U, V>>;
 };
 
 type Props<T, U extends boolean, V extends GroupBase<T>> = {
@@ -158,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>>(
@@ -197,8 +203,8 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     otherSelectProps,
     forbidValuesClearInCollnMode,
     isOptionDisabled,
+    popoverPlacement = "bottom-start",
   } = props;
-  const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useControllableState({
     value: menuIsOpen,
     defaultValue: false,
@@ -206,22 +212,15 @@ 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 ref = useRef<HTMLDivElement | null>(null);
-
-  useImperativeHandle(
-    forwardedRef,
-    () =>
-      ({
-        valueRef: ref.current,
-        selectRef: selectRef.current,
-      } as {valueRef: HTMLDivElement; selectRef: SelectInstance<T, U, V> | null})
-  );
+  const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    setTriggerElement(ref.current);
-  }, []);
+  useImperativeHandle(forwardedRef, () => ({
+    valueRef: triggerElement,
+    selectRef,
+  }));
 
   useEffect(() => {
     if (blurTimeoutRef.current) {
@@ -274,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) => {
@@ -312,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;
@@ -356,9 +353,9 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
   };
 
   return (
-    <>
+    <Popover.Root open={visible} onOpen={() => onShow()} onClose={() => onHide()}>
       <Trigger
-        innerRef={ref}
+        innerRef={setTriggerElement}
         menuOpened={visible}
         disabled={disabled}
         valueSelected={Boolean(value)}
@@ -367,28 +364,22 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
       >
         {renderValue ? renderValue() : null}
       </Trigger>
-      {Boolean(triggerElement) && (
-        <Popup
+      <Popover.Trigger reference={triggerElement} />
+      <Wrap with={Popover.Portal} if={renderInPortal} getPopupContainer={getPopupContainer}>
+        <Popover.Content
           supportMobile
           title={title}
           offset={offset}
           popupContainerClassName={popupContainerClassName}
           popupClassName={cx(popupClassName, popupStyles)}
           mobilePopupContentClassName={mobileClassName}
-          placement="bottom-start"
-          renderInPortal={renderInPortal}
-          open={visible}
-          onOpen={() => onShow()}
-          onClose={() => onHide()}
-          trigger={<></>}
-          triggerDomElement={triggerElement}
-          getPopupContainer={getPopupContainer}
+          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}
@@ -423,9 +414,9 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
               isOptionDisabled={isOptionDisabled}
             />
           </SelectControlSettingsProvider>
-        </Popup>
-      )}
-    </>
+        </Popover.Content>
+      </Wrap>
+    </Popover.Root>
   );
 }
 

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,