@rc-component/trigger 1.10.0 → 1.10.1

package/README.md

@@ -65,8 +65,6 @@ ReactDOM.render((
 
 http://localhost:9001
 
-online example: http://react-component.github.io/trigger/
-
 ## Development
 
 ```
@@ -252,75 +250,11 @@ npm start
 
 ```
 npm test
-npm run chrome-test
-```
-
-## Coverage
-
-```
 npm run coverage
 ```
 
 open coverage/ dir
 
-## React 16 Note
-
-After React 16, you won't access popup element's ref in parent component's componentDidMount, which means following code won't work.
-
-```javascript
-class App extends React.Component {
-  componentDidMount() {
-    this.input.focus(); // error, this.input is undefined.
-  }
-
-  render() {
-    return (
-      <Trigger
-        action={['click']}
-        popup={<div><input ref={node => this.input = node} type="text" /></div>}
-      >
-        <button>click</button>
-      </Trigger>
-    )
-  }
-}
-```
-
-Consider wrap your popup element to a separate component:
-
-```javascript
-class InputPopup extends React.Component {
-  componentDidMount() {
-    this.props.onMount();
-  }
-
-  render() {
-    return (
-      <div>
-        <input ref={this.props.inputRef} type="text" />
-      </div>
-    );
-  }
-}
-
-class App extends React.Component {
-  handlePopupMount() {
-    this.input.focus(); // error, this.input is undefined.
-  }
-
-  render() {
-    return (
-      <Trigger
-        action={['click']}
-        popup={<InputPopup inputRef={node => this.input = node} onMount={this.handlePopupMount} />}
-      >
-        <button>click</button>
-      </Trigger>
-    )
-  }
-}
-```
-
 ## License
 
 rc-trigger is released under the MIT license.

package/es/index.d.ts

@@ -1,7 +1,7 @@
 import type { CSSMotionProps } from 'rc-motion';
 import * as React from 'react';
-import type { ActionType, AlignType, ArrowTypeOuter, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
-export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType };
+import type { ActionType, AlignType, AnimationType, ArrowTypeOuter, BuildInPlacements, TransitionNameType } from './interface';
+export type { BuildInPlacements, AlignType, ActionType, ArrowTypeOuter as ArrowType, };
 export interface TriggerRef {
     forceAlign: VoidFunction;
 }

package/es/index.js

@@ -327,19 +327,29 @@ export function generateTrigger() {
     // Click to hide is special action since click popup element should not hide
     React.useEffect(function () {
       if (clickToHide && popupEle && (!mask || maskClosable)) {
-        var onWindowClick = function onWindowClick(_ref) {
+        var clickInside = false;
+
+        // User may mouseDown inside and drag out of popup and mouse up
+        // Record here to prevent close
+        var onWindowMouseDown = function onWindowMouseDown(_ref) {
           var target = _ref.target;
-          if (openRef.current && !inPopupOrChild(target)) {
+          clickInside = inPopupOrChild(target);
+        };
+        var onWindowClick = function onWindowClick(_ref2) {
+          var target = _ref2.target;
+          if (openRef.current && !clickInside && !inPopupOrChild(target)) {
             triggerOpen(false);
           }
         };
         var win = getWin(popupEle);
         var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
+        win.addEventListener('mousedown', onWindowMouseDown);
         win.addEventListener('click', onWindowClick);
 
         // shadow root
         var inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
         if (inShadow) {
+          targetRoot.addEventListener('mousedown', onWindowMouseDown);
           targetRoot.addEventListener('click', onWindowClick);
         }
 
@@ -349,8 +359,10 @@ export function generateTrigger() {
           warning(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
         }
         return function () {
+          win.removeEventListener('mousedown', onWindowMouseDown);
           win.removeEventListener('click', onWindowClick);
           if (inShadow) {
+            targetRoot.removeEventListener('mousedown', onWindowMouseDown);
             targetRoot.removeEventListener('click', onWindowClick);
           }
         };

package/lib/index.js

@@ -336,19 +336,29 @@ function generateTrigger() {
     // Click to hide is special action since click popup element should not hide
     React.useEffect(function () {
       if (clickToHide && popupEle && (!mask || maskClosable)) {
-        var onWindowClick = function onWindowClick(_ref) {
+        var clickInside = false;
+
+        // User may mouseDown inside and drag out of popup and mouse up
+        // Record here to prevent close
+        var onWindowMouseDown = function onWindowMouseDown(_ref) {
           var target = _ref.target;
-          if (openRef.current && !inPopupOrChild(target)) {
+          clickInside = inPopupOrChild(target);
+        };
+        var onWindowClick = function onWindowClick(_ref2) {
+          var target = _ref2.target;
+          if (openRef.current && !clickInside && !inPopupOrChild(target)) {
             triggerOpen(false);
           }
         };
         var win = (0, _util.getWin)(popupEle);
         var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
+        win.addEventListener('mousedown', onWindowMouseDown);
         win.addEventListener('click', onWindowClick);
 
         // shadow root
         var inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
         if (inShadow) {
+          targetRoot.addEventListener('mousedown', onWindowMouseDown);
           targetRoot.addEventListener('click', onWindowClick);
         }
 
@@ -358,8 +368,10 @@ function generateTrigger() {
           (0, _warning.default)(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
         }
         return function () {
+          win.removeEventListener('mousedown', onWindowMouseDown);
           win.removeEventListener('click', onWindowClick);
           if (inShadow) {
+            targetRoot.removeEventListener('mousedown', onWindowMouseDown);
             targetRoot.removeEventListener('click', onWindowClick);
           }
         };

package/package.json

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

package/lib/Popup/Arrow.d.ts

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

package/lib/Popup/Mask.d.ts

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

package/lib/Popup/PopupContent.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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/useWatch.d.ts

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

package/lib/index.d.ts

@@ -1,64 +0,0 @@
-import type { CSSMotionProps } from 'rc-motion';
-import * as React from 'react';
-import type { ActionType, AlignType, ArrowTypeOuter, AnimationType, 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

@@ -1,82 +0,0 @@
-/// <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 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?: 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;
-        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

@@ -1,3 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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;
-};