@fibery/ui-kit 1.15.0 → 1.17.0

package/src/icons/react/Figma.tsx

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

package/src/icons/react/GoogleDrive.tsx

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

package/src/icons/react/GoogleMap.tsx

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

package/src/icons/react/Loom.tsx

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

package/src/icons/react/Miro.tsx

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

package/src/icons/react/Mixpanel.tsx

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

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/Twitter.tsx

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

package/src/icons/react/Youtube.tsx

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

package/src/icons/react/index.tsx

@@ -34,10 +34,16 @@ export { default as Atom } from './Atom';
 export { default as Back } from './Back';
 export { default as BacklogIcon } from './BacklogIcon';
 export { default as BatchActionsIcon } from './BatchActionsIcon';
+export { default as BellCircle } from './BellCircle';
+export { default as BellX } from './BellX';
+export { default as Bolt } from './Bolt';
 export { default as Cards } from './Cards';
+export { default as CheckCircle } from './CheckCircle';
 export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
+export { default as ClockForward } from './ClockForward';
 export { default as Close } from './Close';
+export { default as ColorCodingFilled } from './ColorCodingFilled';
 export { default as ColorCoding } from './ColorCoding';
 export { default as Columns2 } from './Columns2';
 export { default as Columns4 } from './Columns4';
@@ -53,6 +59,7 @@ export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
 export { default as DynamicFilterValue } from './DynamicFilterValue';
 export { default as Email } from './Email';
+export { default as EmojiDelete } from './EmojiDelete';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
 export { default as ExtensionComments } from './ExtensionComments';
@@ -64,6 +71,7 @@ export { default as FavoritesMenu } from './FavoritesMenu';
 export { default as Favorites } from './Favorites';
 export { default as FiberyMono } from './FiberyMono';
 export { default as Fields } from './Fields';
+export { default as Figma } from './Figma';
 export { default as FileUpload } from './FileUpload';
 export { default as Filter } from './Filter';
 export { default as FocusModeOff } from './FocusModeOff';
@@ -73,6 +81,8 @@ export { default as FormWithoutCover } from './FormWithoutCover';
 export { default as Github } from './Github';
 export { default as Gitlab } from './Gitlab';
 export { default as Globe } from './Globe';
+export { default as GoogleDrive } from './GoogleDrive';
+export { default as GoogleMap } from './GoogleMap';
 export { default as Hide } from './Hide';
 export { default as Hint } from './Hint';
 export { default as Home } from './Home';
@@ -85,11 +95,14 @@ export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
 export { default as Lock } from './Lock';
+export { default as Loom } from './Loom';
 export { default as Markdown } from './Markdown';
 export { default as MenuCollapser } from './MenuCollapser';
 export { default as MessagePlusSquare } from './MessagePlusSquare';
 export { default as Milestones } from './Milestones';
 export { default as Minus } from './Minus';
+export { default as Miro } from './Miro';
+export { default as Mixpanel } from './Mixpanel';
 export { default as MoreCompact } from './MoreCompact';
 export { default as More } from './More';
 export { default as MySpace } from './MySpace';
@@ -112,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';
@@ -172,6 +186,7 @@ export { default as SortOnTop } from './SortOnTop';
 export { default as Sort } from './Sort';
 export { default as Spinner } from './Spinner';
 export { default as Templates } from './Templates';
+export { default as Twitter } from './Twitter';
 export { default as TypeBoolean } from './TypeBoolean';
 export { default as TypeButton } from './TypeButton';
 export { default as TypeCheckbox } from './TypeCheckbox';
@@ -210,3 +225,4 @@ export { default as ViewTable } from './ViewTable';
 export { default as ViewTimeline } from './ViewTimeline';
 export { default as Views } from './Views';
 export { default as Warning } from './Warning';
+export { default as Youtube } from './Youtube';

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>
+    );
+  }
+);

package/src/Button/icon-button-with-tooltip.tsx

@@ -1,15 +0,0 @@
-import {forwardRef} from "react";
-import {Tooltip, TooltipProps} from "../tooltip";
-import {IconButton, IconButtonProps} from "./icon-button";
-
-type IconButtonTooltipProps = Pick<TooltipProps, "title" | "description" | "content" | "side">;
-
-export const IconButtonWithTooltip = forwardRef<HTMLButtonElement, IconButtonTooltipProps & IconButtonProps>(
-  function IconButtonWithTooltip({title, description, content, side, ...props}, ref) {
-    return (
-      <Tooltip title={title} description={description} content={content} side={side}>
-        <IconButton ref={ref} {...props} />
-      </Tooltip>
-    );
-  }
-);

package/src/emoji-picker/index.tsx

@@ -1,5 +0,0 @@
-export {EmojiPickerRoot as Root} from "./root";
-export {EmojiPickerContent as Content} from "./content";
-export {EmojiPickerGrid as Grid} from "./grid";
-export {EmojiPickerSearch as Search} from "./search";
-export {EmojiPickerFooter as Footer} from "./footer";