@rc-component/trigger 1.10.1 → 1.11.0

package/es/Popup/Arrow.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { AlignType, ArrowType } from '../interface';
 export interface ArrowProps {
     prefixCls: string;
     align: AlignType;
     arrow: ArrowType;
 }
-export default function Arrow(props: ArrowProps): JSX.Element;
+export default function Arrow(props: ArrowProps): React.JSX.Element;

package/es/Popup/Mask.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { CSSMotionProps } from 'rc-motion';
+import * as React from 'react';
 export interface MaskProps {
     prefixCls: string;
     open?: boolean;
@@ -7,4 +7,4 @@ export interface MaskProps {
     mask?: boolean;
     motion?: CSSMotionProps;
 }
-export default function Mask(props: MaskProps): JSX.Element;
+export default function Mask(props: MaskProps): React.JSX.Element;

package/es/Popup/Mask.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
+import * as React from 'react';
 export default function Mask(props) {
   var prefixCls = props.prefixCls,
     open = props.open,

package/es/hooks/useAlign.js

@@ -6,6 +6,22 @@ import useEvent from "rc-util/es/hooks/useEvent";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import * as React from 'react';
 import { collectScroller, getVisibleArea, getWin, toNum } from "../util";
+function getUnitOffset(size) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var offsetStr = "".concat(offset);
+  var cells = offsetStr.match(/^(.*)\%$/);
+  if (cells) {
+    return size * (parseFloat(cells[1]) / 100);
+  }
+  return parseFloat(offsetStr);
+}
+function getNumberOffset(rect, offset) {
+  var _ref = offset || [],
+    _ref2 = _slicedToArray(_ref, 2),
+    offsetX = _ref2[0],
+    offsetY = _ref2[1];
+  return [getUnitOffset(rect.width, offsetX), getUnitOffset(rect.height, offsetY)];
+}
 function splitPoints() {
   var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return [points[0], points[1]];
@@ -167,26 +183,22 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       // Offset
       var offset = placementInfo.offset,
         targetOffset = placementInfo.targetOffset;
-      var _ref = offset || [],
-        _ref2 = _slicedToArray(_ref, 2),
-        _ref2$ = _ref2[0],
-        popupOffsetX = _ref2$ === void 0 ? 0 : _ref2$,
-        _ref2$2 = _ref2[1],
-        popupOffsetY = _ref2$2 === void 0 ? 0 : _ref2$2;
-      var _ref3 = targetOffset || [],
-        _ref4 = _slicedToArray(_ref3, 2),
-        _ref4$ = _ref4[0],
-        targetOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
-        _ref4$2 = _ref4[1],
-        targetOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
-      targetRect.x += targetOffsetX;
-      targetRect.y += targetOffsetY;
+      var _getNumberOffset = getNumberOffset(popupRect, offset),
+        _getNumberOffset2 = _slicedToArray(_getNumberOffset, 2),
+        popupOffsetX = _getNumberOffset2[0],
+        popupOffsetY = _getNumberOffset2[1];
+      var _getNumberOffset3 = getNumberOffset(targetRect, targetOffset),
+        _getNumberOffset4 = _slicedToArray(_getNumberOffset3, 2),
+        targetOffsetX = _getNumberOffset4[0],
+        targetOffsetY = _getNumberOffset4[1];
+      targetRect.x -= targetOffsetX;
+      targetRect.y -= targetOffsetY;
 
       // Points
-      var _ref5 = placementInfo.points || [],
-        _ref6 = _slicedToArray(_ref5, 2),
-        popupPoint = _ref6[0],
-        targetPoint = _ref6[1];
+      var _ref3 = placementInfo.points || [],
+        _ref4 = _slicedToArray(_ref3, 2),
+        popupPoint = _ref4[0],
+        targetPoint = _ref4[1];
       var targetPoints = splitPoints(targetPoint);
       var popupPoints = splitPoints(popupPoint);
       var targetAlignPoint = getAlignPoint(targetRect, targetPoints);

package/es/interface.d.ts

@@ -5,6 +5,7 @@ export declare type AlignPointTopBottom = 't' | 'b' | 'c';
 export declare type AlignPointLeftRight = 'l' | 'r' | 'c';
 /** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
 export declare type AlignPoint = `${AlignPointTopBottom}${AlignPointLeftRight}`;
+export declare type OffsetType = number | `${number}%`;
 export interface AlignType {
     /**
      * move point of source node to align with point of target node.
@@ -15,12 +16,12 @@ export interface AlignType {
      * 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?: 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?: number[];
+    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.

package/lib/Popup/Arrow.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { AlignType, ArrowType } from '../interface';
+export interface ArrowProps {
+    prefixCls: string;
+    align: AlignType;
+    arrow: ArrowType;
+}
+export default function Arrow(props: ArrowProps): React.JSX.Element;

package/lib/Popup/Mask.d.ts

@@ -0,0 +1,10 @@
+import type { CSSMotionProps } from 'rc-motion';
+import * as React from 'react';
+export interface MaskProps {
+    prefixCls: string;
+    open?: boolean;
+    zIndex?: number;
+    mask?: boolean;
+    motion?: CSSMotionProps;
+}
+export default function Mask(props: MaskProps): React.JSX.Element;

package/lib/Popup/Mask.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,6 +9,7 @@ exports.default = Mask;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _rcMotion = _interopRequireDefault(require("rc-motion"));
+var React = _interopRequireWildcard(require("react"));
 function Mask(props) {
   var prefixCls = props.prefixCls,
     open = props.open,

package/lib/Popup/PopupContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface PopupContentProps {
+    children?: React.ReactNode;
+    cache?: boolean;
+}
+declare const PopupContent: React.MemoExoticComponent<({ children }: PopupContentProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>;
+export default PopupContent;

package/lib/Popup/index.d.ts

@@ -0,0 +1,38 @@
+import type { CSSMotionProps } from 'rc-motion';
+import * as React from 'react';
+import type { TriggerProps } from '../';
+import type { AlignType, ArrowType } from '../interface';
+export interface PopupProps {
+    prefixCls: string;
+    className?: string;
+    style?: React.CSSProperties;
+    popup?: TriggerProps['popup'];
+    target: HTMLElement;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    zIndex?: number;
+    mask?: boolean;
+    onVisibleChanged: (visible: boolean) => void;
+    align?: AlignType;
+    arrow?: ArrowType;
+    open: boolean;
+    /** Tell Portal that should keep in screen. e.g. should wait all motion end */
+    keepDom: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    motion?: CSSMotionProps;
+    maskMotion?: CSSMotionProps;
+    forceRender?: boolean;
+    getPopupContainer?: TriggerProps['getPopupContainer'];
+    autoDestroy?: boolean;
+    portal: React.ComponentType<any>;
+    ready: boolean;
+    offsetX: number;
+    offsetY: number;
+    onAlign: VoidFunction;
+    onPrepare: () => Promise<void>;
+    stretch?: string;
+    targetWidth?: number;
+    targetHeight?: number;
+}
+declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
+export default Popup;

package/lib/TriggerWrapper.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { TriggerProps } from '.';
+export interface TriggerWrapperProps {
+    getTriggerDOMNode?: TriggerProps['getTriggerDOMNode'];
+    children: React.ReactElement;
+}
+declare const TriggerWrapper: React.ForwardRefExoticComponent<TriggerWrapperProps & React.RefAttributes<HTMLElement>>;
+export default TriggerWrapper;

package/lib/context.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface TriggerContextProps {
+    registerSubPopup: (id: string, node: HTMLElement) => void;
+}
+declare const TriggerContext: React.Context<TriggerContextProps>;
+export default TriggerContext;

package/lib/hooks/useAction.d.ts

@@ -0,0 +1,4 @@
+import type { ActionType } from '../interface';
+declare type ActionTypes = ActionType | ActionType[];
+export default function useAction(mobile: boolean, action: ActionTypes, showAction?: ActionTypes, hideAction?: ActionTypes): [showAction: Set<ActionType>, hideAction: Set<ActionType>];
+export {};

package/lib/hooks/useAlign.d.ts

@@ -0,0 +1,13 @@
+import type { TriggerProps } from '..';
+import type { AlignType } from '../interface';
+export default function useAlign(open: boolean, popupEle: HTMLElement, target: HTMLElement | [x: number, y: number], placement: string, builtinPlacements: any, popupAlign?: AlignType, onPopupAlign?: TriggerProps['onPopupAlign']): [
+    ready: boolean,
+    offsetX: number,
+    offsetY: number,
+    arrowX: number,
+    arrowY: number,
+    scaleX: number,
+    scaleY: number,
+    align: AlignType,
+    onAlign: VoidFunction
+];

package/lib/hooks/useAlign.js

@@ -14,6 +14,22 @@ var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
 var React = _interopRequireWildcard(require("react"));
 var _util = require("../util");
+function getUnitOffset(size) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var offsetStr = "".concat(offset);
+  var cells = offsetStr.match(/^(.*)\%$/);
+  if (cells) {
+    return size * (parseFloat(cells[1]) / 100);
+  }
+  return parseFloat(offsetStr);
+}
+function getNumberOffset(rect, offset) {
+  var _ref = offset || [],
+    _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    offsetX = _ref2[0],
+    offsetY = _ref2[1];
+  return [getUnitOffset(rect.width, offsetX), getUnitOffset(rect.height, offsetY)];
+}
 function splitPoints() {
   var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return [points[0], points[1]];
@@ -175,26 +191,22 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       // Offset
       var offset = placementInfo.offset,
         targetOffset = placementInfo.targetOffset;
-      var _ref = offset || [],
-        _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-        _ref2$ = _ref2[0],
-        popupOffsetX = _ref2$ === void 0 ? 0 : _ref2$,
-        _ref2$2 = _ref2[1],
-        popupOffsetY = _ref2$2 === void 0 ? 0 : _ref2$2;
-      var _ref3 = targetOffset || [],
-        _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-        _ref4$ = _ref4[0],
-        targetOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
-        _ref4$2 = _ref4[1],
-        targetOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
-      targetRect.x += targetOffsetX;
-      targetRect.y += targetOffsetY;
+      var _getNumberOffset = getNumberOffset(popupRect, offset),
+        _getNumberOffset2 = (0, _slicedToArray2.default)(_getNumberOffset, 2),
+        popupOffsetX = _getNumberOffset2[0],
+        popupOffsetY = _getNumberOffset2[1];
+      var _getNumberOffset3 = getNumberOffset(targetRect, targetOffset),
+        _getNumberOffset4 = (0, _slicedToArray2.default)(_getNumberOffset3, 2),
+        targetOffsetX = _getNumberOffset4[0],
+        targetOffsetY = _getNumberOffset4[1];
+      targetRect.x -= targetOffsetX;
+      targetRect.y -= targetOffsetY;
 
       // Points
-      var _ref5 = placementInfo.points || [],
-        _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-        popupPoint = _ref6[0],
-        targetPoint = _ref6[1];
+      var _ref3 = placementInfo.points || [],
+        _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        popupPoint = _ref4[0],
+        targetPoint = _ref4[1];
       var targetPoints = splitPoints(targetPoint);
       var popupPoints = splitPoints(popupPoint);
       var targetAlignPoint = getAlignPoint(targetRect, targetPoints);

package/lib/hooks/useWatch.d.ts

@@ -0,0 +1 @@
+export default function useWatch(open: boolean, target: HTMLElement, popup: HTMLElement, onAlign: VoidFunction): void;

package/lib/index.d.ts

@@ -0,0 +1,64 @@
+import type { CSSMotionProps } from 'rc-motion';
+import * as React from 'react';
+import type { ActionType, AlignType, AnimationType, ArrowTypeOuter, BuildInPlacements, TransitionNameType } from './interface';
+export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType, };
+export interface TriggerRef {
+    forceAlign: VoidFunction;
+}
+export 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;
+    /** @deprecated Please use `autoDestroy` instead */
+    destroyPopupOnHide?: 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;
+    /** @deprecated Please us `popupMotion` instead. */
+    popupTransitionName?: TransitionNameType;
+    /** @deprecated Please us `popupMotion` instead. */
+    popupAnimation?: AnimationType;
+    /** @deprecated Please us `maskMotion` instead. */
+    maskTransitionName?: TransitionNameType;
+    /** @deprecated Please us `maskMotion` instead. */
+    maskAnimation?: AnimationType;
+    mouseEnterDelay?: number;
+    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;
+    arrow?: boolean | ArrowTypeOuter;
+    /** @deprecated Add `className` on `children`. Please add `className` directly instead. */
+    className?: string;
+    /**
+     * @private Get trigger DOM node.
+     * Used for some component is function component which can not access by `findDOMNode`
+     */
+    getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
+}
+export declare function generateTrigger(PortalComponent?: React.ComponentType<any>): React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;
+declare const _default: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;
+export default _default;

package/lib/interface.d.ts

@@ -0,0 +1,83 @@
+/// <reference types="react" />
+import type { CSSMotionProps } from 'rc-motion';
+export declare type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+export declare type AlignPointTopBottom = 't' | 'b' | 'c';
+export declare type AlignPointLeftRight = 'l' | 'r' | 'c';
+/** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
+export declare type AlignPoint = `${AlignPointTopBottom}${AlignPointLeftRight}`;
+export declare type OffsetType = number | `${number}%`;
+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?: (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.
+     *  - `scroll`: The whole region of the html scroll area. Use `scrollHeight` for check.
+     */
+    htmlRegion?: 'visible' | 'scroll';
+    /**
+     * 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;
+}
+export interface ArrowTypeOuter {
+    className?: string;
+}
+export declare type ArrowType = ArrowTypeOuter & {
+    x?: number;
+    y?: number;
+};
+export declare type BuildInPlacements = Record<string, AlignType>;
+export declare type StretchType = string;
+export declare type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
+export declare type AnimationType = string;
+export declare type TransitionNameType = string;
+export interface Point {
+    pageX: number;
+    pageY: number;
+}
+export interface CommonEventHandler {
+    remove: () => void;
+}
+export interface MobileConfig {
+    /** Set popup motion. You can ref `rc-motion` for more info. */
+    popupMotion?: CSSMotionProps;
+    popupClassName?: string;
+    popupStyle?: React.CSSProperties;
+    popupRender?: (originNode: React.ReactNode) => React.ReactNode;
+}

package/lib/mock.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<import("./index").TriggerProps & React.RefAttributes<import("./index").TriggerRef>>;
+export default _default;

package/lib/util.d.ts

@@ -0,0 +1,25 @@
+import type { CSSMotionProps } from 'rc-motion';
+import type { AlignType, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
+export declare function getAlignPopupClassName(builtinPlacements: BuildInPlacements, prefixCls: string, align: AlignType, isAlignPoint: boolean): string;
+/** @deprecated We should not use this if we can refactor all deps */
+export declare function getMotion(prefixCls: string, motion: CSSMotionProps, animation: AnimationType, transitionName: TransitionNameType): CSSMotionProps;
+export declare function getWin(ele: HTMLElement): Window & typeof globalThis;
+/**
+ * Get all the scrollable parent elements of the element
+ * @param ele       The element to be detected
+ * @param areaOnly  Only return the parent which will cut visible area
+ */
+export declare function collectScroller(ele: HTMLElement): HTMLElement[];
+export declare function toNum(num: number): number;
+export interface VisibleArea {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export declare function getVisibleArea(initArea: VisibleArea, scrollerList?: HTMLElement[]): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"