one-design-next 0.0.4-alpha.57

package/dist/pop-base/index.js

@@ -0,0 +1,349 @@
+'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); }
+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 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 React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+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,
+  popupClassName: '',
+  popupStyle: {},
+  portal: true,
+  shift: true,
+  size: undefined,
+  trigger: 'hover',
+  visible: 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$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$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;
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var arrowRef = useRef(null);
+  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 ref = useMergeRefs([context.refs.setReference, childrenRef]);
+  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）
+      var isInsideAnyPopup = function () {
+        var element = target;
+        while (element && element !== document.body) {
+          if (element.hasAttribute('data-floating-ui-portal')) {
+            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 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({
+      zIndex: zIndex
+    }, floatingStyles || {}), {}, {
+      opacity: !isMounted && !destroyOnHidden ? 0 : 1,
+      visibility: !isMounted && !destroyOnHidden ? 'hidden' : 'visible'
+    })
+  }, getFloatingProps()), /*#__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 ? /*#__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 {};

package/dist/pop-base/mergeProps.js

@@ -0,0 +1,144 @@
+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); }
+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; }
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+
+/**
+ * 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 function mergeProps() {
+  var _merged;
+  if (arguments.length === 0) {
+    return {};
+  }
+  if (arguments.length === 1) {
+    return resolvePropsGetter(arguments.length <= 0 ? undefined : arguments[0], {});
+  }
+  var merged = resolvePropsGetter(arguments.length <= 0 ? undefined : arguments[0], {});
+  for (var i = 1; i < arguments.length; i += 1) {
+    var propsOrPropsGetter = i < 0 || arguments.length <= i ? undefined : arguments[i];
+    if (!propsOrPropsGetter) {
+      continue;
+    }
+    if (isPropsGetter(propsOrPropsGetter)) {
+      merged = propsOrPropsGetter(merged);
+    } else {
+      merged = merge(merged, propsOrPropsGetter);
+    }
+  }
+  return (_merged = merged) !== null && _merged !== void 0 ? _merged : {};
+}
+function resolvePropsGetter(propsOrPropsGetter, previousProps) {
+  if (isPropsGetter(propsOrPropsGetter)) {
+    return propsOrPropsGetter(previousProps);
+  }
+  return propsOrPropsGetter !== null && propsOrPropsGetter !== void 0 ? propsOrPropsGetter : {};
+}
+
+/**
+ * Merges two sets of props. In case of conflicts, the external props take precedence.
+ */
+function merge(internalProps, externalProps) {
+  if (!externalProps) {
+    if (!internalProps) {
+      return {};
+    }
+    return internalProps;
+  }
+  if (!internalProps) {
+    return externalProps;
+  }
+  return Object.entries(externalProps).reduce(function (mergedProps, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      propName = _ref2[0],
+      externalPropValue = _ref2[1];
+    if (isEventHandler(propName, externalPropValue)) {
+      mergedProps[propName] = mergeEventHandlers(internalProps[propName], externalPropValue);
+    } else if (propName === 'style') {
+      mergedProps[propName] = mergeStyles(internalProps.style, externalPropValue);
+    } else if (propName === 'className') {
+      mergedProps[propName] = mergeClassNames(internalProps.className, externalPropValue);
+    } else {
+      mergedProps[propName] = externalPropValue;
+    }
+    return mergedProps;
+  }, _objectSpread({}, internalProps));
+}
+function isEventHandler(key, value) {
+  // This approach is more efficient than using a regex.
+  var thirdCharCode = key.charCodeAt(2);
+  return key[0] === 'o' && key[1] === 'n' && thirdCharCode >= 65 /* A */ && thirdCharCode <= 90 /* Z */ && typeof value === 'function';
+}
+function isPropsGetter(propsOrPropsGetter) {
+  return typeof propsOrPropsGetter === 'function';
+}
+function mergeEventHandlers(ourHandler, theirHandler) {
+  return function (event) {
+    if (isSyntheticEvent(event)) {
+      var baseUIEvent = event;
+      makeEventPreventable(baseUIEvent);
+      var _result = theirHandler(baseUIEvent);
+      if (!baseUIEvent.baseUIHandlerPrevented) {
+        ourHandler === null || ourHandler === void 0 || ourHandler(baseUIEvent);
+      }
+      return _result;
+    }
+    var result = theirHandler(event);
+    ourHandler === null || ourHandler === void 0 || ourHandler(event);
+    return result;
+  };
+}
+export function makeEventPreventable(event) {
+  event.preventBaseUIHandler = function () {
+    event.baseUIHandlerPrevented = true;
+  };
+  return event;
+}
+function mergeStyles(ourStyle, theirStyle) {
+  if (theirStyle || ourStyle) {
+    return _objectSpread(_objectSpread({}, ourStyle), theirStyle);
+  }
+  return undefined;
+}
+function mergeClassNames(ourClassName, theirClassName) {
+  if (theirClassName) {
+    if (ourClassName) {
+      // eslint-disable-next-line prefer-template
+      return theirClassName + ' ' + ourClassName;
+    }
+    return theirClassName;
+  }
+  return ourClassName;
+}
+function isSyntheticEvent(event) {
+  return event != null && _typeof(event) === 'object' && 'nativeEvent' in event;
+}

package/dist/pop-base/style/index.css

@@ -0,0 +1,150 @@
+[data-odn-popup] {
+  z-index: var(--odn-z-index-popup);
+}
+
+[data-odn-popup-content] {
+  position: relative;
+  width: max-content;
+  max-width: var(--odn-popup-max-width);
+  font-size: var(--odn-popup-font-size);
+  line-height: var(--odn-popup-line-height);
+  overflow-wrap: break-word;
+  white-space: pre-line;
+  border: var(--odn-popup-border);
+  border-radius: var(--odn-popup-border-radius);
+  box-shadow: var(--odn-popup-box-shadow);
+  filter: var(--odn-popup-filter);
+}
+
+[data-odn-popup-arrow] {
+  position: absolute;
+}
+
+[data-odn-popup-arrow] svg {
+  display: block;
+  transition: 200ms ease-in-out all;
+}
+
+[data-odn-popup-arrow-outer-stroke] {
+  fill: rgba(0, 0, 0, 0.06);
+}
+
+[data-odn-popup-content] {
+  transition-property: opacity, transform;
+}
+
+[data-odn-popup-content][data-status=open],
+[data-odn-popup-content][data-status=close] {
+  transition-duration: 0.12s;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+[data-odn-popup-content][data-status=initial],
+[data-odn-popup-content][data-status=close] {
+  opacity: 0;
+}
+
+[data-odn-popup-content][data-arrowed=true][data-status=initial],
+[data-odn-popup-content][data-arrowed=true][data-status=close] {
+  transform: scale(0.8);
+}
+
+[data-odn-popup-content][data-arrowed=false][data-status=initial][data-placement^=top],
+[data-odn-popup-content][data-arrowed=false][data-status=close][data-placement^=top] {
+  transform: translate3d(0, 4px, 0);
+}
+
+[data-odn-popup-content][data-arrowed=false][data-status=initial][data-placement^=bottom],
+[data-odn-popup-content][data-arrowed=false][data-status=close][data-placement^=bottom] {
+  transform: translate3d(0, -4px, 0);
+}
+
+[data-odn-popup-content][data-arrowed=false][data-status=initial][data-placement^=left],
+[data-odn-popup-content][data-arrowed=false][data-status=close][data-placement^=left] {
+  transform: translate3d(4px, 0, 0);
+}
+
+[data-odn-popup-content][data-arrowed=false][data-status=initial][data-placement^=right],
+[data-odn-popup-content][data-arrowed=false][data-status=close][data-placement^=right] {
+  transform: translate3d(-4px, 0, 0);
+}
+
+[data-odn-popup][data-placement^=top][data-arrowed=true] {
+  padding-bottom: 12px;
+}
+
+[data-odn-popup][data-placement^=top][data-arrowed=false] {
+  padding-bottom: 4px;
+}
+
+[data-odn-popup][data-placement^=top] [data-odn-popup-arrow] {
+  bottom: -8px;
+  transform: rotate(180deg);
+}
+
+[data-odn-popup][data-placement^=bottom][data-arrowed=true] {
+  padding-top: 12px;
+}
+
+[data-odn-popup][data-placement^=bottom][data-arrowed=false] {
+  padding-top: 4px;
+}
+
+[data-odn-popup][data-placement^=bottom] [data-odn-popup-arrow] {
+  top: -8px;
+}
+
+[data-odn-popup][data-placement^=left][data-arrowed=true] {
+  padding-right: 12px;
+}
+
+[data-odn-popup][data-placement^=left][data-arrowed=false] {
+  padding-right: 4px;
+}
+
+[data-odn-popup][data-placement^=left] [data-odn-popup-arrow] {
+  right: -13px;
+  transform: rotate(90deg);
+}
+
+[data-odn-popup][data-placement^=right][data-arrowed=true] {
+  padding-left: 12px;
+}
+
+[data-odn-popup][data-placement^=right][data-arrowed=false] {
+  padding-left: 4px;
+}
+
+[data-odn-popup][data-placement^=right] [data-odn-popup-arrow] {
+  left: -13px;
+  transform: rotate(-90deg);
+}
+
+[data-odn-reference] {
+  display: inline-block;
+}
+
+/* type */
+[data-odn-popup][data-type=popover] [data-odn-popup-content] {
+  padding: var(--odn-popover-padding-block) var(--odn-popover-padding-inline);
+  color: #1f1f1f;
+  background-color: #fff;
+}
+
+[data-odn-popup][data-type=popover] [data-odn-popup-arrow-fill] {
+  fill: #fff;
+}
+
+[data-odn-popup][data-type=tooltip] [data-odn-popup-content] {
+  padding: var(--odn-tooltip-padding-block) var(--odn-tooltip-padding-inline);
+  color: #fff;
+  background-color: #404040;
+}
+
+[data-odn-popup][data-type=tooltip] [data-odn-popup-arrow-fill] {
+  fill: #404040;
+}
+
+[data-odn-tooltip-group-content] {
+  position: relative;
+}