@fibery/ui-kit 1.38.0 → 1.38.2

package/src/reactions/reaction-button.tsx

@@ -1,107 +1,357 @@
-import {css, cx} from "@linaria/core";
-import {Fragment, ReactNode, useState} from "react";
+import {css} from "@linaria/core";
+import {Fragment, ReactEventHandler, ReactNode, useCallback, useState, useRef} from "react";
 import {createPortal} from "react-dom";
-import {border, lineHeight, space, themeVars} from "../design-system";
+import {fontSize, fontWeight, space, themeVars} from "../design-system";
 import {Emoji} from "../emoji-picker/emoji";
 import {ToggleButton} from "../toggle-button/toggle-button";
 import {Tooltip} from "../tooltip";
 import {useIsPhone} from "../use-is-phone";
-import {safeAreaInsetBottomVar} from "../mobile-styles";
+import {mobileRootSelector, safeAreaInsetBottomVar} from "../mobile-styles";
 import {useLongPress} from "../use-long-press";
 import {getWordDivider} from "./get-word-divider";
+import {EmojiTooltipDescription, EmojiTooltipTitle} from "./tootltip";
+import {TabNavLink, TabNavRoot, TabNavList, tabButton} from "../tab-nav/tab-nav";
+import {AvatarImage} from "../avatar";
+import {getPopupContainerElement} from "../utils-dom";
 
 export type Reaction = {
   count: number;
   key: string;
   selected: boolean;
   alias?: string;
-  userNames?: Array<string>;
+  users?: Array<{name: string; avatarUrl: string | null}>;
 };
 
 type Props = {
   reaction: Reaction;
+  reactions: Array<Reaction>;
   disabled?: boolean;
   onSelect: (reactionKey: string) => unknown;
 };
 
-// @deprecated. remove it
-export const reactionButtonCss = css`
-  all: unset;
-  padding-inline: ${space.s6}px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
+const reactionButtonCss = css`
   min-width: ${space.s24 + space.s12}px;
-  justify-content: center;
-  height: ${space.s24 + 2}px;
-  border: 1.5px solid ${themeVars.colorBgReactionsDefault};
-  border-radius: ${border.radius8}px;
-  background-color: ${themeVars.colorBgReactionsDefault};
-  cursor: pointer;
-  line-height: ${lineHeight.nowrap};
-  -webkit-user-select: none;
-
-  &[aria-disabled="true"] {
-    cursor: default;
-    border-color: ${themeVars.colorBorderReactionsHover};
-    background-color: transparent;
-  }
-
-  &:not([aria-disabled="true"]):hover {
-    background-color: ${themeVars.colorBgReactionsHover};
-    border-color: ${themeVars.colorBorderReactionsHover};
+  ${mobileRootSelector} & {
+    height: ${space.s28}px;
+    padding-inline: ${space.s6}px;
   }
 `;
-
-const reactionButtonCssV2 = css`
-  min-width: ${space.s24 + space.s12}px;
-`;
-
+const zIndexOverlay = 10001;
 const overlayClassName = css`
   position: absolute;
-  z-index: 10001;
+  z-index: ${zIndexOverlay};
   display: flex;
   flex-direction: column;
   inset: 0;
 `;
 
 function TouchOverlay({onClick}: {onClick: () => void}) {
-  return createPortal(<div className={overlayClassName} onClick={onClick} />, document.body);
+  return createPortal(<div className={overlayClassName} onClick={onClick} />, getPopupContainerElement());
 }
 
 function MobileOverlay({content, onClose}: {content: ReactNode; onClose: () => void}) {
+  const handleClose: ReactEventHandler<HTMLDivElement> = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onClose();
+    },
+    [onClose]
+  );
   return createPortal(
     <div className={overlayClassName}>
       <div
-        onClick={onClose}
+        onPointerDown={handleClose}
         className={css`
           background-color: ${themeVars.modalBg};
           flex-grow: 1;
         `}
       />
       <div
+        onPointerDown={(e) => {
+          e.stopPropagation();
+        }}
         className={css`
           flex-shrink: 0;
-          background-color: ${themeVars.tooltipBgColor};
+          height: 70vh;
+          background-color: ${themeVars.panelBg};
           padding-bottom: var(${safeAreaInsetBottomVar});
         `}
       >
         {content}
       </div>
     </div>,
-    document.body
+    getPopupContainerElement()
+  );
+}
+
+const navLinkClassName = css`
+  &.${tabButton} {
+    height: 32px;
+  }
+`;
+
+const canScrollVar = "--can-scroll-fibery-reaction";
+
+const tabNavRootWithShadow = css`
+  padding: 0;
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  position: relative;
+  align-items: center;
+  border-bottom: 0.5px solid ${themeVars.separatorColor};
+  & > div {
+    flex-grow: 1;
+    top: ${space.s6}px;
+  }
+  :not(ul) ul {
+    gap: ${space.s12}px;
+  }
+  /* Only show Scroll Indicators when the scroller can actually scroll */
+  @keyframes detect-scroll {
+    from,
+    to {
+      ${canScrollVar}: 1;
+    }
+  }
+  /* Scroll Indicators */
+  @keyframes reveal {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    flex-shrink: 0;
+    width: 12px;
+    height: ${44 + 12}px;
+    position: sticky;
+    visibility: hidden;
+  }
+
+  @supports (animation-timeline: scroll()) {
+    & {
+      scroll-timeline: --scroll-timeline x;
+    }
+    &::before {
+      background: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent);
+    }
+
+    &::after {
+      background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
+      animation-direction: reverse;
+      animation-range: calc(100% - 40px) calc(100% - 20px);
+    }
+    &::before,
+    &::after {
+      animation-name: reveal;
+      animation-timeline: --scroll-timeline;
+      animation-fill-mode: both;
+    }
+
+    &::before {
+      left: 0;
+      animation-range: 1em 2em;
+    }
+
+    &::after {
+      right: 0;
+      animation-direction: reverse;
+      animation-range: calc(100% - 2em) calc(100% - 1em);
+    }
+
+    & {
+      animation: detect-scroll;
+      animation-timeline: --scroll-timeline;
+      animation-fill-mode: none;
+    }
+
+    &::before,
+    &::after {
+      --visibility-if-can-scroll: var(${canScrollVar}) visible;
+      --visibility-if-cant-scroll: hidden;
+      visibility: var(--visibility-if-can-scroll, var(--visibility-if-cant-scroll));
+    }
+  }
+`;
+
+function PhoneTooltipContent({reactions}: {reactions: Array<Reaction>}): JSX.Element {
+  const [selectedTab, setSelectedTab] = useState("all");
+  const listRef = useRef<HTMLUListElement>(null);
+  const hasMultipleReactions = reactions.length > 1;
+
+  const allReactionsContent = (
+    <div
+      className={css`
+        display: flex;
+        flex-direction: column;
+        gap: ${space.s16}px;
+      `}
+    >
+      {reactions.map((reaction) => (
+        <div
+          key={reaction.key}
+          className={css`
+            display: flex;
+            align-items: center;
+            gap: ${space.s16}px;
+          `}
+        >
+          <Emoji size={24} emoji={reaction.key} />
+          <div>
+            <div
+              className={css`
+                font-size: ${fontSize.sm}px;
+                font-weight: ${fontWeight.medium};
+              `}
+            >
+              {reaction.alias || reaction.key}
+            </div>
+            {reaction.users ? (
+              <div
+                className={css`
+                  color: ${themeVars.accentTextColor};
+                  display: -webkit-box;
+                  -webkit-line-clamp: 3;
+                  -webkit-box-orient: vertical;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                `}
+              >
+                <PrintNames users={reaction.users} />
+              </div>
+            ) : null}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  const singleReactionContent = (reaction: Reaction | undefined | null) => {
+    if (!reaction) {
+      return null;
+    }
+    return (
+      <div
+        className={css`
+          display: flex;
+          flex-direction: column;
+          gap: ${space.s16}px;
+        `}
+      >
+        <div
+          className={css`
+            font-weight: ${fontWeight.medium};
+          `}
+        >
+          {reaction.alias || reaction.key}
+        </div>
+        {reaction.users?.map(({name: userName, avatarUrl}) => (
+          <div
+            key={userName}
+            className={css`
+              display: flex;
+              align-items: center;
+              gap: ${space.s12}px;
+            `}
+          >
+            <AvatarImage avatarUrl={avatarUrl} title={userName} size={24} />
+            <span
+              className={css`
+                overflow-wrap: anywhere;
+                font-size: ${fontSize.sm}px;
+                font-weight: ${fontWeight.medium};
+              `}
+            >
+              {userName}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <TabNavRoot className={tabNavRootWithShadow}>
+        <TabNavList ref={listRef}>
+          {hasMultipleReactions ? (
+            <TabNavLink
+              className={navLinkClassName}
+              wide
+              active={selectedTab === "all"}
+              onClick={() => setSelectedTab("all")}
+            >
+              All
+            </TabNavLink>
+          ) : null}
+          {reactions.map((reaction) => (
+            <TabNavLink
+              className={navLinkClassName}
+              key={reaction.key}
+              wide
+              active={selectedTab === reaction.key || !hasMultipleReactions}
+              onClick={() => setSelectedTab(reaction.key)}
+              before={<Emoji emoji={reaction.key} />}
+            >
+              {reaction.count}
+            </TabNavLink>
+          ))}
+        </TabNavList>
+      </TabNavRoot>
+
+      <div
+        className={css`
+          padding: ${space.s12}px;
+          overflow-y: auto;
+        `}
+      >
+        {selectedTab === "all" && hasMultipleReactions
+          ? allReactionsContent
+          : singleReactionContent(hasMultipleReactions ? reactions.find((r) => r.key === selectedTab) : reactions[0])}
+      </div>
+    </>
+  );
+}
+
+function PrintNames({users}: {users: {name: string}[]}): JSX.Element {
+  return (
+    <>
+      {users.map(({name}, index, names) => {
+        return (
+          <Fragment key={index}>
+            <span
+              className={css`
+                overflow-wrap: anywhere;
+              `}
+            >
+              {name}
+            </span>
+            {getWordDivider(names.length, index)}
+          </Fragment>
+        );
+      })}{" "}
+    </>
   );
 }
 
-export const ReactionButton = ({reaction, disabled, onSelect}: Props): JSX.Element => {
+export const ReactionButton = ({reaction, disabled, onSelect, reactions}: Props): JSX.Element => {
   const [showOverlay, setShowOverlay] = useState<true | undefined>(undefined);
   const isPhone = useIsPhone();
+
   const onLongPress = () => {
     // https://github.com/radix-ui/primitives/issues/931 - disable text selection
     if (isPhone) {
       document.body.style.userSelect = "none";
       document.body.style.webkitUserSelect = "none";
     }
+
     setShowOverlay(true);
   };
   const close = () => {
@@ -119,7 +369,7 @@ export const ReactionButton = ({reaction, disabled, onSelect}: Props): JSX.Eleme
 
   const button = (
     <ToggleButton
-      className={reactionButtonCssV2}
+      className={reactionButtonCss}
       disabled={disabled}
       iconStart={
         <div
@@ -127,6 +377,27 @@ export const ReactionButton = ({reaction, disabled, onSelect}: Props): JSX.Eleme
             font-size: 16px;
             height: 16px;
             width: 16px;
+            font-size-adjust: none;
+
+            ${mobileRootSelector} & {
+              font-size: 18px;
+              height: 18px;
+              width: 18px;
+              line-height: 18px;
+              @supports (-webkit-touch-callout: none) {
+                /* Safari specific fix */
+                line-height: 17px;
+                .emoji {
+                  font-size: 0.8em;
+                  position: relative;
+                  top: -1px;
+                  img {
+                    font-size: 1.2em;
+                    top: 1px;
+                  }
+                }
+              }
+            }
           `}
           {...longPressEvent}
         >
@@ -136,65 +407,15 @@ export const ReactionButton = ({reaction, disabled, onSelect}: Props): JSX.Eleme
       onPressedChange={() => onSelect(reaction.key)}
       pressed={reaction.selected}
     >
-      {reaction.count}
+      <span>{reaction.count}</span>
     </ToggleButton>
   );
 
-  if (reaction?.userNames?.length) {
-    // noinspection CssInvalidPropertyValue
-    const title = (
-      <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`
-            background-color: ${themeVars.whiteColor};
-            padding: ${space.s4}px;
-            border-radius: ${border.radius4}px;
-          `}
-        >
-          <Emoji emoji={reaction.key} size={64} />
-        </div>
-      </div>
-    );
+  if (reaction?.users?.length) {
+    const title = <EmojiTooltipTitle emoji={reaction.key} />;
     const description = (
-      <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;
-            `
-        )}
-      >
-        {reaction.userNames.map((name, index, names) => {
-          return (
-            <Fragment key={index}>
-              <span
-                className={css`
-                  overflow-wrap: break-word;
-                `}
-              >
-                {name}
-              </span>
-              {getWordDivider(names.length, index)}
-            </Fragment>
-          );
-        })}
+      <EmojiTooltipDescription>
+        <PrintNames users={reaction.users} />
         <span
           className={css`
             color: ${themeVars.shortcutTextColor};
@@ -202,7 +423,7 @@ export const ReactionButton = ({reaction, disabled, onSelect}: Props): JSX.Eleme
         >
           reacted with {reaction.alias || reaction.key}
         </span>
-      </div>
+      </EmojiTooltipDescription>
     );
     if (isPhone) {
       return (
@@ -214,11 +435,12 @@ export const ReactionButton = ({reaction, disabled, onSelect}: Props): JSX.Eleme
               content={
                 <div
                   className={css`
-                    padding: ${space.s12}px;
+                    display: flex;
+                    height: 100%;
+                    flex-direction: column;
                   `}
                 >
-                  {title}
-                  {description}
+                  <PhoneTooltipContent reactions={reactions} />
                 </div>
               }
             />

package/src/reactions/reaction-picker.tsx

@@ -10,6 +10,8 @@ import AddReactions from "../icons/react/AddReactions";
 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";
 
 type Props = {
   mode: "default" | "in-row";
@@ -27,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;
@@ -60,11 +70,14 @@ export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}
     [onSelect, setOpen]
   );
 
+  const isPhone = useIsPhone();
+
   return (
     <div>
       <Tooltip side="bottom" title="Add reaction">
         {mode === "in-row" ? (
           <ToggleButton
+            className={buttonCss}
             ref={setTriggerDomElement}
             onClick={() => setOpen(!isOpen)}
             aria-expanded={isOpen}
@@ -76,7 +89,7 @@ export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}
               paddingInline: 0,
             }}
           >
-            <AddReactions />
+            <AddReactions iconSize={isPhone ? 20 : 16} />
           </ToggleButton>
         ) : (
           <IconButton

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;