@fibery/ui-kit 1.35.0 → 1.36.0

package/src/reactions/reaction-button.tsx

@@ -0,0 +1,254 @@
+import {css, cx} from "@linaria/core";
+import {createPortal} from "react-dom";
+import {useLongPress} from "../use-long-press";
+import {Fragment, ReactNode, useState} from "react";
+import {Emoji} from "../emoji-picker/emoji";
+import {border, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {Tooltip} from "../tooltip";
+import {useIsPhone} from "../use-is-phone";
+import {getWordDivider} from "./get-word-divider";
+
+export type Reaction = {
+  count: number;
+  key: string;
+  selected: boolean;
+  alias?: string;
+  userNames?: Array<string>;
+};
+
+type Props = {
+  reaction: 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;
+  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};
+  }
+`;
+
+const overlayClassName = css`
+  position: absolute;
+  z-index: 10001;
+  display: flex;
+  flex-direction: column;
+  inset: 0;
+`;
+
+function TouchOverlay({onClick}: {onClick: () => void}) {
+  return createPortal(<div className={overlayClassName} onClick={onClick} />, document.body);
+}
+
+function MobileOverlay({content, onClose}: {content: ReactNode; onClose: () => void}) {
+  return createPortal(
+    <div className={overlayClassName}>
+      <div
+        onClick={onClose}
+        className={css`
+          background-color: ${themeVars.modalBg};
+          flex-grow: 1;
+        `}
+      />
+      <div
+        className={css`
+          flex-shrink: 0;
+          background-color: ${themeVars.tooltipBgColor};
+        `}
+      >
+        {content}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+export const ReactionButton = ({reaction, disabled, onSelect}: 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 = () => {
+    setShowOverlay(undefined);
+    if (isPhone) {
+      document.body.style.userSelect = "";
+      document.body.style.webkitUserSelect = "";
+    }
+  };
+
+  const longPressEvent = useLongPress(onLongPress, {
+    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;
+        `}
+      >
+        <div
+          className={css`
+            background-color: ${themeVars.whiteColor};
+            padding: ${space.s4}px;
+            border-radius: ${border.radius4}px;
+          `}
+        >
+          <Emoji emoji={reaction.key} size={64} />
+        </div>
+      </div>
+    );
+    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>
+          );
+        })}
+        <span
+          className={css`
+            color: ${themeVars.shortcutTextColor};
+          `}
+        >
+          reacted with {reaction.alias || reaction.key}
+        </span>
+      </div>
+    );
+    if (isPhone) {
+      return (
+        <>
+          {button}
+          {showOverlay ? (
+            <MobileOverlay
+              onClose={close}
+              content={
+                <div
+                  className={css`
+                    padding: ${space.s12}px;
+                  `}
+                >
+                  {title}
+                  {description}
+                </div>
+              }
+            />
+          ) : null}
+        </>
+      );
+    }
+    return (
+      <>
+        <Tooltip visible={showOverlay} title={title} description={description} side="top" sideOffset={space.s8}>
+          {button}
+        </Tooltip>
+        {showOverlay ? <TouchOverlay onClick={close} /> : null}
+      </>
+    );
+  }
+  return button;
+};

package/src/reactions/reaction-picker.tsx

@@ -0,0 +1,126 @@
+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 AddReactions from "../icons/react/AddReactions";
+import {Popup} from "../popup";
+import {Tooltip} from "../tooltip";
+import {useIsPhone} from "../use-is-phone";
+import {reactionButtonCss} from "./reaction-button";
+
+type Props = {
+  mode: "default" | "in-row";
+  onSelect: (reactionKey: string) => unknown;
+  /** The controlled open state of the ReactinoPicker. Must be used in conjunction with onOpenChange. */
+  open?: boolean;
+  /** Callback called when the open state of the ReactionPicker changes. */
+  onOpenChange?: (state: boolean) => unknown;
+  EmojiPicker: FC<EmojiPickerProps>;
+};
+
+// ant modals have z-index: 1000 and editorPopupZIndex so we have to set it to not be hidden below modals
+const zIndex = 1031;
+const popupContainerCss = css`
+  z-index: ${zIndex};
+`;
+
+const popupCss = css`
+  //background-color: transparent;
+  //box-shadow: none;
+
+  ${{
+    maxHeight: `calc(100vh - ${layout.viewHeaderHeight}px - ${space.s24}px)`,
+    overflow: "hidden",
+    ".ant-tabs-nav": {
+      alignItems: "baseline",
+    },
+    ".ant-tabs-nav::before": {
+      borderBottom: `1px solid ${themeVars.separatorColor}`,
+    },
+    ".ant-tabs-nav-container": {
+      marginLeft: 14,
+    },
+  }}
+`;
+
+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 onEmojiSelect = useCallback(
+    (emojiData: EmojiItem) => {
+      onSelect(emojiData.colons);
+      setOpen(false);
+    },
+    [onSelect, setOpen]
+  );
+
+  return (
+    <div>
+      <Tooltip side="bottom" title="Add reaction">
+        {mode === "in-row" ? (
+          <button
+            ref={setTriggerDomElement}
+            type="button"
+            onClick={() => {
+              setOpen(!isOpen);
+            }}
+            className={reactionButtonCss}
+          >
+            <AddReactions viewBox={"0 0 20 20"} containerSize={16} iconSize={20} color={themeVars.iconColor} />
+          </button>
+        ) : (
+          <IconButton
+            ref={setTriggerDomElement}
+            onClick={() => {
+              setOpen(!isOpen);
+            }}
+            size="small"
+          >
+            <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
+            }
+            showSkinTones
+            onSelect={onEmojiSelect}
+          />
+        </Popup>
+      ) : null}
+    </div>
+  );
+};

package/src/reactions/reactions.tsx

@@ -0,0 +1,30 @@
+import {css} from "@linaria/core";
+import {Reaction, ReactionButton} from "./reaction-button";
+import {ReactionPicker} from "./reaction-picker";
+import {EmojiPickerProps} from "../emoji-picker/emoji-picker";
+import {space} from "../design-system";
+import {type FC} from "react";
+
+type Props = {
+  reactions: Array<Reaction>;
+  onSelect: (reactionKey: string) => void;
+  readonly?: boolean;
+  EmojiPicker: FC<EmojiPickerProps>;
+};
+
+const blockReactionsCss = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${space.s4}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} />
+      ))}
+      {!readonly ? <ReactionPicker EmojiPicker={EmojiPicker} mode={"in-row"} onSelect={onSelect} /> : null}
+    </div>
+  );
+};

package/src/ready-to-scroll-context.tsx

@@ -0,0 +1,16 @@
+import {createContext, ReactNode, useContext} from "react";
+
+const ReadyToScrollContext = createContext(false);
+
+interface ProviderProps {
+  value: boolean;
+  children?: ReactNode;
+}
+
+export function ReadyToScrollContextProvider({children, value}: ProviderProps) {
+  return <ReadyToScrollContext.Provider value={value}>{children}</ReadyToScrollContext.Provider>;
+}
+
+export function useReadyToScrollContext() {
+  return useContext(ReadyToScrollContext);
+}

package/src/rich-input-loader.tsx

@@ -0,0 +1,78 @@
+import {memo, createContext, useContext, useState, useEffect, useMemo} from "react";
+import {LoadingSausageList} from "./loading-sausage";
+import {styled} from "@linaria/react";
+import {css, cx} from "@linaria/core";
+import noop from "lodash/noop";
+import {regularRichEditorHTMLStyles} from "./html-styles";
+
+const LoaderWrapper = styled.div`
+  padding-top: 1px;
+`;
+
+const loaderContext = createContext<{showLoader: boolean; setShowLoader: (st: boolean) => void}>({
+  showLoader: true,
+  setShowLoader: noop,
+});
+
+interface LoaderProps {
+  className?: string;
+  animateAppearance?: boolean;
+}
+
+export const RichInputLoader = memo<LoaderProps>(function RichInputLoaderComponent({
+  className = "",
+  animateAppearance = true,
+}) {
+  const {showLoader} = useContext(loaderContext);
+  return (
+    <div className={className}>
+      {showLoader && (
+        <LoadingSausageList amount={3} WrapperComponent={LoaderWrapper} animateAppearance={animateAppearance} />
+      )}
+    </div>
+  );
+});
+
+export const RichFieldLoaderProvider: React.FC<React.PropsWithChildren> = ({children}) => {
+  const [showLoader, setShowLoader] = useState(false);
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => setShowLoader(true), 300);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, []);
+  const value = useMemo(() => ({showLoader, setShowLoader}), [showLoader, setShowLoader]);
+  return <loaderContext.Provider value={value}>{children}</loaderContext.Provider>;
+};
+
+export function RichFieldLoader() {
+  const {showLoader} = useContext(loaderContext);
+
+  return (
+    <div
+      className={cx(
+        "ProseMirror",
+        regularRichEditorHTMLStyles,
+        css`
+          position: relative;
+        `
+      )}
+    >
+      <p className="empty-node">
+        <br className="ProseMirror-trailingBreak" />
+      </p>
+      {showLoader ? (
+        <div
+          className={css`
+            position: absolute;
+            inset: 0;
+            display: grid;
+            align-content: center;
+          `}
+        >
+          <LoadingSausageList amount={1} WrapperComponent={LoaderWrapper} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+import {css, cx} from "@linaria/core";
+import {border, space, themeVars} from "./design-system";
+import ImageXmark from "./icons/react/ImageXmark";
+import {type ReactNode} from "react";
+
+const wrapperStyle = css`
+  height: 380px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${space.s6}px;
+  background-color: ${themeVars.mentionBgColor};
+  border-radius: ${border.radius6}px;
+  & ::selection {
+    all: unset;
+    background: transparent;
+  }
+`;
+
+const selectedStyle = css`
+  box-shadow: 0 0 0 1px ${themeVars.opacity.opacity25}, 0 0 0 3px ${themeVars.focus};
+`;
+
+const textStyle = css`
+  margin-top: ${space.s6}px;
+  max-width: 700px;
+  padding: 0 ${space.s24}px;
+  color: ${themeVars.disabledTextColor};
+`;
+
+type Props = {
+  isSelected?: boolean;
+  label: ReactNode;
+};
+
+export const RichTextEmbedError = ({isSelected, label}: Props) => {
+  return (
+    <div className={cx(wrapperStyle, isSelected && selectedStyle)}>
+      <ImageXmark iconSize={32} color={themeVars.disabledTextColor} />
+      <div className={textStyle}>{label}</div>
+    </div>
+  );
+};

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

@@ -184,6 +184,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   onSelectKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   forbidValuesClearInCollnMode?: boolean;
   otherSelectProps?: Record<string, unknown>;
+  isOptionDisabled?: (option: Option) => boolean;
 };
 
 function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
@@ -222,6 +223,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     onSelectKeyDown,
     otherSelectProps,
     forbidValuesClearInCollnMode,
+    isOptionDisabled,
   } = props;
   const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useControllableState({
@@ -423,6 +425,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
                 Menu: mergedComponents.Menu as $TSFixMe,
               }}
               forbidValuesClearInCollnMode={forbidValuesClearInCollnMode}
+              isOptionDisabled={isOptionDisabled}
             />
           </SelectControlSettingsProvider>
         </Popup>

package/src/styles-utils.tsx

@@ -0,0 +1,16 @@
+import {css} from "@linaria/core";
+export const visuallyHidden = css`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+
+export const ellipsis = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;