@fibery/ui-kit 1.21.0 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -21,6 +21,7 @@
     "src/error-alert.tsx",
     "src/pallete.ts",
     "src/tooltip.tsx",
+    "src/tooltip-if-overflown.tsx",
     "src/back-button.tsx",
     "src/button",
     "src/emoji-picker/**/*.ts*",
@@ -68,9 +69,9 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/emoji-data": "2.2.1",
     "@fibery/react": "1.3.0",
-    "@fibery/helpers": "1.2.0"
+    "@fibery/helpers": "1.2.0",
+    "@fibery/emoji-data": "2.2.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -103,8 +104,8 @@
     "svgo": "2.8.0",
     "typescript": "5.1.6",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.3.0",
-    "@fibery/eslint-config": "8.5.0"
+    "@fibery/eslint-config": "8.5.0",
+    "@fibery/babel-preset": "7.3.0"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -124,7 +125,24 @@
       "createInlineTheme\\.js$": "<rootDir>/src/__mocks__/createInlineTheme.js"
     },
     "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+      "^.+\\.(js|jsx|ts|tsx)$": [
+        "@swc/jest",
+        {
+          "jsc": {
+            "parser": {
+              "syntax": "typescript",
+              "tsx": true,
+              "decorators": true,
+              "dynamicImport": true
+            },
+            "transform": {
+              "react": {
+                "runtime": "automatic"
+              }
+            }
+          }
+        }
+      ]
     },
     "setupFilesAfterEnv": [
       "<rootDir>/config/jest/testFrameworkSetup.js"

package/src/design-system.ts

@@ -12,6 +12,8 @@ import {
   redDark,
   slate,
   slateDark,
+  teal,
+  tealDark,
   whiteA,
   yellow,
   yellowDark,
@@ -376,6 +378,12 @@ export const themeColors = {
   relationViewBgColor: [slate.slate2, slateDark.slate3],
   unitBg: [slate.slate3, slateDark.slate6],
   unitBgHover: [slate.slate4, slateDark.slate7],
+  colorBgBadgeSuccess: [teal.teal5, tealDark.teal5],
+  colorBgBadgeWarning: [yellow.yellow5, yellowDark.yellow5],
+  colorBgBadgeError: [red.red5, redDark.red5],
+  colorTextBadgeSuccess: [teal.teal11, tealDark.teal11],
+  colorTextBadgeWarning: [yellow.yellow11, yellowDark.yellow11],
+  colorTextBadgeError: [red.red11, redDark.red11],
   badgeBgColor: [getOpacities(slate.slate10).opacity20, getOpacities(slate.slate10).opacity20],
   panelBadgeBgColor: [getOpacities(slate.slate10).opacity20, getOpacities(slate.slate10).opacity20],
   tooltipBgColor: [slateDark.slate5, slateDark.slate6],
@@ -449,6 +457,8 @@ export const themeColors = {
   progressText: [slate.slate11, slate.slate11],
   progressFillBg: [slate.slate11, slate.slate11],
   progressFillText: [whiteA.whiteA0, whiteA.whiteA0],
+  progressBarFill: [indigo.indigo9, indigoDark.indigo10],
+  progressBarBg: [getOpacities(indigo.indigo9).opacity25, getOpacities(indigoDark.indigo10).opacity25],
   searchFiltersBg: [slate.slate1, slateDark.slate2],
   colorPickerSwatchBorder: [blackA.blackA7, blackA.blackA7],
   richTextTableBorder: [blackA.blackA5, whiteA.whiteA7],
@@ -475,6 +485,7 @@ export const themeColors = {
   colorTextReactionsSelected: [indigo.indigo10, slateDark.slate12],
   colorBgToastDefault: [slate.slate1, slateDark.slate1],
   colorBgDbTabHover: [slate.slate3, slateDark.slate4],
+  colorBgDbTabFocus: [slate.slate6, slateDark.slate6],
 } as const;
 
 type ThemeDefs = typeof themeColors;
@@ -786,6 +797,7 @@ export const border = {
 export const lineHeight = {
   text: 1.6,
   regular: 1.5,
+  narrow: 1.4,
   heading: 1.25,
   nowrap: 1,
 } as const;

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

@@ -6,7 +6,7 @@ import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 
 const emojiWrapperCss = css`
   color: ${themeVars.textColor};
-  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla",
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Twemoji Mozilla",
     "Noto Color Emoji", "Android Emoji";
   line-height: 1;
 `;

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

@@ -3,7 +3,7 @@ import {space} from "../../design-system";
 import {contentHorizontalPadding} from "./layout";
 
 const pickerHeader = css`
-  padding: ${space.s6}px ${contentHorizontalPadding}px;
+  padding: ${space.s12}px ${contentHorizontalPadding}px ${space.s6}px ${contentHorizontalPadding}px;
   position: relative;
 `;
 export const EmojiPickerHeader: React.FC<React.PropsWithChildren> = ({children}) => {

package/src/icons/ast/Chat.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Chat: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M8.854 3.524a.083.083 0 0 1 .06-.024h7.5a.083.083 0 0 1 .083.083v6.523l-1.22-1.22a.75.75 0 0 0-.53-.22H8.913a.083.083 0 0 1-.083-.083v-5c0-.022.009-.043.024-.059ZM8.914 2A1.583 1.583 0 0 0 7.33 3.583v5a1.583 1.583 0 0 0 1.583 1.584h5.523l2.28 2.28a.75.75 0 0 0 1.28-.53V3.583A1.583 1.583 0 0 0 16.414 2h-7.5Zm-5.39 6.854a.083.083 0 0 1 .06-.024H5.25a.75.75 0 0 0 0-1.5H3.583A1.583 1.583 0 0 0 2 8.913v8.334a.75.75 0 0 0 1.28.53l2.28-2.28h5.523a1.583 1.583 0 0 0 1.584-1.584v-1.666a.75.75 0 0 0-1.5 0v1.666a.083.083 0 0 1-.084.084H5.25a.75.75 0 0 0-.53.22L3.5 15.435V8.913c0-.022.009-.043.024-.059Z"},"children":[]}],"metadata":""}]},"name":"chat"};
+
+export default Chat;

package/src/icons/ast/ChatAi.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ChatAi: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M11.263.181a.281.281 0 0 0-.526 0l-.57 1.498a.844.844 0 0 1-.488.488l-1.498.57a.281.281 0 0 0 0 .526l1.498.57a.844.844 0 0 1 .488.488l.57 1.498a.281.281 0 0 0 .526 0l.57-1.498a.844.844 0 0 1 .488-.488l1.498-.57a.281.281 0 0 0 0-.526l-1.498-.57a.844.844 0 0 1-.488-.488L11.263.18ZM17 4c.117 0 .221.072.263.181l.57 1.498a.844.844 0 0 0 .488.488l1.498.57a.281.281 0 0 1 0 .526l-1.498.57a.844.844 0 0 0-.488.488l-.57 1.498a.281.281 0 0 1-.526 0l-.57-1.498a.843.843 0 0 0-.488-.488l-1.498-.57a.281.281 0 0 1 0-.526l1.498-.57a.843.843 0 0 0 .488-.488l.57-1.498A.281.281 0 0 1 17 4Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M11.087 7.33a1.583 1.583 0 0 1 1.583 1.583v5a1.583 1.583 0 0 1-1.583 1.584H5.564l-2.28 2.28a.75.75 0 0 1-1.28-.53V8.913A1.583 1.583 0 0 1 3.586 7.33h7.5Zm.059 1.524a.083.083 0 0 0-.06-.024h-7.5a.083.083 0 0 0-.083.083v6.523l1.22-1.22a.75.75 0 0 1 .53-.22h5.834a.084.084 0 0 0 .083-.083v-5a.083.083 0 0 0-.024-.059Z"},"children":[]}],"metadata":""}]},"name":"chat-ai"};
+
+export default ChatAi;

package/src/icons/ast/Headphones.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Headphones: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M17.626 9.012C17.108 5.055 13.927 2 10 2 6.072 2 2.892 5.056 2.374 9.012c-.154.1-.293.224-.41.367a2.107 2.107 0 0 0-.464 1.335v1.822c0 .479.155.96.464 1.335.312.379.77.629 1.286.629h1.5c.19 0 .365-.071.497-.188C6.037 16.438 7.806 18 10 18s3.963-1.562 4.753-3.688a.75.75 0 0 0 .497.188h1.5c.516 0 .974-.25 1.286-.629.309-.375.464-.856.464-1.335v-1.822c0-.479-.155-.96-.464-1.335a1.795 1.795 0 0 0-.41-.367Zm-1.459-.262C15.566 5.638 13 3.35 10 3.35s-5.566 2.288-6.167 5.4h.916a.751.751 0 0 1 .595.292C6.176 7.042 7.892 5.6 10 5.6c2.108 0 3.824 1.443 4.656 3.442a.75.75 0 0 1 .595-.292h.916ZM10 7c1.974 0 3.8 2.011 3.8 4.8 0 2.789-1.826 4.8-3.8 4.8-1.974 0-3.8-2.011-3.8-4.8C6.2 9.011 8.026 7 10 7Z"},"children":[]}],"metadata":""}]},"name":"headphones"};
+
+export default Headphones;

package/src/icons/ast/HeadphonesAi.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const HeadphonesAi: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"m17.833 8.679-.712-1.652C15.973 4.065 13.24 2 10 2 6.759 2 4.027 4.065 2.88 7.027L2.166 8.68a.844.844 0 0 1-.488.488l-1.498.57a.281.281 0 0 0 0 .526l1.498.57a.844.844 0 0 1 .488.488l.57 1.498a.281.281 0 0 0 .526 0l.57-1.498a.844.844 0 0 1 .488-.488l1.498-.57a.281.281 0 0 0 0-.526l-1.498-.57c-.217-.083-.512-.299-.479-.465C4.461 5.614 7.015 3.35 10 3.35c2.985 0 5.54 2.264 6.157 5.352.038.187-.261.382-.478.465l-1.498.57a.281.281 0 0 0 0 .526l1.498.57a.844.844 0 0 1 .488.488l.57 1.498a.281.281 0 0 0 .526 0l.57-1.498a.844.844 0 0 1 .488-.488l1.498-.57a.281.281 0 0 0 0-.526l-1.498-.57a.844.844 0 0 1-.488-.488Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10.319 7.265a.562.562 0 0 0-.844.262l-1.015 2.64c-.176.457-.232.592-.31.702a1.194 1.194 0 0 1-.28.281c-.11.077-.245.133-.702.31l-2.64 1.015a.562.562 0 0 0 0 1.05l2.64 1.015c.457.176.592.232.701.31.11.078.204.173.281.281.078.11.134.244.31.701l1.015 2.64a.562.562 0 0 0 1.05 0l1.016-2.64c.175-.457.232-.592.31-.701.077-.109.172-.204.28-.281.11-.078.245-.134.701-.31l2.64-1.015a.561.561 0 0 0 0-1.05l-2.64-1.016c-.456-.175-.591-.232-.7-.31a1.198 1.198 0 0 1-.282-.28c-.077-.11-.134-.245-.31-.701l-1.015-2.64a.562.562 0 0 0-.206-.263Zm-.833 3.37L10 9.294l.514 1.335c.143.372.25.65.42.89.15.211.335.396.546.546.239.17.516.276.886.42l1.339.514-1.336.514c-.372.142-.65.249-.889.42-.211.15-.396.334-.546.545-.169.238-.275.512-.416.88L10 16.703l-.514-1.335c-.142-.373-.249-.65-.42-.89a2.342 2.342 0 0 0-.545-.546c-.24-.17-.517-.277-.889-.42L6.295 13l1.34-.515c.37-.143.647-.25.886-.419.211-.15.396-.335.546-.546.17-.238.276-.515.419-.886Z"},"children":[]}],"metadata":""}]},"name":"headphones-ai"};
+
+export default HeadphonesAi;

package/src/icons/ast/index.tsx

@@ -41,6 +41,8 @@ export { default as BellRinging } from './BellRinging';
 export { default as BellX } from './BellX';
 export { default as Bolt } from './Bolt';
 export { default as Cards } from './Cards';
+export { default as ChatAi } from './ChatAi';
+export { default as Chat } from './Chat';
 export { default as CheckCircle } from './CheckCircle';
 export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
@@ -91,6 +93,8 @@ export { default as GlobeSimple } from './GlobeSimple';
 export { default as Globe } from './Globe';
 export { default as GoogleDrive } from './GoogleDrive';
 export { default as GoogleMap } from './GoogleMap';
+export { default as HeadphonesAi } from './HeadphonesAi';
+export { default as Headphones } from './Headphones';
 export { default as Hide } from './Hide';
 export { default as Hint } from './Hint';
 export { default as Home } from './Home';

package/src/icons/react/Chat.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import ChatSvg from '../ast/Chat';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Chat = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={ChatSvg} />;
+
+Chat.displayName = 'Chat';
+export default Chat;

package/src/icons/react/ChatAi.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import ChatAiSvg from '../ast/ChatAi';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ChatAi = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={ChatAiSvg} />;
+
+ChatAi.displayName = 'ChatAi';
+export default ChatAi;

package/src/icons/react/Headphones.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import HeadphonesSvg from '../ast/Headphones';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Headphones = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={HeadphonesSvg} />;
+
+Headphones.displayName = 'Headphones';
+export default Headphones;

package/src/icons/react/HeadphonesAi.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import HeadphonesAiSvg from '../ast/HeadphonesAi';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const HeadphonesAi = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={HeadphonesAiSvg} />;
+
+HeadphonesAi.displayName = 'HeadphonesAi';
+export default HeadphonesAi;

package/src/icons/react/index.tsx

@@ -41,6 +41,8 @@ export { default as BellRinging } from './BellRinging';
 export { default as BellX } from './BellX';
 export { default as Bolt } from './Bolt';
 export { default as Cards } from './Cards';
+export { default as ChatAi } from './ChatAi';
+export { default as Chat } from './Chat';
 export { default as CheckCircle } from './CheckCircle';
 export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
@@ -91,6 +93,8 @@ export { default as GlobeSimple } from './GlobeSimple';
 export { default as Globe } from './Globe';
 export { default as GoogleDrive } from './GoogleDrive';
 export { default as GoogleMap } from './GoogleMap';
+export { default as HeadphonesAi } from './HeadphonesAi';
+export { default as Headphones } from './Headphones';
 export { default as Hide } from './Hide';
 export { default as Hint } from './Hint';
 export { default as Home } from './Home';

package/src/integration-compact-info-button.tsx

@@ -22,7 +22,7 @@ export const IntegrationCompactInfoButton: React.FC<{
   name: string;
   icon: React.ReactNode;
   title?: React.ReactNode;
-  error?: Error;
+  error?: Error | null;
   loading?: boolean;
   onClick?: () => void;
 }> = ({onClick, loading, icon, name, title, error}) => {
@@ -39,7 +39,7 @@ export const IntegrationCompactInfoButton: React.FC<{
   const className = cx(buttonCss, loading && loadingCss);
 
   const button = onClick ? (
-    <ButtonBase dangerous={Boolean(error)} borderless className={className}>
+    <ButtonBase dangerous={Boolean(error)} borderless className={className} onClick={onClick}>
       {iconNode}
       {name}
     </ButtonBase>

package/src/lists/list-row-surface.tsx

@@ -0,0 +1,220 @@
+import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
+import {border, space, textStyles, themeVars} from "../design-system";
+import {css, cx} from "@linaria/core";
+
+export interface ListRowProps extends HTMLAttributes<HTMLDivElement> {
+  darker?: boolean;
+  className?: string;
+  selected?: boolean;
+  done?: boolean;
+  focused?: boolean;
+  hovered?: boolean;
+}
+export const NATUAL_HOVER_CLASS = "natural-hover";
+export const NATUAL_FOCUS_CLASS = "natural-focus";
+const NATURAL_HOVER = `&.${NATUAL_HOVER_CLASS}:hover`;
+const NATURAL_FOCUS = `&.${NATUAL_FOCUS_CLASS}:focus`;
+
+export const listRowSurfaceStylesBase = css`
+  max-width: 100%;
+  flex-basis: 100%;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  align-content: center;
+  padding: 0 ${space.s4}px;
+  column-gap: ${space.s4}px;
+  ${{...textStyles.regular}};
+  color: ${themeVars.textColor};
+  border-radius: ${border.radius6}px;
+  transition: background-color;
+  ${NATURAL_HOVER},
+  &.hover {
+    cursor: pointer;
+  }
+  &.done {
+    cursor: not-allowed;
+    color: ${themeVars.colorTextListItemGeneralDisabled};
+    > * {
+      opacity: ${themeVars.opacityListItemGeneralDisabled};
+    }
+  }
+  &.selected {
+    cursor: default;
+  }
+`;
+/* Use it on white background like select option and etc */
+export const listRowSurfaceStatesDefault = css`
+  background-color: ${themeVars.colorBgListItemGeneral};
+  ${NATURAL_HOVER},
+  &.hover {
+    cursor: pointer;
+    background-color: ${themeVars.colorBgListItemGeneralHover};
+  }
+
+  ${NATURAL_FOCUS}, &.focus {
+    background-color: ${themeVars.colorBgListItemGeneralFocus};
+    ${NATURAL_HOVER},
+    &.hover {
+      background-color: ${themeVars.colorBgListItemGeneralFocus};
+    }
+  }
+  &.done {
+    cursor: not-allowed;
+    color: ${themeVars.colorTextListItemGeneralDisabled};
+    background-color: ${themeVars.colorBgListItemGeneralDisabled};
+    ${NATURAL_HOVER},
+    &.hover,
+    ${NATURAL_FOCUS},
+    &.focus {
+      background-color: ${themeVars.colorBgListItemGeneralDisabled};
+    }
+    > * {
+      opacity: ${themeVars.opacityListItemGeneralDisabled};
+    }
+  }
+  &.selected {
+    cursor: default;
+    background-color: ${themeVars.colorBgListItemGeneralSelected};
+    ${NATURAL_HOVER},
+    &.hover {
+      background-color: ${themeVars.colorBgListItemGeneralSelectedHover};
+    }
+    ${NATURAL_FOCUS},
+    &.focus {
+      background-color: ${themeVars.colorBgListItemGeneralSelectedFocus};
+    }
+  }
+`;
+/* Use it on dimmed background like left menu or automations list */
+export const listRowSurfaceStatesDark = css`
+  background-color: ${themeVars.colorBgMenuItem};
+  ${NATURAL_HOVER},
+  &.hover {
+    cursor: pointer;
+    background-color: ${themeVars.colorBgMenuItemHover};
+  }
+
+  ${NATURAL_FOCUS}, &.focus {
+    background-color: ${themeVars.colorBgMenuItemFocus};
+    ${NATURAL_HOVER},
+    &.hover {
+      background-color: ${themeVars.colorBgMenuItemFocus};
+    }
+  }
+  &.done {
+    cursor: not-allowed;
+    color: ${themeVars.colorTextListItemGeneralDisabled};
+    background-color: ${themeVars.colorBgListItemGeneralDisabled};
+    ${NATURAL_HOVER},
+    &.hover,
+    ${NATURAL_FOCUS},
+    &.focus {
+      background-color: ${themeVars.colorBgListItemGeneralDisabled};
+    }
+    > * {
+      opacity: ${themeVars.opacityListItemGeneralDisabled};
+    }
+  }
+  &.selected {
+    cursor: default;
+    background-color: ${themeVars.colorBgMenuItemSelected};
+    ${NATURAL_HOVER},
+    &.hover {
+      background-color: ${themeVars.colorBgMenuItemSelectedHover};
+      cursor: default;
+    }
+    ${NATURAL_FOCUS},
+    &.focus {
+      background-color: ${themeVars.colorBgMenuItemSelectedFocused};
+    }
+  }
+`;
+
+/**
+ * This should be responsible for all flat list items existing in UI in Fibery. Options, action menus and etc.
+ * You can enforce it's state with props focused, hovered, selected, done (use it for disabled too)
+ */
+
+export const ListRowSurface = forwardRef<HTMLDivElement, ListRowProps>(
+  ({selected, focused, darker, hovered, done, className, children, ...rest}, ref) => {
+    return (
+      <div
+        {...rest}
+        className={cx(
+          listRowSurfaceStylesBase,
+          darker ? listRowSurfaceStatesDark : listRowSurfaceStatesDefault,
+          className,
+          hovered === undefined && NATUAL_HOVER_CLASS,
+          focused === undefined && NATUAL_FOCUS_CLASS,
+          focused && "focus",
+          hovered && "hover",
+          selected && "selected",
+          done && "done"
+        )}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export interface ListRowContentProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+  rootClassName?: string;
+  before?: ReactNode;
+  after?: ReactNode;
+  contentRef?: ForwardedRef<HTMLDivElement>;
+  contentClassName?: string;
+  beforeClassName?: string;
+  afterClassName?: string;
+}
+
+const ListRowContentRoot = css`
+  flex-basis: 100%;
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+  overflow: hidden;
+  gap: ${space.s4}px;
+`;
+const ListRowLayoutSegment = css`
+  display: flex; // never new line
+  align-items: center;
+`;
+const ListRowContentSegment = css`
+  ${{...textStyles.regular}}
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0; // allows ellipsis in flex contexts :)
+  max-width: 100%;
+  width: 100%;
+`;
+export const ListRowContent = forwardRef<HTMLDivElement, ListRowContentProps>(
+  (
+    {
+      before,
+      after,
+      className,
+      contentRef,
+      rootClassName,
+      afterClassName,
+      beforeClassName,
+      contentClassName,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div {...rest} ref={ref} className={cx(ListRowContentRoot, rootClassName, className)}>
+        {before ? <div className={cx(ListRowLayoutSegment, beforeClassName)}>{before}</div> : null}
+        <div ref={contentRef} className={cx(ListRowContentSegment, contentClassName)}>
+          {children}
+        </div>
+        {after ? <div className={cx(ListRowLayoutSegment, afterClassName)}>{after}</div> : null}
+      </div>
+    );
+  }
+);

package/src/select/custom-select-partials/option.tsx

@@ -3,10 +3,10 @@ import {components} from "react-windowed-select";
 import {GroupBase} from "../index";
 import {css} from "@linaria/core";
 import {layout, space} from "../../design-system";
-import {ListItem} from "../../lists/list-item";
+import {ListRowContent, ListRowSurface} from "../../lists/list-row-surface";
 import cn from "classnames";
-import {Children, ReactNode, useCallback, useMemo, useRef, useState} from "react";
-import {Tooltip} from "antd";
+import {Children, ReactNode, useMemo} from "react";
+import {TooltipIfOverflown} from "../../tooltip-if-overflown";
 
 export const OptionNulledVitualizedStyles = {
   height: layout.menuItemHeight,
@@ -30,56 +30,12 @@ const OptionRootClass = css`
   cursor: pointer;
   max-width: 100%;
 `;
-
-const optionWithTextContent = css`
-  max-width: 100%;
-  padding: 0 ${space.s4}px;
-`;
-
-const optionTextOverflowWrapper = css`
-  max-width: 100%;
-  flex-basis: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0 ${space.s4}px;
+const OptionWithTextContent = css`
+  padding-left: 0 ${space.s6}px;
 `;
-
 function isOptionContentIsPureText(children: ReactNode) {
   return !Children.toArray(children).find((child) => !(typeof child === "string" || typeof child === "number"));
 }
-
-type OptionTextContentWithTooltipProps = {
-  children: string | number;
-  isFocused?: boolean;
-};
-
-function OptionTextContentWithTooltip({children, isFocused}: OptionTextContentWithTooltipProps) {
-  const [isTooltipActive, setTooltipActive] = useState<boolean>(false);
-  const textWrapperRef = useRef<HTMLDivElement>(null);
-  const textContentRef = useRef<HTMLSpanElement>(null);
-  const onOptionMouseEnter = useCallback(() => {
-    setTimeout(() => {
-      if (!textContentRef.current || !textWrapperRef.current) {
-        return;
-      }
-      isFocused && setTooltipActive(textContentRef.current?.offsetWidth > textWrapperRef.current?.offsetWidth);
-    }, 300);
-  }, [textContentRef, textWrapperRef, isFocused]);
-  return (
-    <div
-      className={optionWithTextContent}
-      onMouseEnter={onOptionMouseEnter}
-      onMouseLeave={() => setTooltipActive(false)}
-    >
-      <Tooltip title={children} mouseEnterDelay={300} placement={"right"} open={isTooltipActive}>
-        <div ref={textWrapperRef} className={optionTextOverflowWrapper}>
-          <span ref={textContentRef}>{children}</span>
-        </div>
-      </Tooltip>
-    </div>
-  );
-}
 /**
  * Attention! Do not use this option for potentially long lists inside React Select
  *  Why is this option slow? Read here https://the.fibery.io/SoftDev/bug/Select-option-behaviour-is-incorrect-9413
@@ -93,13 +49,33 @@ export function OptionSlow<
   const isPureText = useMemo(() => isOptionContentIsPureText(children), [children]);
   return (
     <components.Option {...rest} className={cn(rest.className, OptionRootClass)}>
-      <ListItem focused={isFocused} selected={isSelected} hovered={false} done={isDisabled}>
-        {isPureText ? (
-          <OptionTextContentWithTooltip isFocused={isFocused}>{children as string}</OptionTextContentWithTooltip>
-        ) : (
-          children
-        )}
-      </ListItem>
+      {isPureText ? (
+        <ListRowSurface
+          focused={isFocused}
+          selected={isSelected}
+          hovered={rest.innerProps.onMouseOver ? undefined : false} //if onMouseOver is not passed (fast option used) then enabling natural hover by passing undefined so we not forcing non-hover state
+          done={isDisabled}
+        >
+          <TooltipIfOverflown title={children} side={"right"} sideOffset={space.s6} visible={isFocused}>
+            {({setNode}) => {
+              return (
+                <ListRowContent contentRef={setNode} contentClassName={OptionWithTextContent}>
+                  {children}
+                </ListRowContent>
+              );
+            }}
+          </TooltipIfOverflown>
+        </ListRowSurface>
+      ) : (
+        <ListRowSurface
+          focused={isFocused}
+          selected={isSelected}
+          hovered={rest.innerProps.onMouseOver ? undefined : false} //if onMouseOver is not passed (fast option used) then enabling natural hover by passing undefined so we not forcing non-hover state
+          done={isDisabled}
+        >
+          <ListRowContent>{children}</ListRowContent>
+        </ListRowSurface>
+      )}
     </components.Option>
   );
 }
@@ -113,7 +89,8 @@ export function Option<Option, IsMulti extends boolean = false, Group extends Gr
   ...rest
 }: OptionProps<Option, IsMulti, Group>) {
   /**
-   * This makes this option component fast
+   * This makes this option component fast.
+   * Excluding onMouseOver, onMouseMove makes ReactSelect not rerender the whole list on option hover
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {onMouseOver, onMouseMove, ...truncatedInnerProps} = rest.innerProps;

package/src/tooltip-if-overflown.tsx

@@ -0,0 +1,26 @@
+import {useResizeObserver} from "@fibery/react/src/use-resize-observer";
+import {useState} from "react";
+import {Tooltip, TooltipProps} from "./tooltip";
+
+type SetNode = (element: HTMLElement | null) => void;
+
+export const TooltipIfOverflown: React.FC<
+  Omit<TooltipProps, "children"> & {children: (args: {setNode: SetNode}) => JSX.Element | null}
+> = ({children, ...tooltipProps}) => {
+  const [truncated, setTruncated] = useState(false);
+  const [node, setNode] = useState<HTMLElement | null>(null);
+
+  useResizeObserver(node, (entry) => {
+    const target = entry.target;
+    const hasLineClamp = getComputedStyle(target).webkitLineClamp !== "none";
+    const truncated = hasLineClamp
+      ? target.scrollHeight > target.clientHeight
+      : target.scrollWidth > target.clientWidth;
+    setTruncated(truncated);
+  });
+  return (
+    <Tooltip {...tooltipProps} disabled={!truncated}>
+      {children({setNode})}
+    </Tooltip>
+  );
+};

package/src/emoji-picker/emoji-index.ts

@@ -1,8 +0,0 @@
-import {makeEmojiData} from "@fibery/emoji-data";
-
-import data from "@fibery/emoji-data/data/all.json";
-
-import {getEmojiSet} from "./utils/emoji-set";
-
-// TODO: remove it. Emoji Data should not be accesed like this, prefer consuming it from context
-export const emojiIndex = makeEmojiData(data, {set: getEmojiSet()});

package/src/lists/list-item.tsx

@@ -1,139 +0,0 @@
-import {styled} from "@linaria/react";
-import {forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
-import {border, space, textStyles, themeVars} from "../design-system";
-import {css, cx} from "@linaria/core";
-
-export interface ListItemGeneralProps extends HTMLAttributes<HTMLDivElement> {
-  className?: string;
-  selected?: boolean;
-  done?: boolean;
-  focused?: boolean;
-  hovered?: boolean;
-}
-const NATUAL_HOVER_CLASS = "natural-hover";
-const NATUAL_FOCUS_CLASS = "natural-focus";
-const NATURAL_HOVER = `&.${NATUAL_HOVER_CLASS}:hover`;
-const NATURAL_FOCUS = `&.${NATUAL_FOCUS_CLASS}:focus`;
-
-const ListItemGeneralRoot = styled.div`
-  max-width: 100%;
-  flex-basis: 100%;
-  display: flex;
-  cursor: default;
-  align-items: center;
-  align-content: center;
-  padding: 0 ${space.s4}px;
-  column-gap: ${space.s4}px;
-  ${{...textStyles.regular}};
-  color: ${themeVars.textColor};
-  border-radius: ${border.radius6}px;
-  background-color: ${themeVars.colorBgListItemGeneral};
-  transition: background-color;
-  ${NATURAL_HOVER},
-  &.hover {
-    cursor: pointer;
-    background-color: ${themeVars.colorBgListItemGeneralHover};
-  }
-
-  ${NATURAL_FOCUS}, &.focus {
-    background-color: ${themeVars.colorBgListItemGeneralFocus};
-    ${NATURAL_HOVER},
-    &.hover {
-      background-color: ${themeVars.colorBgListItemGeneralFocus};
-    }
-  }
-  &.done {
-    cursor: not-allowed;
-    color: ${themeVars.colorTextListItemGeneralDisabled};
-    background-color: ${themeVars.colorBgListItemGeneralDisabled};
-    ${NATURAL_HOVER},
-    &.hover,
-    ${NATURAL_FOCUS},
-    &.focus {
-      background-color: ${themeVars.colorBgListItemGeneralDisabled};
-    }
-    > * {
-      opacity: ${themeVars.opacityListItemGeneralDisabled};
-    }
-  }
-  &.selected {
-    cursor: default;
-    background-color: ${themeVars.colorBgListItemGeneralSelected};
-    ${NATURAL_HOVER},
-    &.hover {
-      background-color: ${themeVars.colorBgListItemGeneralSelectedHover};
-    }
-    ${NATURAL_FOCUS},
-    &.focus {
-      background-color: ${themeVars.colorBgListItemGeneralSelectedFocus};
-    }
-  }
-`;
-
-/**
- * This should be responsible for all flat list items existing in UI in Fibery. Options, action menus and etc.
- * You can enforce it's state with props focused, hovered, selected, done (use it for disabled too)
- */
-export const ListItem = forwardRef<HTMLDivElement, ListItemGeneralProps>(
-  ({selected, focused, hovered, done, className, children, ...rest}, ref) => {
-    return (
-      <ListItemGeneralRoot
-        {...rest}
-        className={cx(
-          className,
-          hovered === undefined && NATUAL_HOVER_CLASS,
-          focused === undefined && NATUAL_FOCUS_CLASS,
-          focused && "focus",
-          hovered && "hover",
-          selected && "selected",
-          done && "done"
-        )}
-        ref={ref}
-      >
-        {children}
-      </ListItemGeneralRoot>
-    );
-  }
-);
-
-export interface ListItemCompoundLayoutProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
-  className?: string;
-  before?: ReactNode;
-  after?: ReactNode;
-  contentClassName?: string;
-  beforeClassName?: string;
-  afterClassName?: string;
-}
-
-const ListItemCompoundLayoutRoot = css`
-  flex-basis: 100%;
-  display: flex;
-  justify-content: stretch;
-  align-items: center;
-  overflow: hidden;
-`;
-const ListItemCompoundLayoutContainerStyle = css`
-  display: flex; // never new line
-  align-items: center;
-`;
-const ListItemCompoundLayoutContentStyle = css`
-  ${{...textStyles.regular}}
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 0 0 ${space.s4}px;
-  white-space: nowrap;
-  min-width: 0; // allows ellipsis in flex contexts :)
-  max-width: 100%;
-  width: 100%;
-`;
-export const ListItemLayout = forwardRef<HTMLDivElement, ListItemCompoundLayoutProps>(
-  ({before, after, className, afterClassName, beforeClassName, contentClassName, children, ...rest}, ref) => {
-    return (
-      <div {...rest} ref={ref} className={cx(className, ListItemCompoundLayoutRoot)}>
-        {before ? <div className={cx(ListItemCompoundLayoutContainerStyle, beforeClassName)}>{before}</div> : null}
-        <div className={cx(ListItemCompoundLayoutContentStyle, contentClassName)}>{children}</div>
-        {after ? <div className={cx(ListItemCompoundLayoutContainerStyle, afterClassName)}>{after}</div> : null}
-      </div>
-    );
-  }
-);