@easy-editor/setters 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,9 +1,74 @@
 /* @easy-editor/setters v0.1.0 */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react/jsx-runtime')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react/jsx-runtime'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EasyEditorSetters = {}, global.React, global.jsxRuntime));
-})(this, (function (exports, React$1, jsxRuntime) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('react/jsx-runtime')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'react/jsx-runtime'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EasyEditorSetters = {}, global.React, global.ReactDOM, global.jsxRuntime));
+})(this, (function (exports, React$1, reactDom, jsxRuntime) { 'use strict';
+
+  /**
+   * Popover - 共享弹窗组件
+   * - 使用 Portal 渲染到 document.body，避免被父容器遮挡
+   * - 自动匹配触发器宽度
+   */
+  const Popover = props => {
+    const {
+      open,
+      onClose,
+      trigger,
+      children,
+      width = 'trigger'
+    } = props;
+    const triggerRef = React$1.useRef(null);
+    const [position, setPosition] = React$1.useState({
+      top: 0,
+      left: 0
+    });
+    const [popoverWidth, setPopoverWidth] = React$1.useState(0);
+
+    // 计算弹窗位置
+    React$1.useEffect(() => {
+      if (open && triggerRef.current) {
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const triggerWidth = triggerRect.width;
+
+        // 设置弹窗宽度
+        if (width === 'trigger') {
+          setPopoverWidth(triggerWidth);
+        }
+        setPosition({
+          top: triggerRect.bottom + 4,
+          left: triggerRect.left
+        });
+      }
+    }, [open, width]);
+
+    // 点击外部关闭
+    React$1.useEffect(() => {
+      const handleClickOutside = event => {
+        const target = event.target;
+        const popoverEl = document.querySelector('.es-popover-portal');
+        if (popoverEl && !popoverEl.contains(target) && triggerRef.current && !triggerRef.current.contains(target)) {
+          onClose();
+        }
+      };
+      if (open) {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+      }
+    }, [open, onClose]);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      ref: triggerRef
+    }, trigger), open && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", {
+      className: "es-popover-portal",
+      style: {
+        position: 'fixed',
+        top: position.top,
+        left: position.left,
+        width: popoverWidth || 'auto',
+        zIndex: 1000
+      }
+    }, children), document.body));
+  };
 
   function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -3831,7 +3896,7 @@
   });
   Sketch.displayName = 'Sketch';
 
-  var styles$i = {"trigger":"es-trigger-w-aUi","colorPreview":"es-colorPreview-SUgiJ","colorValue":"es-colorValue-cYdRP","popover":"es-popover-SfIUB","popoverHidden":"es-popoverHidden-GCAC8"};
+  var styles$i = {"trigger":"es-trigger-w-aUi","colorPreview":"es-colorPreview-SUgiJ","colorValue":"es-colorValue-cYdRP","popover":"es-popover-SfIUB"};
 
   const ColorSetter = props => {
     const {
@@ -3841,40 +3906,25 @@
       disableAlpha = false
     } = props;
     const [open, setOpen] = React$1.useState(false);
-    const containerRef = React$1.useRef(null);
-    React$1.useEffect(() => {
-      const handleClickOutside = event => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-          setOpen(false);
+    return /*#__PURE__*/React.createElement(Popover, {
+      onClose: () => setOpen(false),
+      open: open,
+      trigger: /*#__PURE__*/React.createElement("button", {
+        "aria-label": "Select color",
+        className: styles$i.trigger,
+        onClick: () => setOpen(true),
+        type: "button"
+      }, /*#__PURE__*/React.createElement("div", {
+        "aria-label": "Current color",
+        className: styles$i.colorPreview,
+        style: {
+          backgroundColor: value ?? initialValue
         }
-      };
-      if (open) {
-        document.addEventListener('mousedown', handleClickOutside);
-      }
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }, [open]);
-    return /*#__PURE__*/React.createElement("div", {
-      ref: containerRef,
-      style: {
-        position: 'relative'
-      }
-    }, /*#__PURE__*/React.createElement("button", {
-      "aria-label": "Select color",
-      className: styles$i.trigger,
-      onClick: () => setOpen(!open),
-      type: "button"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: styles$i.colorValue
+      }, value ?? initialValue))
     }, /*#__PURE__*/React.createElement("div", {
-      "aria-label": "Current color",
-      className: styles$i.colorPreview,
-      style: {
-        backgroundColor: value ?? initialValue
-      }
-    }), /*#__PURE__*/React.createElement("span", {
-      className: styles$i.colorValue
-    }, value ?? initialValue)), /*#__PURE__*/React.createElement("div", {
-      className: cn(styles$i.popover, !open && styles$i.popoverHidden)
+      className: styles$i.popover
     }, /*#__PURE__*/React.createElement(Sketch, {
       color: value,
       disableAlpha: disableAlpha,
@@ -3883,7 +3933,7 @@
     })));
   };
 
-  var styles$h = {"container":"es-container-df9wM","trigger":"es-trigger-fTNvQ","triggerIcon":"es-triggerIcon-1mdQ0","triggerIconPrimary":"es-triggerIconPrimary-opifh","triggerIconMuted":"es-triggerIconMuted-CWgDl","triggerText":"es-triggerText-WeQRu","popover":"es-popover-z8oiW","popoverHidden":"es-popoverHidden-kLhMd","tabsList":"es-tabsList-liSeY","tabTrigger":"es-tabTrigger-6j7K-","tabTriggerActive":"es-tabTriggerActive-g6hcl","tabTriggerIcon":"es-tabTriggerIcon-dRSAp","tabContent":"es-tabContent--H166","tabContentActive":"es-tabContentActive-Fjdu5","section":"es-section-eDYxd","sectionLabel":"es-sectionLabel--LHE8","input":"es-input--OymK","inputMono":"es-inputMono-pCJz3","textarea":"es-textarea-iurkc","booleanButtons":"es-booleanButtons-0bM8P","booleanButton":"es-booleanButton-3fXcB","booleanButtonActive":"es-booleanButtonActive-zGWrZ","datasourceList":"es-datasourceList-VIRXb","datasourceButton":"es-datasourceButton-giz6D","datasourceButtonActive":"es-datasourceButtonActive-m5WPP","datasourceIcon":"es-datasourceIcon-q9Omt","emptyState":"es-emptyState-rI2si","hint":"es-hint-zfWLZ","preview":"es-preview-tUInw"};
+  var styles$h = {"trigger":"es-trigger-fTNvQ","triggerIcon":"es-triggerIcon-1mdQ0","triggerIconPrimary":"es-triggerIconPrimary-opifh","triggerIconMuted":"es-triggerIconMuted-CWgDl","triggerText":"es-triggerText-WeQRu","popoverContent":"es-popoverContent-6qE--","tabsList":"es-tabsList-liSeY","tabTrigger":"es-tabTrigger-6j7K-","tabTriggerActive":"es-tabTriggerActive-g6hcl","tabTriggerIcon":"es-tabTriggerIcon-dRSAp","tabContent":"es-tabContent--H166","tabContentActive":"es-tabContentActive-Fjdu5","section":"es-section-eDYxd","sectionLabel":"es-sectionLabel--LHE8","input":"es-input--OymK","inputMono":"es-inputMono-pCJz3","textarea":"es-textarea-iurkc","booleanButtons":"es-booleanButtons-0bM8P","booleanButton":"es-booleanButton-3fXcB","booleanButtonActive":"es-booleanButtonActive-zGWrZ","datasourceList":"es-datasourceList-VIRXb","datasourceButton":"es-datasourceButton-giz6D","datasourceButtonActive":"es-datasourceButtonActive-m5WPP","datasourceIcon":"es-datasourceIcon-q9Omt","emptyState":"es-emptyState-rI2si","hint":"es-hint-zfWLZ","preview":"es-preview-tUInw"};
 
   const defaultValue$3 = {
     type: 'static',
@@ -3901,20 +3951,6 @@
     const currentValue = value ?? initialValue ?? defaultValue$3;
     const [open, setOpen] = React$1.useState(false);
     const [activeTab, setActiveTab] = React$1.useState(currentValue.type);
-    const containerRef = React$1.useRef(null);
-    React$1.useEffect(() => {
-      const handleClickOutside = event => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-          setOpen(false);
-        }
-      };
-      if (open) {
-        document.addEventListener('mousedown', handleClickOutside);
-      }
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }, [open]);
     const updateBinding = React$1.useCallback(updates => {
       onChange({
         ...currentValue,
@@ -4011,18 +4047,20 @@
         text: '静态数据'
       };
     }, [currentValue, dataSources]);
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles$h.container,
-      ref: containerRef
-    }, /*#__PURE__*/React.createElement("button", {
-      "aria-label": "Data binding",
-      className: styles$h.trigger,
-      onClick: () => setOpen(!open),
-      type: "button"
-    }, bindingStatus.icon, /*#__PURE__*/React.createElement("span", {
-      className: styles$h.triggerText
-    }, bindingStatus.text)), /*#__PURE__*/React.createElement("div", {
-      className: cn(styles$h.popover, open === false ? styles$h.popoverHidden : '')
+    return /*#__PURE__*/React.createElement(Popover, {
+      onClose: () => setOpen(false),
+      open: open,
+      trigger: /*#__PURE__*/React.createElement("button", {
+        "aria-label": "Data binding",
+        className: styles$h.trigger,
+        onClick: () => setOpen(true),
+        type: "button"
+      }, bindingStatus.icon, /*#__PURE__*/React.createElement("span", {
+        className: styles$h.triggerText
+      }, bindingStatus.text)),
+      width: 300
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$h.popoverContent
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$h.tabsList,
       role: "tablist"
@@ -4084,7 +4122,7 @@
     }, "\u7ED1\u5B9A\u540E\u53EF\u5728\u9884\u89C8\u6A21\u5F0F\u67E5\u770B\u6570\u636E")) : null))));
   };
 
-  var styles$g = {"container":"es-container-4VZqD","trigger":"es-trigger-rmYLl","triggerIcon":"es-triggerIcon-ktlTS","triggerText":"es-triggerText-B63By","popover":"es-popover-d9HQQ","popoverHidden":"es-popoverHidden-fDKLq","content":"es-content-3MmL0","header":"es-header-VoKF3","headerTitle":"es-headerTitle-vDZR8","headerCount":"es-headerCount-stTlN","mappingList":"es-mappingList-SLqhN","mappingItem":"es-mappingItem-xtRLl","mappingHeader":"es-mappingHeader-LwKiY","mappingTitle":"es-mappingTitle-IMhzw","mappingRequired":"es-mappingRequired-tP6L-","mappingType":"es-mappingType-nyqrh","mappingRow":"es-mappingRow-lFfhT","select":"es-select-R4pIl","input":"es-input--LohJ","arrowIcon":"es-arrowIcon-QqWMM","targetField":"es-targetField-gSvGk","transformRow":"es-transformRow-O6MAG","transformIcon":"es-transformIcon-beXzy","transformInput":"es-transformInput-SyN2q","clearButton":"es-clearButton-Pm-uP","helpText":"es-helpText-IHqjo"};
+  var styles$g = {"trigger":"es-trigger-rmYLl","triggerIcon":"es-triggerIcon-ktlTS","triggerText":"es-triggerText-B63By","popoverContent":"es-popoverContent-IIcFY","header":"es-header-VoKF3","headerTitle":"es-headerTitle-vDZR8","headerCount":"es-headerCount-stTlN","mappingList":"es-mappingList-SLqhN","mappingItem":"es-mappingItem-xtRLl","mappingHeader":"es-mappingHeader-LwKiY","mappingTitle":"es-mappingTitle-IMhzw","mappingRequired":"es-mappingRequired-tP6L-","mappingType":"es-mappingType-nyqrh","mappingRow":"es-mappingRow-lFfhT","select":"es-select-R4pIl","input":"es-input--LohJ","arrowIcon":"es-arrowIcon-QqWMM","targetField":"es-targetField-gSvGk","transformRow":"es-transformRow-O6MAG","transformIcon":"es-transformIcon-beXzy","transformInput":"es-transformInput-SyN2q","clearButton":"es-clearButton-Pm-uP","helpText":"es-helpText-IHqjo"};
 
   const defaultValue$2 = {
     mappings: []
@@ -4099,20 +4137,6 @@
     } = props;
     const currentValue = value ?? initialValue ?? defaultValue$2;
     const [open, setOpen] = React$1.useState(false);
-    const containerRef = React$1.useRef(null);
-    React$1.useEffect(() => {
-      const handleClickOutside = event => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-          setOpen(false);
-        }
-      };
-      if (open) {
-        document.addEventListener('mousedown', handleClickOutside);
-      }
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }, [open]);
 
     // 获取字段的映射
     const getMapping = React$1.useCallback(targetField => currentValue.mappings.find(m => m.targetField === targetField), [currentValue.mappings]);
@@ -4148,22 +4172,22 @@
 
     // 统计已映射字段数
     const mappedCount = currentValue.mappings.filter(m => m.sourceField).length;
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles$g.container,
-      ref: containerRef
-    }, /*#__PURE__*/React.createElement("button", {
-      "aria-label": "Data mapping",
-      className: styles$g.trigger,
-      onClick: () => setOpen(!open),
-      type: "button"
-    }, /*#__PURE__*/React.createElement(Settings2, {
-      className: styles$g.triggerIcon
-    }), /*#__PURE__*/React.createElement("span", {
-      className: styles$g.triggerText
-    }, "\u5B57\u6BB5\u6620\u5C04 (", mappedCount, "/", targetFields.length, ")")), /*#__PURE__*/React.createElement("div", {
-      className: cn(styles$g.popover, open === false ? styles$g.popoverHidden : '')
+    return /*#__PURE__*/React.createElement(Popover, {
+      onClose: () => setOpen(false),
+      open: open,
+      trigger: /*#__PURE__*/React.createElement("button", {
+        "aria-label": "Data mapping",
+        className: styles$g.trigger,
+        onClick: () => setOpen(true),
+        type: "button"
+      }, /*#__PURE__*/React.createElement(Settings2, {
+        className: styles$g.triggerIcon
+      }), /*#__PURE__*/React.createElement("span", {
+        className: styles$g.triggerText
+      }, "\u5B57\u6BB5\u6620\u5C04 (", mappedCount, "/", targetFields.length, ")")),
+      width: 320
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$g.content
+      className: styles$g.popoverContent
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$g.header
     }, /*#__PURE__*/React.createElement("span", {
@@ -4229,10 +4253,10 @@
       }, "\u6E05\u9664\u6620\u5C04") : null);
     })), /*#__PURE__*/React.createElement("div", {
       className: styles$g.helpText
-    }, /*#__PURE__*/React.createElement("p", null, "\u2022 \u6E90\u5B57\u6BB5: \u6570\u636E\u6E90\u4E2D\u7684\u5B57\u6BB5\u8DEF\u5F84"), /*#__PURE__*/React.createElement("p", null, "\u2022 \u8F6C\u6362\u8868\u8FBE\u5F0F: \u5982 value * 100, value.toFixed(2)")))));
+    }, /*#__PURE__*/React.createElement("p", null, "\u2022 \u6E90\u5B57\u6BB5: \u6570\u636E\u6E90\u4E2D\u7684\u5B57\u6BB5\u8DEF\u5F84"), /*#__PURE__*/React.createElement("p", null, "\u2022 \u8F6C\u6362\u8868\u8FBE\u5F0F: \u5982 value * 100, value.toFixed(2)"))));
   };
 
-  var styles$f = {"container":"es-container-pcCYY","trigger":"es-trigger-IjziC","triggerIcon":"es-triggerIcon-t21hp","triggerText":"es-triggerText-WQ-5H","popover":"es-popover-h2Vn-","popoverHidden":"es-popoverHidden-EiA3W","searchWrapper":"es-searchWrapper-jUGP6","searchIcon":"es-searchIcon-Qu4Cl","searchInput":"es-searchInput-YUlsM","section":"es-section-mWvKy","sectionTitle":"es-sectionTitle-4m6ZV","iconGrid":"es-iconGrid-hvHqv","iconButton":"es-iconButton-3y2jO","iconButtonSelected":"es-iconButtonSelected-01Ozi","iconButtonIcon":"es-iconButtonIcon-ur-nS","emptyMessage":"es-emptyMessage-dWKQh"};
+  var styles$f = {"trigger":"es-trigger-IjziC","triggerIcon":"es-triggerIcon-t21hp","triggerText":"es-triggerText-WQ-5H","popover":"es-popover-h2Vn-","searchWrapper":"es-searchWrapper-jUGP6","searchIcon":"es-searchIcon-Qu4Cl","searchInput":"es-searchInput-YUlsM","section":"es-section-mWvKy","sectionTitle":"es-sectionTitle-4m6ZV","iconGrid":"es-iconGrid-hvHqv","iconButton":"es-iconButton-3y2jO","iconButtonSelected":"es-iconButtonSelected-01Ozi","iconButtonIcon":"es-iconButtonIcon-ur-nS","emptyMessage":"es-emptyMessage-dWKQh"};
 
   // 图标映射表
   const iconMap = {
@@ -4355,20 +4379,6 @@
     const [open, setOpen] = React$1.useState(false);
     const [searchQuery, setSearchQuery] = React$1.useState('');
     const [recentIcons, setRecentIcons] = React$1.useState([]);
-    const containerRef = React$1.useRef(null);
-    React$1.useEffect(() => {
-      const handleClickOutside = event => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-          setOpen(false);
-        }
-      };
-      if (open) {
-        document.addEventListener('mousedown', handleClickOutside);
-      }
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }, [open]);
 
     // 获取图标组件
     const getIconComponent = React$1.useCallback(iconName => iconMap[iconName] || Circle, []);
@@ -4394,20 +4404,21 @@
       setOpen(false);
     }, [onChange]);
     const CurrentIcon = getIconComponent(currentValue.name);
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles$f.container,
-      ref: containerRef
-    }, /*#__PURE__*/React.createElement("button", {
-      "aria-label": "Select icon",
-      className: styles$f.trigger,
-      onClick: () => setOpen(!open),
-      type: "button"
-    }, /*#__PURE__*/React.createElement(CurrentIcon, {
-      className: styles$f.triggerIcon
-    }), /*#__PURE__*/React.createElement("span", {
-      className: styles$f.triggerText
-    }, currentValue.name)), /*#__PURE__*/React.createElement("div", {
-      className: cn(styles$f.popover, open === false ? styles$f.popoverHidden : '')
+    return /*#__PURE__*/React.createElement(Popover, {
+      onClose: () => setOpen(false),
+      open: open,
+      trigger: /*#__PURE__*/React.createElement("button", {
+        "aria-label": "Select icon",
+        className: styles$f.trigger,
+        onClick: () => setOpen(true),
+        type: "button"
+      }, /*#__PURE__*/React.createElement(CurrentIcon, {
+        className: styles$f.triggerIcon
+      }), /*#__PURE__*/React.createElement("span", {
+        className: styles$f.triggerText
+      }, currentValue.name))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$f.popover
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$f.searchWrapper
     }, /*#__PURE__*/React.createElement(Search, {
@@ -4735,7 +4746,7 @@
     }, option.label)));
   };
 
-  var styles$8 = {"container":"es-container-HI7-c","trigger":"es-trigger-YRz9p","triggerValue":"es-triggerValue-k-g2-","placeholder":"es-placeholder-F8-XP","chevron":"es-chevron-UbZv-","chevronOpen":"es-chevronOpen-Yui-r","dropdown":"es-dropdown-l2sra","dropdownHidden":"es-dropdownHidden-S8Y4U","option":"es-option-cv-7C","optionSelected":"es-optionSelected-K4e5h","optionDisabled":"es-optionDisabled-72jrC"};
+  var styles$8 = {"trigger":"es-trigger-YRz9p","triggerValue":"es-triggerValue-k-g2-","placeholder":"es-placeholder-F8-XP","chevron":"es-chevron-UbZv-","chevronOpen":"es-chevronOpen-Yui-r","dropdown":"es-dropdown-l2sra","option":"es-option-cv-7C","optionSelected":"es-optionSelected-K4e5h","optionDisabled":"es-optionDisabled-72jrC"};
 
   const SelectSetter = props => {
     const {
@@ -4746,22 +4757,8 @@
       onChange
     } = props;
     const [open, setOpen] = React$1.useState(false);
-    const containerRef = React$1.useRef(null);
     const currentValue = value ?? initialValue ?? '';
     const selectedOption = options.find(opt => opt.value === currentValue);
-    React$1.useEffect(() => {
-      const handleClickOutside = event => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-          setOpen(false);
-        }
-      };
-      if (open) {
-        document.addEventListener('mousedown', handleClickOutside);
-      }
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }, [open]);
     const handleSelect = (optionValue, disabled) => {
       if (disabled) {
         return;
@@ -4769,21 +4766,22 @@
       onChange(optionValue);
       setOpen(false);
     };
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles$8.container,
-      ref: containerRef
-    }, /*#__PURE__*/React.createElement("button", {
-      "aria-expanded": open,
-      "aria-haspopup": "listbox",
-      className: styles$8.trigger,
-      onClick: () => setOpen(!open),
-      type: "button"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: cn(styles$8.triggerValue, selectedOption ? '' : styles$8.placeholder)
-    }, selectedOption?.label || placeholder || '请选择'), /*#__PURE__*/React.createElement(ChevronDown, {
-      className: cn(styles$8.chevron, open ? styles$8.chevronOpen : '')
-    })), /*#__PURE__*/React.createElement("div", {
-      className: cn(styles$8.dropdown, open === false ? styles$8.dropdownHidden : ''),
+    return /*#__PURE__*/React.createElement(Popover, {
+      onClose: () => setOpen(false),
+      open: open,
+      trigger: /*#__PURE__*/React.createElement("button", {
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: styles$8.trigger,
+        onClick: () => setOpen(true),
+        type: "button"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: cn(styles$8.triggerValue, selectedOption ? '' : styles$8.placeholder)
+      }, selectedOption?.label || placeholder || '请选择'), /*#__PURE__*/React.createElement(ChevronDown, {
+        className: cn(styles$8.chevron, open ? styles$8.chevronOpen : '')
+      }))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$8.dropdown,
       role: "listbox"
     }, options.map(option => /*#__PURE__*/React.createElement("button", {
       "aria-selected": option.value === currentValue,
@@ -5298,6 +5296,7 @@
   exports.NodeIdSetter = NodeIdSetter;
   exports.NumberSetter = NumberSetter;
   exports.ObjectSetter = ObjectSetter;
+  exports.Popover = Popover;
   exports.RectSetter = RectSetter;
   exports.SegmentedSetter = SegmentedSetter;
   exports.SelectSetter = SelectSetter;