@fibery/ui-kit 1.4.1 → 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.accentTextColor,
-    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/Button.d.ts

@@ -1,26 +0,0 @@
-import type {ComponentPropsWithRef, FunctionComponent} from "react";
-import {IconBaseProps} from "./icons/types";
-type Size = ":button-size/super-small" | ":button-size/small" | ":button-size/normal" | ":button-size/big";
-type Props = {
-  size?: Size;
-  borderless?: boolean;
-  Icon?: ((props: IconBaseProps) => JSX.Element) | null;
-  color?: string;
-  primary?: boolean;
-  pending?: boolean;
-  width?: string | number;
-  height?: string | number;
-} & 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">
->;

package/src/Button.js

@@ -1,360 +0,0 @@
-import {hasNonEmptyChild} from "@fibery/react/src/has-non-empty-child";
-import {css} from "@linaria/core";
-import {styled} from "@linaria/react";
-import cx from "classnames";
-import _ from "lodash";
-import PropTypes from "prop-types";
-import {forwardRef} from "react";
-import {border, colors, fontWeight, getDarkenColor, getOpacities, opacity, textStyles, themeVars} from "./designSystem";
-import MoreIcon from "./icons/react/More";
-import MoreCompactIcon from "./icons/react/MoreCompact";
-import {Item} from "./Item";
-import {Spinner} from "./loaders";
-import {useTheme} from "./ThemeProvider";
-
-const baseSize = 14;
-
-const fontSizes = {
-  ":button-size/super-small": baseSize - 4,
-  ":button-size/small": baseSize - 2,
-  ":button-size/normal": baseSize,
-  ":button-size/big": baseSize + 2,
-};
-
-const sizeShifts = {
-  ":button-size/super-small": -2,
-  ":button-size/small": -1,
-  ":button-size/normal": 0,
-  ":button-size/big": 1,
-};
-
-const buttonBorderWidth = 1;
-
-const staticButtonStyle = css`
-  ${{
-    boxSizing: "border-box",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    verticalAlign: "middle",
-    fontWeight: fontWeight.bold,
-    lineHeight: 1,
-    margin: 0,
-    borderRadius: border.radius6,
-    borderWidth: buttonBorderWidth,
-    borderStyle: "solid",
-    outline: "none",
-    position: "relative",
-  }}
-`;
-
-const ordersInGroup = {
-  first: css`
-    &.${staticButtonStyle} {
-      ${{
-        display: "inline-flex",
-        borderRadius: `${border.radius6}px 0 0 ${border.radius6}px`,
-        marginRight: -1,
-      }}
-    }
-  `,
-  middle: css`
-    &.${staticButtonStyle} {
-      ${{
-        display: "inline-flex",
-        borderRadius: border.radius0,
-        marginRight: -1,
-      }}
-    }
-  `,
-  last: css`
-    &.${staticButtonStyle} {
-      ${{
-        display: "inline-flex",
-        borderRadius: `0 ${border.radius6}px ${border.radius6}px 0`,
-      }}
-    }
-  `,
-};
-
-const getMainColor = ({color, dangerous, theme}) => {
-  if (color) {
-    return color;
-  }
-  if (dangerous) {
-    return theme.danger;
-  }
-  if (!theme) {
-    return colors.primary;
-  }
-  return theme.buttonColor;
-};
-
-const getBorderColor = ({mainColor, borderless, primary}) => {
-  if (borderless) {
-    return colors.transparent;
-  }
-  if (primary) {
-    return mainColor;
-  }
-  return getOpacities(mainColor).opacity15;
-};
-
-const getHoverBorderColor = ({mainColor, borderless, primary, hoverBgColor}) => {
-  if (borderless) {
-    return colors.transparent;
-  }
-  if (primary) {
-    return hoverBgColor;
-  }
-  return mainColor;
-};
-
-const getTextColor = ({mainColor, primary, theme}) => {
-  if (primary) {
-    return theme.buttonPrimaryTextColor;
-  }
-  return mainColor;
-};
-
-const getBgColor = ({mainColor, primary}) => {
-  if (primary) {
-    return mainColor;
-  }
-  return colors.transparent;
-};
-
-const getHoverBgColor = ({mainColor, borderless, primary}) => {
-  if (primary) {
-    return getDarkenColor(mainColor);
-  }
-  if (borderless) {
-    return getOpacities(mainColor).opacity15;
-  }
-  return colors.transparent;
-};
-
-const getSpinnerColor = ({mainColor, primary}) => {
-  if (primary) {
-    return colors.inversedTextColor;
-  }
-  return mainColor;
-};
-
-const getButtonMagicConstants = _.memoize((size) => {
-  const sizeShift = sizeShifts[size];
-
-  const fontSize = fontSizes[size];
-  const minSize = fontSize * 2;
-  const horizontalPadding = baseSize - 2 + sizeShift * 4;
-
-  return {fontSize, minSize, horizontalPadding};
-});
-
-const getIconMagicConstants = _.memoize((size) => {
-  const sizeShift = sizeShifts[size];
-
-  const iconSize = baseSize + 2 + sizeShift * 2;
-  const leftContainerSize = 8;
-  const leftContainerMarginRight = iconSize - leftContainerSize;
-
-  return {iconSize, leftContainerSize, leftContainerMarginRight};
-});
-
-const StyledButton = styled.button`
-  font-size: ${({buttonSize}) => getButtonMagicConstants(buttonSize).fontSize}px;
-  min-height: ${({buttonSize}) => getButtonMagicConstants(buttonSize).minSize}px;
-  min-width: ${({buttonSize}) => getButtonMagicConstants(buttonSize).minSize}px;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-left: ${({buttonSize}) => getButtonMagicConstants(buttonSize).horizontalPadding}px;
-  padding-right: ${({buttonSize}) => getButtonMagicConstants(buttonSize).horizontalPadding}px;
-  opacity: ${({disabled}) => (disabled ? opacity.regular : 1)};
-  width: ${({buttonWidth = "auto"}) => (typeof buttonWidth === "string" ? buttonWidth : `${buttonWidth}px`)};
-  height: ${({buttonHeight = "auto"}) => (typeof buttonHeight === "string" ? buttonHeight : `${buttonHeight}px`)};
-  color: ${({textColor}) => textColor};
-  background-color: ${({bgColor}) => bgColor};
-  border-color: ${({borderColor}) => borderColor};
-  cursor: ${({clickable}) => (clickable ? "pointer" : "default")};
-  transition: all 150ms ease-out;
-
-  &:focus {
-    box-shadow: ${({borderColor, activeStyle}) =>
-      activeStyle ? `0 0 0 3px ${getOpacities(borderColor).light}` : "none"};
-    background-color: ${({hoverBgColor}) => hoverBgColor};
-    border-color: ${({hoverBorderColor}) => hoverBorderColor};
-    transition: all 150ms ease-out;
-  }
-
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
-    background-color: ${({bgColor}) => bgColor};
-    border-color: ${({borderColor}) => borderColor};
-    transition: none;
-  }
-
-  &:focus-visible {
-    box-shadow: ${({borderColor, activeStyle}) =>
-      activeStyle ? `0 0 0 3px ${getOpacities(borderColor).light}` : "none"};
-    background-color: ${({hoverBgColor}) => hoverBgColor};
-    border-color: ${({hoverBorderColor}) => hoverBorderColor};
-    transition: all 150ms ease-out;
-  }
-
-  &:hover,
-  &:focus:hover:not(:focus-visible) {
-    background-color: ${({hoverBgColor}) => hoverBgColor};
-    border-color: ${({hoverBorderColor}) => hoverBorderColor};
-    transition: all 150ms ease-out;
-  }
-`;
-
-export const buttonClassName = StyledButton;
-
-const shortcutStyle = css`
-  ${{
-    ...textStyles.small,
-    color: themeVars.whiteColor,
-    border: "solid 1px",
-    borderRadius: border.radius4,
-    paddingLeft: 4,
-    paddingRight: 4,
-    marginLeft: 4,
-    opacity: 0.7,
-  }}
-`;
-
-const leftContainerMarginRightVar = "--fibery-button-left-container-margin-right";
-
-const leftContainerClassName = css`
-  margin-right: var(${leftContainerMarginRightVar});
-`;
-
-export const Button = forwardRef(
-  (
-    {
-      children,
-      color,
-      dangerous,
-      borderless,
-      primary,
-      pending,
-      icon,
-      Icon,
-      size = ":button-size/normal",
-      type = "button",
-      disabled,
-      width,
-      height,
-      inGroup,
-      onClick,
-      className,
-      shortcut,
-      noOverflow = true,
-      ...rest
-    },
-    forwardedRef
-  ) => {
-    const theme = useTheme();
-    const mainColor = getMainColor({color, dangerous, theme});
-    const textColor = getTextColor({mainColor, primary, theme});
-    const spinnerBgColor = getOpacities(textColor).light;
-    const spinnerColor = getSpinnerColor({mainColor, primary});
-    const bgColor = getBgColor({mainColor, primary});
-    const hoverBgColor = getHoverBgColor({mainColor, borderless, primary});
-    const borderColor = getBorderColor({mainColor, borderless, primary});
-    const hoverBorderColor = getHoverBorderColor({
-      mainColor,
-      borderless,
-      primary,
-      hoverBgColor,
-    });
-    if (icon) {
-      // eslint-disable-next-line no-console
-      console.warn("'icon' props doesn't support anymore. Please use 'Icon' prop with explicit Icon Component");
-    }
-    const {iconSize, leftContainerSize, leftContainerMarginRight} = getIconMagicConstants(size);
-
-    const leftContainer = pending ? (
-      <Spinner
-        backgroundColor={spinnerBgColor}
-        color={spinnerColor}
-        size={iconSize}
-        containerSize={leftContainerSize}
-      />
-    ) : Icon ? (
-      <Icon color={textColor} size={iconSize} containerSize={leftContainerSize} />
-    ) : null;
-    const styleVariable = {
-      buttonSize: size,
-      disabled,
-      pending,
-      buttonWidth: width,
-      buttonHeight: height,
-      textColor,
-      clickable: !disabled && !pending,
-      hoverBgColor: !disabled && !pending ? hoverBgColor : bgColor,
-      hoverBorderColor: !disabled && !pending ? hoverBorderColor : borderColor,
-      borderColor,
-      bgColor,
-    };
-
-    return (
-      <StyledButton
-        {...styleVariable}
-        ref={forwardedRef}
-        type={type}
-        onClick={!disabled && !pending && onClick ? onClick : _.noop}
-        disabled={disabled}
-        className={cx(className, staticButtonStyle, ordersInGroup[inGroup])}
-        {...rest}
-      >
-        <Item
-          leftContainer={leftContainer}
-          style={{
-            [leftContainerMarginRightVar]: `${leftContainerMarginRight}px`,
-          }}
-          containerClassName={cx({[leftContainerClassName]: leftContainer && hasNonEmptyChild(children)})}
-          rightContainer={shortcut && <span className={cx(shortcutStyle)}>{shortcut}</span>}
-          noOverflow={noOverflow}
-        >
-          {children}
-        </Item>
-      </StyledButton>
-    );
-  }
-);
-
-Button.propTypes = {
-  size: PropTypes.oneOf(Object.keys(fontSizes)),
-  type: PropTypes.string,
-  primary: PropTypes.bool,
-  dangerous: PropTypes.bool,
-  disabled: PropTypes.bool,
-  pending: PropTypes.bool,
-  borderless: PropTypes.bool,
-  icon: PropTypes.string,
-  color: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onClick: PropTypes.func,
-  inGroup: PropTypes.oneOf(Object.keys(ordersInGroup)),
-};
-
-// TODO can be inlined
-export function ActionsButton({onClick, label = ``, disabled}) {
-  return <Button Icon={MoreIcon} onClick={onClick} borderless aria-label={label} disabled={disabled} />;
-}
-
-export const ActionsButtonCompact = forwardRef(({inverted, ...rest}, ref) => {
-  const theme = useTheme();
-  return (
-    <Button
-      ref={ref}
-      size={":button-size/small"}
-      Icon={MoreCompactIcon}
-      color={inverted ? colors.inversedTextColor : theme.buttonColor}
-      borderless
-      {...rest}
-    />
-  );
-});