pollination-react-io 1.83.0 → 1.84.0

package/build/SendGeometry/SendGeometry.types.d.ts

@@ -16,6 +16,6 @@ export interface SendGeometryProps {
         [index in Action]: boolean;
     };
     geometryOptions?: GeometryOptions;
-    onVisibleChange?: (visible: boolean) => any;
+    onOverlayHeightChange?: (height: number) => any;
 }
 export {};

package/build/SendModel/SendModel.types.d.ts

@@ -13,5 +13,5 @@ export interface SendModelProps {
     optionsConfig?: {
         [index in Action]: boolean;
     };
-    onVisibleChange?: (visible: boolean) => any;
+    onOverlayHeightChange?: (height: number) => any;
 }

package/build/SendResults/SendResults.types.d.ts

@@ -17,6 +17,6 @@ export interface SendResultsProps {
         [index in Action]: boolean;
     };
     geometryOptions?: ResultsOptions;
-    onVisibleChange?: (visible: boolean) => any;
+    onOverlayHeightChange?: (height: number) => any;
 }
 export {};

package/build/atoms/BaseDropdown/BaseDropdown.d.ts

@@ -21,6 +21,6 @@ export interface BaseDropdownProps {
     action?: 'hover' | 'click';
     activeId?: string;
     selectedStyle?: CSSProperties;
-    onVisibleChange?: (visible: boolean) => any;
+    onOverlayHeightChange?: (height: number) => any;
 }
 export declare const BaseDropdown: FC<BaseDropdownProps>;

package/build/index.esm.js

@@ -53325,7 +53325,6 @@ var Dropdown$1 = /*#__PURE__*/React.forwardRef(Dropdown);
 var css_248z$7 = "@font-face {\n  font-family: 'anticon';\n  src: url('//at.alicdn.com/t/font_1434092639_4910953.eot');\n  /* IE9*/\n  src: url('//at.alicdn.com/t/font_1434092639_4910953.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1434092639_4910953.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1434092639_4910953.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1434092639_4910953.svg#iconfont') format('svg');\n  /* iOS 4.1- */\n}\n.rc-dropdown {\n  position: absolute;\n  left: -9999px;\n  top: -9999px;\n  z-index: 1070;\n  display: block;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  font-weight: normal;\n  line-height: 1.5;\n}\n.rc-dropdown-hidden {\n  display: none;\n}\n.rc-dropdown .rc-menu {\n  outline: none;\n  position: relative;\n  list-style-type: none;\n  padding: 0;\n  margin: 2px 0 2px;\n  text-align: left;\n  background-color: #fff;\n  border-radius: 3px;\n  box-shadow: 0 1px 5px #ccc;\n  background-clip: padding-box;\n  border: 1px solid #ccc;\n}\n.rc-dropdown .rc-menu > li {\n  margin: 0;\n  padding: 0;\n}\n.rc-dropdown .rc-menu:before {\n  content: \"\";\n  position: absolute;\n  top: -4px;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  background: #ffffff;\n  background: rgba(255, 255, 255, 0.01);\n}\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item {\n  position: relative;\n  display: block;\n  padding: 7px 10px;\n  clear: both;\n  font-size: 12px;\n  font-weight: normal;\n  color: #666666;\n  white-space: nowrap;\n}\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item:hover,\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-active,\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-selected {\n  background-color: #ebfaff;\n}\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-selected {\n  position: relative;\n}\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-selected:after {\n  content: '\\e613';\n  font-family: 'anticon';\n  font-weight: bold;\n  position: absolute;\n  top: 6px;\n  right: 16px;\n  color: #3CB8F0;\n}\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-disabled {\n  color: #ccc;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-disabled:hover {\n  color: #ccc;\n  background-color: #fff;\n  cursor: not-allowed;\n}\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item:last-child {\n  border-bottom-left-radius: 3px;\n  border-bottom-right-radius: 3px;\n}\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item:first-child {\n  border-top-left-radius: 3px;\n  border-top-right-radius: 3px;\n}\n.rc-dropdown .rc-menu > .rc-dropdown .rc-menu-item-divider {\n  height: 1px;\n  margin: 1px 0;\n  overflow: hidden;\n  background-color: #e5e5e5;\n  line-height: 0;\n}\n.rc-dropdown-slide-up-enter,\n.rc-dropdown-slide-up-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform-origin: 0 0;\n  display: block !important;\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n  animation-play-state: paused;\n}\n.rc-dropdown-slide-up-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform-origin: 0 0;\n  display: block !important;\n  opacity: 1;\n  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n  animation-play-state: paused;\n}\n.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomLeft,\n.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomLeft,\n.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomCenter,\n.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomCenter,\n.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-bottomRight,\n.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-bottomRight {\n  animation-name: rcDropdownSlideUpIn;\n  animation-play-state: running;\n}\n.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topLeft,\n.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topLeft,\n.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topCenter,\n.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topCenter,\n.rc-dropdown-slide-up-enter.rc-dropdown-slide-up-enter-active.rc-dropdown-placement-topRight,\n.rc-dropdown-slide-up-appear.rc-dropdown-slide-up-appear-active.rc-dropdown-placement-topRight {\n  animation-name: rcDropdownSlideDownIn;\n  animation-play-state: running;\n}\n.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomLeft,\n.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomCenter,\n.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-bottomRight {\n  animation-name: rcDropdownSlideUpOut;\n  animation-play-state: running;\n}\n.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topLeft,\n.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topCenter,\n.rc-dropdown-slide-up-leave.rc-dropdown-slide-up-leave-active.rc-dropdown-placement-topRight {\n  animation-name: rcDropdownSlideDownOut;\n  animation-play-state: running;\n}\n@keyframes rcDropdownSlideUpIn {\n  0% {\n    opacity: 0;\n    transform-origin: 0% 0%;\n    transform: scaleY(0);\n  }\n  100% {\n    opacity: 1;\n    transform-origin: 0% 0%;\n    transform: scaleY(1);\n  }\n}\n@keyframes rcDropdownSlideUpOut {\n  0% {\n    opacity: 1;\n    transform-origin: 0% 0%;\n    transform: scaleY(1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 0% 0%;\n    transform: scaleY(0);\n  }\n}\n@keyframes rcDropdownSlideDownIn {\n  0% {\n    opacity: 0;\n    transform-origin: 0% 100%;\n    transform: scaleY(0);\n  }\n  100% {\n    opacity: 1;\n    transform-origin: 0% 100%;\n    transform: scaleY(1);\n  }\n}\n@keyframes rcDropdownSlideDownOut {\n  0% {\n    opacity: 1;\n    transform-origin: 0% 100%;\n    transform: scaleY(1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 0% 100%;\n    transform: scaleY(0);\n  }\n}\n.rc-dropdown-arrow {\n  position: absolute;\n  border-width: 4px;\n  border-color: transparent;\n  box-shadow: 0 1px 5px #ccc;\n  border-style: solid;\n  transform: rotate(45deg);\n}\n.rc-dropdown-show-arrow.rc-dropdown-placement-top,\n.rc-dropdown-show-arrow.rc-dropdown-placement-topLeft,\n.rc-dropdown-show-arrow.rc-dropdown-placement-topRight {\n  padding-bottom: 6px;\n}\n.rc-dropdown-show-arrow.rc-dropdown-placement-bottom,\n.rc-dropdown-show-arrow.rc-dropdown-placement-bottomLeft,\n.rc-dropdown-show-arrow.rc-dropdown-placement-bottomRight {\n  padding-top: 6px;\n}\n.rc-dropdown-placement-top .rc-dropdown-arrow,\n.rc-dropdown-placement-topLeft .rc-dropdown-arrow,\n.rc-dropdown-placement-topRight .rc-dropdown-arrow {\n  bottom: 4px;\n  border-top-color: white;\n}\n.rc-dropdown-placement-top .rc-dropdown-arrow {\n  left: 50%;\n}\n.rc-dropdown-placement-topLeft .rc-dropdown-arrow {\n  left: 15%;\n}\n.rc-dropdown-placement-topRight .rc-dropdown-arrow {\n  right: 15%;\n}\n.rc-dropdown-placement-bottom .rc-dropdown-arrow,\n.rc-dropdown-placement-bottomLeft .rc-dropdown-arrow,\n.rc-dropdown-placement-bottomRight .rc-dropdown-arrow {\n  top: 4px;\n  border-bottom-color: white;\n}\n.rc-dropdown-placement-bottom .rc-dropdown-arrow {\n  left: 50%;\n}\n.rc-dropdown-placement-bottomLeft .rc-dropdown-arrow {\n  left: 15%;\n}\n.rc-dropdown-placement-bottomRight .rc-dropdown-arrow {\n  right: 15%;\n}\n";
 styleInject(css_248z$7);
 
-var _this = undefined;
 var BaseDropdown = function (_a) {
     var options = _a.options, children = _a.children, _b = _a.overlayStyle, overlayStyle = _b === void 0 ? {
         border: 'solid 1px #606470',
@@ -53339,7 +53338,7 @@ var BaseDropdown = function (_a) {
         backgroundColor: '#40a9ff',
         color: '#fff',
         fontWeight: 'bold'
-    } : _l, _m = _a.onVisibleChange, onVisibleChange = _m === void 0 ? function (visible) { return undefined; } : _m;
+    } : _l, _m = _a.onOverlayHeightChange, onOverlayHeightChange = _m === void 0 ? function (height) { return undefined; } : _m;
     var _o = useState(), selection = _o[0], setSelection = _o[1];
     var _p = useState(), currOptions = _p[0], setCurrOptions = _p[1];
     useEffect(function () {
@@ -53380,14 +53379,29 @@ var BaseDropdown = function (_a) {
                     o.label));
         }
     }, [selection, currOptions]);
-    return (React__default.createElement("div", null, currOptions && React__default.createElement("div", { style: { display: 'flex', flexDirection: 'row' } },
+    var ref = useRef(null);
+    var _q = useState(false), isVisible = _q[0], setIsVisible = _q[1];
+    useEffect(function () {
+        var element = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!element)
+            return;
+        var observer = new ResizeObserver(function () {
+            var _a;
+            onOverlayHeightChange((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
+        });
+        observer.observe(element);
+        return function () {
+            observer.disconnect();
+        };
+    }, [isVisible]);
+    return (React__default.createElement("div", null, React__default.createElement("div", { style: { display: 'flex', flexDirection: 'row' } },
         children,
-        React__default.createElement(Dropdown$1, { trigger: [action], overlayStyle: overlayStyle, placement: placement, onVisibleChange: onVisibleChange, animation: 'slide-up', onOverlayClick: function (e) {
+        React__default.createElement(Dropdown$1, { trigger: [action], overlayStyle: overlayStyle, placement: placement, onVisibleChange: setIsVisible, animation: 'slide-up', onOverlayClick: function (e) {
                 e.stopPropagation();
-                onVisibleChange.call(_this, false);
+                setIsVisible(false);
             }, 
             // @ts-ignore
-            overlay: currOptions.map(renderItem) },
+            overlay: React__default.createElement("div", { ref: ref }, currOptions === null || currOptions === void 0 ? void 0 : currOptions.map(renderItem)) },
             React__default.createElement("button", { disabled: disabled, className: 'poll-button', style: triggerStyle, onClick: function (e) { return e.stopPropagation(); } }, icon)))));
 };
 
@@ -53439,7 +53453,7 @@ var overlayOptions$2 = [
 ];
 var SendGeometry = function (_a) {
     var _b;
-    var geometry = _a.geometry, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, geometryOptions = _a.geometryOptions, _c = _a.onVisibleChange, onVisibleChange = _c === void 0 ? function (visible) { return undefined; } : _c;
+    var geometry = _a.geometry, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, geometryOptions = _a.geometryOptions, _c = _a.onOverlayHeightChange, onOverlayHeightChange = _c === void 0 ? function (height) { return undefined; } : _c;
     var _d = useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _d[0], setKey = _d[1];
     var _e = useState(), currOption = _e[0], setCurrOption = _e[1];
     var onSelect = function (o) { return setCurrOption(o); };
@@ -53485,7 +53499,7 @@ var SendGeometry = function (_a) {
         clear: "Clear geometry from the ".concat(host, " viewport"),
         'subscribe-preview': "Render geometry in the ".concat(host, " viewport"),
     };
-    return React__default.createElement(BaseDropdown, { onVisibleChange: onVisibleChange, childOverlayStyle: {
+    return React__default.createElement(BaseDropdown, { onOverlayHeightChange: onOverlayHeightChange, childOverlayStyle: {
             width: 'auto',
             backgroundColor: 'white',
             color: '#393e46',
@@ -53572,7 +53586,7 @@ var overlayOptions$1 = [
 ];
 var SendModel = function (_a) {
     var _b;
-    var hbjson = _a.hbjson, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, _c = _a.optionsConfig, optionsConfig = _c === void 0 ? undefined : _c, _d = _a.onVisibleChange, onVisibleChange = _d === void 0 ? function (visible) { return undefined; } : _d;
+    var hbjson = _a.hbjson, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, _c = _a.optionsConfig, optionsConfig = _c === void 0 ? undefined : _c, _d = _a.onOverlayHeightChange, onOverlayHeightChange = _d === void 0 ? function (height) { return undefined; } : _d;
     var _e = useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _e[0], setKey = _e[1];
     var _f = useState(), currOption = _f[0], setCurrOption = _f[1];
     var onSelect = function (o) { return setCurrOption(o); };
@@ -53619,7 +53633,7 @@ var SendModel = function (_a) {
         replace: "Replace the model in the ".concat(host, " viewport"),
         'subscribe-preview': "Render the model in the ".concat(host, " viewport"),
     };
-    return React__default.createElement(BaseDropdown, { onVisibleChange: onVisibleChange, childOverlayStyle: {
+    return React__default.createElement(BaseDropdown, { onOverlayHeightChange: onOverlayHeightChange, childOverlayStyle: {
             width: 'auto',
             backgroundColor: 'white',
             color: '#393e46',
@@ -53705,7 +53719,7 @@ var overlayOptions = [
 ];
 var SendResults = function (_a) {
     var _b, _c;
-    var results = _a.results, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, geometryOptions = _a.geometryOptions, _d = _a.onVisibleChange, onVisibleChange = _d === void 0 ? function (visible) { return undefined; } : _d;
+    var results = _a.results, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, geometryOptions = _a.geometryOptions, _d = _a.onOverlayHeightChange, onOverlayHeightChange = _d === void 0 ? function (height) { return undefined; } : _d;
     var _e = useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _e[0], setKey = _e[1];
     var _f = useState(), currOption = _f[0], setCurrOption = _f[1];
     var _g = useState(), previewResults = _g[0], setPreviewResults = _g[1];
@@ -53819,7 +53833,7 @@ var SendResults = function (_a) {
         clear: "Clear results from the ".concat(host, " viewport"),
         'subscribe-preview': "Render results in the ".concat(host, " viewport"),
     };
-    return React__default.createElement(BaseDropdown, { onVisibleChange: onVisibleChange, childOverlayStyle: {
+    return React__default.createElement(BaseDropdown, { onOverlayHeightChange: onOverlayHeightChange, childOverlayStyle: {
             width: 'auto',
             backgroundColor: 'white',
             color: '#393e46',
@@ -53861,7 +53875,7 @@ var SendResults = function (_a) {
             && initialIds
             && dataSets.length >= 1 && (dataSets === null || dataSets === void 0 ? void 0 : dataSets.map(function (d, index) {
             var _a;
-            return React__default.createElement(BaseDropdown, { onVisibleChange: onVisibleChange, childOverlayStyle: {
+            return React__default.createElement(BaseDropdown, { onOverlayHeightChange: onOverlayHeightChange, childOverlayStyle: {
                     width: 'auto',
                     backgroundColor: 'white',
                     color: '#393e46',