@fibery/ui-kit 1.30.0 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -76,8 +76,8 @@
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
     "@fibery/helpers": "1.3.0",
-    "@fibery/emoji-data": "2.6.0",
-    "@fibery/react": "1.4.0"
+    "@fibery/react": "1.4.0",
+    "@fibery/emoji-data": "2.6.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -111,8 +111,8 @@
     "svgo": "2.8.0",
     "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.6.0",
-    "@fibery/babel-preset": "7.4.0"
+    "@fibery/babel-preset": "7.4.0",
+    "@fibery/eslint-config": "8.6.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/button/actions-button-compact.tsx

@@ -1,12 +1,12 @@
-import {IconButton, IconButtonProps} from "./icon-button";
-import MoreCompactIcon from "../icons/react/MoreCompact";
 import {forwardRef} from "react";
+import {IconButton, IconButtonProps} from "../button-v2/icon-button";
+import MoreCompactIcon from "../icons/react/MoreCompact";
 
 export const ActionsButtonCompact = forwardRef<HTMLButtonElement, IconButtonProps>(
   function ActionsButtonCompactComponent({...rest}, ref) {
     return (
       <IconButton ref={ref} size="small" {...rest}>
-        <MoreCompactIcon iconSize={18} containerSize={20} />
+        <MoreCompactIcon />
       </IconButton>
     );
   }

package/src/button/actions-button.tsx

@@ -1,16 +1,16 @@
-import {IconButton, IconButtonProps} from "./icon-button";
-import MoreCompact from "../icons/react/MoreCompact";
-import {forwardRef} from "react";
 import {css} from "@linaria/core";
+import {forwardRef} from "react";
+import {IconButton, IconButtonProps} from "../button-v2/icon-button";
 import {border, themeVars} from "../design-system";
+import MoreCompact from "../icons/react/MoreCompact";
 
 export const ActionsButton = forwardRef<HTMLButtonElement, IconButtonProps>(function ActionsButtonComponent(
   {...rest},
   ref
 ) {
   return (
-    <IconButton ref={ref} size="normal" {...rest}>
-      <MoreCompact iconSize={18} containerSize={20} />
+    <IconButton ref={ref} size="medium" {...rest}>
+      <MoreCompact />
     </IconButton>
   );
 });

package/src/button/button.tsx

@@ -235,6 +235,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       className,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       noOverflow: _noOverflow,
+      width,
       ...buttonProps
     } = props;
 
@@ -249,6 +250,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         variant={primary ? "solid" : borderless ? "ghost" : "outline"}
         size={newSize}
         iconStart={Icon ? <Icon /> : null}
+        fullWidth={width === "100%"}
       />
     );
   }

package/src/design-system.ts

@@ -419,7 +419,6 @@ export const themeColors = {
   // :focus, :focus:hover
   colorBgPinnedFieldsLabel: [slate.slate11, slateDark.slate11],
   colorBgObjectEditorSeparator: [slate.slate12, slateDark.slate12],
-  colorBgObjectEditorSeparatorButton: [slate.slate4, slateDark.slate4],
   colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo6],
   colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
   colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],
@@ -887,8 +886,9 @@ export const layout = {
   logoSize: 16,
   menuDefaultWidth: 243,
   desktopToolbarHeight: 32,
-  desktopMenuMinWidth: 200,
-  menuMinWidth: 54, //TODO: make dependency to itemHeight
+  desktopMenuMinWidth: 240,
+  collapsedMenuMinWidth: 54,
+  menuMinWidth: 240, //TODO: make dependency to itemHeight
   menuMaxWidth: 480,
   menuItemMinWidth: 80,
   menuGroupHeaderIndent: 28, // I'm ok

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
-import {useState, useRef} from "react";
-import {IconButton} from "../button/icon-button";
+import {useRef, useState} from "react";
+import {IconButton} from "../button-v2/icon-button";
 import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
 import {ColorPicker} from "../color-picker";
 import {getIconColor, space} from "../design-system";
@@ -30,15 +30,8 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
   return (
     <CollapsibleTrigger asChild>
       <Tooltip title={label}>
-        <IconButton
-          data-testid="emoji-picker-color-trigger"
-          size="big"
-          className={css`
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          `}
-        >
-          <Icon color={iconColor} iconSize={18} containerSize={20} />
+        <IconButton data-testid="emoji-picker-color-trigger" size="small">
+          <Icon color={iconColor} />
         </IconButton>
       </Tooltip>
     </CollapsibleTrigger>

package/src/emoji-picker/primitives/category-label.tsx

@@ -1,10 +1,10 @@
 import type {Category} from "@fibery/emoji-data";
 
 import {css} from "@linaria/core";
+import {IconButton} from "../../button-v2/icon-button";
 import {space, textStyles, themeVars} from "../../design-system";
-import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
-import {IconButton} from "../../button/icon-button";
 import Settings from "../../icons/react/Settings";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 
 const categoryLabelCss = css`
   ${textStyles.heading6}
@@ -33,8 +33,8 @@ export const EmojiPickerCategoryLabel: React.FC<EmojiPickerCategoryLabelProps> =
       <span>{label}</span>
 
       {category.id === "custom" && emojiPickerCtx.onCustomCategorySettings && (
-        <IconButton onClick={emojiPickerCtx.onCustomCategorySettings}>
-          <Settings iconSize={16} />
+        <IconButton onClick={emojiPickerCtx.onCustomCategorySettings} size="small">
+          <Settings />
         </IconButton>
       )}
     </div>

package/src/emoji-picker/primitives/grid-item.tsx

@@ -1,7 +1,7 @@
 import type {EmojiItem} from "@fibery/emoji-data";
 import {css} from "@linaria/core";
 import {memo} from "react";
-import {IconButton} from "../../button/icon-button";
+import {IconButton} from "../../button-v2/icon-button";
 import {themeVars} from "../../design-system";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {useEmojiPickerContentSettings} from "./content";
@@ -39,15 +39,12 @@ export const EmojiPickerGridItem = memo<EmojiPickerGridItemProps>(({id, category
         width: emojiContentSettings.emojiContainerSize,
         height: emojiContentSettings.emojiContainerSize,
       }}
-      size="big"
+      size="large"
       onClick={() => emojiPickerCtx.onEmojiSelect(emoji)}
       onMouseEnter={() => setEmojiPreview({emoji, categoryId})}
       onMouseLeave={() => setEmojiPreview(null)}
       data-highlighted={highlighted}
       className={css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
         &:hover:not(:disabled),
         &:focus-visible,
         &[data-highlighted="true"] {

package/src/emoji-picker/primitives/search.tsx

@@ -2,16 +2,16 @@ import {EmojiItem} from "@fibery/emoji-data";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {css, cx} from "@linaria/core";
 import {startTransition, useId, useRef} from "react";
-import {IconButton} from "../../button/icon-button";
+import {IconButton} from "../../button-v2/icon-button";
 import {border, space, textStyles, themeVars} from "../../design-system";
 import Close from "../../icons/react/Close";
 import Search from "../../icons/react/Search";
 import {useEmojiDataStore} from "../stores/emoji-data-store";
+import type {EmojiPickerGridHandle} from "./grid";
+import {useEmojiPreview, useSetEmojiPreview} from "./preview-provider";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
 import {useEmojiSkin} from "./skin-provider";
-import {useEmojiPreview, useSetEmojiPreview} from "./preview-provider";
-import type {EmojiPickerGridHandle} from "./grid";
 
 const searchCss = css`
   ${textStyles.regular}
@@ -24,7 +24,7 @@ const searchCss = css`
 
   display: flex;
   align-items: center;
-  padding-left: ${space.s12}px;
+  padding-left: ${space.s8}px;
   gap: ${space.s2}px;
 
   /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
@@ -58,13 +58,13 @@ const searchInputCss = css`
 `;
 
 const searchIconCss = css`
-  padding: ${space.s2}px;
+  padding: ${space.s4}px;
 `;
 
 const extraActionSlotCss = css`
   background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
-  border-top-right-radius: ${space.s6}px;
-  border-bottom-right-radius: ${space.s6}px;
+  border-radius: ${space.s6}px;
+  margin-right: ${space.s4}px;
 `;
 
 export type EmojiPickerSearchProps = {
@@ -159,7 +159,7 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({
     <section className={cx(searchCss, className)} aria-label={i18n.search}>
       {foundEmojis ? (
         <IconButton size="small" onClick={clearSearch}>
-          <Close iconSize={16} />
+          <Close />
         </IconButton>
       ) : (
         <span className={searchIconCss}>

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -1,11 +1,11 @@
 import {EmojiSkin} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {useState} from "react";
+import {IconButton} from "../../button-v2/icon-button";
 import {textStyles, themeVars} from "../../design-system";
 import {Emoji} from "./emoji";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
-import {IconButton} from "../../button/icon-button";
 
 const skinToneWrapperCss = css`
   display: flex;
@@ -75,7 +75,7 @@ export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({classNa
     skinToneNodes.push(
       <span key={`skin-tone-${skinTone}`} className={cx(skinToneSwatchCss, (selected || opened) && expandedCss)}>
         <IconButton
-          size="big"
+          size="large"
           onClick={() => {
             if (opened) {
               setSkin(skinTone as EmojiSkin);

package/src/error-alert/error-alert.tsx

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {IconButton} from "../button/icon-button";
+import {IconButton} from "../button-v2/icon-button";
 import {border, layout, space, textStyles, themeVars} from "../design-system";
 import CloseIcon from "../icons/react/Close";
 import WarningIcon from "../icons/react/WarningTriangle";
@@ -50,8 +50,8 @@ export const ErrorAlert: React.FC<ErrorAlertProps> = ({message, description, act
       </div>
       {action}
       {onClose ? (
-        <IconButton onClick={onClose} aria-label="Hide error">
-          <CloseIcon iconSize={16} />
+        <IconButton size="small" onClick={onClose} aria-label="Hide error">
+          <CloseIcon />
         </IconButton>
       ) : null}
     </div>

package/src/icon-button.tsx

@@ -1,3 +1,3 @@
-import {IconButton} from "./button/icon-button";
+import {IconButton} from "./button-v2/icon-button";
 
 export {IconButton};

package/src/select/custom-select-partials/clear-indicator.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import RemoveIcon from "../../icons/react/Remove";
 import {ClearIndicatorProps, GroupBase, MultiValueRemoveProps} from "react-select";
-import {Button} from "../../button/button";
+import {IconButton} from "../../button-v2/icon-button";
+import RemoveIcon from "../../icons/react/Remove";
 
 export function ClearIndicator<
   TOption,
@@ -16,7 +15,9 @@ export function ClearIndicator<
   }
   return (
     <div {...innerProps}>
-      <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />
+      <IconButton disabled={selectProps.isDisabled} size={"small"}>
+        <RemoveIcon />
+      </IconButton>
     </div>
   );
 }

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

@@ -28,6 +28,7 @@ import {
 } from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 import {Menu} from "./custom-select-partials/menu";
+import {useIsPhone} from "../use-is-phone";
 
 const offset = [0, space.s4] as [number, number];
 const popupHeightVH = 45;
@@ -56,6 +57,11 @@ const popupClassName = css`
   padding-left: ${space.s8}px;
   padding-right: ${space.s8}px;
 `;
+const mobileClassName = css`
+  padding-top: ${space.s12}px;
+  padding-left: ${space.s12}px;
+  padding-right: ${space.s12}px;
+`;
 
 const valueClassName = css`
   border-radius: ${border.radius4}px;
@@ -301,11 +307,13 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
   );
   const paddingPopup = popupPaddingTop + popupPaddingBottom;
   const paddingMenu = 6 + 6 + 6;
-  const maxMenuHeight =
-    Math.max((document.body.clientHeight / 100) * popupHeightVH, popupMinHeightPx) -
-    valueMaxHeight -
-    paddingPopup -
-    paddingMenu;
+  const isPhone = useIsPhone();
+  const maxMenuHeight = isPhone
+    ? document.body.clientHeight - 45 - valueMaxHeight
+    : Math.max((document.body.clientHeight / 100) * popupHeightVH, popupMinHeightPx) -
+      valueMaxHeight -
+      paddingPopup -
+      paddingMenu;
   const mergedComponents = {...defaultComponents, ...components};
 
   return (
@@ -320,9 +328,12 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
       </mergedComponents.Trigger>
       {Boolean(triggerElement) && (
         <Popup
+          supportMobile
+          title={title}
           offset={offset}
           popupContainerClassName={popupContainerClassName}
           popupClassName={cx(popupClassName, popupStyles)}
+          mobilePopupContentClassName={mobileClassName}
           placement="bottom-start"
           renderInPortal={renderInPortal}
           open={visible}
@@ -332,7 +343,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
           triggerDomElement={triggerElement}
           getPopupContainer={getPopupContainer}
         >
-          {title && <div className={titleClassName}>{title}</div>}
+          {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. */}
@@ -350,6 +361,9 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               }}
               autoFocus={autoFocus}
               onBlur={() => {
+                if (isPhone) {
+                  return;
+                }
                 blurTimeoutRef.current = setTimeout(() => {
                   onHide(false);
                 }, 250);

package/src/toast/primitives.tsx

@@ -2,7 +2,7 @@ import {preventDefault} from "@fibery/react/src/prevent-default";
 import {css, cx} from "@linaria/core";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import {ElementRef, forwardRef} from "react";
-import {IconButton} from "../button/icon-button";
+import {IconButton} from "../button-v2/icon-button";
 import {border, space, textStyles, themeVars} from "../design-system";
 import CloseIcon from "../icons/react/Close";
 
@@ -150,8 +150,8 @@ export const ToastSubtitle = forwardRef<
 export const ToastClose = () => {
   return (
     <ToastPrimitives.Close aria-label="Dismiss" asChild>
-      <IconButton>
-        <CloseIcon iconSize={16} />
+      <IconButton size="small">
+        <CloseIcon />
       </IconButton>
     </ToastPrimitives.Close>
   );

package/src/button/icon-button.tsx

@@ -1,71 +0,0 @@
-import {css} from "@linaria/core";
-import {styled} from "@linaria/react";
-import cx from "classnames";
-import {forwardRef} from "react";
-import {ButtonBase, ButtonBaseProps} from "./button-base";
-import {iconContainer} from "../icons/Icon";
-import {IconButtonV2} from "../button-v2/icon-button";
-import {isButtonsV2} from "../utils";
-
-export type IconButtonSize = "super-small" | "small" | "normal" | "big";
-
-export type IconButtonProps = ButtonBaseProps & {
-  size?: IconButtonSize;
-};
-
-const Paddings = {
-  "super-small": 0,
-  small: 2,
-  normal: 4,
-  big: 6,
-};
-
-type StyledProps = {
-  /** The size of the component. `super-small` is equivalent to the dense button styling */
-  size: IconButtonSize;
-};
-
-const getPadding = ({size}: StyledProps) => Paddings[size];
-
-const weight = css``;
-
-const StyledIconButton = styled(ButtonBase)<StyledProps>`
-  &.${weight} {
-    padding: ${getPadding}px;
-  }
-
-  & > .${iconContainer} {
-    color: inherit;
-  }
-`;
-
-/** @deprecated Please consider using IconButtonV2  */
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
-  {size = "normal", className, primary, dangerous, borderless = true, ...rest},
-  ref
-) {
-  if (isButtonsV2) {
-    return (
-      <IconButtonV2
-        ref={ref}
-        className={className}
-        {...rest}
-        size={size === "big" || size === "normal" ? "medium" : "small"}
-        color={dangerous ? "error" : primary ? "accent" : "neutral"}
-        variant={primary ? "solid" : borderless ? "ghost" : "outline"}
-      />
-    );
-  }
-
-  return (
-    <StyledIconButton
-      ref={ref}
-      size={size}
-      className={cx(className, weight)}
-      primary={primary}
-      dangerous={dangerous}
-      borderless={borderless}
-      {...rest}
-    />
-  );
-});