one-design-next 0.0.4-alpha.100

package/dist/pop-base/index.d.ts

@@ -0,0 +1,143 @@
+import { OpenChangeReason } from '@floating-ui/react';
+import React from 'react';
+import './style';
+export interface PopoverProps {
+    /**
+     * @description 配置允许的适配位置
+     * @default []
+     */
+    autoPlacements?: ('top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom')[];
+    /**
+     * @description 是否显示箭头
+     * @default true
+     */
+    arrowed?: boolean;
+    /**
+     * @description 箭头偏移量，单位：px
+     * @default { x: 0, y: 0 }
+     */
+    arrowOffset?: {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * @description 子元素
+     */
+    children?: React.ReactNode;
+    /**
+     * @description 是否翻转
+     * @default true
+     */
+    flip?: boolean;
+    /**
+     * @description 是否匹配宽度
+     * @default false
+     */
+    matchWidth?: boolean;
+    /**
+     * @description 鼠标进入延迟时间，单位：s，仅在 trigger="hover" 时有效
+     * @default 0
+     */
+    mouseEnterDelay?: number;
+    /**
+     * @description 鼠标离开延迟时间，单位：s，仅在 trigger="hover" 时有效
+     * @default 0
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * @description 偏移量
+     */
+    offset?: number | {
+        mainAxis?: number;
+        crossAxis?: number;
+        alignmentAxis?: number | null;
+    };
+    /**
+     * @description 显示变化时触发
+     */
+    onVisibleChange?: (visible: boolean, e?: Event, reason?: OpenChangeReason) => void;
+    /**
+     * @description 位置
+     * @default 'top'
+     */
+    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    /**
+     * @description 弹窗内容
+     */
+    popup: React.ReactNode;
+    /**
+     * @description 弹窗内容类名
+     */
+    popupClassName?: string;
+    /**
+     * @description 弹窗内容样式
+     */
+    popupStyle?: React.CSSProperties;
+    /**
+     * @description 弹窗根节点类名
+     */
+    popupRootClassName?: string;
+    /**
+     * @description 弹窗根节点样式
+     */
+    popupRootStyle?: React.CSSProperties;
+    /**
+     * @description 是否使用 portal 渲染
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * @description 是否 shift
+     * @default true
+     */
+    shift?: boolean;
+    /**
+     * @description 弹窗内容大小，组件会吐出可用空间，业务方需要自行使用
+     */
+    size?: (params: {
+        availableWidth: number;
+        availableHeight: number;
+    }) => void;
+    /**
+     * @description 触发方式
+     * @default 'hover'
+     */
+    trigger?: 'hover' | 'focus' | 'click';
+    /**
+     * @description 外部控制
+     * @default null
+     */
+    visible?: boolean;
+    /**
+     * @description 关闭后是否销毁 dom
+     * @default true
+     */
+    destroyOnHidden?: boolean;
+    /**
+     * description 是否在祖先滚动时隐藏
+     */
+    hideOnAncestorScroll?: boolean;
+    /**
+     * @description 指定弹窗挂载的容器
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    /**
+     * @description z-index
+     */
+    zIndex?: number | string;
+    /**
+     * @description 鼠标进入事件
+     */
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * @description 鼠标离开事件
+     */
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+}
+export declare const defaultProps: PopoverProps;
+declare const PopBase: React.ForwardRefExoticComponent<PopoverProps & {
+    type: 'popover' | 'tooltip';
+} & React.RefAttributes<{
+    refs: any;
+}>>;
+export default PopBase;

package/dist/pop-base/index.js

@@ -0,0 +1,381 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className"];
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { FloatingPortal, arrow, autoPlacement, autoUpdate, flip, limitShift, offset, shift, size, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useMergeRefs, useTransitionStatus } from '@floating-ui/react';
+import clsx from 'clsx';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import "./style";
+
+// 检测 React 版本
+var getReactVersion = function getReactVersion() {
+  var version = React.version;
+  var majorVersion = parseInt(version.split('.')[0], 10);
+  return majorVersion;
+};
+var isReact16OrLower = function isReact16OrLower() {
+  return getReactVersion() <= 16;
+};
+var ARROW_OFFSET = 10;
+var placementMap = {
+  top: 'top',
+  topLeft: 'top-start',
+  topRight: 'top-end',
+  bottom: 'bottom',
+  bottomLeft: 'bottom-start',
+  bottomRight: 'bottom-end',
+  left: 'left',
+  leftTop: 'left-start',
+  leftBottom: 'left-end',
+  right: 'right',
+  rightTop: 'right-start',
+  rightBottom: 'right-end'
+};
+export var defaultProps = {
+  autoPlacements: [],
+  arrowed: true,
+  arrowOffset: {
+    x: 0,
+    y: 0
+  },
+  children: undefined,
+  flip: true,
+  matchWidth: false,
+  mouseEnterDelay: 0,
+  mouseLeaveDelay: 0,
+  offset: undefined,
+  onVisibleChange: undefined,
+  placement: 'top',
+  popup: undefined,
+  popupRootClassName: '',
+  popupRootStyle: {},
+  popupClassName: '',
+  popupStyle: {},
+  portal: true,
+  shift: true,
+  size: undefined,
+  trigger: 'hover',
+  visible: undefined,
+  getPopupContainer: undefined,
+  zIndex: undefined,
+  destroyOnHidden: true,
+  hideOnAncestorScroll: false
+};
+var getTransformOrigin = function getTransformOrigin(_ref) {
+  var placement = _ref.placement,
+    x = _ref.x,
+    y = _ref.y;
+  var xOrigin = '50%';
+  var yOrigin = '50%';
+  if (placement.includes('top')) {
+    xOrigin = x === undefined ? '50%' : "".concat(x + ARROW_OFFSET, "px");
+    yOrigin = 'calc(100% + 8px)';
+  } else if (placement.includes('bottom')) {
+    xOrigin = x === undefined ? '50%' : "".concat(x + ARROW_OFFSET, "px");
+    yOrigin = '-8px';
+  } else if (placement.includes('left')) {
+    xOrigin = 'calc(100% + 8px)';
+    yOrigin = y === undefined ? '50%' : "".concat(y + ARROW_OFFSET, "px");
+  } else if (placement.includes('right')) {
+    xOrigin = '-8px';
+    yOrigin = y === undefined ? '50%' : "".concat(y + ARROW_OFFSET, "px");
+  }
+  return "".concat(xOrigin, " ").concat(yOrigin);
+};
+var PopBase = /*#__PURE__*/React.forwardRef(function (_ref2, refProp) {
+  var _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$arrow4, _middlewareData$arrow5, _middlewareData$arrow6, _arrowOffset$x, _arrowOffset$y;
+  var _ref2$autoPlacements = _ref2.autoPlacements,
+    autoPlacements = _ref2$autoPlacements === void 0 ? defaultProps.autoPlacements : _ref2$autoPlacements,
+    _ref2$arrowed = _ref2.arrowed,
+    arrowed = _ref2$arrowed === void 0 ? defaultProps.arrowed : _ref2$arrowed,
+    _ref2$arrowOffset = _ref2.arrowOffset,
+    arrowOffset = _ref2$arrowOffset === void 0 ? defaultProps.arrowOffset : _ref2$arrowOffset,
+    _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? defaultProps.children : _ref2$children,
+    _ref2$flip = _ref2.flip,
+    flipProp = _ref2$flip === void 0 ? defaultProps.flip : _ref2$flip,
+    _ref2$matchWidth = _ref2.matchWidth,
+    matchWidth = _ref2$matchWidth === void 0 ? defaultProps.matchWidth : _ref2$matchWidth,
+    _ref2$mouseEnterDelay = _ref2.mouseEnterDelay,
+    mouseEnterDelay = _ref2$mouseEnterDelay === void 0 ? defaultProps.mouseEnterDelay : _ref2$mouseEnterDelay,
+    _ref2$mouseLeaveDelay = _ref2.mouseLeaveDelay,
+    mouseLeaveDelay = _ref2$mouseLeaveDelay === void 0 ? defaultProps.mouseLeaveDelay : _ref2$mouseLeaveDelay,
+    _ref2$offset = _ref2.offset,
+    offsetProp = _ref2$offset === void 0 ? defaultProps.offset : _ref2$offset,
+    _ref2$onVisibleChange = _ref2.onVisibleChange,
+    onVisibleChange = _ref2$onVisibleChange === void 0 ? defaultProps.onVisibleChange : _ref2$onVisibleChange,
+    _ref2$placement = _ref2.placement,
+    placementProp = _ref2$placement === void 0 ? defaultProps.placement : _ref2$placement,
+    _ref2$popup = _ref2.popup,
+    popup = _ref2$popup === void 0 ? defaultProps.popup : _ref2$popup,
+    _ref2$popupClassName = _ref2.popupClassName,
+    popupClassName = _ref2$popupClassName === void 0 ? defaultProps.popupClassName : _ref2$popupClassName,
+    _ref2$popupRootClassN = _ref2.popupRootClassName,
+    popupRootClassName = _ref2$popupRootClassN === void 0 ? defaultProps.popupRootClassName : _ref2$popupRootClassN,
+    _ref2$popupRootStyle = _ref2.popupRootStyle,
+    popupRootStyle = _ref2$popupRootStyle === void 0 ? defaultProps.popupRootStyle : _ref2$popupRootStyle,
+    _ref2$popupStyle = _ref2.popupStyle,
+    popupStyle = _ref2$popupStyle === void 0 ? defaultProps.popupStyle : _ref2$popupStyle,
+    _ref2$portal = _ref2.portal,
+    portal = _ref2$portal === void 0 ? defaultProps.portal : _ref2$portal,
+    _ref2$shift = _ref2.shift,
+    shiftProp = _ref2$shift === void 0 ? defaultProps.shift : _ref2$shift,
+    _ref2$size = _ref2.size,
+    sizeProp = _ref2$size === void 0 ? defaultProps.size : _ref2$size,
+    _ref2$trigger = _ref2.trigger,
+    trigger = _ref2$trigger === void 0 ? defaultProps.trigger : _ref2$trigger,
+    type = _ref2.type,
+    _ref2$visible = _ref2.visible,
+    visible = _ref2$visible === void 0 ? defaultProps.visible : _ref2$visible,
+    _ref2$getPopupContain = _ref2.getPopupContainer,
+    getPopupContainer = _ref2$getPopupContain === void 0 ? defaultProps.getPopupContainer : _ref2$getPopupContain,
+    _ref2$zIndex = _ref2.zIndex,
+    zIndex = _ref2$zIndex === void 0 ? defaultProps.zIndex : _ref2$zIndex,
+    _ref2$destroyOnHidden = _ref2.destroyOnHidden,
+    destroyOnHidden = _ref2$destroyOnHidden === void 0 ? defaultProps.destroyOnHidden : _ref2$destroyOnHidden,
+    _ref2$hideOnAncestorS = _ref2.hideOnAncestorScroll,
+    hideOnAncestorScroll = _ref2$hideOnAncestorS === void 0 ? defaultProps.hideOnAncestorScroll : _ref2$hideOnAncestorS,
+    onMouseEnter = _ref2.onMouseEnter,
+    onMouseLeave = _ref2.onMouseLeave;
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var arrowRef = useRef(null);
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    portalContainer = _useState4[0],
+    setPortalContainer = _useState4[1];
+  var _useFloating = useFloating({
+      placement: placementMap[placementProp || 'top'],
+      open: isOpen,
+      onOpenChange: function onOpenChange(bool, e, reason) {
+        if (onVisibleChange) {
+          onVisibleChange(bool, e, reason);
+        }
+        if (visible === undefined) {
+          setIsOpen(bool);
+        }
+      },
+      whileElementsMounted: autoUpdate,
+      middleware: [!!offsetProp && offset(offsetProp), autoPlacements !== null && autoPlacements !== void 0 && autoPlacements.length ? autoPlacement({
+        allowedPlacements: autoPlacements.map(function (placement) {
+          return placementMap[placement];
+        })
+      }) : flipProp ? flip() : undefined, shiftProp ? shift({
+        limiter: limitShift({
+          offset: 4
+        }),
+        padding: 16
+      }) : undefined, (!!sizeProp || matchWidth) && size({
+        apply: function apply(_ref3) {
+          var availableWidth = _ref3.availableWidth,
+            availableHeight = _ref3.availableHeight,
+            rects = _ref3.rects,
+            elements = _ref3.elements;
+          if (sizeProp) {
+            sizeProp({
+              availableWidth: availableWidth,
+              availableHeight: availableHeight
+            });
+          }
+          if (matchWidth) {
+            var _child = elements.floating.querySelector('[data-odn-popup-content]');
+            if (_child) {
+              Object.assign(_child.style, {
+                minWidth: "".concat(rects.reference.width, "px")
+              });
+            }
+          }
+        }
+      }), arrow({
+        element: arrowRef,
+        padding: 12
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context,
+    middlewareData = _useFloating.middlewareData,
+    placement = _useFloating.placement;
+  var _useTransitionStatus = useTransitionStatus(context),
+    isMounted = _useTransitionStatus.isMounted,
+    status = _useTransitionStatus.status;
+  var hover = useHover(context, {
+    move: false,
+    enabled: trigger === 'hover',
+    delay: {
+      open: (mouseEnterDelay || 0) * 1000,
+      close: ((mouseLeaveDelay || 0) + 0.1) * 1000
+    }
+  });
+  var focus = useFocus(context, {
+    enabled: trigger === 'focus'
+  });
+  var click = useClick(context, {
+    enabled: trigger === 'click'
+  });
+  var dismiss = useDismiss(context, {
+    enabled: trigger !== 'click' || !isReact16OrLower(),
+    ancestorScroll: hideOnAncestorScroll
+  });
+  var _useInteractions = useInteractions([hover, focus, click, dismiss]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var childrenRef = children === null || children === void 0 ? void 0 : children.ref;
+  var referenceCallbackRef = React.useCallback(function (node) {
+    if (node && getPopupContainer) {
+      setPortalContainer(getPopupContainer(node));
+    }
+  }, [getPopupContainer]);
+  var ref = useMergeRefs([context.refs.setReference, childrenRef, referenceCallbackRef]);
+  var child = null;
+  if ( /*#__PURE__*/React.isValidElement(children) && children.type !== React.Fragment) {
+    child = /*#__PURE__*/React.cloneElement(children, getReferenceProps(_objectSpread(_objectSpread({
+      ref: ref
+    }, children.props), {}, {
+      'data-odn-open': context.open ? true : undefined
+    })));
+  }
+  useEffect(function () {
+    if (visible !== undefined) {
+      setIsOpen(visible);
+    }
+  }, [visible]);
+
+  // 自定义 clickoutside 处理，仅在 React 16 或更低版本且 trigger='click' 时启用
+  useEffect(function () {
+    if (trigger !== 'click' || !isReact16OrLower()) {
+      return;
+    }
+    var handleClickOutside = function handleClickOutside(event) {
+      var _refs$floating$curren;
+      var target = event.target;
+
+      // 如果弹窗没有显示，不需要处理
+      if (!isOpen) {
+        return;
+      }
+
+      // 检查点击是否在 reference 或 floating 内部
+      var isInsideReference = refs.reference.current && 'contains' in refs.reference.current && refs.reference.current.contains(target);
+      var isInsideFloating = (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.contains(target);
+
+      // 检查点击是否在任何其他 popup 内部（通过检查祖先是否有 data-floating-ui-portal，或有类名 odn-select-dropdown）
+      var isInsideAnyPopup = function () {
+        var element = target;
+        while (element && element !== document.body) {
+          if (element.hasAttribute('data-floating-ui-portal') || element.classList.contains('odn-select-dropdown')) {
+            return true;
+          }
+          element = element.parentElement;
+        }
+        return false;
+      }();
+
+      // 如果点击在两者之外且不在任何其他 popup 内部，则关闭弹窗
+      if (!isInsideReference && !isInsideFloating && !isInsideAnyPopup) {
+        if (onVisibleChange) {
+          onVisibleChange(false, event);
+        }
+        if (visible === undefined) {
+          setIsOpen(false);
+        }
+      }
+    };
+
+    // 添加点击事件监听器
+    document.addEventListener('pointerdown', handleClickOutside);
+
+    // 清理函数
+    return function () {
+      document.removeEventListener('pointerdown', handleClickOutside);
+    };
+  }, [trigger, isOpen, refs.reference, refs.floating, onVisibleChange, visible]);
+  var transformOrigin = getTransformOrigin({
+    placement: placement,
+    x: (_middlewareData$arrow = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.x) !== null && _middlewareData$arrow !== void 0 ? _middlewareData$arrow : 0,
+    y: (_middlewareData$arrow3 = (_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.y) !== null && _middlewareData$arrow3 !== void 0 ? _middlewareData$arrow3 : 0
+  });
+  var floatingProps = getFloatingProps();
+  var floatingClassName = floatingProps.className,
+    restFloatingProps = _objectWithoutProperties(floatingProps, _excluded);
+  var mergedClassName = clsx(popupRootClassName, typeof floatingClassName === 'string' ? floatingClassName : undefined);
+  var popupEl = /*#__PURE__*/React.createElement(React.Fragment, null, (!destroyOnHidden || isMounted) && /*#__PURE__*/React.createElement("div", _extends({
+    "data-odn-popup": true,
+    "data-status": status,
+    "data-placement": placement,
+    "data-arrowed": arrowed,
+    "data-type": type,
+    ref: refs.setFloating,
+    style: _objectSpread(_objectSpread(_objectSpread({
+      zIndex: zIndex
+    }, floatingStyles || {}), popupRootStyle), {}, {
+      opacity: !isMounted && !destroyOnHidden ? 0 : 1,
+      visibility: !isMounted && !destroyOnHidden ? 'hidden' : 'visible'
+    }),
+    className: mergedClassName,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, restFloatingProps), /*#__PURE__*/React.createElement("div", {
+    className: popupClassName,
+    "data-odn-popup-content": true,
+    "data-placement": placement,
+    "data-status": status,
+    "data-arrowed": arrowed,
+    style: _objectSpread({
+      transformOrigin: transformOrigin
+    }, popupStyle)
+  }, arrowed && /*#__PURE__*/React.createElement("span", {
+    style: {
+      top: (_middlewareData$arrow5 = middlewareData.arrow) === null || _middlewareData$arrow5 === void 0 ? void 0 : _middlewareData$arrow5.y,
+      left: (_middlewareData$arrow6 = middlewareData.arrow) === null || _middlewareData$arrow6 === void 0 ? void 0 : _middlewareData$arrow6.x
+    },
+    "data-odn-popup-arrow": true,
+    "data-placement": placement,
+    ref: arrowRef
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "10",
+    viewBox: "0 0 20 10",
+    fill: "none",
+    style: {
+      transform: "translate3d(".concat((_arrowOffset$x = arrowOffset === null || arrowOffset === void 0 ? void 0 : arrowOffset.x) !== null && _arrowOffset$x !== void 0 ? _arrowOffset$x : 0, "px, ").concat((_arrowOffset$y = arrowOffset === null || arrowOffset === void 0 ? void 0 : arrowOffset.y) !== null && _arrowOffset$y !== void 0 ? _arrowOffset$y : 0, "px, 0)")
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+    "data-odn-popup-arrow-fill": true
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+    "data-odn-popup-arrow-outer-stroke": true
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+    "data-odn-popup-arrow-inner-stroke": true
+  }))), popup)));
+  useImperativeHandle(refProp, function () {
+    return {
+      refs: refs,
+      floatingStyles: floatingStyles
+    };
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, child || /*#__PURE__*/React.createElement("div", _extends({
+    "data-odn-reference": true,
+    ref: refs.setReference
+  }, getReferenceProps()), children), portal ? getPopupContainer && portalContainer ? ( /*#__PURE__*/ReactDOM.createPortal(popupEl, portalContainer)) : /*#__PURE__*/React.createElement(FloatingPortal, null, popupEl) : popupEl);
+});
+export default PopBase;

package/dist/pop-base/mergeProps.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
+    preventBaseUIHandler: () => void;
+    readonly baseUIHandlerPrevented?: boolean;
+};
+type WithPreventBaseUIHandler<T> = T extends (event: infer E) => any ? E extends React.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+export type WithBaseUIEvent<T> = {
+    [K in keyof T]: WithPreventBaseUIHandler<T[K]>;
+};
+type MergableProps<T extends React.ElementType> = WithBaseUIEvent<React.ComponentPropsWithRef<T>> | ((otherProps: WithBaseUIEvent<React.ComponentPropsWithRef<T>>) => WithBaseUIEvent<React.ComponentPropsWithRef<T>>) | undefined;
+/**
+ * Merges multiple sets of React props. It follows the Object.assign pattern where the rightmost object's fields overwrite
+ * the conflicting ones from others. This doesn't apply to event handlers, `className` and `style` props.
+ * Event handlers are merged such that they are called in sequence (the rightmost one being called first),
+ * and allows the user to prevent the subsequent event handlers from being
+ * executed by attaching a `preventBaseUIHandler` method.
+ * It also merges the `className` and `style` props, whereby the classes are concatenated
+ * and the rightmost styles overwrite the subsequent ones.
+ *
+ * Props can either be provided as objects or as functions that take the previous props as an argument.
+ * The function will receive the merged props up to that point (going from left to right):
+ * so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
+ * The function is responsible for chaining event handlers if needed (i.e. we don't run the merge logic).
+ *
+ * Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
+ * They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
+ *
+ * @important **`ref` is not merged.**
+ * @param props props to merge.
+ * @returns the merged props.
+ */
+export declare function mergeProps<Tag extends React.ElementType>(...props: MergableProps<Tag>[]): WithBaseUIEvent<React.ComponentPropsWithRef<Tag>>;
+export declare function makeEventPreventable<T extends React.SyntheticEvent>(event: BaseUIEvent<T>): BaseUIEvent<T>;
+export {};