@flipdish/ui-library 0.7.0 → 0.7.2

package/dist/providers/PortalContainer/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactAria = require('react-aria');
+
+/**
+ * Redirects React Aria overlay portals into a specific DOM container instead of
+ * `document.body`. Use for micro-frontends and embedded apps with scoped CSS.
+ *
+ * @summary redirects React Aria overlay portals into a scoped DOM container
+ */
+const PortalContainer = ({ getContainer, children }) => {
+    if (!getContainer) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    }
+    return jsxRuntime.jsx(reactAria.UNSAFE_PortalProvider, { getContainer: getContainer, children: children });
+};
+
+exports.PortalContainer = PortalContainer;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/providers/PortalContainer/index.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment","UNSAFE_PortalProvider"],"mappings":";;;;;AA+BA;;;;;AAKG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAwB,KAAI;IAClF,IAAI,CAAC,YAAY,EAAE;QACjB,OAAOA,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI;IACxB;IAEA,OAAOD,cAAA,CAACE,+BAAqB,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAyB;AAC9F;;;;"}

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

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+export interface PortalContainerProps {
+    /**
+     * Callback that returns the DOM element where React Aria overlays (Modal, Popover,
+     * Select, Tooltip, Toast) should portal into. Use this in micro-frontends or
+     * embedded apps whose CSS is scoped to a mount subtree (e.g. via
+     * `postcss-prefix-selector`) — overlays that portal to `document.body` would land
+     * outside the scoped subtree and render unstyled.
+     *
+     * A callback (rather than an element ref) is required because the container may not
+     * exist at module-evaluation time.
+     *
+     * **Note on the `UNSAFE_` prefix:** Under the hood this wraps React Aria's
+     * `UNSAFE_PortalProvider`. The prefix is React Aria's naming convention for escape
+     * hatches that override tested defaults — it signals "you are opting out of a
+     * default we test against", not a stability or production-readiness warning. It is
+     * safe to use in production for light-DOM scoped subtrees. Shadow DOM has a
+     * {@link https://github.com/adobe/react-spectrum/issues/8675 known interaction issue}
+     * and is out of scope.
+     *
+     * @example
+     * <PortalContainer getContainer={() => document.getElementById('flipdish-micro-frontend')}>
+     *   <App />
+     * </PortalContainer>
+     */
+    getContainer: (() => HTMLElement | null) | null;
+    children: ReactNode;
+}
+/**
+ * Redirects React Aria overlay portals into a specific DOM container instead of
+ * `document.body`. Use for micro-frontends and embedded apps with scoped CSS.
+ *
+ * @summary redirects React Aria overlay portals into a scoped DOM container
+ */
+export declare const PortalContainer: ({ getContainer, children }: PortalContainerProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/PortalContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,oBAAoB;IACnC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,YAAY,EAAE,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,4BAA4B,oBAAoB,gCAM/E,CAAC"}

package/dist/providers/PortalContainer/index.js

@@ -0,0 +1,18 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { UNSAFE_PortalProvider } from 'react-aria';
+
+/**
+ * Redirects React Aria overlay portals into a specific DOM container instead of
+ * `document.body`. Use for micro-frontends and embedded apps with scoped CSS.
+ *
+ * @summary redirects React Aria overlay portals into a scoped DOM container
+ */
+const PortalContainer = ({ getContainer, children }) => {
+    if (!getContainer) {
+        return jsx(Fragment, { children: children });
+    }
+    return jsx(UNSAFE_PortalProvider, { getContainer: getContainer, children: children });
+};
+
+export { PortalContainer };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/providers/PortalContainer/index.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment"],"mappings":";;;AA+BA;;;;;AAKG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAwB,KAAI;IAClF,IAAI,CAAC,YAAY,EAAE;QACjB,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI;IACxB;IAEA,OAAOD,GAAA,CAAC,qBAAqB,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAyB;AAC9F;;;;"}

package/dist/providers/UIProvider/index.cjs

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 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 reactRouter = require('react-router');
@@ -9,12 +10,12 @@ var reactRouter = require('react-router');
 /**
  * @summary single entry-point provider that composes theme, routing, and an error boundary for consuming apps
  */
-const UIProvider = ({ children, themeModeOverride, baseUrl, errorBoundary }) => {
+const UIProvider = ({ children, themeModeOverride, baseUrl, errorBoundary, portalContainer }) => {
     // 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(reactRouter.BrowserRouter, { basename: baseUrl, children: jsxRuntime.jsx(RouteProvider.RouteProvider, { children: jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { ...errorBoundary, children: children }) }) }) }));
+    return (jsxRuntime.jsx(ThemeProvider.ThemeProvider, { themeModeOverride: themeModeOverride, children: jsxRuntime.jsx(reactRouter.BrowserRouter, { basename: baseUrl, children: jsxRuntime.jsx(RouteProvider.RouteProvider, { children: jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { ...errorBoundary, children: jsxRuntime.jsx(PortalContainer.PortalContainer, { getContainer: portalContainer ?? null, 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":["_jsx","ThemeProvider","BrowserRouter","RouteProvider","ErrorBoundary"],"mappings":";;;;;;;;AA4BA;;AAEG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,OAAO,EAAE,aAAa,EAAsC,KAAI;;;;;AAKxH,IAAA,QACEA,cAAA,CAACC,2BAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EACjDD,cAAA,CAACE,yBAAa,EAAA,EAAC,QAAQ,EAAE,OAAO,EAAA,QAAA,EAC9BF,cAAA,CAACG,2BAAa,EAAA,EAAA,QAAA,EACZH,cAAA,CAACI,2BAAa,EAAA,EAAA,GAAK,aAAa,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,EAAA,CAC9C,EAAA,CACF,EAAA,CACF;AAEpB;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx","ThemeProvider","BrowserRouter","RouteProvider","ErrorBoundary","PortalContainer"],"mappings":";;;;;;;;;AAyCA;;AAEG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAsC,KAAI;;;;;AAKzI,IAAA,QACEA,cAAA,CAACC,2BAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EACjDD,cAAA,CAACE,yBAAa,IAAC,QAAQ,EAAE,OAAO,EAAA,QAAA,EAC9BF,cAAA,CAACG,2BAAa,EAAA,EAAA,QAAA,EACZH,cAAA,CAACI,2BAAa,EAAA,EAAA,GAAK,aAAa,EAAA,QAAA,EAC9BJ,cAAA,CAACK,+BAAe,EAAA,EAAC,YAAY,EAAE,eAAe,IAAI,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CACtE,GACF,EAAA,CACF,EAAA,CACF;AAEpB;;;;"}

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

@@ -20,9 +20,21 @@ export interface UIProviderProps {
      * errorBoundary={{ identifier: 'app', onError: datadogReporter }}
      */
     errorBoundary: Omit<ErrorBoundaryProps, 'children'>;
+    /**
+     * 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.
+     *
+     * Use this in micro-frontends or embedded apps whose CSS is scoped to a mount
+     * subtree. Omit to use React Aria's default (`document.body`).
+     *
+     * @example
+     * portalContainer={() => document.getElementById('flipdish-micro-frontend')}
+     */
+    portalContainer?: (() => HTMLElement | null) | null;
 }
 /**
  * @summary single entry-point provider that composes theme, routing, and an error boundary for consuming apps
  */
-export declare const UIProvider: ({ children, themeModeOverride, baseUrl, errorBoundary }: PropsWithChildren<UIProviderProps>) => import("react").JSX.Element;
+export declare const UIProvider: ({ children, themeModeOverride, baseUrl, errorBoundary, portalContainer }: 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":"AAAA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAGtG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/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;CACrD;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,yDAAyD,iBAAiB,CAAC,eAAe,CAAC,gCAcrH,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/UIProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAItG,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/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;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CACrD;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,0EAA0E,iBAAiB,CAAC,eAAe,CAAC,gCAgBtI,CAAC"}

package/dist/providers/UIProvider/index.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 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 } from '@flipdish/ui-library/providers/ThemeProvider';
 import { BrowserRouter } from 'react-router';
@@ -7,12 +8,12 @@ import { BrowserRouter } from 'react-router';
 /**
  * @summary single entry-point provider that composes theme, routing, and an error boundary for consuming apps
  */
-const UIProvider = ({ children, themeModeOverride, baseUrl, errorBoundary }) => {
+const UIProvider = ({ children, themeModeOverride, baseUrl, errorBoundary, portalContainer }) => {
     // 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(BrowserRouter, { basename: baseUrl, children: jsx(RouteProvider, { children: jsx(ErrorBoundary, { ...errorBoundary, children: children }) }) }) }));
+    return (jsx(ThemeProvider, { themeModeOverride: themeModeOverride, children: jsx(BrowserRouter, { basename: baseUrl, children: jsx(RouteProvider, { children: jsx(ErrorBoundary, { ...errorBoundary, children: jsx(PortalContainer, { getContainer: portalContainer ?? null, 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":";;;;;;AA4BA;;AAEG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,OAAO,EAAE,aAAa,EAAsC,KAAI;;;;;AAKxH,IAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EACjDA,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,EAAG,QAAQ,EAAA,CAAiB,EAAA,CAC9C,EAAA,CACF,EAAA,CACF;AAEpB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AAyCA;;AAEG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAsC,KAAI;;;;;AAKzI,IAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EACjDA,GAAA,CAAC,aAAa,IAAC,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,eAAe,IAAI,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CACtE,GACF,EAAA,CACF,EAAA,CACF;AAEpB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "sideEffects": [
@@ -88,6 +88,7 @@
     "postcss-prefix-selector": "^2.1.1",
     "qr-code-styling": "^1.9.2",
     "react": "^19.0.0",
+    "react-aria": "^3.49.0",
     "react-aria-components": "^1.18.0",
     "react-dom": "^19.0.0",
     "react-hotkeys-hook": "^5.3.2",
@@ -150,6 +151,9 @@
     "qr-code-styling": {
       "optional": true
     },
+    "react-aria": {
+      "optional": true
+    },
     "react-aria-components": {
       "optional": true
     },
@@ -198,6 +202,7 @@
     "motion": "^12.40.0",
     "qr-code-styling": "^1.9.2",
     "react": "^19.0.0",
+    "react-aria": "^3.49.0",
     "react-aria-components": "^1.18.0",
     "react-dom": "^19.0.0",
     "react-hotkeys-hook": "^5.3.2",