@easy-editor/setters 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -3,8 +3,74 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React$1 = require('react');
+var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 
+/**
+ * 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}
 
 function cn(...inputs) {
@@ -3831,7 +3897,7 @@ var Sketch = /*#__PURE__*/React$1.forwardRef((props, ref) => {
 });
 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 +3907,25 @@ const ColorSetter = props => {
     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, {
+    open: open,
+    onClose: () => setOpen(false),
+    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 +3934,7 @@ const ColorSetter = props => {
   })));
 };
 
-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 +3952,6 @@ const DataBindingSetter = props => {
   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 +4048,20 @@ const DataBindingSetter = props => {
       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, {
+    open: open,
+    onClose: () => setOpen(false),
+    width: 300,
+    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))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$h.popoverContent
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$h.tabsList,
     role: "tablist"
@@ -4084,7 +4123,7 @@ const DataBindingSetter = props => {
   }, "\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 +4138,6 @@ const DataMappingSetter = props => {
   } = 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 +4173,22 @@ const DataMappingSetter = props => {
 
   // 统计已映射字段数
   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, {
+    open: open,
+    onClose: () => setOpen(false),
+    width: 320,
+    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, ")"))
   }, /*#__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 +4254,10 @@ const DataMappingSetter = props => {
     }, "\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 +4380,6 @@ const IconSetter = props => {
   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 +4405,21 @@ const IconSetter = props => {
     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, {
+    open: open,
+    onClose: () => setOpen(false),
+    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 +4747,7 @@ const SegmentedSetter = props => {
   }, 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 +4758,8 @@ const SelectSetter = props => {
     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 +4767,22 @@ const SelectSetter = props => {
     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, {
+    open: open,
+    onClose: () => setOpen(false),
+    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 +5297,7 @@ exports.JsonSetter = JsonSetter;
 exports.NodeIdSetter = NodeIdSetter;
 exports.NumberSetter = NumberSetter;
 exports.ObjectSetter = ObjectSetter;
+exports.Popover = Popover;
 exports.RectSetter = RectSetter;
 exports.SegmentedSetter = SegmentedSetter;
 exports.SelectSetter = SelectSetter;