@fibery/ui-kit 1.36.2 → 1.38.0

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

@@ -26,13 +26,6 @@ export const getMaxSize = (overflowOptions: Partial<PreventOverflowOptions>): Po
   },
 ];
 
-export const disableGpuAcceleration = {
-  name: "computeStyles",
-  options: {
-    gpuAcceleration: false,
-  },
-} as unknown as PopupModifier;
-
 const observeWidthEffect: (arg0: ModifierArguments<Record<string, unknown>>) => void = ({state, instance}) => {
   const {popper, reference} = state.elements;
 

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,11 +1,13 @@
 import {css, cx} from "@linaria/core";
-import {createPortal} from "react-dom";
-import {useLongPress} from "../use-long-press";
 import {Fragment, ReactNode, useState} from "react";
+import {createPortal} from "react-dom";
+import {border, lineHeight, 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 {safeAreaInsetBottomVar} from "../mobile-styles";
+import {useLongPress} from "../use-long-press";
 import {getWordDivider} from "./get-word-divider";
 
 export type Reaction = {
@@ -22,6 +24,7 @@ type Props = {
   onSelect: (reactionKey: string) => unknown;
 };
 
+// @deprecated. remove it
 export const reactionButtonCss = css`
   all: unset;
   padding-inline: ${space.s6}px;
@@ -50,27 +53,8 @@ export const reactionButtonCss = css`
   }
 `;
 
-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 reactionButtonCssV2 = css`
+  min-width: ${space.s24 + space.s12}px;
 `;
 
 const overlayClassName = css`
@@ -99,6 +83,7 @@ function MobileOverlay({content, onClose}: {content: ReactNode; onClose: () => v
         className={css`
           flex-shrink: 0;
           background-color: ${themeVars.tooltipBgColor};
+          padding-bottom: var(${safeAreaInsetBottomVar});
         `}
       >
         {content}
@@ -131,30 +116,30 @@ 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}
+    <ToggleButton
+      className={reactionButtonCssV2}
+      disabled={disabled}
+      iconStart={
+        <div
+          className={css`
+            font-size: 16px;
+            height: 16px;
+            width: 16px;
+          `}
+          {...longPressEvent}
+        >
+          <Emoji emoji={reaction.key} />
+        </div>
+      }
+      onPressedChange={() => onSelect(reaction.key)}
+      pressed={reaction.selected}
     >
-      <div
-        className={css`
-          font-size: 18px;
-          height: 18px;
-          width: 18px;
-        `}
-      >
-        <Emoji emoji={reaction.key} />
-      </div>
-      <span className={countCss}>{reaction.count}</span>
-    </button>
+      {reaction.count}
+    </ToggleButton>
   );
+
   if (reaction?.userNames?.length) {
     // noinspection CssInvalidPropertyValue
     const title = (

package/src/reactions/reaction-picker.tsx

@@ -1,16 +1,15 @@
 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 {useIsPhone} from "../use-is-phone";
-import {reactionButtonCss} from "./reaction-button";
 
 type Props = {
   mode: "default" | "in-row";
@@ -52,7 +51,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);
@@ -65,62 +64,57 @@ export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}
     <div>
       <Tooltip side="bottom" title="Add reaction">
         {mode === "in-row" ? (
-          <button
+          <ToggleButton
             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 />
+          </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/rich-text-embed-error.tsx

@@ -3,7 +3,7 @@ import {border, space, themeVars} from "./design-system";
 import ImageXmark from "./icons/react/ImageXmark";
 import {type ReactNode} from "react";
 
-const wrapperStyle = css`
+export const richTextEmbedErrorStyle = css`
   height: 380px;
   display: flex;
   flex-direction: column;
@@ -36,7 +36,7 @@ type Props = {
 
 export const RichTextEmbedError = ({isSelected, label}: Props) => {
   return (
-    <div className={cx(wrapperStyle, isSelected && selectedStyle)}>
+    <div className={cx(richTextEmbedErrorStyle, isSelected && selectedStyle)}>
       <ImageXmark iconSize={32} color={themeVars.disabledTextColor} />
       <div className={textStyle}>{label}</div>
     </div>

package/src/select/{custom-select-partials → components}/menu.tsx

@@ -1,5 +1,4 @@
-import {css} from "@linaria/core";
-import cn from "classnames";
+import {css, cx} from "@linaria/core";
 import {CSSObjectWithLabel, MenuProps, components} from "react-select";
 import {border, themeVars} from "../../design-system";
 import {GroupBase} from "../index";
@@ -15,7 +14,8 @@ export const MenuNulledStyles: CSSObjectWithLabel = {
   paddingTop: "",
   paddingBottom: "",
 };
-const MenuRootClass = css`
+
+const menuCss = css`
   color: ${themeVars.disabledTextColor};
   z-index: 1050;
   background-color: ${themeVars.colorBgSelectMenu};
@@ -24,8 +24,14 @@ const MenuRootClass = css`
   overflow: hidden;
 `;
 
-export function Menu<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
-  props: MenuProps<Option, IsMulti, Group>
-) {
-  return <components.Menu {...props} className={cn(MenuRootClass, "react-select-menu", props.className)} />;
+export function Menu<T, U extends boolean, V extends GroupBase<T>>(props: MenuProps<T, U, V>) {
+  return <components.Menu {...props} className={cx(menuCss, "react-select-menu", props.className)} />;
+}
+
+const menuTransparentCss = css`
+  background-color: ${themeVars.transparent};
+`;
+
+export function MenuTransparent<T, U extends boolean, V extends GroupBase<T>>(props: MenuProps<T, U, V>) {
+  return <components.Menu {...props} className={cx(menuTransparentCss, "react-select-menu", props.className)} />;
 }

package/src/select/{custom-select-partials → components}/no-option-message.tsx

@@ -6,7 +6,6 @@ import {NoticeProps} from "react-select";
 import {GroupBase} from "../util";
 
 const noOptionMessageClass = css`
-  padding: 0 ${space.s6}px;
   cursor: default;
   user-select: none;
   max-width: 100%;

package/src/select/constants.ts

@@ -0,0 +1 @@
+export const SELECT_IN_POPOVER_VALUE_MAX_HEIGHT = 116;