[fix] feature menu not working in shadow DOM (#2416)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
Co-authored-by: Ilya Boyandin <ilya@boyandin.me>

src/components/package.json

@@ -36,6 +36,7 @@
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
+    "@floating-ui/react": "0.25.1",
     "@kepler.gl/actions": "3.0.0-alpha.1",
     "@kepler.gl/cloud-providers": "3.0.0-alpha.1",
     "@kepler.gl/constants": "3.0.0-alpha.1",

src/components/src/editor/feature-action-panel.tsx

@@ -18,15 +18,15 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {useCallback, useState, Component, ComponentType} from 'react';
+import React, {useCallback, useState, ComponentType} from 'react';
 import {useIntl} from 'react-intl';
 
 import ActionPanel, {ActionPanelItem} from '../common/action-panel';
 import styled from 'styled-components';
-import onClickOutside from 'react-onclickoutside';
 import classnames from 'classnames';
 import {Trash, Layers, Copy, Checkmark} from '../common/icons';
 import copy from 'copy-to-clipboard';
+import {useDismiss, useFloating, useInteractions} from '@floating-ui/react';
 import {Layer} from '@kepler.gl/layers';
 import {Filter} from '@kepler.gl/types';
 import {Feature} from '@nebula.gl/edit-modes';
@@ -78,12 +78,25 @@ export function PureFeatureActionPanelFactory(): React.FC<FeatureActionPanelProp
     onToggleLayer,
     onDeleteFeature,
     actionIcons = defaultActionIcons,
-    children
+    children,
+    onClose
   }: FeatureActionPanelProps) => {
     const [copied, setCopied] = useState(false);
     const {layerId = []} = currentFilter || {};
     const intl = useIntl();
 
+    const {refs, context} = useFloating({
+      open: true,
+      onOpenChange: v => {
+        if (!v && onClose) {
+          onClose();
+        }
+      }
+    });
+    const dismiss = useDismiss(context);
+
+    const {getFloatingProps} = useInteractions([dismiss]);
+
     const copyGeometry = useCallback(() => {
       if (selectedFeature?.geometry) copy(JSON.stringify(selectedFeature.geometry));
       setCopied(true);
@@ -95,6 +108,8 @@ export function PureFeatureActionPanelFactory(): React.FC<FeatureActionPanelProp
 
     return (
       <StyledActionsLayer
+        ref={refs.setFloating}
+        {...getFloatingProps()}
         className={classnames('feature-action-panel', className)}
         style={{
           top: `${position.y + LAYOVER_OFFSET}px`,
@@ -163,27 +178,5 @@ export function PureFeatureActionPanelFactory(): React.FC<FeatureActionPanelProp
 FeatureActionPanelFactory.deps = PureFeatureActionPanelFactory.deps;
 
 export default function FeatureActionPanelFactory(): ComponentType<FeatureActionPanelProps> {
-  const PureFeatureActionPanel = PureFeatureActionPanelFactory();
-
-  /**
-   * FeatureActionPanel wrapped with a click-outside handler. Note that this needs to be a
-   * class component, as react-onclickoutside does not handle functional components.
-   */
-  class ClickOutsideFeatureActionPanel extends Component<FeatureActionPanelProps> {
-    handleClickOutside(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      this.props.onClose?.();
-    }
-
-    render() {
-      return <PureFeatureActionPanel {...this.props} />;
-    }
-  }
-
-  const clickOutsideConfig = {
-    handleClickOutside: () => ClickOutsideFeatureActionPanel.prototype.handleClickOutside
-  };
-
-  return onClickOutside(ClickOutsideFeatureActionPanel, clickOutsideConfig);
+  return PureFeatureActionPanelFactory();
 }

yarn.lock

@@ -1723,6 +1723,42 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
+"@floating-ui/core@^1.4.2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
+  integrity sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==
+  dependencies:
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/dom@^1.5.1":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
+  integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
+  dependencies:
+    "@floating-ui/core" "^1.4.2"
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/react-dom@^2.0.1":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
+  integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
+  dependencies:
+    "@floating-ui/dom" "^1.5.1"
+
+"@floating-ui/react@0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.25.1.tgz#174bf4322913aa3549aeff27a0755fe10c66686d"
+  integrity sha512-lxuWxfSgDJwOeZK07PIDjTSlH0CY6LRDKo6eI0H7TnctP+5IAn0n8+npNveM0L2wNIVdAr0S8RvvoHfhzPbBAQ==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.1"
+    "@floating-ui/utils" "^0.1.1"
+    tabbable "^6.0.1"
+
+"@floating-ui/utils@^0.1.1", "@floating-ui/utils@^0.1.3":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
+
 "@formatjs/ecma402-abstract@1.17.2":
   version "1.17.2"
   resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz#d197c6e26b9fd96ff7ba3b3a0cc2f25f1f2dcac3"
@@ -17030,6 +17066,11 @@ syntax-error@^1.1.1:
   dependencies:
     acorn-node "^1.2.0"
 
+tabbable@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"