@rc-component/trigger 3.6.15 → 3.7.0

package/README.md

@@ -9,10 +9,10 @@ React Trigger Component
 [![bundle size][bundlephobia-image]][bundlephobia-url]
 [![dumi][dumi-image]][dumi-url]
 
-[npm-image]: http://img.shields.io/npm/v/@rc-component/trigger.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/@rc-component/trigger
-[github-actions-image]: https://github.com/react-component/trigger/workflows/CI/badge.svg
-[github-actions-url]: https://github.com/react-component/trigger/actions
+[npm-image]: https://img.shields.io/npm/v/@rc-component/trigger.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/@rc-component/trigger
+[github-actions-image]: https://github.com/react-component/trigger/actions/workflows/main.yml/badge.svg
+[github-actions-url]: https://github.com/react-component/trigger/actions/workflows/main.yml
 [codecov-image]: https://img.shields.io/codecov/c/github/react-component/trigger/master.svg?style=flat-square
 [codecov-url]: https://codecov.io/gh/react-component/trigger/branch/master
 [david-url]: https://david-dm.org/react-component/trigger

package/es/Popup/Arrow.js

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 export default function Arrow(props) {
   const {
@@ -55,7 +55,7 @@ export default function Arrow(props) {
   }
   return /*#__PURE__*/React.createElement("div", {
     ref: arrowRef,
-    className: classNames(`${prefixCls}-arrow`, className),
+    className: clsx(`${prefixCls}-arrow`, className),
     style: {
       ...alignStyle,
       ...style

package/es/Popup/Mask.js

@@ -1,5 +1,5 @@
 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); }
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
 import * as React from 'react';
 export default function Mask(props) {
@@ -24,6 +24,6 @@ export default function Mask(props) {
     style: {
       zIndex
     },
-    className: classNames(`${prefixCls}-mask`, mobile && `${prefixCls}-mobile-mask`, className)
+    className: clsx(`${prefixCls}-mask`, mobile && `${prefixCls}-mobile-mask`, className)
   }));
 }

package/es/Popup/index.js

@@ -1,5 +1,5 @@
 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); }
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
 import ResizeObserver from '@rc-component/resize-observer';
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
@@ -151,7 +151,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
       className: motionClassName,
       style: motionStyle
     }, motionRef) => {
-      const cls = classNames(prefixCls, motionClassName, className, {
+      const cls = clsx(prefixCls, motionClassName, className, {
         [`${prefixCls}-mobile`]: isMobile
       });
       return /*#__PURE__*/React.createElement("div", {

package/es/UniqueProvider/UniqueContainer.js

@@ -1,7 +1,7 @@
 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); }
 import React from 'react';
 import useOffsetStyle from "../hooks/useOffsetStyle";
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
 const UniqueContainer = props => {
   const {
@@ -57,7 +57,7 @@ const UniqueContainer = props => {
     className: motionClassName,
     style: motionStyle
   }) => {
-    const cls = classNames(containerCls, motionClassName, uniqueContainerClassName, {
+    const cls = clsx(containerCls, motionClassName, uniqueContainerClassName, {
       [`${containerCls}-visible`]: motionVisible
     });
     return /*#__PURE__*/React.createElement("div", {

package/es/UniqueProvider/index.js

@@ -8,7 +8,7 @@ import { useEvent } from '@rc-component/util';
 import useTargetState from "./useTargetState";
 import { isDOM } from "@rc-component/util/es/Dom/findDOMNode";
 import UniqueContainer from "./UniqueContainer";
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { getAlignPopupClassName } from "../util";
 const UniqueProvider = ({
   children,
@@ -82,7 +82,7 @@ const UniqueProvider = ({
     }
     const baseClassName = getAlignPopupClassName(mergedOptions.builtinPlacements || {}, mergedOptions.prefixCls || '', alignInfo, false // alignPoint is false for UniqueProvider
     );
-    return classNames(baseClassName, mergedOptions.getPopupClassNameFromAlign?.(alignInfo));
+    return clsx(baseClassName, mergedOptions.getPopupClassNameFromAlign?.(alignInfo));
   }, [alignInfo, mergedOptions?.getPopupClassNameFromAlign, mergedOptions?.builtinPlacements, mergedOptions?.prefixCls]);
   const contextValue = React.useMemo(() => ({
     show,
@@ -121,7 +121,7 @@ const UniqueProvider = ({
     portal: Portal,
     prefixCls: prefixCls,
     popup: mergedOptions.popup,
-    className: classNames(mergedOptions.popupClassName, alignedClassName, `${prefixCls}-unique-controlled`),
+    className: clsx(mergedOptions.popupClassName, alignedClassName, `${prefixCls}-unique-controlled`),
     style: mergedOptions.popupStyle,
     target: mergedOptions.target,
     open: open,
@@ -167,7 +167,7 @@ const UniqueProvider = ({
     },
     popupSize: popupSize,
     motion: mergedOptions.popupMotion,
-    uniqueContainerClassName: classNames(mergedOptions.uniqueContainerClassName, alignedClassName),
+    uniqueContainerClassName: clsx(mergedOptions.uniqueContainerClassName, alignedClassName),
     uniqueContainerStyle: mergedOptions.uniqueContainerStyle
   }))));
 };

package/es/index.d.ts

@@ -12,7 +12,9 @@ export interface TriggerRef {
     forceAlign: VoidFunction;
 }
 export interface TriggerProps {
-    children: React.ReactElement<any>;
+    children: React.ReactElement<any> | ((info: {
+        open: boolean;
+    }) => React.ReactElement<any>);
     action?: ActionType | ActionType[];
     showAction?: ActionType[];
     hideAction?: ActionType[];

package/es/index.js

@@ -1,5 +1,5 @@
 import Portal from '@rc-component/portal';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import ResizeObserver from '@rc-component/resize-observer';
 import { isDOM } from "@rc-component/util/es/Dom/findDOMNode";
 import { getShadowRoot } from "@rc-component/util/es/Dom/shadow";
@@ -125,10 +125,6 @@ export function generateTrigger(PortalComponent = Portal) {
         externalForwardRef.current = node;
       }
     });
-
-    // ========================== Children ==========================
-    const child = React.Children.only(children);
-    const originChildProps = child?.props || {};
     const cloneProps = {};
     const inPopupOrChild = useEvent(ele => {
       const childDOM = targetEle;
@@ -147,6 +143,15 @@ export function generateTrigger(PortalComponent = Portal) {
     // Render still use props as first priority
     const mergedOpen = popupVisible ?? internalOpen;
 
+    // ========================== Children ==========================
+    const child = React.useMemo(() => {
+      const nextChild = typeof children === 'function' ? children({
+        open: mergedOpen
+      }) : children;
+      return React.Children.only(nextChild);
+    }, [children, mergedOpen]);
+    const originChildProps = child?.props || {};
+
     // We use effect sync here in case `popupVisible` back to `undefined`
     const setMergedOpen = useEvent(nextOpen => {
       if (openUncontrolled) {
@@ -281,7 +286,7 @@ export function generateTrigger(PortalComponent = Portal) {
     }, [JSON.stringify(popupAlign)]);
     const alignedClassName = React.useMemo(() => {
       const baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
-      return classNames(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
+      return clsx(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
     }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
 
     // ============================ Refs ============================
@@ -493,7 +498,7 @@ export function generateTrigger(PortalComponent = Portal) {
       ref: setPopupRef,
       prefixCls: prefixCls,
       popup: popup,
-      className: classNames(popupClassName, !isMobile && alignedClassName),
+      className: clsx(popupClassName, !isMobile && alignedClassName),
       style: popupStyle,
       target: targetEle,
       onMouseEnter: onPopupMouseEnter,

package/lib/Popup/Arrow.js

@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Arrow;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var React = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Arrow(props) {
   const {
     prefixCls,
@@ -64,7 +63,7 @@ function Arrow(props) {
   }
   return /*#__PURE__*/React.createElement("div", {
     ref: arrowRef,
-    className: (0, _classnames.default)(`${prefixCls}-arrow`, className),
+    className: (0, _clsx.clsx)(`${prefixCls}-arrow`, className),
     style: {
       ...alignStyle,
       ...style

package/lib/Popup/Mask.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Mask;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _motion = _interopRequireDefault(require("@rc-component/motion"));
 var React = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -33,6 +33,6 @@ function Mask(props) {
     style: {
       zIndex
     },
-    className: (0, _classnames.default)(`${prefixCls}-mask`, mobile && `${prefixCls}-mobile-mask`, className)
+    className: (0, _clsx.clsx)(`${prefixCls}-mask`, mobile && `${prefixCls}-mobile-mask`, className)
   }));
 }

package/lib/Popup/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _motion = _interopRequireDefault(require("@rc-component/motion"));
 var _resizeObserver = _interopRequireDefault(require("@rc-component/resize-observer"));
 var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
@@ -160,7 +160,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
       className: motionClassName,
       style: motionStyle
     }, motionRef) => {
-      const cls = (0, _classnames.default)(prefixCls, motionClassName, className, {
+      const cls = (0, _clsx.clsx)(prefixCls, motionClassName, className, {
         [`${prefixCls}-mobile`]: isMobile
       });
       return /*#__PURE__*/React.createElement("div", {

package/lib/UniqueProvider/UniqueContainer.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _useOffsetStyle = _interopRequireDefault(require("../hooks/useOffsetStyle"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _motion = _interopRequireDefault(require("@rc-component/motion"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -64,7 +64,7 @@ const UniqueContainer = props => {
     className: motionClassName,
     style: motionStyle
   }) => {
-    const cls = (0, _classnames.default)(containerCls, motionClassName, uniqueContainerClassName, {
+    const cls = (0, _clsx.clsx)(containerCls, motionClassName, uniqueContainerClassName, {
       [`${containerCls}-visible`]: motionVisible
     });
     return /*#__PURE__*/_react.default.createElement("div", {

package/lib/UniqueProvider/index.js

@@ -14,7 +14,7 @@ var _util = require("@rc-component/util");
 var _useTargetState = _interopRequireDefault(require("./useTargetState"));
 var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
 var _UniqueContainer = _interopRequireDefault(require("./UniqueContainer"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _util2 = require("../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -91,7 +91,7 @@ const UniqueProvider = ({
     }
     const baseClassName = (0, _util2.getAlignPopupClassName)(mergedOptions.builtinPlacements || {}, mergedOptions.prefixCls || '', alignInfo, false // alignPoint is false for UniqueProvider
     );
-    return (0, _classnames.default)(baseClassName, mergedOptions.getPopupClassNameFromAlign?.(alignInfo));
+    return (0, _clsx.clsx)(baseClassName, mergedOptions.getPopupClassNameFromAlign?.(alignInfo));
   }, [alignInfo, mergedOptions?.getPopupClassNameFromAlign, mergedOptions?.builtinPlacements, mergedOptions?.prefixCls]);
   const contextValue = React.useMemo(() => ({
     show,
@@ -130,7 +130,7 @@ const UniqueProvider = ({
     portal: _portal.default,
     prefixCls: prefixCls,
     popup: mergedOptions.popup,
-    className: (0, _classnames.default)(mergedOptions.popupClassName, alignedClassName, `${prefixCls}-unique-controlled`),
+    className: (0, _clsx.clsx)(mergedOptions.popupClassName, alignedClassName, `${prefixCls}-unique-controlled`),
     style: mergedOptions.popupStyle,
     target: mergedOptions.target,
     open: open,
@@ -176,7 +176,7 @@ const UniqueProvider = ({
     },
     popupSize: popupSize,
     motion: mergedOptions.popupMotion,
-    uniqueContainerClassName: (0, _classnames.default)(mergedOptions.uniqueContainerClassName, alignedClassName),
+    uniqueContainerClassName: (0, _clsx.clsx)(mergedOptions.uniqueContainerClassName, alignedClassName),
     uniqueContainerStyle: mergedOptions.uniqueContainerStyle
   }))));
 };

package/lib/index.d.ts

@@ -12,7 +12,9 @@ export interface TriggerRef {
     forceAlign: VoidFunction;
 }
 export interface TriggerProps {
-    children: React.ReactElement<any>;
+    children: React.ReactElement<any> | ((info: {
+        open: boolean;
+    }) => React.ReactElement<any>);
     action?: ActionType | ActionType[];
     showAction?: ActionType[];
     hideAction?: ActionType[];

package/lib/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "UniqueProvider", {
 exports.default = void 0;
 exports.generateTrigger = generateTrigger;
 var _portal = _interopRequireDefault(require("@rc-component/portal"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _resizeObserver = _interopRequireDefault(require("@rc-component/resize-observer"));
 var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
 var _shadow = require("@rc-component/util/lib/Dom/shadow");
@@ -139,10 +139,6 @@ function generateTrigger(PortalComponent = _portal.default) {
         externalForwardRef.current = node;
       }
     });
-
-    // ========================== Children ==========================
-    const child = React.Children.only(children);
-    const originChildProps = child?.props || {};
     const cloneProps = {};
     const inPopupOrChild = (0, _useEvent.default)(ele => {
       const childDOM = targetEle;
@@ -161,6 +157,15 @@ function generateTrigger(PortalComponent = _portal.default) {
     // Render still use props as first priority
     const mergedOpen = popupVisible ?? internalOpen;
 
+    // ========================== Children ==========================
+    const child = React.useMemo(() => {
+      const nextChild = typeof children === 'function' ? children({
+        open: mergedOpen
+      }) : children;
+      return React.Children.only(nextChild);
+    }, [children, mergedOpen]);
+    const originChildProps = child?.props || {};
+
     // We use effect sync here in case `popupVisible` back to `undefined`
     const setMergedOpen = (0, _useEvent.default)(nextOpen => {
       if (openUncontrolled) {
@@ -295,7 +300,7 @@ function generateTrigger(PortalComponent = _portal.default) {
     }, [JSON.stringify(popupAlign)]);
     const alignedClassName = React.useMemo(() => {
       const baseClassName = (0, _util.getAlignPopupClassName)(builtinPlacements, prefixCls, alignInfo, alignPoint);
-      return (0, _classnames.default)(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
+      return (0, _clsx.clsx)(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
     }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
 
     // ============================ Refs ============================
@@ -507,7 +512,7 @@ function generateTrigger(PortalComponent = _portal.default) {
       ref: setPopupRef,
       prefixCls: prefixCls,
       popup: popup,
-      className: (0, _classnames.default)(popupClassName, !isMobile && alignedClassName),
+      className: (0, _clsx.clsx)(popupClassName, !isMobile && alignedClassName),
       style: popupStyle,
       target: targetEle,
       onMouseEnter: onPopupMouseEnter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "3.6.15",
+  "version": "3.7.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"
@@ -45,14 +45,13 @@
     "@rc-component/portal": "^2.0.0",
     "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/util": "^1.2.1",
-    "classnames": "^2.3.2"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.0",
     "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^16.0.0",
-    "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.2",
     "@types/node": "^24.0.3",
     "@types/react": "^19.1.2",