@flipdish/ui-library 0.38.0 → 0.39.0

package/dist/providers/UIProvider/hooks/usePortalAnchor.d.ts

@@ -0,0 +1,60 @@
+/** The `portalContainer` prop as consumers pass it: a resolver, `null` for the themed root, or absent. */
+export type PortalContainerProp = (() => HTMLElement | null) | null | undefined;
+/** Fallback for the `body` anchor's stacking level when the `--z-index-overlay-root` token is not in scope. */
+export declare const OVERLAY_ROOT_Z_INDEX_FALLBACK = 1300;
+/**
+ * Reads the design system's overlay stacking tier. Library overlays are `z-50`, which loses to host chrome
+ * such as Portal's sidebar at 200, so the `body` anchor lifts them as a whole to this tier. The token lives
+ * on the themed root because a scoped CSS build rewrites `:root` to the scope, so `body` never carries it.
+ *
+ * @param themeRoot The element the app's tokens cascade from.
+ * @returns The `--z-index-overlay-root` token as a number, or the 1300 fallback.
+ */
+export declare const readOverlayZIndex: (themeRoot: HTMLElement | null) => number;
+/**
+ * Decides where overlays portal. An embedded app (one with a `scopeId`) defaults to `document.body` so
+ * its overlays escape the host's `isolation` and `z-index` layers; `null` opts back into the themed root.
+ *
+ * @param portalContainer The consumer's `portalContainer` prop, as passed.
+ * @param scopeId The consumer's `scopeId` prop, as passed.
+ * @returns A resolver for the container, or `null` for the themed root.
+ */
+export declare const resolvePortalContainer: (portalContainer: PortalContainerProp, scopeId: string | undefined) => (() => HTMLElement | null) | null;
+/**
+ * Builds the anchor overlays portal into. On `body` it is a zero-height positioned block: no layout
+ * footprint (beyond a `gap` on a flex or grid body), but a stacking context the host's `z-index` layers cannot beat. Anywhere else it is
+ * `display: contents`, so it cannot disturb a flex or grid host. It carries `data-theme` and, with a
+ * scope, `data-mfe-scope`, which is what lets the app's scoped CSS reach an overlay rendered outside its tree.
+ *
+ * @param container The element the anchor is appended to.
+ * @param options The scope to stamp, if any, the resolved theme mode, and the stacking tier for a `body` anchor.
+ * @returns The appended anchor element.
+ */
+export declare const createPortalAnchor: (container: HTMLElement, { scopeId, resolvedMode, zIndex }: {
+    scopeId?: string;
+    resolvedMode: "light" | "dark";
+    zIndex?: number;
+}) => HTMLElement;
+interface UsePortalAnchorOptions {
+    /** The consumer's `portalContainer` prop, as passed. */
+    portalContainer: PortalContainerProp;
+    /** The consumer's `scopeId` prop, as passed. */
+    scopeId: string | undefined;
+    /** `ThemeProvider`'s themed root, the fallback container. */
+    themeRoot: HTMLElement | null;
+    /** The resolved theme, mirrored onto the anchor so overlays inherit it. */
+    resolvedMode: 'light' | 'dark';
+}
+/**
+ * Keeps one themed, optionally scoped anchor inside the resolved portal container and hands React Aria
+ * a `getContainer` that only ever returns an attached anchor or the themed root. Compares resolved DOM
+ * nodes rather than callback identity, so an inline `() => getElementById(...)` does not rebuild the
+ * anchor on every render, and returns `null` for the commit in which the container is still changing so
+ * no overlay lands on `document.body` unstyled and then relocates.
+ *
+ * @param options The container choice, scope, themed root and theme mode.
+ * @returns The `getContainer` callback for `PortalContainer`.
+ */
+export declare const usePortalAnchor: ({ portalContainer, scopeId, themeRoot, resolvedMode }: UsePortalAnchorOptions) => (() => HTMLElement | null);
+export {};
+//# sourceMappingURL=usePortalAnchor.d.ts.map

package/dist/providers/UIProvider/hooks/usePortalAnchor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortalAnchor.d.ts","sourceRoot":"","sources":["../../../../src/providers/UIProvider/hooks/usePortalAnchor.ts"],"names":[],"mappings":"AAIA,0GAA0G;AAC1G,MAAM,MAAM,mBAAmB,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;AAEhF,+GAA+G;AAC/G,eAAO,MAAM,6BAA6B,OAAO,CAAC;AAElD;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAAI,WAAW,WAAW,GAAG,IAAI,KAAG,MAGjE,CAAC;AAIF;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,GAAI,iBAAiB,mBAAmB,EAAE,SAAS,MAAM,GAAG,SAAS,KAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IACnD,CAAC;AAEtF;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,WAAW,EACtB,mCAAmE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,KACvI,WAiBF,CAAC;AAEF,UAAU,sBAAsB;IAC9B,wDAAwD;IACxD,eAAe,EAAE,mBAAmB,CAAC;IACrC,gDAAgD;IAChD,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,6DAA6D;IAC7D,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,2EAA2E;IAC3E,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,GAAI,uDAAuD,sBAAsB,KAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAqExI,CAAC"}

package/dist/providers/UIProvider/hooks/usePortalAnchor.js

@@ -0,0 +1,131 @@
+import { useMemo, useState, useRef, useLayoutEffect, useCallback } from 'react';
+
+/** Fallback for the `body` anchor's stacking level when the `--z-index-overlay-root` token is not in scope. */
+const OVERLAY_ROOT_Z_INDEX_FALLBACK = 1300;
+/**
+ * Reads the design system's overlay stacking tier. Library overlays are `z-50`, which loses to host chrome
+ * such as Portal's sidebar at 200, so the `body` anchor lifts them as a whole to this tier. The token lives
+ * on the themed root because a scoped CSS build rewrites `:root` to the scope, so `body` never carries it.
+ *
+ * @param themeRoot The element the app's tokens cascade from.
+ * @returns The `--z-index-overlay-root` token as a number, or the 1300 fallback.
+ */
+const readOverlayZIndex = (themeRoot) => {
+    const value = themeRoot ? Number.parseInt(getComputedStyle(themeRoot).getPropertyValue('--z-index-overlay-root'), 10) : Number.NaN;
+    return Number.isFinite(value) ? value : OVERLAY_ROOT_Z_INDEX_FALLBACK;
+};
+const portalToBody = () => document.body;
+/**
+ * Decides where overlays portal. An embedded app (one with a `scopeId`) defaults to `document.body` so
+ * its overlays escape the host's `isolation` and `z-index` layers; `null` opts back into the themed root.
+ *
+ * @param portalContainer The consumer's `portalContainer` prop, as passed.
+ * @param scopeId The consumer's `scopeId` prop, as passed.
+ * @returns A resolver for the container, or `null` for the themed root.
+ */
+const resolvePortalContainer = (portalContainer, scopeId) => portalContainer === undefined && scopeId ? portalToBody : (portalContainer ?? null);
+/**
+ * Builds the anchor overlays portal into. On `body` it is a zero-height positioned block: no layout
+ * footprint (beyond a `gap` on a flex or grid body), but a stacking context the host's `z-index` layers cannot beat. Anywhere else it is
+ * `display: contents`, so it cannot disturb a flex or grid host. It carries `data-theme` and, with a
+ * scope, `data-mfe-scope`, which is what lets the app's scoped CSS reach an overlay rendered outside its tree.
+ *
+ * @param container The element the anchor is appended to.
+ * @param options The scope to stamp, if any, the resolved theme mode, and the stacking tier for a `body` anchor.
+ * @returns The appended anchor element.
+ */
+const createPortalAnchor = (container, { scopeId, resolvedMode, zIndex = OVERLAY_ROOT_Z_INDEX_FALLBACK }) => {
+    const anchor = document.createElement('div');
+    if (container === document.body) {
+        anchor.style.position = 'relative';
+        anchor.style.height = '0';
+        anchor.style.zIndex = String(zIndex);
+        // A flex or grid body must not stretch the block or give it a share of the space; a `gap` still applies.
+        anchor.style.flex = '0 0 auto';
+        anchor.style.alignSelf = 'flex-start';
+        anchor.style.margin = '0';
+    }
+    else {
+        anchor.style.display = 'contents';
+    }
+    anchor.setAttribute('data-theme', resolvedMode);
+    if (scopeId)
+        anchor.setAttribute('data-mfe-scope', scopeId);
+    container.appendChild(anchor);
+    return anchor;
+};
+/**
+ * Keeps one themed, optionally scoped anchor inside the resolved portal container and hands React Aria
+ * a `getContainer` that only ever returns an attached anchor or the themed root. Compares resolved DOM
+ * nodes rather than callback identity, so an inline `() => getElementById(...)` does not rebuild the
+ * anchor on every render, and returns `null` for the commit in which the container is still changing so
+ * no overlay lands on `document.body` unstyled and then relocates.
+ *
+ * @param options The container choice, scope, themed root and theme mode.
+ * @returns The `getContainer` callback for `PortalContainer`.
+ */
+const usePortalAnchor = ({ portalContainer, scopeId, themeRoot, resolvedMode }) => {
+    const resolveContainer = useMemo(() => resolvePortalContainer(portalContainer, scopeId), [portalContainer, scopeId]);
+    const [portalAnchor, setPortalAnchor] = useState(null);
+    const portalAnchorNode = useRef(null);
+    const lastExplicitContainer = useRef(null);
+    // useLayoutEffect + useState so the anchor exists before paint and its creation re-renders
+    // PortalContainer with a real container; a ref-only write left the first commit portalling to body.
+    useLayoutEffect(() => {
+        const explicit = resolveContainer?.() ?? null;
+        if (explicit === lastExplicitContainer.current) {
+            return;
+        }
+        lastExplicitContainer.current = explicit;
+        portalAnchorNode.current?.remove();
+        portalAnchorNode.current = null;
+        if (!explicit) {
+            setPortalAnchor(null);
+            return;
+        }
+        const anchor = createPortalAnchor(explicit, { scopeId, resolvedMode, zIndex: readOverlayZIndex(themeRoot) });
+        portalAnchorNode.current = anchor;
+        setPortalAnchor(anchor);
+    });
+    useLayoutEffect(() => () => {
+        portalAnchorNode.current?.remove();
+        portalAnchorNode.current = null;
+        // Reset alongside the node so StrictMode's dev-only mount → cleanup → remount does not see a stale
+        // "unchanged" match, skip recreating the anchor, and keep state pointing at the removed node.
+        lastExplicitContainer.current = null;
+    }, []);
+    useLayoutEffect(() => {
+        portalAnchorNode.current?.setAttribute('data-theme', resolvedMode);
+    }, [resolvedMode]);
+    useLayoutEffect(() => {
+        const anchor = portalAnchorNode.current;
+        if (!anchor)
+            return;
+        if (scopeId)
+            anchor.setAttribute('data-mfe-scope', scopeId);
+        else
+            anchor.removeAttribute('data-mfe-scope');
+    }, [scopeId]);
+    // `themeRoot` is state filled by a ref callback after the first commit, so the anchor is created before the
+    // token can be read; re-read it once the root exists (and whenever it changes) so a scoped override applies.
+    useLayoutEffect(() => {
+        if (!portalAnchor || portalAnchor.parentElement !== document.body)
+            return;
+        portalAnchor.style.zIndex = String(readOverlayZIndex(themeRoot));
+    }, [themeRoot, portalAnchor]);
+    // Re-resolving here (rather than trusting state alone) covers a host swap: this render's anchor still
+    // belongs to the old host until the layout effect rebuilds it, so it must not be handed out.
+    return useCallback(() => {
+        const explicit = resolveContainer?.() ?? null;
+        if (explicit) {
+            return explicit === lastExplicitContainer.current ? portalAnchor : null;
+        }
+        if (resolveContainer) {
+            return null;
+        }
+        return themeRoot;
+    }, [portalAnchor, resolveContainer, themeRoot]);
+};
+
+export { OVERLAY_ROOT_Z_INDEX_FALLBACK, createPortalAnchor, readOverlayZIndex, resolvePortalContainer, usePortalAnchor };
+//# sourceMappingURL=usePortalAnchor.js.map

package/dist/providers/UIProvider/hooks/usePortalAnchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortalAnchor.js","sources":["../../../../src/providers/UIProvider/hooks/usePortalAnchor.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/providers/UIProvider/index.cjs

@@ -5,84 +5,27 @@ var ErrorBoundary = require('@flipdish/ui-library/providers/ErrorBoundary');
 var PortalContainer = require('@flipdish/ui-library/providers/PortalContainer');
 var RouteProvider = require('@flipdish/ui-library/providers/RouteProvider');
 var ThemeProvider = require('@flipdish/ui-library/providers/ThemeProvider');
-var React = require('react');
 var reactRouter = require('react-router');
+var usePortalAnchor = require('./hooks/usePortalAnchor.cjs');
 
-const UIProviderInner = ({ children, baseUrl, errorBoundary, portalContainer }) => {
+const UIProviderInner = ({ children, baseUrl, errorBoundary, scopeId, portalContainer, }) => {
     const { themeRoot, resolvedMode } = ThemeProvider.useTheme();
-    const [portalAnchor, setPortalAnchor] = React.useState(null);
-    const portalAnchorNode = React.useRef(null);
-    const lastExplicitContainer = React.useRef(null);
-    // Create a themed, layout-invisible anchor inside the portalContainer so
-    // React Aria overlays inherit scoped CSS and the active data-theme.
-    // Compares resolved DOM nodes (not callback identity) to avoid tearing
-    // down the anchor when an inline callback like `() => getElementById(...)` is passed.
-    // useLayoutEffect + useState so the anchor exists before paint and its
-    // creation re-renders PortalContainer with a real container — a ref-only
-    // write left the first commit portalling to document.body.
-    React.useLayoutEffect(() => {
-        const explicit = portalContainer?.() ?? null;
-        if (explicit === lastExplicitContainer.current) {
-            return;
-        }
-        lastExplicitContainer.current = explicit;
-        portalAnchorNode.current?.remove();
-        portalAnchorNode.current = null;
-        if (!explicit) {
-            setPortalAnchor(null);
-            return;
-        }
-        const anchor = document.createElement('div');
-        anchor.style.display = 'contents';
-        anchor.setAttribute('data-theme', resolvedMode);
-        explicit.appendChild(anchor);
-        portalAnchorNode.current = anchor;
-        setPortalAnchor(anchor);
-    });
-    React.useLayoutEffect(() => () => {
-        portalAnchorNode.current?.remove();
-        portalAnchorNode.current = null;
-        // Reset alongside portalAnchorNode so StrictMode's dev-only mount → cleanup →
-        // remount doesn't see a stale "unchanged" match on remount: without this, the
-        // remount's effect compares against the pre-cleanup container, skips recreating
-        // the anchor, and leaves `portalAnchor` state pointing at the node just removed
-        // above — permanently detached from the document.
-        lastExplicitContainer.current = null;
-    }, []);
-    React.useLayoutEffect(() => {
-        portalAnchorNode.current?.setAttribute('data-theme', resolvedMode);
-    }, [resolvedMode]);
-    // While the explicit container's anchor (or ThemeProvider's themed root) is
-    // unresolved, return null so overlays render nothing for that commit instead
-    // of landing on document.body and then relocating. Re-resolving `portalContainer`
-    // here (rather than trusting `portalAnchor` alone) also covers a host swap: if the
-    // host changes from A to B, this render's anchor still belongs to host A until the
-    // layout effect rebuilds it, so we must not hand out the stale host-A anchor.
-    const getContainer = React.useCallback(() => {
-        const explicit = portalContainer?.() ?? null;
-        if (explicit) {
-            return explicit === lastExplicitContainer.current ? portalAnchor : null;
-        }
-        if (portalContainer) {
-            return null;
-        }
-        return themeRoot;
-    }, [portalAnchor, portalContainer, themeRoot]);
+    const getContainer = usePortalAnchor.usePortalAnchor({ portalContainer, scopeId, themeRoot, resolvedMode });
     return (jsxRuntime.jsx(reactRouter.BrowserRouter, { basename: baseUrl, children: jsxRuntime.jsx(RouteProvider.RouteProvider, { children: jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { ...errorBoundary, children: jsxRuntime.jsx(PortalContainer.PortalContainer, { getContainer: getContainer, children: children }) }) }) }));
 };
 /**
  * Single entry-point provider that composes `ThemeProvider`, `RouteProvider`, `ErrorBoundary`
- * and overlay portalling for a consuming app. Wire it once at the root; pass `portalContainer`
- * only when overlays must land in a specific container.
+ * and overlay portalling for a consuming app. Wire it once at the root and pass `scopeId` when the
+ * app ships CSS scoped to `[data-mfe-scope]`; overlays then portal into a scoped anchor on `body`.
  *
  * @summary root provider composing theme, routing, errors and portals
  */
-const UIProvider = ({ children, themeModeOverride, ...rest }) => {
+const UIProvider = ({ children, themeModeOverride, scopeId, ...rest }) => {
     // TODO(i18n): add an internal library translation context so ui-library components can
     // source their own copy (e.g. ErrorBoundary's "Something went wrong") without the
     // consuming app needing to pass text props. This is purely internal — consuming apps
     // own their own translation layer and wrap their content inside UIProvider as usual.
-    return (jsxRuntime.jsx(ThemeProvider.ThemeProvider, { themeModeOverride: themeModeOverride, children: jsxRuntime.jsx(UIProviderInner, { ...rest, children: children }) }));
+    return (jsxRuntime.jsx(ThemeProvider.ThemeProvider, { themeModeOverride: themeModeOverride, scopeId: scopeId, children: jsxRuntime.jsx(UIProviderInner, { scopeId: scopeId, ...rest, children: children }) }));
 };
 
 exports.UIProvider = UIProvider;

package/dist/providers/UIProvider/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["useTheme","useState","useRef","useLayoutEffect","useCallback","_jsx","BrowserRouter","RouteProvider","ErrorBoundary","PortalContainer","ThemeProvider"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["useTheme","usePortalAnchor","_jsx","BrowserRouter","RouteProvider","ErrorBoundary","PortalContainer","ThemeProvider"],"mappings":";;;;;;;;;;AAiDA,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,aAAa,EACb,OAAO,EACP,eAAe,GAC+C,KAAI;IAClE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAGA,sBAAQ,EAAE;AAC9C,IAAA,MAAM,YAAY,GAAGC,+BAAe,CAAC,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AAE3F,IAAA,QACEC,cAAA,CAACC,yBAAa,EAAA,EAAC,QAAQ,EAAE,OAAO,EAAA,QAAA,EAC9BD,cAAA,CAACE,2BAAa,EAAA,EAAA,QAAA,EACZF,cAAA,CAACG,2BAAa,EAAA,EAAA,GAAK,aAAa,EAAA,QAAA,EAC9BH,cAAA,CAACI,+BAAe,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CAC3D,EAAA,CACF,EAAA,CACF;AAEpB,CAAC;AAED;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,IAAI,EAAsC,KAAI;;;;;IAKlH,QACEJ,cAAA,CAACK,2BAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EACnEL,eAAC,eAAe,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,GAAM,IAAI,EAAA,QAAA,EACxC,QAAQ,EAAA,CACO,EAAA,CACJ;AAEpB;;"}

package/dist/providers/UIProvider/index.d.ts

@@ -1,5 +1,5 @@
 import { type ErrorBoundaryProps } from '@flipdish/ui-library/providers/ErrorBoundary';
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export interface UIProviderProps {
     /**
      * Controlled theme override. When set, the tree renders in this mode and theme
@@ -20,25 +20,30 @@ export interface UIProviderProps {
      * errorBoundary={{ identifier: 'app', onError: datadogReporter }}
      */
     errorBoundary: Omit<ErrorBoundaryProps, 'children'>;
+    /**
+     * Stamps `data-mfe-scope={scopeId}` on the themed root so the app's scoped CSS build
+     * (`createScopedPrefixTransform('[data-mfe-scope="sale-service"]')`) matches this tree wherever the
+     * host mounts it. Overlays then portal into a scoped, themed anchor on `document.body`, above the
+     * host's stacking contexts, and `ThemeProvider` stops mirroring `data-theme` onto the host `<html>`.
+     */
+    scopeId?: string;
     /**
      * Callback that returns the DOM element where React Aria overlays (Modal, Popover,
-     * Select, Tooltip, Toast) should portal into. Passed to `PortalContainer`
-     * internally — see its docs for full details.
+     * Select, Tooltip, Toast) should portal into. A layout-invisible anchor carrying `data-theme`
+     * and, with `scopeId`, `data-mfe-scope` is created inside it so overlays keep their styles.
      *
-     * Use this in micro-frontends or embedded apps whose CSS is scoped to a mount
-     * subtree. Omit to portal into ThemeProvider's themed root element.
-     *
-     * @example
-     * portalContainer={() => document.getElementById('flipdish-micro-frontend')}
+     * Defaults to `document.body` when `scopeId` is set, where the anchor is a stacking context at the
+     * `--z-index-overlay-root` token (1300) so overlays paint above the host's chrome and isolated content
+     * areas, and to the themed root otherwise. Pass `null` to portal into the themed root even with `scopeId`.
      */
     portalContainer?: (() => HTMLElement | null) | null;
 }
 /**
  * Single entry-point provider that composes `ThemeProvider`, `RouteProvider`, `ErrorBoundary`
- * and overlay portalling for a consuming app. Wire it once at the root; pass `portalContainer`
- * only when overlays must land in a specific container.
+ * and overlay portalling for a consuming app. Wire it once at the root and pass `scopeId` when the
+ * app ships CSS scoped to `[data-mfe-scope]`; overlays then portal into a scoped anchor on `body`.
  *
  * @summary root provider composing theme, routing, errors and portals
  */
-export declare const UIProvider: ({ children, themeModeOverride, ...rest }: PropsWithChildren<UIProviderProps>) => import("react").JSX.Element;
+export declare const UIProvider: ({ children, themeModeOverride, scopeId, ...rest }: PropsWithChildren<UIProviderProps>) => import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/providers/UIProvider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/UIProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAItG,OAAO,EAAE,KAAK,iBAAiB,EAAkD,MAAM,OAAO,CAAC;AAG/F,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;OAOG;IACH,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IACpD;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CACrD;AAoFD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,0CAA0C,iBAAiB,CAAC,eAAe,CAAC,gCAUtG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/UIProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAItG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;OAOG;IACH,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IACpD;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CACrD;AAuBD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,mDAAmD,iBAAiB,CAAC,eAAe,CAAC,gCAY/G,CAAC"}

package/dist/providers/UIProvider/index.js

@@ -3,84 +3,27 @@ import { ErrorBoundary } from '@flipdish/ui-library/providers/ErrorBoundary';
 import { PortalContainer } from '@flipdish/ui-library/providers/PortalContainer';
 import { RouteProvider } from '@flipdish/ui-library/providers/RouteProvider';
 import { ThemeProvider, useTheme } from '@flipdish/ui-library/providers/ThemeProvider';
-import { useState, useRef, useLayoutEffect, useCallback } from 'react';
 import { BrowserRouter } from 'react-router';
+import { usePortalAnchor } from './hooks/usePortalAnchor.js';
 
-const UIProviderInner = ({ children, baseUrl, errorBoundary, portalContainer }) => {
+const UIProviderInner = ({ children, baseUrl, errorBoundary, scopeId, portalContainer, }) => {
     const { themeRoot, resolvedMode } = useTheme();
-    const [portalAnchor, setPortalAnchor] = useState(null);
-    const portalAnchorNode = useRef(null);
-    const lastExplicitContainer = useRef(null);
-    // Create a themed, layout-invisible anchor inside the portalContainer so
-    // React Aria overlays inherit scoped CSS and the active data-theme.
-    // Compares resolved DOM nodes (not callback identity) to avoid tearing
-    // down the anchor when an inline callback like `() => getElementById(...)` is passed.
-    // useLayoutEffect + useState so the anchor exists before paint and its
-    // creation re-renders PortalContainer with a real container — a ref-only
-    // write left the first commit portalling to document.body.
-    useLayoutEffect(() => {
-        const explicit = portalContainer?.() ?? null;
-        if (explicit === lastExplicitContainer.current) {
-            return;
-        }
-        lastExplicitContainer.current = explicit;
-        portalAnchorNode.current?.remove();
-        portalAnchorNode.current = null;
-        if (!explicit) {
-            setPortalAnchor(null);
-            return;
-        }
-        const anchor = document.createElement('div');
-        anchor.style.display = 'contents';
-        anchor.setAttribute('data-theme', resolvedMode);
-        explicit.appendChild(anchor);
-        portalAnchorNode.current = anchor;
-        setPortalAnchor(anchor);
-    });
-    useLayoutEffect(() => () => {
-        portalAnchorNode.current?.remove();
-        portalAnchorNode.current = null;
-        // Reset alongside portalAnchorNode so StrictMode's dev-only mount → cleanup →
-        // remount doesn't see a stale "unchanged" match on remount: without this, the
-        // remount's effect compares against the pre-cleanup container, skips recreating
-        // the anchor, and leaves `portalAnchor` state pointing at the node just removed
-        // above — permanently detached from the document.
-        lastExplicitContainer.current = null;
-    }, []);
-    useLayoutEffect(() => {
-        portalAnchorNode.current?.setAttribute('data-theme', resolvedMode);
-    }, [resolvedMode]);
-    // While the explicit container's anchor (or ThemeProvider's themed root) is
-    // unresolved, return null so overlays render nothing for that commit instead
-    // of landing on document.body and then relocating. Re-resolving `portalContainer`
-    // here (rather than trusting `portalAnchor` alone) also covers a host swap: if the
-    // host changes from A to B, this render's anchor still belongs to host A until the
-    // layout effect rebuilds it, so we must not hand out the stale host-A anchor.
-    const getContainer = useCallback(() => {
-        const explicit = portalContainer?.() ?? null;
-        if (explicit) {
-            return explicit === lastExplicitContainer.current ? portalAnchor : null;
-        }
-        if (portalContainer) {
-            return null;
-        }
-        return themeRoot;
-    }, [portalAnchor, portalContainer, themeRoot]);
+    const getContainer = usePortalAnchor({ portalContainer, scopeId, themeRoot, resolvedMode });
     return (jsx(BrowserRouter, { basename: baseUrl, children: jsx(RouteProvider, { children: jsx(ErrorBoundary, { ...errorBoundary, children: jsx(PortalContainer, { getContainer: getContainer, children: children }) }) }) }));
 };
 /**
  * Single entry-point provider that composes `ThemeProvider`, `RouteProvider`, `ErrorBoundary`
- * and overlay portalling for a consuming app. Wire it once at the root; pass `portalContainer`
- * only when overlays must land in a specific container.
+ * and overlay portalling for a consuming app. Wire it once at the root and pass `scopeId` when the
+ * app ships CSS scoped to `[data-mfe-scope]`; overlays then portal into a scoped anchor on `body`.
  *
  * @summary root provider composing theme, routing, errors and portals
  */
-const UIProvider = ({ children, themeModeOverride, ...rest }) => {
+const UIProvider = ({ children, themeModeOverride, scopeId, ...rest }) => {
     // TODO(i18n): add an internal library translation context so ui-library components can
     // source their own copy (e.g. ErrorBoundary's "Something went wrong") without the
     // consuming app needing to pass text props. This is purely internal — consuming apps
     // own their own translation layer and wrap their content inside UIProvider as usual.
-    return (jsx(ThemeProvider, { themeModeOverride: themeModeOverride, children: jsx(UIProviderInner, { ...rest, children: children }) }));
+    return (jsx(ThemeProvider, { themeModeOverride: themeModeOverride, scopeId: scopeId, children: jsx(UIProviderInner, { scopeId: scopeId, ...rest, children: children }) }));
 };
 
 export { UIProvider };

package/dist/providers/UIProvider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;AAiDA,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,aAAa,EACb,OAAO,EACP,eAAe,GAC+C,KAAI;IAClE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE;AAC9C,IAAA,MAAM,YAAY,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;AAE3F,IAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EAAC,QAAQ,EAAE,OAAO,EAAA,QAAA,EAC9BA,GAAA,CAAC,aAAa,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,aAAa,EAAA,EAAA,GAAK,aAAa,EAAA,QAAA,EAC9BA,GAAA,CAAC,eAAe,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CAC3D,EAAA,CACF,EAAA,CACF;AAEpB,CAAC;AAED;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,IAAI,EAAsC,KAAI;;;;;IAKlH,QACEA,GAAA,CAAC,aAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EACnEA,IAAC,eAAe,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,GAAM,IAAI,EAAA,QAAA,EACxC,QAAQ,EAAA,CACO,EAAA,CACJ;AAEpB;;"}

package/dist/utilities/cssScopeUtils/index.cjs

@@ -12,12 +12,20 @@
  * [`postcss-prefix-selector`](https://www.npmjs.com/package/postcss-prefix-selector),
  * consolidating the scoping rules every consumer would otherwise hand-copy (and drift on):
  * scoping `:root`/`html` so `@theme` tokens and base typography cascade only within the
- * subtree, leaving `:host` and `@keyframes` steps alone, never double-prefixing, and
- * optionally scoping `body` resets or letting the scope root element match class selectors.
+ * subtree, leaving `:host` and `@keyframes` steps alone, never double-prefixing, letting the scope
+ * root element itself match class and attribute selectors (`matchRootElement`, on by default), and
+ * optionally scoping `body` resets.
  *
  * This is a pure function with no Node or DOM dependency, so it runs cleanly inside a
  * `postcss.config.mjs`.
  *
+ * **The scope must be exactly one selector that is unique to this app**, and the app must
+ * render it itself — `UIProvider`'s `scopeId` stamps `data-mfe-scope` on the themed root for
+ * exactly this. Never scope to a host container id (`#flipdish-micro-frontend`) or a union of
+ * ids (`:is(#a, #b)`): the host mounts other apps in those containers, so every rule leaks
+ * into them and the last-loaded bundle wins (`.text-xl` from one app beat `lg:text-display-xs`
+ * in another).
+ *
  * Why PostCSS (not Tailwind's own `important(#selector)`): Tailwind v4's `important(...)`
  * syntax emits non-standard `@media important(...)` blocks that lightningcss can't parse
  * during minification, so scoping is done as a PostCSS pass over Tailwind's output instead.
@@ -28,7 +36,8 @@
  * import prefixSelector from 'postcss-prefix-selector';
  * import { createScopedPrefixTransform } from '@flipdish/ui-library/utilities/cssScopeUtils';
  *
- * const SCOPE = '#flipdish-micro-frontend';
+ * // Your Portal microFrontendWindowName; must match <UIProvider scopeId="sale-service">.
+ * const SCOPE = '[data-mfe-scope="sale-service"]';
  *
  * export default {
  *   plugins: [
@@ -48,14 +57,15 @@ const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  * Builds the `transform` callback for `postcss-prefix-selector` that scopes Tailwind v4 output
  * under `scopeSelector`.
  *
- * @param scopeSelector The selector every rule is scoped under, such as
- *   `'#flipdish-micro-frontend'`; must match the `prefix` passed to `postcss-prefix-selector`.
+ * @param scopeSelector The single selector every rule is scoped under, such as
+ *   `'[data-mfe-scope="sale-service"]'`; must match the `prefix` passed to `postcss-prefix-selector`
+ *   and must be unique to this app on the page (never a host container id or a union of ids).
  * @param options Behavioural toggles; see `ScopedPrefixTransformOptions`.
  * @returns The `(prefix, selector, prefixedSelector, filePath?) => string` transform to pass
  *   to the plugin.
  */
 function createScopedPrefixTransform(scopeSelector, options = {}) {
-    const { shouldScope, scopeBody = false, matchRootElement = false } = options;
+    const { shouldScope, scopeBody = false, matchRootElement = true } = options;
     const normalisedScopeSelector = scopeSelector.trim();
     if (!normalisedScopeSelector) {
         throw new Error('createScopedPrefixTransform: `scopeSelector` must be a non-empty selector.');
@@ -93,13 +103,14 @@ function createScopedPrefixTransform(scopeSelector, options = {}) {
         if (KEYFRAME_STEP.test(selector.trim())) {
             return selector;
         }
-        // Class selectors: optionally also match the scope root element itself via a compound
-        // selector (`#scope.flex-1, #scope .flex-1`), so a utility on the mount node applies too.
-        if (matchRootElement && selector.startsWith('.')) {
+        // Class and attribute selectors: also match the scope root itself via a compound selector
+        // (`[data-mfe-scope="x"][data-theme="dark"], [data-mfe-scope="x"] [data-theme="dark"]`); the
+        // scope root is the themed root, so the dark-token rule only reaches it this way.
+        if (matchRootElement && (selector.startsWith('.') || selector.startsWith('['))) {
             return `${prefix}${selector}, ${prefixedSelector}`;
         }
-        // Everything else (`*`, `::before`, `::after`, `[hidden]`, element selectors, …) gets the
-        // standard descendant-scoped selector.
+        // Everything else (`*`, `::before`, `::after`, element selectors, …) gets the standard
+        // descendant-scoped selector.
         return prefixedSelector;
     };
 }

package/dist/utilities/cssScopeUtils/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/utilities/cssScopeUtils/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCG;AA4BH;AACA,MAAM,aAAa,GAAG,0BAA0B;AAEhD;AACA,MAAM,YAAY,GAAG,CAAC,KAAa,KAAa,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC;AAE5F;;;;;;;;;AASG;SACa,2BAA2B,CACzC,aAAqB,EACrB,UAAwC,EAAE,EAAA;AAE1C,IAAA,MAAM,EAAE,WAAW,EAAE,SAAS,GAAG,KAAK,EAAE,gBAAgB,GAAG,KAAK,EAAE,GAAG,OAAO;AAE5E,IAAA,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;IACpD,IAAI,CAAC,uBAAuB,EAAE;AAC5B,QAAA,MAAM,IAAI,KAAK,CAAC,4EAA4E,CAAC;IAC/F;;;;;AAMA,IAAA,MAAM,aAAa,GAAG,IAAI,MAAM,CAAC,CAAA,CAAA,EAAI,YAAY,CAAC,uBAAuB,CAAC,CAAA,qBAAA,CAAuB,CAAC;IAElG,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,KAAI;;QAEtD,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE;AACzC,YAAA,OAAO,QAAQ;QACjB;;QAGA,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,EAAE;AAC5C,YAAA,OAAO,QAAQ;QACjB;;;;QAKA,IAAI,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,MAAM,EAAE;AAC/C,YAAA,OAAO,MAAM;QACf;;AAGA,QAAA,IAAI,QAAQ,KAAK,OAAO,EAAE;AACxB,YAAA,OAAO,QAAQ;QACjB;;;AAIA,QAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,OAAO,SAAS,GAAG,MAAM,GAAG,QAAQ;QACtC;;QAGA,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE;AACvC,YAAA,OAAO,QAAQ;QACjB;;;QAIA,IAAI,gBAAgB,IAAI,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AAChD,YAAA,OAAO,GAAG,MAAM,CAAA,EAAG,QAAQ,CAAA,EAAA,EAAK,gBAAgB,EAAE;QACpD;;;AAIA,QAAA,OAAO,gBAAgB;AACzB,IAAA,CAAC;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/utilities/cssScopeUtils/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDG;AA6BH;AACA,MAAM,aAAa,GAAG,0BAA0B;AAEhD;AACA,MAAM,YAAY,GAAG,CAAC,KAAa,KAAa,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC;AAE5F;;;;;;;;;;AAUG;SACa,2BAA2B,CACzC,aAAqB,EACrB,UAAwC,EAAE,EAAA;AAE1C,IAAA,MAAM,EAAE,WAAW,EAAE,SAAS,GAAG,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,GAAG,OAAO;AAE3E,IAAA,MAAM,uBAAuB,GAAG,aAAa,CAAC,IAAI,EAAE;IACpD,IAAI,CAAC,uBAAuB,EAAE;AAC5B,QAAA,MAAM,IAAI,KAAK,CAAC,4EAA4E,CAAC;IAC/F;;;;;AAMA,IAAA,MAAM,aAAa,GAAG,IAAI,MAAM,CAAC,CAAA,CAAA,EAAI,YAAY,CAAC,uBAAuB,CAAC,CAAA,qBAAA,CAAuB,CAAC;IAElG,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,KAAI;;QAEtD,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE;AACzC,YAAA,OAAO,QAAQ;QACjB;;QAGA,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,EAAE;AAC5C,YAAA,OAAO,QAAQ;QACjB;;;;QAKA,IAAI,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,MAAM,EAAE;AAC/C,YAAA,OAAO,MAAM;QACf;;AAGA,QAAA,IAAI,QAAQ,KAAK,OAAO,EAAE;AACxB,YAAA,OAAO,QAAQ;QACjB;;;AAIA,QAAA,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvB,OAAO,SAAS,GAAG,MAAM,GAAG,QAAQ;QACtC;;QAGA,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE;AACvC,YAAA,OAAO,QAAQ;QACjB;;;;AAKA,QAAA,IAAI,gBAAgB,KAAK,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE;AAC9E,YAAA,OAAO,GAAG,MAAM,CAAA,EAAG,QAAQ,CAAA,EAAA,EAAK,gBAAgB,EAAE;QACpD;;;AAIA,QAAA,OAAO,gBAAgB;AACzB,IAAA,CAAC;AACH;;"}

package/dist/utilities/cssScopeUtils/index.d.ts

@@ -10,12 +10,20 @@
  * [`postcss-prefix-selector`](https://www.npmjs.com/package/postcss-prefix-selector),
  * consolidating the scoping rules every consumer would otherwise hand-copy (and drift on):
  * scoping `:root`/`html` so `@theme` tokens and base typography cascade only within the
- * subtree, leaving `:host` and `@keyframes` steps alone, never double-prefixing, and
- * optionally scoping `body` resets or letting the scope root element match class selectors.
+ * subtree, leaving `:host` and `@keyframes` steps alone, never double-prefixing, letting the scope
+ * root element itself match class and attribute selectors (`matchRootElement`, on by default), and
+ * optionally scoping `body` resets.
  *
  * This is a pure function with no Node or DOM dependency, so it runs cleanly inside a
  * `postcss.config.mjs`.
  *
+ * **The scope must be exactly one selector that is unique to this app**, and the app must
+ * render it itself — `UIProvider`'s `scopeId` stamps `data-mfe-scope` on the themed root for
+ * exactly this. Never scope to a host container id (`#flipdish-micro-frontend`) or a union of
+ * ids (`:is(#a, #b)`): the host mounts other apps in those containers, so every rule leaks
+ * into them and the last-loaded bundle wins (`.text-xl` from one app beat `lg:text-display-xs`
+ * in another).
+ *
  * Why PostCSS (not Tailwind's own `important(#selector)`): Tailwind v4's `important(...)`
  * syntax emits non-standard `@media important(...)` blocks that lightningcss can't parse
  * during minification, so scoping is done as a PostCSS pass over Tailwind's output instead.
@@ -26,7 +34,8 @@
  * import prefixSelector from 'postcss-prefix-selector';
  * import { createScopedPrefixTransform } from '@flipdish/ui-library/utilities/cssScopeUtils';
  *
- * const SCOPE = '#flipdish-micro-frontend';
+ * // Your Portal microFrontendWindowName; must match <UIProvider scopeId="sale-service">.
+ * const SCOPE = '[data-mfe-scope="sale-service"]';
  *
  * export default {
  *   plugins: [
@@ -55,11 +64,12 @@ export interface ScopedPrefixTransformOptions {
      */
     scopeBody?: boolean;
     /**
-     * Also emit a compound selector so the scope root element itself matches class selectors
-     * (e.g. `<div data-scope class="flex-1">` — where the utility must apply to the mount node,
-     * not just its descendants).
+     * Also emit a compound selector so the scope root element itself matches class and attribute
+     * selectors (`[data-mfe-scope="x"].flex, [data-mfe-scope="x"] .flex`). The scope root is the
+     * themed root, which carries `data-theme`, so the dark-token rule `[data-theme="dark"]` only
+     * reaches it in this form; set `false` only when the scope root is a bare host container.
      *
-     * @default false
+     * @default true
      */
     matchRootElement?: boolean;
 }
@@ -67,8 +77,9 @@ export interface ScopedPrefixTransformOptions {
  * Builds the `transform` callback for `postcss-prefix-selector` that scopes Tailwind v4 output
  * under `scopeSelector`.
  *
- * @param scopeSelector The selector every rule is scoped under, such as
- *   `'#flipdish-micro-frontend'`; must match the `prefix` passed to `postcss-prefix-selector`.
+ * @param scopeSelector The single selector every rule is scoped under, such as
+ *   `'[data-mfe-scope="sale-service"]'`; must match the `prefix` passed to `postcss-prefix-selector`
+ *   and must be unique to this app on the page (never a host container id or a union of ids).
  * @param options Behavioural toggles; see `ScopedPrefixTransformOptions`.
  * @returns The `(prefix, selector, prefixedSelector, filePath?) => string` transform to pass
  *   to the plugin.

package/dist/utilities/cssScopeUtils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/cssScopeUtils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,MAAM,WAAW,4BAA4B;IAC3C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,KAAK,OAAO,CAAC;IACxD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAQD;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CACzC,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,4BAAiC,GACzC,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CA0D3F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/cssScopeUtils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,MAAM,WAAW,4BAA4B;IAC3C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,KAAK,OAAO,CAAC;IACxD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAQD;;;;;;;;;;GAUG;AACH,wBAAgB,2BAA2B,CACzC,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,4BAAiC,GACzC,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CA2D3F"}