@bluealba/pae-ui-react-core 4.7.0-develop-417 → 4.7.0-develop-427

package/dist/src/hooks/customizations/useDynamicStyleSheet.d.ts

@@ -1,14 +1 @@
-/**
- * Applies a tenant customization stylesheet.
- *
- * The stylesheet is wrapped in `@layer pae.customization`, the highest layer
- * of the platform cascade contract (declared first in the document by the
- * gateway). That makes the override deterministic: it always wins over
- * `pae.theme`/`pae.base` regardless of when it loads — no artificial delay
- * needed (this used to wait 1s to win by source order).
- *
- * Styles go through the StyleRegistry, so they reach both the document and
- * the shell shadow root (theme variables are inherited custom properties
- * either way).
- */
 export declare const useDynamicStyleSheet: (styleSheet?: string) => void;

package/dist/src/index.d.ts

@@ -1,4 +1,4 @@
-export { StyleRegistry } from './styles/StyleRegistry';
+
 export type { ModuleMetadata, AuthUser, AuthUserWithApplications, BaseUser } from '@bluealba/pae-core';
 export * from './core';
 export * from './hooks';

package/dist/src/utils/initializeMicroFrontend.d.ts

@@ -5,29 +5,32 @@ import { RootComponentProps } from '../MicrofrontendProps';
 export interface MicroFrontendOptions<T extends RootComponentProps> extends SingleSpaReactOpts<T> {
     rootComponent: FC<T>;
     /**
-     * Mount this module inside its own shadow root (attached to the host
-     * element the platform resolves from ui.mountAtSelector).
+     * Mount this module inside its own shadow root (attached to a dedicated child
+     * of the host element the platform resolves from ui.mountAtSelector, so the
+     * shared host stays usable by other modules mounted there later).
      *
      * Why: global CSS from OTHER modules mounted at the same time (a framework
      * reset, unlayered utilities, ...) cannot reach this module's DOM, and this
-     * module's own style-loader CSS is moved into the shadow root so it cannot
-     * leak out. This is the only isolation that works for SIMULTANEOUSLY
-     * mounted modules (e.g. fragments side by side) — the suspend/restore
-     * lifecycle alone only helps across navigation.
+     * module's own DOM cannot be affected by it. This is the only isolation
+     * that works for SIMULTANEOUSLY mounted modules (e.g. fragments side by side).
      *
      * What module authors must know:
      * - Design tokens (CSS custom properties) inherit into the shadow root —
      *   they keep working.
      * - Selectors like `:root`, `html` or `body` do NOT match inside a shadow
-     *   root; use `:host` (Tailwind v4 already emits `:root, :host`).
-     * - @keyframes and @layer order statements are scoped per tree — keep them
-     *   in the module's own CSS (style-loader output is moved wholesale, so
-     *   this is automatic for bundled CSS).
+     *   root; use `:host` instead.
+     * - CSS built with the SDK (`pae-ui-sdk`) is automatically encapsulated: the
+     *   platform moves every `<style data-pae-module>` node from `document.head`
+     *   into the shadow root at mount time, including lazy chunks and HMR updates.
+     *   No extra setup needed for webpack-imported stylesheets.
+     * - If you inject styles by other means (e.g. dynamic `<style>` creation,
+     *   third-party runtime CSS-in-JS), access the shadow root via:
+     *   `usePortalContainer()?.getRootNode() as ShadowRoot | undefined`
      * - Platform core components (Dialog, Tooltip) portal into the shadow root
-     *   automatically. Third-party overlay libraries default to document.body:
-     *   pass them the container from usePortalContainer(), and point runtime
-     *   CSS-in-JS (e.g. Emotion: createCache({ container })) at the shadow
-     *   root, or their floating content will render unstyled outside it.
+     *   automatically when the module author passes the container from
+     *   `usePortalContainer()` to the `container` prop of their portal component.
+     *   Third-party overlay libraries default to document.body: pass them the
+     *   container from `usePortalContainer()` to keep them inside the shadow root.
      */
     shadowDom?: boolean;
 }
@@ -39,12 +42,11 @@ export interface MicroFrontendOptions<T extends RootComponentProps> extends Sing
  * All PAE micro-frontends are wrapped in PAE components that provides react context later used
  * by the provided hooks.
  *
- * On top of the single-spa lifecycles, the module's global styles (tagged
- * with data-pae-module by the UI SDK) are suspended on unmount and restored
- * on mount, so CSS frameworks imported by one module don't leak into other
- * modules across navigation (see styles/moduleStyleLifecycle). With
- * `shadowDom: true` the module is additionally mounted inside its own shadow
- * root, isolating it from modules mounted at the same time.
+ * When `shadowDom: true` is passed the module is mounted inside its own open
+ * shadow root attached to the host element supplied by the platform orchestrator,
+ * isolating it from global CSS in the light DOM. A portal container node inside
+ * the shadow root is exposed via `usePortalContainer()` so that overlay components
+ * (modals, dropdowns, tooltips) can render inside the shadow root as well.
  */
 declare const initializeMicroFrontend: <T extends RootComponentProps>({ rootComponent, shadowDom, ...opts }: MicroFrontendOptions<T>) => ReactAppOrParcel<T>;
 export default initializeMicroFrontend;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@bluealba/pae-ui-react-core",
-  "version": "4.7.0-develop-417",
+  "version": "4.7.0-develop-427",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/src/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src/global.css"
   ],
   "description": "React utilities for PAE",
   "scripts": {

package/src/global.css

@@ -0,0 +1,32 @@
+:root {
+  /* Input */
+  --platform-label-color: var(--platform-text-secondary-color);
+  --platform-input-border-color: var(--platform-lines);
+  --platform-input-background-color: var(--platform-background-secondary-color);
+  --platform-input-color: var(--platform-text-primary-color);
+  --platform-input-focus-border-color: var(--platform-color-primary);
+
+  /* Button */
+  --platform-button-base-padding: 4px 16px;
+  --platform-button-base-border-radius: 6px;
+  --platform-button-base-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --platform-button-base-font-size: 1em;
+  --platform-button-base-line-height: 16px;
+  --platform-button-base-height: calc(2 * var(--platform-button-base-font-size));
+  /* Contained Primary variant */
+  --platform-button-contained-primary-background-color: var(--platform-color-primary);
+  --platform-button-contained-primary-color: #ffffff;
+  /* Outlined Primary variant */
+  --platform-button-outlined-primary-color: var(--platform-color-primary);
+  /* Text Primary variant */
+  --platform-button-text-primary-color: var(--platform-text-primary-color);
+
+  /* Contained danger variant */
+  --platform-button-contained-danger-background-color: var(--platform-color-danger);
+  --platform-button-contained-danger-color: #ffffff;
+  /* Outlined danger variant */
+  --platform-button-outlined-danger-color: var(--platform-color-danger);
+  /* Text danger variant */
+  --platform-button-text-danger-color: var(--platform-color-danger);  
+  
+}

package/dist/src/styles/StyleRegistry.d.ts

@@ -1,41 +0,0 @@
-/**
- * StyleRegistry — single distribution point for pae-ui-react-core styles.
- *
- * pae-ui-react-core is loaded once (shared via the platform import map) but
- * its components render in two different style scopes:
- *   - the document (micro-frontends mounted in the light DOM)
- *   - the shell shadow root (<pae-shell-host>)
- *
- * Every stylesheet registered here is applied to the document AND to every
- * shadow root adopted via adoptInto(). Uses constructable stylesheets
- * (adoptedStyleSheets) when available, falling back to <style> elements
- * (jsdom, older browsers).
- */
-declare class StyleRegistryImpl {
-    private styles;
-    private shadowRoots;
-    /**
-     * Registers a stylesheet and applies it to the document and to every
-     * adopted shadow root. Returns an unregister function.
-     */
-    register(cssText: string): () => void;
-    /**
-     * Applies every registered stylesheet to the given shadow root and keeps
-     * it in sync with future registrations. Used by the shell host.
-     */
-    adoptInto(root: ShadowRoot): void;
-    /**
-     * Stops syncing styles into the given shadow root (e.g. when the shell
-     * host disconnects). Already-adopted sheets are removed.
-     */
-    releaseRoot(root: ShadowRoot): void;
-    private unregister;
-    private appendStyleElement;
-}
-export declare const StyleRegistry: StyleRegistryImpl;
-/**
- * Drains CSS bundled at build time (the build prepends the package CSS to
- * the bundle as globalThis.__PAE_UI_CORE_CSS__) into the registry.
- */
-export declare const registerBundledCss: () => void;
-export {};

package/dist/src/styles/moduleStyleLifecycle.d.ts

@@ -1,43 +0,0 @@
-/**
- * Suspend/restore a micro-frontend module's global styles across single-spa
- * mount/unmount.
- *
- * style-loader injects a module's CSS into document.head when the bundle is
- * LOADED, and single-spa unmount never removes it (SystemJS keeps the module
- * cached). A module that imports a global stylesheet (a CSS framework reset,
- * preflight, etc.) therefore permanently contaminates every app visited
- * afterwards in the same session.
- *
- * The UI SDK tags every <style> it emits with data-pae-module="<name>"
- * (see pae-ui-react-sdk getBaseConfig). initializeMicroFrontend calls
- * suspendModuleStyles on unmount — detaching those elements from the
- * document while keeping them in memory — and restoreModuleStyles on mount,
- * so re-entering the app is instant (no re-parse, CSSOM preserved).
- *
- * For modules that opt into per-module shadow DOM, restoreModuleStyles
- * accepts the module's shadow root as target: the tagged styles are moved
- * INTO the shadow root (scoping them to the module) instead of back into
- * document.head, and suspendModuleStyles also sweeps that root on unmount.
- *
- * NOTE: this only covers CSS that goes through style-loader. Runtime
- * CSS-in-JS (e.g. Emotion/MUI) injects its own tags and is not affected.
- *
- * pae-ui-react-core is a shared singleton (one instance via the import map),
- * so this module-scoped store is global across all micro-frontends.
- */
-/**
- * Detach the module's style elements from the document (and from the given
- * extra root, e.g. the module's shadow root), keeping them in memory for a
- * later restoreModuleStyles call. Safe to call when the module has no tagged
- * styles (no-op).
- */
-export declare const suspendModuleStyles: (moduleName: string, extraRoot?: ParentNode) => void;
-/**
- * Attach the module's style elements to the target (document.head by
- * default, or the module's shadow root in per-module shadow DOM mode).
- * Sources, in order: previously suspended elements, plus any still sitting
- * in document.head when a non-document target is given (first mount of a
- * shadow module — style-loader injected them at bundle load time).
- * Safe to call when there is nothing to attach (no-op).
- */
-export declare const restoreModuleStyles: (moduleName: string, target?: ShadowRoot) => void;