@fibery/ui-kit 1.5.0 → 1.7.0

package/src/tooltip.tsx

@@ -1,184 +1,164 @@
-import {css} from "@linaria/core";
-import type {ReactNode} from "react";
-import cx from "classnames";
-import PropTypes from "prop-types";
-import {AntTooltip, TooltipPlacement} from "./antd/ant-tooltip";
-import {border, opacity, textStyles, themeVars, tooltipDelay} from "./designSystem";
+import {css, cx} from "@linaria/core";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type {ReactNode, SyntheticEvent} from "react";
+import {border, lineHeight, space, themeVars, tooltipDelay} from "./designSystem";
+
+const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
+  e.preventDefault();
+  e.stopPropagation();
+};
 
 const titleStyle = css`
-  ${{
-    color: themeVars.whiteColor,
-    fontWeight: 500,
-    opacity: opacity.opacity90,
-  }}
+  color: ${themeVars.whiteColor};
+  line-height: ${lineHeight.heading};
+  font-weight: 500;
 `;
 
 const descriptionStyle = css`
-  ${{
-    color: themeVars.shortcutTextColor,
-    fontWeight: 400,
-  }}
+  color: ${themeVars.shortcutTextColor};
+  line-height: ${lineHeight.heading};
+  font-weight: 400;
 `;
 
 const tooltipStyle = css`
-  ${{
-    zIndex: 100000,
-    transition: "none",
-    pointerEvents: "none",
-    maxWidth: 300,
-    ...textStyles.small,
-    "& .ant-tooltip-arrow": {
-      visibility: "hidden",
-    },
-    "& .ant-tooltip-inner": {
-      maxWidth: 300,
-      minHeight: 30,
-      backgroundColor: themeVars.tooltipBgColor,
-      borderRadius: border.radius6,
-    },
-  }}
+  font-size: 13px;
+  color: ${themeVars.whiteColor};
+  z-index: 100000;
+  min-height: 30px;
+  max-width: 300px;
+  background-color: ${themeVars.tooltipBgColor};
+  padding: ${space.s}px ${space.m}px;
+  border-radius: ${border.radius6}px;
+  box-shadow: ${themeVars.actionMenuShadow};
+
+  @media (prefers-reduced-motion: no-preference) {
+    @keyframes zoomIn {
+      from {
+        opacity: 0;
+        transform: scale(0.8);
+      }
+
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes zoomOut {
+      from {
+        transform: scale(1);
+      }
+
+      to {
+        opacity: 0;
+        transform: scale(0.8);
+      }
+    }
+
+    will-change: transform, opacity;
+    transform-origin: var(--radix-tooltip-content-transform-origin);
+    animation-duration: 0.1s;
+
+    &[data-state="delayed-open"] {
+      animation-name: zoomIn;
+      animation-timing-function: ease-out;
+    }
+  }
 `;
 
 const whiteBgStyle = css`
-  ${{
-    "& .ant-tooltip-inner": {
-      backgroundColor: themeVars.actionMenuInnerBg,
-      color: themeVars.textColor,
-    },
-  }}
+  background-color: ${themeVars.actionMenuInnerBg};
+  color: ${themeVars.textColor};
 `;
 
-type AlignPoint = string;
-
-export interface AlignType {
-  /**
-   * move point of source node to align with point of target node.
-   * Such as ['tr','cc'], align top right point of source node with center point of target node.
-   * Point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) */
-  points?: AlignPoint[];
-  /**
-   * offset source node by offset[0] in x and offset[1] in y.
-   * If offset contains percentage string value, it is relative to sourceNode region.
-   */
-  offset?: number[];
-  /**
-   * offset target node by offset[0] in x and offset[1] in y.
-   * If targetOffset contains percentage string value, it is relative to targetNode region.
-   */
-  targetOffset?: number[];
-  /**
-   * If adjustX field is true, will adjust source node in x direction if source node is invisible.
-   * If adjustY field is true, will adjust source node in y direction if source node is invisible.
-   */
-  overflow?: {
-    adjustX?: boolean | number;
-    adjustY?: boolean | number;
-  };
-  /**
-   * Whether use css right instead of left to position
-   */
-  useCssRight?: boolean;
-  /**
-   * Whether use css bottom instead of top to position
-   */
-  useCssBottom?: boolean;
-  /**
-   * Whether use css transform instead of left/top/right/bottom to position if browser supports.
-   * Defaults to false.
-   */
-  useCssTransform?: boolean;
-  ignoreShake?: boolean;
-}
-
-const alignByPlacement = {
-  bottom: {offset: [0, -2] as [number, number]},
-};
-
 export const TooltipTitle = ({children}: {children: ReactNode}) => <div className={titleStyle}>{children}</div>;
 export const TooltipDescription = ({children}: {children: ReactNode}) => (
   <div className={descriptionStyle}>{children}</div>
 );
 
-export function TooltipContent({title, shortcut}: {title: string; shortcut?: string}) {
-  return (
-    <div
-      className={css`
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      `}
-    >
-      <TooltipTitle>{title}</TooltipTitle>
-      {shortcut ? <TooltipDescription>{shortcut}</TooltipDescription> : null}
-    </div>
-  );
-}
+export const TooltipContent = ({title, shortcut}: {title: string; shortcut?: string}) => (
+  <div
+    className={css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    `}
+  >
+    <TooltipTitle>{title}</TooltipTitle>
+    {shortcut ? <TooltipDescription>{shortcut}</TooltipDescription> : null}
+  </div>
+);
 
-type Props = {
+export const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> = (props) => (
+  <TooltipPrimitive.Provider disableHoverableContent skipDelayDuration={150} {...props} />
+);
+
+export type TooltipProps = {
   title?: ReactNode;
   description?: ReactNode;
   content?: ReactNode;
-  placement?: TooltipPlacement;
-  align?: AlignType;
-  trigger?: string | string[];
-  visible?: boolean;
+  side?: TooltipPrimitive.TooltipContentProps["side"];
+  sideOffset?: TooltipPrimitive.TooltipContentProps["sideOffset"];
+  align?: TooltipPrimitive.TooltipContentProps["align"];
+  alignOffset?: TooltipPrimitive.TooltipContentProps["alignOffset"];
   instant?: boolean;
-  mouseEnterDelay?: number;
-  children: JSX.Element | string;
+  children: ReactNode;
   whiteBg?: boolean;
+  visible?: boolean;
   onVisibleChange?: (visible: boolean) => void;
-  destroyTooltipOnHide?: boolean;
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  disabled?: boolean;
+  /** should keep tooltip visible after click */
+  keepOnClick?: boolean;
 };
 
-export function Tooltip(props: Props) {
-  const {
-    title,
-    description,
-    content = (title || description) && (
-      <>
-        <TooltipTitle>{title}</TooltipTitle>
-        <TooltipDescription>{description}</TooltipDescription>
-      </>
-    ),
-    align,
-    placement,
-    trigger,
-    visible,
-    instant,
-    mouseEnterDelay,
-    children,
-    whiteBg,
-    onVisibleChange,
-    destroyTooltipOnHide,
-    getPopupContainer,
-  } = props;
-  const maybeVisibleProp = visible === undefined ? {} : {visible};
+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 (
-    <AntTooltip
-      title={content}
-      {...maybeVisibleProp}
-      trigger={trigger}
-      placement={placement}
-      mouseEnterDelay={mouseEnterDelay || (instant ? 0 : tooltipDelay.enter)}
-      mouseLeaveDelay={instant ? 0 : tooltipDelay.leave}
-      overlayClassName={cx(tooltipStyle, {[whiteBgStyle]: whiteBg})}
-      align={align || (placement === "bottom" ? alignByPlacement.bottom : undefined)}
-      onVisibleChange={onVisibleChange}
-      destroyTooltipOnHide={destroyTooltipOnHide}
-      getPopupContainer={getPopupContainer}
+    <TooltipPrimitive.Root
+      delayDuration={instant ? 0 : tooltipDelay.enter}
+      open={disabled ? false : Boolean(content) && visible}
+      onOpenChange={onVisibleChange}
     >
-      {children}
-    </AntTooltip>
+      <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>
   );
-}
-
-Tooltip.propTypes = {
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  placement: PropTypes.string,
-  visible: PropTypes.bool,
-  instant: PropTypes.bool,
 };

package/src/BackButton.tsx

@@ -1,27 +0,0 @@
-import {Button} from "@fibery/ui-kit";
-import BackIcon from "./icons/react/Back";
-import {Size} from "@fibery/ui-kit/src/Button";
-
-type Props = {
-  disabled?: boolean;
-  pending?: boolean;
-  onClick: () => unknown;
-  size?: Size;
-  color?: string;
-};
-
-export function BackButton({disabled, onClick, pending, size, color}: Props) {
-  return (
-    <Button
-      borderless
-      Icon={BackIcon}
-      disabled={disabled}
-      onClick={onClick}
-      pending={pending}
-      size={size}
-      color={color}
-    >
-      Back
-    </Button>
-  );
-}

package/src/Button.d.ts

@@ -1,28 +0,0 @@
-import type {ComponentPropsWithRef, FunctionComponent} from "react";
-import {IconBaseProps} from "./icons/types";
-export type Size = ":button-size/super-small" | ":button-size/small" | ":button-size/normal" | ":button-size/big";
-type PositionInGroup = "first" | "middle" | "last";
-type Props = {
-  size?: Size;
-  borderless?: boolean;
-  Icon?: ((props: IconBaseProps) => JSX.Element) | null;
-  color?: string;
-  primary?: boolean;
-  pending?: boolean;
-  width?: string | number;
-  height?: string | number;
-  inGroup?: PositionInGroup;
-} & Omit<ComponentPropsWithRef<"button">, "size" | "width" | "height">;
-
-export const Button: FunctionComponent<Props>;
-export const buttonClassName: string;
-
-export const ActionsButton: FunctionComponent<{
-  inverted?: boolean;
-  label?: string;
-  color?: string;
-  onClick?: Props["onClick"];
-}>;
-export const ActionsButtonCompact: FunctionComponent<
-  {inverted?: boolean} & Omit<Props, "color" | "borderless" | "Icon" | "size">
->;