@rc-component/trigger 3.7.1 → 3.8.0

package/es/Popup/index.d.ts

@@ -3,6 +3,7 @@ import { type ResizeObserverProps } from '@rc-component/resize-observer';
 import * as React from 'react';
 import type { TriggerProps } from '../';
 import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
+import type { PortalProps } from '@rc-component/portal';
 export interface MobileConfig {
     mask?: boolean;
     /** Set popup motion. You can ref `rc-motion` for more info. */
@@ -11,6 +12,7 @@ export interface MobileConfig {
     maskMotion?: CSSMotionProps;
 }
 export interface PopupProps {
+    onEsc?: PortalProps['onEsc'];
     prefixCls: string;
     className?: string;
     style?: React.CSSProperties;

package/es/Popup/index.js

@@ -12,6 +12,7 @@ import useOffsetStyle from "../hooks/useOffsetStyle";
 import { useEvent } from '@rc-component/util';
 const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
+    onEsc,
     popup,
     className,
     prefixCls,
@@ -120,7 +121,8 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Portal, {
     open: forceRender || isNodeVisible,
     getContainer: getPopupContainer && (() => getPopupContainer(target)),
-    autoDestroy: autoDestroy
+    autoDestroy: autoDestroy,
+    onEsc: onEsc
   }, /*#__PURE__*/React.createElement(Mask, {
     prefixCls: prefixCls,
     open: open,

package/es/UniqueProvider/index.js

@@ -119,6 +119,7 @@ const UniqueProvider = ({
   }, /*#__PURE__*/React.createElement(Popup, {
     ref: setPopupRef,
     portal: Portal,
+    onEsc: mergedOptions.onEsc,
     prefixCls: prefixCls,
     popup: mergedOptions.popup,
     className: clsx(mergedOptions.popupClassName, alignedClassName, `${prefixCls}-unique-controlled`),

package/es/context.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { CSSMotionProps } from '@rc-component/motion';
+import type { PortalProps } from '@rc-component/portal';
 import type { TriggerProps } from './index';
 import type { AlignType, ArrowTypeOuter, BuildInPlacements } from './interface';
 export interface TriggerContextProps {
@@ -28,6 +29,7 @@ export interface UniqueShowOptions {
     arrow?: ArrowTypeOuter;
     getPopupContainer?: TriggerProps['getPopupContainer'];
     getPopupClassNameFromAlign?: (align: AlignType) => string;
+    onEsc?: PortalProps['onEsc'];
 }
 export interface UniqueContextProps {
     show: (options: UniqueShowOptions, isOpen: () => boolean) => void;

package/es/hooks/useAlign.js

@@ -54,12 +54,12 @@ function reversePoints(points, index) {
     l: 'r',
     r: 'l'
   };
-  return points.map((point, i) => {
-    if (i === index) {
-      return reverseMap[point] || 'c';
-    }
-    return point;
-  }).join('');
+  const clone = [...points];
+  clone[index] = reverseMap[points[index]] || 'c';
+  return clone;
+}
+function flatPoints(points) {
+  return points.join('');
 }
 export default function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
   const [offsetInfo, setOffsetInfo] = React.useState({
@@ -245,6 +245,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       const nextAlignInfo = {
         ...placementInfo
       };
+      let nextPoints = [popupPoints, targetPoints];
 
       // Next Offset
       let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
@@ -322,7 +323,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           prevFlipRef.current.bt = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
-          nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+          nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
         } else {
           prevFlipRef.current.bt = false;
         }
@@ -346,7 +347,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           prevFlipRef.current.tb = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
-          nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+          nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
         } else {
           prevFlipRef.current.tb = false;
         }
@@ -376,7 +377,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           prevFlipRef.current.rl = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
-          nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+          nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
         } else {
           prevFlipRef.current.rl = false;
         }
@@ -400,11 +401,12 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
           prevFlipRef.current.lr = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
-          nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+          nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
         } else {
           prevFlipRef.current.lr = false;
         }
       }
+      nextAlignInfo.points = [flatPoints(nextPoints[0]), flatPoints(nextPoints[1])];
 
       // ============================ Shift ============================
       syncNextPopupPosition();

package/es/index.js

@@ -175,7 +175,8 @@ export function generateTrigger(PortalComponent = Portal) {
       arrow: innerArrow,
       getPopupContainer,
       getPopupClassNameFromAlign,
-      id
+      id,
+      onEsc
     }));
 
     // Handle controlled state changes for UniqueProvider
@@ -233,6 +234,13 @@ export function generateTrigger(PortalComponent = Portal) {
         internalTriggerOpen(nextOpen);
       }, delay);
     };
+    function onEsc({
+      top
+    }) {
+      if (top) {
+        triggerOpen(false);
+      }
+    }
 
     // ========================== Motion ============================
     const [inMotion, setInMotion] = React.useState(false);
@@ -518,7 +526,8 @@ export function generateTrigger(PortalComponent = Portal) {
       ,
       forceRender: forceRender,
       autoDestroy: mergedAutoDestroy,
-      getPopupContainer: getPopupContainer
+      getPopupContainer: getPopupContainer,
+      onEsc: onEsc
       // Arrow
       ,
       align: alignInfo,

package/es/util.js

@@ -1,8 +1,9 @@
 function isPointsEq(a1 = [], a2 = [], isAlignPoint) {
+  const getVal = (a, index) => a[index] || '';
   if (isAlignPoint) {
-    return a1[0] === a2[0];
+    return getVal(a1, 0) === getVal(a2, 0);
   }
-  return a1[0] === a2[0] && a1[1] === a2[1];
+  return getVal(a1, 0) === getVal(a2, 0) && getVal(a1, 1) === getVal(a2, 1);
 }
 export function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
   const {

package/lib/Popup/index.d.ts

@@ -3,6 +3,7 @@ import { type ResizeObserverProps } from '@rc-component/resize-observer';
 import * as React from 'react';
 import type { TriggerProps } from '../';
 import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
+import type { PortalProps } from '@rc-component/portal';
 export interface MobileConfig {
     mask?: boolean;
     /** Set popup motion. You can ref `rc-motion` for more info. */
@@ -11,6 +12,7 @@ export interface MobileConfig {
     maskMotion?: CSSMotionProps;
 }
 export interface PopupProps {
+    onEsc?: PortalProps['onEsc'];
     prefixCls: string;
     className?: string;
     style?: React.CSSProperties;

package/lib/Popup/index.js

@@ -21,6 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
+    onEsc,
     popup,
     className,
     prefixCls,
@@ -129,7 +130,8 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Portal, {
     open: forceRender || isNodeVisible,
     getContainer: getPopupContainer && (() => getPopupContainer(target)),
-    autoDestroy: autoDestroy
+    autoDestroy: autoDestroy,
+    onEsc: onEsc
   }, /*#__PURE__*/React.createElement(_Mask.default, {
     prefixCls: prefixCls,
     open: open,

package/lib/UniqueProvider/index.js

@@ -128,6 +128,7 @@ const UniqueProvider = ({
   }, /*#__PURE__*/React.createElement(_Popup.default, {
     ref: setPopupRef,
     portal: _portal.default,
+    onEsc: mergedOptions.onEsc,
     prefixCls: prefixCls,
     popup: mergedOptions.popup,
     className: (0, _clsx.clsx)(mergedOptions.popupClassName, alignedClassName, `${prefixCls}-unique-controlled`),

package/lib/context.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { CSSMotionProps } from '@rc-component/motion';
+import type { PortalProps } from '@rc-component/portal';
 import type { TriggerProps } from './index';
 import type { AlignType, ArrowTypeOuter, BuildInPlacements } from './interface';
 export interface TriggerContextProps {
@@ -28,6 +29,7 @@ export interface UniqueShowOptions {
     arrow?: ArrowTypeOuter;
     getPopupContainer?: TriggerProps['getPopupContainer'];
     getPopupClassNameFromAlign?: (align: AlignType) => string;
+    onEsc?: PortalProps['onEsc'];
 }
 export interface UniqueContextProps {
     show: (options: UniqueShowOptions, isOpen: () => boolean) => void;

package/lib/hooks/useAlign.js

@@ -63,12 +63,12 @@ function reversePoints(points, index) {
     l: 'r',
     r: 'l'
   };
-  return points.map((point, i) => {
-    if (i === index) {
-      return reverseMap[point] || 'c';
-    }
-    return point;
-  }).join('');
+  const clone = [...points];
+  clone[index] = reverseMap[points[index]] || 'c';
+  return clone;
+}
+function flatPoints(points) {
+  return points.join('');
 }
 function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
   const [offsetInfo, setOffsetInfo] = React.useState({
@@ -254,6 +254,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       const nextAlignInfo = {
         ...placementInfo
       };
+      let nextPoints = [popupPoints, targetPoints];
 
       // Next Offset
       let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
@@ -331,7 +332,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.current.bt = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
-          nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+          nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
         } else {
           prevFlipRef.current.bt = false;
         }
@@ -355,7 +356,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.current.tb = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
-          nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+          nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
         } else {
           prevFlipRef.current.tb = false;
         }
@@ -385,7 +386,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.current.rl = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
-          nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+          nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
         } else {
           prevFlipRef.current.rl = false;
         }
@@ -409,11 +410,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.current.lr = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
-          nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+          nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
         } else {
           prevFlipRef.current.lr = false;
         }
       }
+      nextAlignInfo.points = [flatPoints(nextPoints[0]), flatPoints(nextPoints[1])];
 
       // ============================ Shift ============================
       syncNextPopupPosition();

package/lib/index.js

@@ -189,7 +189,8 @@ function generateTrigger(PortalComponent = _portal.default) {
       arrow: innerArrow,
       getPopupContainer,
       getPopupClassNameFromAlign,
-      id
+      id,
+      onEsc
     }));
 
     // Handle controlled state changes for UniqueProvider
@@ -247,6 +248,13 @@ function generateTrigger(PortalComponent = _portal.default) {
         internalTriggerOpen(nextOpen);
       }, delay);
     };
+    function onEsc({
+      top
+    }) {
+      if (top) {
+        triggerOpen(false);
+      }
+    }
 
     // ========================== Motion ============================
     const [inMotion, setInMotion] = React.useState(false);
@@ -532,7 +540,8 @@ function generateTrigger(PortalComponent = _portal.default) {
       ,
       forceRender: forceRender,
       autoDestroy: mergedAutoDestroy,
-      getPopupContainer: getPopupContainer
+      getPopupContainer: getPopupContainer,
+      onEsc: onEsc
       // Arrow
       ,
       align: alignInfo,

package/lib/util.js

@@ -9,10 +9,11 @@ exports.getVisibleArea = getVisibleArea;
 exports.getWin = getWin;
 exports.toNum = toNum;
 function isPointsEq(a1 = [], a2 = [], isAlignPoint) {
+  const getVal = (a, index) => a[index] || '';
   if (isAlignPoint) {
-    return a1[0] === a2[0];
+    return getVal(a1, 0) === getVal(a2, 0);
   }
-  return a1[0] === a2[0] && a1[1] === a2[1];
+  return getVal(a1, 0) === getVal(a2, 0) && getVal(a1, 1) === getVal(a2, 1);
 }
 function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@rc-component/motion": "^1.1.4",
-    "@rc-component/portal": "^2.0.0",
+    "@rc-component/portal": "^2.2.0",
     "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/util": "^1.2.1",
     "clsx": "^2.1.1"