Start working on developer tooling

.changeset/ninety-glasses-fix.md

@@ -0,0 +1,6 @@
+---
+"@open-pioneer/chakra-integration": major
+---
+
+Rename `container` prop to `rootNode`. This property refers to the application's shadow root and was misnamed.
+Introduce `container` prop that refers to the application's container element (the root html element inside the shadow root).

.changeset/wicked-cats-vanish.md

@@ -0,0 +1,27 @@
+---
+"@open-pioneer/runtime": minor
+---
+
+Merge the dom nodes `.pioneer-root` and `.chakra-host`.
+
+Previously, the DOM hierarchy for a trails application looked like this:
+
+```text
+<app>
+└── shadow root
+    └── <div class="pioneer-root">
+        └── <div class="chakra-host">
+```
+
+It now looks like this:
+
+```text
+<app>
+└── shadow root
+    └── <div class="pioneer-root chakra-host">
+```
+
+Since all UI elements where already children of the `.chakra-host` element, this should not affect most applications.
+
+The presence of two node made it possible to accidentally create a node where Chakra's style rules didn't apply.
+This change prevents that error.

package.json

@@ -32,6 +32,7 @@
             "semver: https://github.com/advisories/GHSA-c2qf-rxjj-qqgw",
             "tough-cookie: https://github.com/advisories/GHSA-72xf-g2v4-qvf3",
             "braces: https://github.com/advisories/GHSA-grv7-fg5c-xmjg",
+            "react-remove-scroll: new version contains fix for shadow doms",
             "",
             "ignored cves",
             "============",
@@ -45,13 +46,17 @@
             "ol-mapbox-style": "workspace:disabled-package@*",
             "semver@<7.5.2": ">=7.5.2",
             "tough-cookie@<4.1.3": ">=4.1.3",
-            "braces@<3.0.3": ">=3.0.3"
+            "braces@<3.0.3": ">=3.0.3",
+            "react-remove-scroll": ">=2.5.10"
         },
         "auditConfig": {
             "ignoreCves": []
         },
         "patchedDependencies": {
-            "@changesets/[email protected]": "patches/@[email protected]"
+            "@changesets/[email protected]": "patches/@[email protected]",
+            "@chakra-ui/[email protected]": "patches/@[email protected]",
+            "@chakra-ui/[email protected]": "patches/@[email protected]",
+            "@chakra-ui/[email protected]": "patches/@[email protected]"
         },
         "peerDependencyRules": {
             "allowedVersions": {

patches/@chakra-ui__hooks@2.2.1.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/chunk-R5W6LHQW.mjs b/dist/chunk-R5W6LHQW.mjs
+index 75c349637d59f487c75f477f0cea9ad7b5e45fff..8a41cf24fc40770e30553fe572cb722edda6b4c8 100644
+--- a/dist/chunk-R5W6LHQW.mjs
++++ b/dist/chunk-R5W6LHQW.mjs
+@@ -60,7 +60,7 @@ function isValidEvent(event, ref) {
+     if (!doc.contains(target))
+       return false;
+   }
+-  return !((_a = ref.current) == null ? void 0 : _a.contains(target));
++  return !((_a = ref.current) == null ? void 0 : event.composedPath().includes(_a));
+ }
+
+ export {

patches/@chakra-ui__menu@2.2.1.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/chunk-SANI5SUM.mjs b/dist/chunk-SANI5SUM.mjs
+index 4cd8ab09dbb6a5c45fbf5d5630a32c8f6147805e..211fc6ae0907e9befa23cca9c9d6f3844ca69853 100644
+--- a/dist/chunk-SANI5SUM.mjs
++++ b/dist/chunk-SANI5SUM.mjs
+@@ -124,7 +124,7 @@ function useMenu(props = {}) {
+     ref: menuRef,
+     handler: (event) => {
+       var _a;
+-      if (!((_a = buttonRef.current) == null ? void 0 : _a.contains(event.target))) {
++      if (!((_a = buttonRef.current) == null ? void 0 : event.composedPath().includes(_a))) {
+         onClose();
+       }
+     }

patches/@chakra-ui__react-use-outside-click@2.2.0.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/index.mjs b/dist/index.mjs
+index 2d6e217a22b70ae9e87d0e87dd57c99a1fea48fa..831d92871f165986747f69a7738447501ca7113c 100644
+--- a/dist/index.mjs
++++ b/dist/index.mjs
+@@ -57,7 +57,7 @@ function isValidEvent(event, ref) {
+     if (!doc.contains(target))
+       return false;
+   }
+-  return !((_a = ref.current) == null ? void 0 : _a.contains(target));
++  return !((_a = ref.current) == null ? void 0 : event.composedPath().includes(_a));
+ }
+ function getOwnerDocument(node) {
+   var _a;

src/packages/chakra-integration/Provider.tsx

@@ -20,12 +20,20 @@ import { PortalRootProvider } from "./PortalFix";
 
 export type CustomChakraProviderProps = PropsWithChildren<{
     /**
-     * Container node where styles will be mounted.
+     * Node where styles will be mounted.
+     * This is typically the shadow root, but it may be any Node.
+     *
      * Note that updates of this property are not supported.
+     */
+    rootNode: Node;
+
+    /**
+     * Container element where the application will be mounted.
+     * This is used to render portal contents.
      *
-     * This is typically the shadow root.
+     * Note that updates of this property are not supported.
      */
-    container: Node;
+    container: HTMLElement;
 
     /**
      * Configures the color mode of the application.
@@ -62,6 +70,7 @@ const colorModeClassnames = {
 
 // https://github.com/chakra-ui/chakra-ui/issues/2439
 export const CustomChakraProvider: FC<CustomChakraProviderProps> = ({
+    rootNode,
     container,
     colorMode,
     children,
@@ -102,12 +111,15 @@ export const CustomChakraProvider: FC<CustomChakraProviderProps> = ({
             4. Set color mode on the root container instead of html and body.
         
     */
+    useEffect(() => {
+        container.classList.add("chakra-host");
+        return () => container.classList.remove("chakra-host");
+    }, [container]);
 
-    const cache = useEmotionCache(container);
-
+    const cache = useEmotionCache(rootNode);
     const theme = useMemo(() => wrapTheme(themeProp), [themeProp]);
 
-    const chakraHost = useRef<HTMLDivElement>(null);
+    const chakraHost = useRef<HTMLElement>(container);
     const toastOptions: ToastProviderProps = {
         portalProps: {
             containerRef: chakraHost
@@ -117,25 +129,21 @@ export const CustomChakraProvider: FC<CustomChakraProviderProps> = ({
     const ColorMode = useSyncedColorMode(chakraHost, colorMode);
 
     return (
-        <div className="chakra-host" ref={chakraHost}>
-            <CacheProvider value={cache}>
-                <ThemeProvider theme={theme}>
-                    <EnvironmentProvider>
-                        <ColorMode>
-                            <CSSReset />
-                            <Global styles={defaultStyles} />
-                            <GlobalStyle />
-                            <ToastOptionProvider value={toastOptions?.defaultOptions}>
-                                <PortalRootProvider value={chakraHost}>
-                                    {children}
-                                </PortalRootProvider>
-                            </ToastOptionProvider>
-                            <ToastProvider {...toastOptions} />
-                        </ColorMode>
-                    </EnvironmentProvider>
-                </ThemeProvider>
-            </CacheProvider>
-        </div>
+        <CacheProvider value={cache}>
+            <ThemeProvider theme={theme}>
+                <EnvironmentProvider>
+                    <ColorMode>
+                        <CSSReset />
+                        <Global styles={defaultStyles} />
+                        <GlobalStyle />
+                        <ToastOptionProvider value={toastOptions?.defaultOptions}>
+                            <PortalRootProvider value={chakraHost}>{children}</PortalRootProvider>
+                        </ToastOptionProvider>
+                        <ToastProvider {...toastOptions} />
+                    </ColorMode>
+                </EnvironmentProvider>
+            </ThemeProvider>
+        </CacheProvider>
     );
 };
 
@@ -145,7 +153,7 @@ export const CustomChakraProvider: FC<CustomChakraProviderProps> = ({
  * The current color mode is automatically propagates as a css class on the chakra host element.
  */
 function useSyncedColorMode(
-    chakraHost: RefObject<HTMLDivElement>,
+    chakraHost: RefObject<HTMLElement>,
     colorMode: "light" | "dark" | undefined
 ) {
     const mode = colorMode ?? "light";

src/packages/runtime/CustomElement.ts

@@ -364,8 +364,8 @@ class ApplicationInstance {
 
         // Launch react
         this.reactIntegration = new ReactIntegration({
-            rootNode: container,
-            container: shadowRoot,
+            container: container,
+            shadowRoot: shadowRoot,
             theme: elementOptions.theme,
             serviceLayer,
             packages