@akinon/ui-tooltip 0.3.0 → 0.5.0

package/dist/cjs/index.d.ts

@@ -1,5 +1,5 @@
-import type { TooltipProps as AntTooltipProps } from 'antd';
 import * as React from 'react';
-export type TooltipProps = AntTooltipProps;
+import type { TooltipProps } from './types';
+export type { TooltipProps } from './types';
 export declare const Tooltip: ({ children, ...restTooltipProps }: TooltipProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAE3C,eAAO,MAAM,OAAO,sCAAuC,YAAY,sBAMtE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,sCAAuC,YAAY,sBAgCtE,CAAC"}

package/dist/cjs/index.js

@@ -12,10 +12,28 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
+const ui_theme_1 = require("@akinon/ui-theme");
+const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
 const Tooltip = (_a) => {
     var { children } = _a, restTooltipProps = __rest(_a, ["children"]);
-    return (React.createElement(antd_1.Tooltip, Object.assign({}, restTooltipProps), children));
+    const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
+    const { token, hashId } = (0, ui_theme_1.useToken)();
+    const tooltipToken = token.Tooltip;
+    const useStyle = (0, cssinjs_1.useStyleRegister)({
+        token: token,
+        path: ['Tooltip'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-tooltip`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-tooltip`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(antd_1.Tooltip, Object.assign({ color: tooltipToken.bgColor }, restTooltipProps), children));
 };
 exports.Tooltip = Tooltip;

package/dist/cjs/types.d.ts

@@ -0,0 +1,466 @@
+export type TooltipProps = Omit<
+  AntTooltipProps,
+  | 'prefixCls'
+  | 'style'
+  | 'styles'
+  | 'id'
+  | 'builtinPlacements'
+  | 'showArrow'
+  | 'onPopupAlign'
+  | 'overlay'
+  | 'getTooltipContainer'
+  | 'arrowContent'
+  | 'motion'
+>;
+
+interface AdjustOverflow {
+  adjustX?: 0 | 1;
+  adjustY?: 0 | 1;
+}
+
+interface PlacementsConfig {
+  arrowWidth: number;
+  arrowPointAtCenter?: boolean;
+  autoAdjustOverflow?: boolean | AdjustOverflow;
+  offset: number;
+  borderRadius: number;
+  visibleFirst?: boolean;
+}
+
+type LiteralUnion<T extends string> = T | (string & {});
+
+type RenderFunction = () => React.ReactNode;
+
+interface TooltipPropsWithOverlay extends AbstractTooltipProps {
+  /**
+   * The text shown in the tooltip
+   */
+  title?: React.ReactNode | RenderFunction;
+  //overlay?: React.ReactNode | RenderFunction;
+}
+
+interface TooltipPropsWithTitle extends AbstractTooltipProps {
+  /**
+   * The text shown in the tooltip
+   */
+  title: React.ReactNode | RenderFunction;
+  //overlay?: React.ReactNode | RenderFunction;
+}
+
+export declare type AntTooltipProps =
+  | TooltipPropsWithTitle
+  | TooltipPropsWithOverlay;
+
+type PurePanelProps = Omit<TooltipProps, 'children'>;
+
+declare const PurePanel: React.FC<PurePanelProps>;
+
+declare const PresetColors: readonly [
+  'blue',
+  'purple',
+  'cyan',
+  'green',
+  'magenta',
+  'pink',
+  'red',
+  'orange',
+  'yellow',
+  'volcano',
+  'geekblue',
+  'lime',
+  'gold'
+];
+
+type PresetColorKey = (typeof PresetColors)[number];
+
+type InverseColor = `${PresetColorKey}-inverse`;
+
+type PresetColorType = PresetColorKey | InverseColor;
+
+export type { AdjustOverflow, PlacementsConfig };
+
+export interface TooltipRef {
+  forceAlign: VoidFunction;
+}
+
+export type TooltipPlacement =
+  | 'top'
+  | 'left'
+  | 'right'
+  | 'bottom'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'rightTop'
+  | 'rightBottom';
+
+export interface TooltipAlignConfig {
+  points?: [string, string];
+  offset?: [number | string, number | string];
+  targetOffset?: [number | string, number | string];
+  overflow?: {
+    adjustX: boolean;
+    adjustY: boolean;
+  };
+  useCssRight?: boolean;
+  useCssBottom?: boolean;
+  useCssTransform?: boolean;
+}
+
+interface LegacyTooltipProps
+  extends Partial<
+    Omit<
+      RcTooltipProps,
+      | 'children'
+      | 'visible'
+      | 'defaultVisible'
+      | 'onVisibleChange'
+      | 'afterVisibleChange'
+      | 'destroyTooltipOnHide'
+    >
+  > {
+  /**
+   * Whether the floating tooltip card is open or not
+   */
+  open?: RcTooltipProps['visible'];
+  /**
+   * Whether the floating tooltip card is open by default
+   */
+  defaultOpen?: boolean;
+  /**
+   * Callback executed when visibility of the tooltip card is changed
+   */
+  onOpenChange?: (open: boolean) => void;
+  //afterOpenChange?: RcTooltipProps['afterVisibleChange'];
+}
+
+export interface AbstractTooltipProps extends LegacyTooltipProps {
+  style?: React.CSSProperties;
+  /**
+   * The additional css class
+   */
+  className?: string;
+  /**
+   * ClassName on the root element
+   */
+  rootClassName?: string;
+  /**
+   * The background color
+   */
+  color?: string;
+  /**
+   * The position of the tooltip relative to the target
+   */
+  placement?: TooltipPlacement;
+  //builtinPlacements?: typeof Placements;
+  //openClassName?: string;
+  /**
+   * Change arrow's visible state and change whether the arrow is pointed at the center of target
+   */
+  arrow?: boolean;
+  /**
+   * Whether to adjust popup placement automatically when popup is off screen
+   */
+  autoAdjustOverflow?: boolean;
+  /**
+   * The DOM container of the tip, the default behavior is to create a div element in body
+   */
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  children?: React.ReactNode;
+  /**
+   * Whether destroy tooltip when hidden
+   */
+  destroyTooltipOnHide?: boolean;
+}
+
+export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
+  title?: React.ReactNode | RenderFunction;
+  overlay?: React.ReactNode | RenderFunction;
+}
+
+export interface TooltipPropsWithTitle extends AbstractTooltipProps {
+  title: React.ReactNode | RenderFunction;
+  overlay?: React.ReactNode | RenderFunction;
+}
+
+export declare type TooltipProps =
+  | TooltipPropsWithTitle
+  | TooltipPropsWithOverlay;
+
+declare const InternalTooltip: React.ForwardRefExoticComponent<
+  TooltipProps & React.RefAttributes<TooltipRef>
+>;
+
+type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
+
+interface RcTooltipProps
+  extends Pick<
+    TriggerProps,
+    | 'onPopupAlign'
+    | 'builtinPlacements'
+    | 'fresh'
+    | 'children'
+    | 'mouseLeaveDelay'
+    | 'mouseEnterDelay'
+    | 'prefixCls'
+    | 'forceRender'
+  > {
+  /**
+   * Tooltip trigger mode. Could be multiple by passing an array
+   */
+  trigger?: ActionType | ActionType[];
+  defaultVisible?: boolean;
+  visible?: boolean;
+  placement?: string;
+  /** Config popup motion */
+  motion?: TriggerProps['popupMotion'];
+  onVisibleChange?: (visible: boolean) => void;
+  afterVisibleChange?: (visible: boolean) => void;
+  overlay: (() => React.ReactNode) | React.ReactNode;
+  /**
+   * Style of the tooltip card
+   */
+  overlayStyle?: React.CSSProperties;
+  /**
+   * Class name of the tooltip card
+   */
+  overlayClassName?: string;
+  getTooltipContainer?: (node: HTMLElement) => HTMLElement;
+  destroyTooltipOnHide?: boolean;
+  /**
+   * This value will be merged into placement's config, please refer to the settings <a href="https://github.com/yiminghe/dom-align" target="_blank">dom-align</a>
+   */
+  align?: AlignType;
+  showArrow?: boolean | ArrowType;
+  arrowContent?: React.ReactNode;
+  id?: string;
+  /**
+   * Style of the tooltip inner content
+   */
+  overlayInnerStyle?: React.CSSProperties;
+  /**
+   * Config z-index of Tooltip
+   */
+  zIndex?: number;
+}
+
+interface ArrowType {
+  className?: string;
+  content?: React.ReactNode;
+}
+
+interface TooltipRef {
+  nativeElement: HTMLElement;
+  forceAlign: VoidFunction;
+}
+
+type TransitionNameType = string;
+
+type AnimationType = string;
+
+type BuildInPlacements = Record<string, AlignType>;
+
+type StretchType = string;
+
+type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
+
+interface TriggerProps {
+  children: React.ReactElement;
+  action?: ActionType | ActionType[];
+  showAction?: ActionType[];
+  hideAction?: ActionType[];
+  prefixCls?: string;
+  zIndex?: number;
+  onPopupAlign?: (element: HTMLElement, align: AlignType) => void;
+  stretch?: string;
+  popupVisible?: boolean;
+  defaultPopupVisible?: boolean;
+  onPopupVisibleChange?: (visible: boolean) => void;
+  afterPopupVisibleChange?: (visible: boolean) => void;
+  getPopupContainer?: (node: HTMLElement) => HTMLElement;
+  forceRender?: boolean;
+  autoDestroy?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
+  /** Set popup motion. You can ref `rc-motion` for more info. */
+  popupMotion?: CSSMotionProps;
+  /** Set mask motion. You can ref `rc-motion` for more info. */
+  maskMotion?: CSSMotionProps;
+  /**
+   * Delay in seconds, before tooltip is shown on mouse enter
+   */
+  mouseEnterDelay?: number;
+  /**
+   * Delay in seconds, before tooltip is hidden on mouse leave
+   */
+  mouseLeaveDelay?: number;
+  focusDelay?: number;
+  blurDelay?: number;
+  popup: React.ReactNode | (() => React.ReactNode);
+  popupPlacement?: string;
+  builtinPlacements?: BuildInPlacements;
+  popupAlign?: AlignType;
+  popupClassName?: string;
+  popupStyle?: React.CSSProperties;
+  getPopupClassNameFromAlign?: (align: AlignType) => string;
+  onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
+  alignPoint?: boolean;
+  /**
+   * Trigger will memo content when close.
+   * This may affect the case if want to keep content update.
+   * Set `fresh` to `false` will always keep update.
+   */
+  fresh?: boolean;
+  arrow?: boolean | ArrowTypeOuter;
+}
+
+interface ArrowTypeOuter {
+  className?: string;
+  content?: React.ReactNode;
+}
+
+type MotionName =
+  | string
+  | {
+      appear?: string;
+      enter?: string;
+      leave?: string;
+      appearActive?: string;
+      enterActive?: string;
+      leaveActive?: string;
+    };
+
+interface CSSMotionProps {
+  motionName?: MotionName;
+  visible?: boolean;
+  motionAppear?: boolean;
+  motionEnter?: boolean;
+  motionLeave?: boolean;
+  motionLeaveImmediately?: boolean;
+  motionDeadline?: number;
+  /**
+   * Create element in view even the element is invisible.
+   * Will patch `display: none` style on it.
+   */
+  forceRender?: boolean;
+  /**
+   * Remove element when motion end. This will not work when `forceRender` is set.
+   */
+  removeOnLeave?: boolean;
+  leavedClassName?: string;
+  /** Prepare phase is used for measure element info. It will always trigger even motion is off */
+  onAppearPrepare?: MotionPrepareEventHandler;
+  /** Prepare phase is used for measure element info. It will always trigger even motion is off */
+  onEnterPrepare?: MotionPrepareEventHandler;
+  /** Prepare phase is used for measure element info. It will always trigger even motion is off */
+  onLeavePrepare?: MotionPrepareEventHandler;
+  onAppearStart?: MotionEventHandler;
+  onEnterStart?: MotionEventHandler;
+  onLeaveStart?: MotionEventHandler;
+  onAppearActive?: MotionEventHandler;
+  onEnterActive?: MotionEventHandler;
+  onLeaveActive?: MotionEventHandler;
+  onAppearEnd?: MotionEndEventHandler;
+  onEnterEnd?: MotionEndEventHandler;
+  onLeaveEnd?: MotionEndEventHandler;
+  /** This will always trigger after final visible changed. Even if no motion configured. */
+  onVisibleChanged?: (visible: boolean) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  internalRef?: React.Ref<any>;
+  children?: (
+    props: {
+      visible?: boolean;
+      className?: string;
+      style?: React.CSSProperties;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      [key: string]: any;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ref: (node: any) => void
+  ) => React.ReactElement;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type MotionPrepareEventHandler = (element: HTMLElement) => Promise<any> | void;
+
+type MotionEventHandler = (
+  element: HTMLElement,
+  event: MotionEvent
+) => React.CSSProperties | void;
+
+type MotionEndEventHandler = (
+  element: HTMLElement,
+  event: MotionEvent
+) => boolean | void;
+
+type OffsetType = number | `${number}%`;
+
+type AlignPointTopBottom = 't' | 'b' | 'c';
+
+type AlignPointLeftRight = 'l' | 'r' | 'c';
+
+type AlignPoint = `${AlignPointTopBottom}${AlignPointLeftRight}`;
+
+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?: (string | 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?: OffsetType[];
+  /**
+   * 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?: OffsetType[];
+  /**
+   * 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;
+    shiftX?: boolean | number;
+    shiftY?: boolean | number;
+  };
+  /** Auto adjust arrow position */
+  autoArrow?: boolean;
+  /**
+   * Config visible region check of html node. Default `visible`:
+   *  - `visible`:
+   *    The visible region of user browser window.
+   *    Use `clientHeight` for check.
+   *    If `visible` region not satisfy, fallback to `scroll`.
+   *  - `scroll`:
+   *    The whole region of the html scroll area.
+   *    Use `scrollHeight` for check.
+   *  - `visibleFirst`:
+   *    Similar to `visible`, but if `visible` region not satisfy, fallback to `scroll`.
+   */
+  htmlRegion?: 'visible' | 'scroll' | 'visibleFirst';
+  /**
+   * Auto chose position with `top` or `bottom` by the align result
+   */
+  dynamicInset?: boolean;
+  /**
+   * 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;
+}

package/dist/esm/index.d.ts

@@ -1,5 +1,5 @@
-import type { TooltipProps as AntTooltipProps } from 'antd';
 import * as React from 'react';
-export type TooltipProps = AntTooltipProps;
+import type { TooltipProps } from './types';
+export type { TooltipProps } from './types';
 export declare const Tooltip: ({ children, ...restTooltipProps }: TooltipProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAE3C,eAAO,MAAM,OAAO,sCAAuC,YAAY,sBAMtE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,sCAAuC,YAAY,sBAgCtE,CAAC"}

package/dist/esm/index.js

@@ -9,9 +9,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Tooltip as AntTooltip } from 'antd';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Tooltip as AntTooltip } from 'antd';
 import * as React from 'react';
 export const Tooltip = (_a) => {
     var { children } = _a, restTooltipProps = __rest(_a, ["children"]);
-    return (React.createElement(AntTooltip, Object.assign({}, restTooltipProps), children));
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const tooltipToken = token.Tooltip;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Tooltip'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-tooltip`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-tooltip`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntTooltip, Object.assign({ color: tooltipToken.bgColor }, restTooltipProps), children));
 };

package/dist/esm/types.d.ts

@@ -0,0 +1,466 @@
+export type TooltipProps = Omit<
+  AntTooltipProps,
+  | 'prefixCls'
+  | 'style'
+  | 'styles'
+  | 'id'
+  | 'builtinPlacements'
+  | 'showArrow'
+  | 'onPopupAlign'
+  | 'overlay'
+  | 'getTooltipContainer'
+  | 'arrowContent'
+  | 'motion'
+>;
+
+interface AdjustOverflow {
+  adjustX?: 0 | 1;
+  adjustY?: 0 | 1;
+}
+
+interface PlacementsConfig {
+  arrowWidth: number;
+  arrowPointAtCenter?: boolean;
+  autoAdjustOverflow?: boolean | AdjustOverflow;
+  offset: number;
+  borderRadius: number;
+  visibleFirst?: boolean;
+}
+
+type LiteralUnion<T extends string> = T | (string & {});
+
+type RenderFunction = () => React.ReactNode;
+
+interface TooltipPropsWithOverlay extends AbstractTooltipProps {
+  /**
+   * The text shown in the tooltip
+   */
+  title?: React.ReactNode | RenderFunction;
+  //overlay?: React.ReactNode | RenderFunction;
+}
+
+interface TooltipPropsWithTitle extends AbstractTooltipProps {
+  /**
+   * The text shown in the tooltip
+   */
+  title: React.ReactNode | RenderFunction;
+  //overlay?: React.ReactNode | RenderFunction;
+}
+
+export declare type AntTooltipProps =
+  | TooltipPropsWithTitle
+  | TooltipPropsWithOverlay;
+
+type PurePanelProps = Omit<TooltipProps, 'children'>;
+
+declare const PurePanel: React.FC<PurePanelProps>;
+
+declare const PresetColors: readonly [
+  'blue',
+  'purple',
+  'cyan',
+  'green',
+  'magenta',
+  'pink',
+  'red',
+  'orange',
+  'yellow',
+  'volcano',
+  'geekblue',
+  'lime',
+  'gold'
+];
+
+type PresetColorKey = (typeof PresetColors)[number];
+
+type InverseColor = `${PresetColorKey}-inverse`;
+
+type PresetColorType = PresetColorKey | InverseColor;
+
+export type { AdjustOverflow, PlacementsConfig };
+
+export interface TooltipRef {
+  forceAlign: VoidFunction;
+}
+
+export type TooltipPlacement =
+  | 'top'
+  | 'left'
+  | 'right'
+  | 'bottom'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'rightTop'
+  | 'rightBottom';
+
+export interface TooltipAlignConfig {
+  points?: [string, string];
+  offset?: [number | string, number | string];
+  targetOffset?: [number | string, number | string];
+  overflow?: {
+    adjustX: boolean;
+    adjustY: boolean;
+  };
+  useCssRight?: boolean;
+  useCssBottom?: boolean;
+  useCssTransform?: boolean;
+}
+
+interface LegacyTooltipProps
+  extends Partial<
+    Omit<
+      RcTooltipProps,
+      | 'children'
+      | 'visible'
+      | 'defaultVisible'
+      | 'onVisibleChange'
+      | 'afterVisibleChange'
+      | 'destroyTooltipOnHide'
+    >
+  > {
+  /**
+   * Whether the floating tooltip card is open or not
+   */
+  open?: RcTooltipProps['visible'];
+  /**
+   * Whether the floating tooltip card is open by default
+   */
+  defaultOpen?: boolean;
+  /**
+   * Callback executed when visibility of the tooltip card is changed
+   */
+  onOpenChange?: (open: boolean) => void;
+  //afterOpenChange?: RcTooltipProps['afterVisibleChange'];
+}
+
+export interface AbstractTooltipProps extends LegacyTooltipProps {
+  style?: React.CSSProperties;
+  /**
+   * The additional css class
+   */
+  className?: string;
+  /**
+   * ClassName on the root element
+   */
+  rootClassName?: string;
+  /**
+   * The background color
+   */
+  color?: string;
+  /**
+   * The position of the tooltip relative to the target
+   */
+  placement?: TooltipPlacement;
+  //builtinPlacements?: typeof Placements;
+  //openClassName?: string;
+  /**
+   * Change arrow's visible state and change whether the arrow is pointed at the center of target
+   */
+  arrow?: boolean;
+  /**
+   * Whether to adjust popup placement automatically when popup is off screen
+   */
+  autoAdjustOverflow?: boolean;
+  /**
+   * The DOM container of the tip, the default behavior is to create a div element in body
+   */
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  children?: React.ReactNode;
+  /**
+   * Whether destroy tooltip when hidden
+   */
+  destroyTooltipOnHide?: boolean;
+}
+
+export interface TooltipPropsWithOverlay extends AbstractTooltipProps {
+  title?: React.ReactNode | RenderFunction;
+  overlay?: React.ReactNode | RenderFunction;
+}
+
+export interface TooltipPropsWithTitle extends AbstractTooltipProps {
+  title: React.ReactNode | RenderFunction;
+  overlay?: React.ReactNode | RenderFunction;
+}
+
+export declare type TooltipProps =
+  | TooltipPropsWithTitle
+  | TooltipPropsWithOverlay;
+
+declare const InternalTooltip: React.ForwardRefExoticComponent<
+  TooltipProps & React.RefAttributes<TooltipRef>
+>;
+
+type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
+
+interface RcTooltipProps
+  extends Pick<
+    TriggerProps,
+    | 'onPopupAlign'
+    | 'builtinPlacements'
+    | 'fresh'
+    | 'children'
+    | 'mouseLeaveDelay'
+    | 'mouseEnterDelay'
+    | 'prefixCls'
+    | 'forceRender'
+  > {
+  /**
+   * Tooltip trigger mode. Could be multiple by passing an array
+   */
+  trigger?: ActionType | ActionType[];
+  defaultVisible?: boolean;
+  visible?: boolean;
+  placement?: string;
+  /** Config popup motion */
+  motion?: TriggerProps['popupMotion'];
+  onVisibleChange?: (visible: boolean) => void;
+  afterVisibleChange?: (visible: boolean) => void;
+  overlay: (() => React.ReactNode) | React.ReactNode;
+  /**
+   * Style of the tooltip card
+   */
+  overlayStyle?: React.CSSProperties;
+  /**
+   * Class name of the tooltip card
+   */
+  overlayClassName?: string;
+  getTooltipContainer?: (node: HTMLElement) => HTMLElement;
+  destroyTooltipOnHide?: boolean;
+  /**
+   * This value will be merged into placement's config, please refer to the settings <a href="https://github.com/yiminghe/dom-align" target="_blank">dom-align</a>
+   */
+  align?: AlignType;
+  showArrow?: boolean | ArrowType;
+  arrowContent?: React.ReactNode;
+  id?: string;
+  /**
+   * Style of the tooltip inner content
+   */
+  overlayInnerStyle?: React.CSSProperties;
+  /**
+   * Config z-index of Tooltip
+   */
+  zIndex?: number;
+}
+
+interface ArrowType {
+  className?: string;
+  content?: React.ReactNode;
+}
+
+interface TooltipRef {
+  nativeElement: HTMLElement;
+  forceAlign: VoidFunction;
+}
+
+type TransitionNameType = string;
+
+type AnimationType = string;
+
+type BuildInPlacements = Record<string, AlignType>;
+
+type StretchType = string;
+
+type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
+
+interface TriggerProps {
+  children: React.ReactElement;
+  action?: ActionType | ActionType[];
+  showAction?: ActionType[];
+  hideAction?: ActionType[];
+  prefixCls?: string;
+  zIndex?: number;
+  onPopupAlign?: (element: HTMLElement, align: AlignType) => void;
+  stretch?: string;
+  popupVisible?: boolean;
+  defaultPopupVisible?: boolean;
+  onPopupVisibleChange?: (visible: boolean) => void;
+  afterPopupVisibleChange?: (visible: boolean) => void;
+  getPopupContainer?: (node: HTMLElement) => HTMLElement;
+  forceRender?: boolean;
+  autoDestroy?: boolean;
+  mask?: boolean;
+  maskClosable?: boolean;
+  /** Set popup motion. You can ref `rc-motion` for more info. */
+  popupMotion?: CSSMotionProps;
+  /** Set mask motion. You can ref `rc-motion` for more info. */
+  maskMotion?: CSSMotionProps;
+  /**
+   * Delay in seconds, before tooltip is shown on mouse enter
+   */
+  mouseEnterDelay?: number;
+  /**
+   * Delay in seconds, before tooltip is hidden on mouse leave
+   */
+  mouseLeaveDelay?: number;
+  focusDelay?: number;
+  blurDelay?: number;
+  popup: React.ReactNode | (() => React.ReactNode);
+  popupPlacement?: string;
+  builtinPlacements?: BuildInPlacements;
+  popupAlign?: AlignType;
+  popupClassName?: string;
+  popupStyle?: React.CSSProperties;
+  getPopupClassNameFromAlign?: (align: AlignType) => string;
+  onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
+  alignPoint?: boolean;
+  /**
+   * Trigger will memo content when close.
+   * This may affect the case if want to keep content update.
+   * Set `fresh` to `false` will always keep update.
+   */
+  fresh?: boolean;
+  arrow?: boolean | ArrowTypeOuter;
+}
+
+interface ArrowTypeOuter {
+  className?: string;
+  content?: React.ReactNode;
+}
+
+type MotionName =
+  | string
+  | {
+      appear?: string;
+      enter?: string;
+      leave?: string;
+      appearActive?: string;
+      enterActive?: string;
+      leaveActive?: string;
+    };
+
+interface CSSMotionProps {
+  motionName?: MotionName;
+  visible?: boolean;
+  motionAppear?: boolean;
+  motionEnter?: boolean;
+  motionLeave?: boolean;
+  motionLeaveImmediately?: boolean;
+  motionDeadline?: number;
+  /**
+   * Create element in view even the element is invisible.
+   * Will patch `display: none` style on it.
+   */
+  forceRender?: boolean;
+  /**
+   * Remove element when motion end. This will not work when `forceRender` is set.
+   */
+  removeOnLeave?: boolean;
+  leavedClassName?: string;
+  /** Prepare phase is used for measure element info. It will always trigger even motion is off */
+  onAppearPrepare?: MotionPrepareEventHandler;
+  /** Prepare phase is used for measure element info. It will always trigger even motion is off */
+  onEnterPrepare?: MotionPrepareEventHandler;
+  /** Prepare phase is used for measure element info. It will always trigger even motion is off */
+  onLeavePrepare?: MotionPrepareEventHandler;
+  onAppearStart?: MotionEventHandler;
+  onEnterStart?: MotionEventHandler;
+  onLeaveStart?: MotionEventHandler;
+  onAppearActive?: MotionEventHandler;
+  onEnterActive?: MotionEventHandler;
+  onLeaveActive?: MotionEventHandler;
+  onAppearEnd?: MotionEndEventHandler;
+  onEnterEnd?: MotionEndEventHandler;
+  onLeaveEnd?: MotionEndEventHandler;
+  /** This will always trigger after final visible changed. Even if no motion configured. */
+  onVisibleChanged?: (visible: boolean) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  internalRef?: React.Ref<any>;
+  children?: (
+    props: {
+      visible?: boolean;
+      className?: string;
+      style?: React.CSSProperties;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      [key: string]: any;
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ref: (node: any) => void
+  ) => React.ReactElement;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type MotionPrepareEventHandler = (element: HTMLElement) => Promise<any> | void;
+
+type MotionEventHandler = (
+  element: HTMLElement,
+  event: MotionEvent
+) => React.CSSProperties | void;
+
+type MotionEndEventHandler = (
+  element: HTMLElement,
+  event: MotionEvent
+) => boolean | void;
+
+type OffsetType = number | `${number}%`;
+
+type AlignPointTopBottom = 't' | 'b' | 'c';
+
+type AlignPointLeftRight = 'l' | 'r' | 'c';
+
+type AlignPoint = `${AlignPointTopBottom}${AlignPointLeftRight}`;
+
+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?: (string | 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?: OffsetType[];
+  /**
+   * 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?: OffsetType[];
+  /**
+   * 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;
+    shiftX?: boolean | number;
+    shiftY?: boolean | number;
+  };
+  /** Auto adjust arrow position */
+  autoArrow?: boolean;
+  /**
+   * Config visible region check of html node. Default `visible`:
+   *  - `visible`:
+   *    The visible region of user browser window.
+   *    Use `clientHeight` for check.
+   *    If `visible` region not satisfy, fallback to `scroll`.
+   *  - `scroll`:
+   *    The whole region of the html scroll area.
+   *    Use `scrollHeight` for check.
+   *  - `visibleFirst`:
+   *    Similar to `visible`, but if `visible` region not satisfy, fallback to `scroll`.
+   */
+  htmlRegion?: 'visible' | 'scroll' | 'visibleFirst';
+  /**
+   * Auto chose position with `top` or `bottom` by the align result
+   */
+  dynamicInset?: boolean;
+  /**
+   * 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-tooltip",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -16,9 +16,8 @@
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.2.0",
-    "@akinon/vite-config": "0.4.0",
-    "@akinon/eslint-config": "0.1.0"
+    "@akinon/typescript-config": "0.4.0",
+    "@akinon/ui-theme": "0.7.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -38,12 +37,8 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
-    "lint": "eslint *.ts*",
-    "test": "vitest run",
-    "test:ui": "vitest --ui",
-    "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit"
   }
 }