@fibery/ui-kit 1.16.0 → 1.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.16.0",
+  "version": "1.17.1",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -28,7 +28,6 @@
   ],
   "license": "UNLICENSED",
   "dependencies": {
-    "react-intersection-observer": "9.3.5",
     "@linaria/core": "3.0.0-beta.15",
     "@linaria/react": "3.0.0-beta.15",
     "@popperjs/core": "2.11.6",
@@ -41,6 +40,7 @@
     "chroma-js": "2.1.2",
     "chrono-node": "^2.4.1",
     "classnames": "2.3.1",
+    "cmdk": "0.2.0",
     "color-hash": "1.0.3",
     "d3-shape": "1.3.7",
     "date-fns": "^2.29.2",
@@ -54,15 +54,16 @@
     "rc-progress": "3.4.1",
     "react-color": "2.19.3",
     "react-day-picker": "8.1.4",
+    "react-intersection-observer": "9.3.5",
     "react-popper": "2.3.0",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
+    "@fibery/emoji-data": "2.1.1",
     "@fibery/helpers": "1.1.0",
-    "@fibery/react": "1.0.3",
-    "@fibery/emoji-data": "2.1.1"
+    "@fibery/react": "1.0.3"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -92,7 +93,7 @@
     "react-dom": "18.2.0",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "5.0.3",
+    "typescript": "5.1.6",
     "unist-util-reduce": "0.2.2",
     "@fibery/babel-preset": "7.2.0",
     "@fibery/eslint-config": "8.3.0"

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

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

package/src/Button/actions-button.tsx

@@ -0,0 +1,30 @@
+import {IconButton, IconButtonProps} from "./icon-button";
+import MoreCompact from "../icons/react/MoreCompact";
+import {forwardRef} from "react";
+import {css} from "@linaria/core";
+import {border, themeVars} from "../designSystem";
+
+export const ActionsButton = forwardRef<HTMLButtonElement, IconButtonProps>(function ActionsButtonComponent(
+  {...rest},
+  ref
+) {
+  return (
+    <IconButton ref={ref} size="normal" {...rest}>
+      <MoreCompact iconSize={18} containerSize={20} />
+    </IconButton>
+  );
+});
+
+// TODO: Shoud be a variant inside button?
+export const actionButtonInlineStyle = css`
+  background-color: ${themeVars.actionMenuButtonColor};
+  box-shadow: ${themeVars.entityCardShadow};
+  border-radius: ${border.radius6};
+
+  .Button:hover {
+    background-color: ${themeVars.actionMenuButtonHoverColor} !important;
+  }
+  .Button:focus {
+    background-color: ${themeVars.actionMenuButtonHoverColor} !important;
+  }
+`;

package/src/Button/button-base.tsx

@@ -143,14 +143,13 @@ const StyledButtonBase = styled.button<StyledProps>`
 `;
 
 export type ButtonBaseProps = {
-  dataId?: string;
   color?: string;
   primary?: boolean;
   dangerous?: boolean;
   borderless?: boolean;
 } & ComponentPropsWithoutRef<"button">;
 export const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(function ButtonBase(
-  {primary, color, borderless, dangerous, className, type = "button", dataId, ...buttonProps},
+  {primary, color, borderless, dangerous, className, type = "button", ...buttonProps},
   ref
 ) {
   const theme = useTheme();
@@ -177,14 +176,5 @@ export const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(functio
     borderWidth,
   };
 
-  return (
-    <StyledButtonBase
-      ref={ref}
-      type={type}
-      className={className}
-      data-testid={dataId}
-      {...styledProps}
-      {...buttonProps}
-    />
-  );
+  return <StyledButtonBase ref={ref} type={type} className={className} {...styledProps} {...buttonProps} />;
 });

package/src/Button/button.tsx

@@ -4,14 +4,12 @@ import {styled} from "@linaria/react";
 import cx from "classnames";
 import _ from "lodash";
 import React, {forwardRef} from "react";
-import {ButtonBase, ButtonBaseProps, buttonBorderWidth, getMainColor, getTextColor} from "./button-base";
+import {Item} from "../Item";
+import {useTheme} from "../ThemeProvider";
 import {border, colors, getOpacities, opacity, space, textStyles} from "../designSystem";
-import MoreIcon from "../icons/react/More";
-import MoreCompactIcon from "../icons/react/MoreCompact";
 import {IconBaseProps} from "../icons/types";
-import {Item} from "../Item";
 import {Spinner} from "../loaders";
-import {useTheme} from "../ThemeProvider";
+import {ButtonBase, ButtonBaseProps, buttonBorderWidth, getMainColor, getTextColor} from "./button-base";
 
 type PositionInGroup = "first" | "middle" | "last";
 
@@ -218,32 +216,3 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     </StyledButton>
   );
 });
-
-// TODO can be inlined
-export function ActionsButton({
-  onClick,
-  label = ``,
-  disabled,
-}: {
-  onClick: ButtonProps["onClick"];
-  label?: string;
-  disabled?: boolean;
-}) {
-  return <Button Icon={MoreIcon} onClick={onClick} borderless aria-label={label} disabled={disabled} />;
-}
-
-export const ActionsButtonCompact = forwardRef<HTMLButtonElement, ButtonProps & {inverted?: boolean}>(
-  ({inverted, ...rest}, ref) => {
-    const theme = useTheme();
-    return (
-      <Button
-        ref={ref}
-        size={":button-size/small"}
-        Icon={MoreCompactIcon}
-        color={inverted ? colors.inversedTextColor : theme.buttonColor}
-        borderless
-        {...rest}
-      />
-    );
-  }
-);

package/src/Select/components.tsx

@@ -28,6 +28,9 @@ export function DropdownIndicator<
   IsMulti extends boolean = boolean,
   Group extends GroupBase<TOption> = GroupBase<TOption>
 >(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
+  if (props.selectProps.isDisabled) {
+    return null;
+  }
   return (
     <div className={cn(expanderStyle, props.selectProps.menuIsOpen && expanderExpandedStyle)}>
       <ArrowCollapseVertical color={themeVars.disabledTextColor} />
@@ -43,6 +46,9 @@ export function ClearIndicator<
   innerProps,
   selectProps,
 }: ClearIndicatorProps<TOption, IsMulti, Group> | MultiValueRemoveProps<TOption, IsMulti, Group>) {
+  if (selectProps.isDisabled) {
+    return null;
+  }
   return (
     <div {...innerProps}>
       <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />

package/src/Select/styles.ts

@@ -165,10 +165,15 @@ export const componentsStyles: StylesConfig = {
     cursor: state.isDisabled ? "not-allowed" : "default",
   }),
   indicatorSeparator: () => ({}),
-  input: (provided) => ({
-    ...provided,
-    color: themeVars.textColor,
-  }),
+  input: (provided, state) => {
+    if (state.isDisabled) {
+      return {display: "none"};
+    }
+    return {
+      ...provided,
+      color: themeVars.textColor,
+    };
+  },
 };
 
 export const singleLineComponentsStyle: StylesConfig = {

package/src/antd/styles.ts

@@ -47,7 +47,7 @@ export const inputOverrides = {
     transition: `box-shadow ${transition}`,
   },
   disabled: {
-    color: `${themeVars.accentTextColor}`,
+    color: `${themeVars.textColor}`,
     backgroundColor: `${themeVars.inputDisabledBgColor} !important`,
     borderColor: colors.transparent,
     boxShadow: `${themeVars.inputDisabledBorderColor} !important`,

package/src/designSystem.ts

@@ -61,7 +61,7 @@ const makeChromaColor = (color: string) => {
   try {
     return chroma(color);
   } catch (e) {
-    return chroma(brandColors.green);
+    return chroma(brandColors.blue);
   }
 };
 
@@ -103,7 +103,7 @@ const brandColors = {
 } as const;
 
 export const getDarkenColor = _.memoize((color: string): string => {
-  return makeChromaColor(color).darken(0.4).css();
+  return makeChromaColor(color).darken(0.6).css();
 });
 
 const lightColors = {
@@ -372,7 +372,7 @@ const darkColors = {
   }`,
   separatorColor: getOpacities(slateDark.slate8).opacity50,
   separatorBreadcrumbsColor: slateDark.slate8,
-  iconColor: slate.slate9,
+  iconColor: slateDark.slate10,
   appIconColor: getOpacities(slate.slate2).opacity70,
   mentionBgColor: slateDark.slate5,
   entityCardBgColor: slateDark.slate5,
@@ -583,11 +583,7 @@ export const getThemeColors: (themeColor: string, theme: ThemeMode) => ThemeColo
 );
 
 export const getTextColor = _.memoize((color: string): string => {
-  return makeChromaColor(color).luminance() > 0.45 ? makeChromaColor(color).luminance(0.1).saturate(3).hex() : "white";
-});
-
-export const getBrightenColor = _.memoize((color: string): string => {
-  return makeChromaColor(color).brighten(0.15).hex();
+  return makeChromaColor(color).hex();
 });
 
 export const getLinkedHighlightBackgroundColor = _.memoize(
@@ -773,7 +769,7 @@ export const getObjectColorMemoized = _.memoize((name) => {
     return "#999999";
   }
   const colorHash = new ColorHash({
-    lightness: [0.4, 0.5, 0.6],
+    lightness: [0.5, 0.6, 0.7],
     saturation: [0.6, 0.7, 0.8, 0.9, 1],
   });
   return colorHash.hex(name);

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

@@ -11,6 +11,7 @@ import {$TSFixMe} from "../tsfixme";
 import {EmojiPickerGrid, EmojiPickerGridProps} from "./primitives/grid";
 import {EmojiPickerHeader} from "./primitives/header";
 import {EmojiPickerSearch} from "./primitives/search";
+import {Tooltip} from "../tooltip";
 
 const colorPickerWrapperCss = css`
   padding-top: ${space.l}px;
@@ -28,20 +29,22 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
 
   const Icon = opened ? ColorCodingFilled : ColorCoding;
 
-  const label = opened ? "Close color picker" : "Open color picker";
+  const label = opened ? "Hide color picker" : "Show color picker";
 
   return (
     <CollapsibleTrigger asChild>
-      <IconButton
-        aria-label={label}
-        size="big"
-        className={css`
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-        `}
-      >
-        <Icon color={iconColor} iconSize={18} containerSize={20} />
-      </IconButton>
+      <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>
+      </Tooltip>
     </CollapsibleTrigger>
   );
 };

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

@@ -74,7 +74,7 @@ const CategoryItem: React.FC<CategoryItemProps> = ({id, renderEmoji}) => {
   const emojiPickerCtx = useEmojiPickerCtx();
   const emojiContentSettings = useEmojiPickerContentSettings();
 
-  const emoji = useEmojiDataStoreSelector((store) => store.get(id));
+  const emoji = useEmojiDataStoreSelector((store) => store.get(id, {skin}));
 
   if (!emoji) {
     return null;

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

@@ -1,3 +1,4 @@
+import {FC} from "react";
 import {EmojiItem, EmojiSkin} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {themeVars} from "../../designSystem";
@@ -41,12 +42,14 @@ export type EmojiProps = {
   skin?: EmojiSkin;
   /** render emoji as native unicode if possible */
   native?: boolean;
+  fallback?: "shortcode" | "hidden";
 };
-export const Emoji: React.FC<EmojiProps> = ({emoji: idOrColons, size, version = 14, skin, native}) => {
+
+export const Emoji: FC<EmojiProps> = ({emoji: idOrColons, size, version = 14, fallback = "hidden", skin, native}) => {
   const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
 
   if (!emoji) {
-    return null;
+    return fallback === "shortcode" ? <>{idOrColons}</> : null;
   }
 
   let emojiNode: React.ReactNode;

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

@@ -45,17 +45,19 @@ const AllCategories: React.FC<AllCategoriesProps> = ({renderEmoji, scrollParent}
           renderEmoji={renderEmoji}
         />
       ) : null}
-      {categories.map((category, idx) => {
-        return (
-          <EmojiPickerCategory
-            preRender={idx < 2}
-            key={category.id}
-            category={category}
-            scrollParent={scrollParent}
-            renderEmoji={renderEmoji}
-          />
-        );
-      })}
+      {categories
+        .filter((category) => category.emojis.length !== 0)
+        .map((category, idx) => {
+          return (
+            <EmojiPickerCategory
+              preRender={idx < 2}
+              key={category.id}
+              category={category}
+              scrollParent={scrollParent}
+              renderEmoji={renderEmoji}
+            />
+          );
+        })}
     </>
   );
 };

package/src/icons/ast/AppDetails.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const AppDetails: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"d":"M2.545 6.455c0-.452.367-.819.819-.819H5v1.637H3.364a.818.818 0 0 1-.819-.818ZM17.5 6.455a.818.818 0 0 1-.818.818h-5.136V5.636h5.136c.452 0 .818.367.818.819Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M8.273 8.91a2.454 2.454 0 1 1 0-4.91 2.454 2.454 0 0 1 0 4.91Zm-.818-2.455a.818.818 0 1 0 1.636 0 .818.818 0 0 0-1.636 0Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M17.5 13.286a.818.818 0 0 1-.818.818h-1.636v-1.636h1.636c.452 0 .818.366.818.818ZM2.682 13.286c0-.452.366-.819.818-.819h5v1.637h-5a.818.818 0 0 1-.818-.818Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M11.773 15.74a2.454 2.454 0 1 1 0-4.909 2.454 2.454 0 0 1 0 4.91Zm-.818-2.454a.818.818 0 1 0 1.636 0 .818.818 0 0 0-1.636 0Z"},"children":[]}]}],"metadata":""}]},"name":"app-details"};
+const AppDetails: 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":"M11.75 2a.75.75 0 0 1 .75.75v1h4.75a.75.75 0 0 1 0 1.5H12.5v1a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75ZM2 4.5a.75.75 0 0 1 .75-.75H8.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.5Zm4.75 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-1H2.75a.75.75 0 0 1 0-1.5H6v-1a.75.75 0 0 1 .75-.75Zm2.5 2.5a.75.75 0 0 1 .75-.75h7.25a.75.75 0 0 1 0 1.5H10a.75.75 0 0 1-.75-.75Zm4 3a.75.75 0 0 1 .75.75v1l3.25-.003a.75.75 0 1 1 0 1.5l-3.25.002v1.001a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75ZM2 15.497a.75.75 0 0 1 .75-.75H10a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"},"children":[]}],"metadata":""}]},"name":"app-details"};
 
 export default AppDetails;

package/src/icons/ast/BellCircle.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const BellCircle: 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":"M10 2c-1.509 0-2.966.559-4.047 1.569C4.869 4.579 4.25 5.963 4.25 7.417c0 2.105-.528 3.55-1.117 4.514l-.008.014c-.315.514-.56.916-.726 1.207-.082.145-.155.28-.208.397a1.632 1.632 0 0 0-.077.201.937.937 0 0 0-.04.352c.009.105.03.287.135.474.105.187.25.3.334.363a.94.94 0 0 0 .298.144c.073.02.144.033.205.042.12.017.259.026.405.031.29.01.694.01 1.203.01H6.75v.084a3.25 3.25 0 0 0 6.5 0v-.083h2.096c.51 0 .914 0 1.203-.011a4.06 4.06 0 0 0 .405-.031c.06-.009.132-.021.205-.042a.94.94 0 0 0 .298-.144c.085-.063.23-.176.334-.363.105-.187.126-.37.136-.474a.936.936 0 0 0-.04-.352 1.616 1.616 0 0 0-.078-.2 5.134 5.134 0 0 0-.208-.398c-.165-.29-.411-.693-.726-1.207l-.008-.014c-.388-.635-.747-1.474-.948-2.567a.75.75 0 0 0-1.475.272c.235 1.276.66 2.287 1.143 3.077.241.395.432.707.576.951a80.41 80.41 0 0 1-.835.003H4.672c-.338 0-.613 0-.836-.003.145-.244.336-.556.577-.95.738-1.209 1.337-2.926 1.337-5.297 0-1.022.434-2.013 1.226-2.752C7.77 3.925 8.856 3.5 10 3.5c.291 0 .579.028.86.081a.75.75 0 0 0 .28-1.473A6.095 6.095 0 0 0 10 2ZM8.25 15.167v.083a1.75 1.75 0 0 0 3.5 0v-.083h-3.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M18 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"},"children":[]}],"metadata":""}]},"name":"bell-circle"};
+const BellCircle: 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":"M5.953 3.569C7.034 2.559 8.49 2 10 2c.585 0 1.162.084 1.711.245a.75.75 0 0 1-.422 1.44A4.579 4.579 0 0 0 10 3.5c-1.143 0-2.23.424-3.024 1.165-.792.74-1.226 1.73-1.226 2.752 0 2.371-.599 4.088-1.337 5.296-.241.395-.432.707-.577.951.223.003.498.003.836.003h10.656c.338 0 .613 0 .835-.003a86.666 86.666 0 0 0-.576-.95c-.61-.998-1.126-2.346-1.286-4.126a.75.75 0 0 1 1.494-.135c.14 1.554.584 2.68 1.072 3.478l.008.014c.315.514.56.916.726 1.207.082.145.155.28.208.397.026.058.055.128.077.201a.934.934 0 0 1 .04.352 1.15 1.15 0 0 1-.135.474c-.105.187-.25.3-.334.363a.94.94 0 0 1-.298.144 1.49 1.49 0 0 1-.205.042c-.12.017-.259.026-.405.031-.29.01-.694.01-1.203.01H13.25v.084a3.25 3.25 0 0 1-6.5 0v-.083H4.654c-.51 0-.914 0-1.204-.011a4.06 4.06 0 0 1-.404-.031 1.491 1.491 0 0 1-.205-.042.94.94 0 0 1-.298-.144 1.151 1.151 0 0 1-.334-.363 1.152 1.152 0 0 1-.135-.474.937.937 0 0 1 .04-.352c.022-.073.05-.143.077-.2.053-.118.126-.253.208-.398.165-.29.411-.693.726-1.207l.008-.014c.589-.964 1.117-2.409 1.117-4.514 0-1.454.62-2.837 1.703-3.848ZM8.25 15.167v.083a1.75 1.75 0 0 0 3.5 0v-.083h-3.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M19 3.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"},"children":[]}],"metadata":""}]},"name":"bell-circle"};
 
 export default BellCircle;

package/src/icons/ast/CheckCircle.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const CheckCircle: 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":"M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm4.155 3.432a.75.75 0 0 1 0 1.06L9.08 13.069a.75.75 0 0 1-1.06 0l-2.175-2.175a.75.75 0 1 1 1.06-1.06l1.645 1.644 4.545-4.545a.75.75 0 0 1 1.06 0Z"},"children":[]}],"metadata":""}]},"name":"check-circle"};
+const CheckCircle: 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":"M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M13.73 7.032a.75.75 0 0 1 .043 1.06l-4.461 4.833a.75.75 0 0 1-1.102 0l-1.983-2.148A.75.75 0 1 1 7.329 9.76l1.432 1.55 3.91-4.235a.75.75 0 0 1 1.06-.043Z"},"children":[]}],"metadata":""}]},"name":"check-circle"};
 
 export default CheckCircle;

package/src/icons/ast/FocusMode.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const FocusMode: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M16.25 3H12a.75.75 0 0 0 0 1.5h2.44l-3.97 3.97a.75.75 0 0 0 1.06 1.06l3.97-3.97V8A.75.75 0 0 0 17 8V3.75a.75.75 0 0 0-.75-.75ZM3.75 17H8a.75.75 0 0 0 0-1.5H5.56l3.97-3.97a.75.75 0 1 0-1.06-1.06L4.5 14.44V12A.75.75 0 0 0 3 12v4.25a.75.75 0 0 0 .75.75Z"},"children":[]}],"metadata":""}]},"name":"focus-mode"};
+const FocusMode: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M16.25 3H12a.75.75 0 0 0 0 1.5h2.44l-3.47 3.47a.75.75 0 0 0 1.06 1.06l3.47-3.47V8A.75.75 0 0 0 17 8V3.75a.75.75 0 0 0-.75-.75ZM3.75 17H8a.75.75 0 0 0 0-1.5H5.56l3.47-3.47a.75.75 0 1 0-1.06-1.06L4.5 14.44V12A.75.75 0 0 0 3 12v4.25a.75.75 0 0 0 .75.75Z"},"children":[]}],"metadata":""}]},"name":"focus-mode"};
 
 export default FocusMode;

package/src/icons/ast/RicheditorBlockCode.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const RicheditorBlockCode: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"d":"M8.377 5.554a.8.8 0 1 0-1.154-1.108l-4.8 5a.8.8 0 0 0 0 1.108l4.8 5a.8.8 0 0 0 1.154-1.108L4.11 10l4.268-4.446ZM12.777 4.446a.8.8 0 1 0-1.154 1.108L15.89 10l-4.268 4.446a.8.8 0 1 0 1.154 1.108l4.8-5a.8.8 0 0 0 0-1.108l-4.8-5Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-block-code"};
+const RicheditorBlockCode: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M8.975 1.942a.75.75 0 0 0-1.45-.384l-2.25 8.5a.75.75 0 1 0 1.45.384l2.25-8.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M14 2a.75.75 0 0 0 0 1.5h1.25c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25V12A.75.75 0 0 0 2 12v3.25A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25V4.75A2.75 2.75 0 0 0 15.25 2H14ZM4.49 4.32a.75.75 0 0 0-1.06-1.06L1.22 5.47a.75.75 0 0 0 0 1.06l2.21 2.21a.75.75 0 0 0 1.06-1.06L2.81 6l1.68-1.68Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M9.87 3.26a.75.75 0 0 1 1.06 0l2.21 2.21a.75.75 0 0 1 0 1.06l-2.21 2.21a.75.75 0 1 1-1.06-1.06L11.55 6 9.87 4.32a.75.75 0 0 1 0-1.06Z"},"children":[]}],"metadata":""}]},"name":"richeditor-block-code"};
 
 export default RicheditorBlockCode;

package/src/icons/ast/RicheditorBlockEmbed.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const RicheditorBlockEmbed: 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":"M4.75 3.5c-.69 0-1.25.56-1.25 1.25V6H2V4.75A2.75 2.75 0 0 1 4.75 2H6v1.5H4.75Zm7.25 0H8V2h4v1.5Zm3.25 0H14V2h1.25A2.75 2.75 0 0 1 18 4.75V6h-1.5V4.75c0-.69-.56-1.25-1.25-1.25ZM16.5 12V8H18v4h-1.5Zm-13-4v4H2V8h1.5Zm0 6v1.25c0 .69.56 1.25 1.25 1.25H6V18H4.75A2.75 2.75 0 0 1 2 15.25V14h1.5Zm13 1.25V14H18v1.25A2.75 2.75 0 0 1 15.25 18H14v-1.5h1.25c.69 0 1.25-.56 1.25-1.25ZM8 16.5h4V18H8v-1.5ZM8.5 7.603v4.794L12.335 10 8.5 7.603ZM7 7.153a1.25 1.25 0 0 1 1.912-1.06L13.47 8.94a1.25 1.25 0 0 1 0 2.12l-4.556 2.848A1.25 1.25 0 0 1 7 12.848V7.152Z"},"children":[]}],"metadata":""}]},"name":"richeditor-block-embed"};
+
+export default RicheditorBlockEmbed;

package/src/icons/ast/RicheditorImageZoom.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const RicheditorImageZoom: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.926 17a.778.778 0 1 0 0-1.555h-2.27l3.857-3.858a.778.778 0 1 0-1.1-1.1l-3.857 3.858v-2.27a.778.778 0 0 0-1.556 0v4.147c0 .43.348.778.778.778h4.148ZM12.074 3a.778.778 0 1 0 0 1.556h2.27l-3.857 3.857a.778.778 0 0 0 1.1 1.1l3.857-3.857v2.27a.778.778 0 0 0 1.556 0V3.778A.778.778 0 0 0 16.222 3h-4.148Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-image-zoom"};
+const RicheditorImageZoom: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M8.75 5.75a.75.75 0 0 1 .75.75V8H11a.75.75 0 0 1 0 1.5H9.5V11A.75.75 0 0 1 8 11V9.5H6.5a.75.75 0 0 1 0-1.5H8V6.5a.75.75 0 0 1 .75-.75Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M13.128 14.32a7.085 7.085 0 1 1 1.182-1.18l3.78 3.769a.835.835 0 1 1-1.18 1.182l-3.782-3.77ZM8.75 3.335a5.415 5.415 0 1 0 0 10.83 5.415 5.415 0 0 0 0-10.83Z"},"children":[]}],"metadata":""}]},"name":"richeditor-image-zoom"};
 
 export default RicheditorImageZoom;

package/src/icons/ast/RicheditorMarkCode.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const RicheditorMarkCode: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"d":"M8.377 5.554a.8.8 0 1 0-1.154-1.108l-4.8 5a.8.8 0 0 0 0 1.108l4.8 5a.8.8 0 0 0 1.154-1.108L4.11 10l4.268-4.446ZM12.777 4.446a.8.8 0 1 0-1.154 1.108L15.89 10l-4.268 4.446a.8.8 0 1 0 1.154 1.108l4.8-5a.8.8 0 0 0 0-1.108l-4.8-5Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-mark-code"};
+const RicheditorMarkCode: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M12.23 3.925a.75.75 0 1 0-1.46-.35l-3 12.5a.75.75 0 1 0 1.46.35l3-12.5ZM6.53 6.22a.75.75 0 0 1 0 1.06L3.81 10l2.72 2.72a.75.75 0 1 1-1.06 1.06l-3.25-3.25a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0ZM13.47 6.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 1 1-1.06-1.06L16.19 10l-2.72-2.72a.75.75 0 0 1 0-1.06Z"},"children":[]}],"metadata":""}]},"name":"richeditor-mark-code"};
 
 export default RicheditorMarkCode;

package/src/icons/ast/RicheditorOpenLink.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const RicheditorOpenLink: 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":"M4.293 15.707a1 1 0 0 1 0-1.414l8.219-8.22H9.929a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V7.486l-8.222 8.222a1 1 0 0 1-1.414 0Z"},"children":[]}],"metadata":""}]},"name":"richeditor-open-link"};
+const RicheditorOpenLink: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M14.25 5H9a.75.75 0 0 0 0 1.5h3.44l-7.22 7.22a.75.75 0 1 0 1.06 1.06l7.22-7.22V11a.75.75 0 0 0 1.5 0V5.75a.75.75 0 0 0-.75-.75Z"},"children":[]}],"metadata":""}]},"name":"richeditor-open-link"};
 
 export default RicheditorOpenLink;

package/src/icons/ast/index.tsx

@@ -125,6 +125,7 @@ export { default as Restore } from './Restore';
 export { default as RicheditorActionsMore } from './RicheditorActionsMore';
 export { default as RicheditorBlockCallout } from './RicheditorBlockCallout';
 export { default as RicheditorBlockCode } from './RicheditorBlockCode';
+export { default as RicheditorBlockEmbed } from './RicheditorBlockEmbed';
 export { default as RicheditorBlockEntity } from './RicheditorBlockEntity';
 export { default as RicheditorBlockFile } from './RicheditorBlockFile';
 export { default as RicheditorBlockH1 } from './RicheditorBlockH1';

package/src/icons/react/RicheditorBlockEmbed.tsx

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

package/src/icons/react/index.tsx

@@ -125,6 +125,7 @@ export { default as Restore } from './Restore';
 export { default as RicheditorActionsMore } from './RicheditorActionsMore';
 export { default as RicheditorBlockCallout } from './RicheditorBlockCallout';
 export { default as RicheditorBlockCode } from './RicheditorBlockCode';
+export { default as RicheditorBlockEmbed } from './RicheditorBlockEmbed';
 export { default as RicheditorBlockEntity } from './RicheditorBlockEntity';
 export { default as RicheditorBlockFile } from './RicheditorBlockFile';
 export { default as RicheditorBlockH1 } from './RicheditorBlockH1';

package/src/tooltip.tsx

@@ -1,6 +1,6 @@
 import {css, cx} from "@linaria/core";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import type {ReactNode, SyntheticEvent} from "react";
+import {forwardRef, type ReactNode, type SyntheticEvent} from "react";
 import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./designSystem";
 
 const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
@@ -93,7 +93,7 @@ export const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> =
   <TooltipPrimitive.Provider disableHoverableContent skipDelayDuration={150} {...props} />
 );
 
-export type TooltipProps = {
+export type TooltipProps = Omit<React.ComponentPropsWithoutRef<"button">, "title"> & {
   title?: ReactNode;
   description?: ReactNode;
   content?: ReactNode;
@@ -111,54 +111,76 @@ export type TooltipProps = {
   keepOnClick?: boolean;
 };
 
-export const Tooltip: React.FC<TooltipProps> = ({
-  title,
-  description,
-  content = (title || description) && (
-    <>
-      <TooltipTitle>{title}</TooltipTitle>
-      <TooltipDescription>{description}</TooltipDescription>
-    </>
-  ),
-  side,
-  sideOffset = space.xs,
-  align,
-  alignOffset,
-  instant,
-  children,
-  whiteBg,
-  visible,
-  onVisibleChange,
-  keepOnClick,
-  disabled,
-}) => {
-  const triggerProps = keepOnClick
-    ? {
-        onPointerDown: preventDefaultAndStopPropagation,
-        onClick: preventDefaultAndStopPropagation,
-      }
-    : null;
-
-  return (
-    <TooltipPrimitive.Root
-      delayDuration={instant ? 0 : tooltipDelay.enter}
-      open={disabled ? false : Boolean(content) && visible}
-      onOpenChange={onVisibleChange}
-    >
-      <TooltipPrimitive.Trigger {...triggerProps} asChild>
-        {children}
-      </TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Content
-          side={side}
-          sideOffset={sideOffset}
-          align={align}
-          alignOffset={alignOffset}
-          className={cx(tooltipStyle, whiteBg && whiteBgStyle)}
-        >
-          {content}
-        </TooltipPrimitive.Content>
-      </TooltipPrimitive.Portal>
-    </TooltipPrimitive.Root>
-  );
-};
+/**
+ * NOTE:
+ * When used together with other triggers (Collapsible, ActionsMenu...) of radix-based component it might
+ * overwrite [data-state] attribute of trigger element and make styling a bit harder. As a workaround you might:
+ * 1. Make sure that Tooltip is the lowest trigger. Usually we don't care about data-state of tooltip's trigger  (e.g. `<CollapsibleTrigger asChilde><Tooltip><Button/></Tooltip></CollapsibleTrigger>`)
+ * 2. Use controlled state of components and add classes for open states
+ *
+ * Ref: https://github.com/radix-ui/primitives/issues/602
+ */
+export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
+  (
+    {
+      title,
+      description,
+      content = (title || description) && (
+        <>
+          <TooltipTitle>{title}</TooltipTitle>
+          <TooltipDescription>{description}</TooltipDescription>
+        </>
+      ),
+      side,
+      sideOffset = space.xs,
+      align,
+      alignOffset,
+      instant,
+      children,
+      whiteBg,
+      visible,
+      onVisibleChange,
+      keepOnClick,
+      disabled,
+
+      ...triggerProps
+    },
+    ref
+  ) => {
+    const keepOnClickProps = keepOnClick
+      ? {
+          onPointerDown: (e: React.PointerEvent<HTMLButtonElement>) => {
+            preventDefaultAndStopPropagation(e);
+            triggerProps.onPointerDown?.(e);
+          },
+          onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+            preventDefaultAndStopPropagation(e);
+            triggerProps.onClick?.(e);
+          },
+        }
+      : null;
+
+    return (
+      <TooltipPrimitive.Root
+        delayDuration={instant ? 0 : tooltipDelay.enter}
+        open={disabled ? false : Boolean(content) && visible}
+        onOpenChange={onVisibleChange}
+      >
+        <TooltipPrimitive.Trigger ref={ref} {...triggerProps} {...keepOnClickProps} asChild>
+          {children}
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            side={side}
+            sideOffset={sideOffset}
+            align={align}
+            alignOffset={alignOffset}
+            className={cx(tooltipStyle, whiteBg && whiteBgStyle)}
+          >
+            {content}
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    );
+  }
+);