@fibery/ui-kit 1.37.0 → 1.38.1

package/src/popover/mobile-popup-context.tsx

@@ -0,0 +1,29 @@
+import _ from "lodash";
+import {FC, ReactNode, useState, useMemo} from "react";
+import {createContext} from "@fibery/react/src/create-context";
+
+type MobilePopupContext = {
+  title?: string;
+  headerSlot?: ReactNode;
+  setTitle: (title: string) => void;
+  setHeader: (header?: ReactNode) => void;
+};
+
+const [Provider, useMobilePopup] = createContext<MobilePopupContext>("MobilePopupContext", {
+  setTitle: _.noop,
+  setHeader: _.noop,
+});
+
+export const MobilePopupProvider: FC<{children?: ReactNode}> = ({children}) => {
+  const [title, setTitle] = useState<string | undefined>();
+  const [headerSlot, setHeader] = useState<ReactNode | undefined>();
+
+  const contextValue = useMemo(
+    () => ({title, headerSlot, setTitle, setHeader}),
+    [title, headerSlot, setTitle, setHeader]
+  );
+
+  return <Provider value={contextValue}>{children}</Provider>;
+};
+
+export {useMobilePopup};

package/src/{popup → popover}/modifiers.tsx

@@ -1,37 +1,37 @@
 import {Options as PreventOverflowOptions} from "@popperjs/core/lib/modifiers/preventOverflow";
-import {$TSFixMe} from "../tsfixme";
-import {Modifier, ModifierArguments} from "@popperjs/core";
+import {Modifier, ModifierArguments, Placement, Boundary, RootBoundary, Padding, Context} from "@popperjs/core";
 import maxSize from "popper-max-size-modifier";
 import {getResizeListener} from "@fibery/helpers/utils/resize-listener";
 import {isElementReference} from "./reference";
 import _ from "lodash";
 
-type PopupModifier = Modifier<$TSFixMe, $TSFixMe>;
+type MaxSizeOptions = {
+  placement: Placement;
+  boundary: Boundary;
+  rootBoundary: RootBoundary;
+  elementContext: Context;
+  altBoundary: boolean;
+  padding: Padding;
+};
 
-export const getMaxSize = (overflowOptions: Partial<PreventOverflowOptions>): PopupModifier[] => [
-  {
+export const makeMaxSizeModifier = (options: Partial<PreventOverflowOptions>): Modifier<"maxSize", MaxSizeOptions> => {
+  return {
     ...maxSize,
-    options: overflowOptions,
-  },
-  {
-    name: "applyMaxSize",
-    enabled: true,
-    phase: "beforeWrite",
-    requires: ["maxSize"],
-    fn({state}) {
-      const {width, height} = state.modifiersData.maxSize;
-      state.styles.popper.maxWidth = `${width}px`;
-      state.styles.popper.maxHeight = `${height}px`;
-    },
-  },
-];
+    options,
+  };
+};
 
-export const disableGpuAcceleration = {
-  name: "computeStyles",
-  options: {
-    gpuAcceleration: false,
+export const applyMaxSize: Modifier<"applyMaxSize", Record<string, never>> = {
+  name: "applyMaxSize",
+  enabled: true,
+  phase: "beforeWrite",
+  requires: ["maxSize"],
+  fn({state}) {
+    const {width, height} = state.modifiersData.maxSize;
+    state.styles.popper.maxWidth = `${width}px`;
+    state.styles.popper.maxHeight = `${height}px`;
   },
-} as unknown as PopupModifier;
+};
 
 const observeWidthEffect: (arg0: ModifierArguments<Record<string, unknown>>) => void = ({state, instance}) => {
   const {popper, reference} = state.elements;
@@ -61,7 +61,7 @@ const observeWidthEffect: (arg0: ModifierArguments<Record<string, unknown>>) =>
   };
 };
 
-export const observeWidth: PopupModifier = {
+export const observeWidth: Modifier<"observeWidth", Record<string, never>> = {
   name: "observeWidth",
   enabled: true,
   phase: "main",

package/src/{popup → popover}/popup-modifiers-context.ts

@@ -2,11 +2,11 @@ import {createContext} from "@fibery/react/src/create-context";
 import {getPopupContainerElement} from "../utils-dom";
 import {$TSFixMe} from "../tsfixme";
 import {Modifier} from "react-popper";
-import {Props} from "./index";
+import {PopoverOldProps} from "./index";
 
 export const [PopupModifiersProvider, usePopupModifiers] = createContext<{
   getPopupContainer: () => HTMLElement;
   additionalModifiers?: Array<Partial<Modifier<$TSFixMe, $TSFixMe>>>;
-  preventOverflowOptions?: Props["preventOverflowOptions"];
-  flipOptions?: Props["flipOptions"];
+  preventOverflowOptions?: PopoverOldProps["preventOverflowOptions"];
+  flipOptions?: PopoverOldProps["flipOptions"];
 }>("PopupModifiersProvider", {getPopupContainer: getPopupContainerElement});

package/src/reactions/reaction-button.tsx

@@ -1,122 +1,357 @@
-import {css, cx} from "@linaria/core";
+import {css} from "@linaria/core";
+import {Fragment, ReactEventHandler, ReactNode, useCallback, useState, useRef} from "react";
 import {createPortal} from "react-dom";
-import {useLongPress} from "../use-long-press";
-import {Fragment, ReactNode, useState} from "react";
+import {fontSize, fontWeight, space, themeVars} from "../design-system";
 import {Emoji} from "../emoji-picker/emoji";
-import {border, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {ToggleButton} from "../toggle-button/toggle-button";
 import {Tooltip} from "../tooltip";
 import {useIsPhone} from "../use-is-phone";
+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;
 };
 
-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};
-  }
-`;
-
-export const selectedReactionButtonCss = css`
-  .${reactionButtonCss}& {
-    &:not([aria-disabled="true"]) {
-      background-color: ${themeVars.colorBgReactionsSelectedDefault};
-      border-color: ${themeVars.colorBorderReactionsSelectedDefault};
-    }
-
-    &:not([aria-disabled="true"]):hover {
-      background-color: ${themeVars.colorBgReactionsSelectedHover};
-      border-color: ${themeVars.colorBorderReactionsSelectedHover};
-    }
-  }
-`;
-
-const countCss = css`
-  ${textStyles.small};
-  line-height: ${lineHeight.nowrap};
-  padding: ${space.s2}px ${space.s2}px ${space.s2}px ${space.s4}px;
-  .${selectedReactionButtonCss}:not(:disabled) & {
-    color: ${themeVars.colorTextReactionsSelected};
+  ${mobileRootSelector} & {
+    height: ${space.s28}px;
+    padding-inline: ${space.s6}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>
+    </>
   );
 }
 
-export const ReactionButton = ({reaction, disabled, onSelect}: Props): JSX.Element => {
+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, 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 = () => {
@@ -131,85 +366,56 @@ export const ReactionButton = ({reaction, disabled, onSelect}: Props): JSX.Eleme
     isPreventDefault: true,
     delay: 300,
   });
+
   const button = (
-    <button
-      type="button"
-      aria-disabled={disabled}
-      className={cx(reactionButtonCss, reaction.selected && selectedReactionButtonCss)}
-      onClick={() => {
-        if (!disabled) {
-          onSelect(reaction.key);
-        }
-      }}
-      {...longPressEvent}
-    >
-      <div
-        className={css`
-          font-size: 18px;
-          height: 18px;
-          width: 18px;
-        `}
-      >
-        <Emoji emoji={reaction.key} />
-      </div>
-      <span className={countCss}>{reaction.count}</span>
-    </button>
-  );
-  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;
-        `}
-      >
+    <ToggleButton
+      className={reactionButtonCss}
+      disabled={disabled}
+      iconStart={
         <div
           className={css`
-            background-color: ${themeVars.whiteColor};
-            padding: ${space.s4}px;
-            border-radius: ${border.radius4}px;
+            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}
         >
-          <Emoji emoji={reaction.key} size={64} />
+          <Emoji emoji={reaction.key} />
         </div>
-      </div>
-    );
+      }
+      onPressedChange={() => onSelect(reaction.key)}
+      pressed={reaction.selected}
+    >
+      <span>{reaction.count}</span>
+    </ToggleButton>
+  );
+
+  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};
@@ -217,7 +423,7 @@ export const ReactionButton = ({reaction, disabled, onSelect}: Props): JSX.Eleme
         >
           reacted with {reaction.alias || reaction.key}
         </span>
-      </div>
+      </EmojiTooltipDescription>
     );
     if (isPhone) {
       return (
@@ -229,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>
               }
             />