@crownpeak/dqm-react-component 1.0.1 → 1.1.0

package/dist/types.d.ts

@@ -9,6 +9,70 @@ export interface OAuth2Config {
     redirectUri: string;
     scope?: string;
 }
+/**
+ * Position for manual overlay offset configuration.
+ * Specifies from which edge the offset should be applied.
+ */
+export type OverlayOffsetPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Configuration for overlay/toolbar detection and offset handling.
+ *
+ * Use this to configure how the DQM sidebar adapts to overlays like
+ * toolbars or other fixed elements on the page.
+ *
+ * @example
+ * // Manual offset for a 50px toolbar at the top
+ * overlayConfig: {
+ *   manualOffset: {
+ *     position: 'top',
+ *     pixels: 50
+ *   }
+ * }
+ *
+ * @example
+ * // Custom selector with iFrame content validation
+ * overlayConfig: {
+ *   selector: 'iframe.my-toolbar',
+ *   validateIframe: true
+ * }
+ */
+export interface OverlayConfig {
+    /**
+     * CSS selector for the overlay element to detect.
+     *
+     * Set to `null` or empty string to disable auto-detection.
+     */
+    selector?: string | null;
+    /**
+     * Whether to validate iFrame elements by checking if contentWindow exists.
+     * Only applies when the detected element is an iFrame.
+     * Default: true
+     */
+    validateIframe?: boolean;
+    /**
+     * Polling interval in milliseconds for detecting overlay changes.
+     * Useful for cross-origin iFrames where MutationObserver can't detect internal changes.
+     * Set to 0 to disable polling.
+     * Default: 1000
+     */
+    pollMs?: number;
+    /**
+     * Manual offset configuration. Use this when auto-detection doesn't work,
+     * e.g., for iFrames that fill the whole screen but have smaller internal content.
+     *
+     * When set, this takes precedence over auto-detected values.
+     */
+    manualOffset?: {
+        /**
+         * The edge from which to apply the offset.
+         */
+        position: OverlayOffsetPosition;
+        /**
+         * The offset value in pixels.
+         */
+        pixels: number;
+    };
+}
 export interface DQMConfig {
     apiKey?: string;
     websiteId?: string;
@@ -16,7 +80,26 @@ export interface DQMConfig {
     oauth2Config?: OAuth2Config;
     useLocalStorage?: boolean;
     disabled?: boolean;
+    disableLogout?: boolean;
     apiEndpoint?: string;
+    shadowDomMode?: boolean;
+    /**
+     * Configuration for overlay detection and offset handling.
+     *
+     * Use this to adapt the sidebar position to fixed overlays like
+     * preview bars, admin toolbars, or other fixed-position elements.
+     *
+     * @example
+     * // Disable overlay detection
+     * overlayConfig: { selector: null }
+     *
+     * @example
+     * // Manual 50px offset from top
+     * overlayConfig: { manualOffset: { position: 'top', pixels: 50 } }
+     *
+     * @see OverlayConfig for all available options
+     */
+    overlayConfig?: OverlayConfig;
 }
 export interface DQMSidebarProps {
     open: boolean;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAGzE,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,cAAc,GAAG,SAAS,CAAC;AAG5D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAG/C,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAGD,MAAM,WAAW,SAAS;IAExB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAG5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAGD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IAGpB,MAAM,CAAC,EAAE,SAAS,CAAC;IAGnB,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9H,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAErC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;CACvB;AAGD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,EAAE;QACZ,IAAI,EAAE,OAAO,CAAC;QACd,MAAM,EAAE,OAAO,CAAC;KACjB,CAAC;IACF,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE;QACf,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAGD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/utils/useDomPresence.d.ts

@@ -0,0 +1,210 @@
+/**
+ * Describes the position of an overlay element relative to the viewport.
+ *
+ * - `'top'`: Element is anchored to the top edge (e.g., preview bars, toolbars)
+ * - `'bottom'`: Element is anchored to the bottom edge (e.g., cookie banners)
+ * - `'left'`: Element is anchored to the left edge (e.g., navigation sidebars)
+ * - `'right'`: Element is anchored to the right edge (e.g., chat widgets)
+ * - `'center'`: Element is floating in the center (e.g., modals)
+ * - `null`: No element present or position cannot be determined
+ */
+export type OverlayPosition = 'top' | 'bottom' | 'left' | 'right' | 'center' | null;
+/**
+ * Represents the bounding rectangle of a DOM element.
+ * All values are in pixels relative to the viewport.
+ *
+ * @interface ElementRect
+ * @property {number} height - The height of the element in pixels
+ * @property {number} width - The width of the element in pixels
+ * @property {number} top - Distance from the top of the viewport to the element's top edge
+ * @property {number} bottom - Distance from the top of the viewport to the element's bottom edge
+ * @property {number} left - Distance from the left of the viewport to the element's left edge
+ * @property {number} right - Distance from the left of the viewport to the element's right edge
+ */
+export interface ElementRect {
+    height: number;
+    width: number;
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+/**
+ * Result object returned by the useDomPresence hook.
+ *
+ * @interface DomPresenceResult
+ * @property {boolean} present - Whether the element is currently present in the DOM
+ *   and passes the optional validation check
+ * @property {ElementRect | null} rect - The element's bounding rectangle, or null if not present.
+ *   Updated on DOM mutations, window resize, and polling (if enabled).
+ * @property {OverlayPosition} position - The detected position of the element relative to
+ *   the viewport edges. Useful for determining how to adjust other UI elements.
+ * @property {Object} contentOffset - Calculated offsets indicating where main content
+ *   should begin to avoid being obscured by the overlay element.
+ * @property {number} contentOffset.top - Pixels to offset from the top
+ * @property {number} contentOffset.bottom - Pixels to offset from the bottom
+ * @property {number} contentOffset.left - Pixels to offset from the left
+ * @property {number} contentOffset.right - Pixels to offset from the right
+ */
+export interface DomPresenceResult {
+    present: boolean;
+    rect: ElementRect | null;
+    position: OverlayPosition;
+    contentOffset: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+}
+/**
+ * Configuration options for the useOverlayResistant hook.
+ * Matches the OverlayConfig interface from types.ts.
+ *
+ * @interface UseOverlayResistantConfig
+ */
+export interface UseOverlayResistantConfig {
+    /**
+     * CSS selector for the overlay element to detect.
+     *
+     * Set to `null` or empty string to disable auto-detection.
+     */
+    selector?: string | null;
+    /**
+     * Whether to validate iFrame elements by checking if contentWindow exists.
+     * Only applies when the detected element is an iFrame.
+     * Default: true
+     */
+    validateIframe?: boolean;
+    /**
+     * Polling interval in milliseconds for detecting overlay changes.
+     * Useful for cross-origin iFrames where MutationObserver can't detect internal changes.
+     * Set to 0 to disable polling.
+     * Default: 1000
+     */
+    pollMs?: number;
+    /**
+     * Manual offset configuration. Use this when auto-detection doesn't work,
+     * e.g., for iFrames that fill the whole screen but have smaller internal content.
+     *
+     * When set, this takes precedence over auto-detected values.
+     */
+    manualOffset?: {
+        /**
+         * The edge from which to apply the offset.
+         */
+        position: 'top' | 'bottom' | 'left' | 'right';
+        /**
+         * The offset value in pixels.
+         */
+        pixels: number;
+    };
+}
+/**
+ * Result object returned by the useOverlayResistant hook.
+ *
+ * This interface provides a simplified view focused on overlay dimensions
+ * and positioning for generic overlay/toolbars.
+ *
+ * @interface OverlayInfo
+ * @property {boolean} present - Whether the overlay element is currently visible
+ * @property {number} height - Height of the overlay in pixels (0 if not present)
+ * @property {number} width - Width of the overlay in pixels (0 if not present)
+ * @property {OverlayPosition} position - Position of the overlay ('top', 'bottom', etc.)
+ * @property {Object} contentOffset - Space to reserve for the overlay
+ * @property {number} contentOffset.top - Offset from top in pixels
+ * @property {number} contentOffset.bottom - Offset from bottom in pixels
+ * @property {number} contentOffset.left - Offset from left in pixels
+ * @property {number} contentOffset.right - Offset from right in pixels
+ * @property {boolean} isManualOffset - Whether the offset is from manual configuration
+ */
+export interface OverlayInfo {
+    present: boolean;
+    height: number;
+    width: number;
+    position: OverlayPosition;
+    contentOffset: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    /** True if the offset is from manual configuration rather than auto-detection */
+    isManualOffset: boolean;
+}
+/**
+ * React hook that detects and tracks overlay elements (e.g., preview bars, toolbars).
+ *
+ * This hook is designed for handling overlays like preview bars or admin toolbars.
+ * It provides information about the overlay's presence, dimensions, and position
+ * to allow UI components to adjust their layout accordingly.
+ *
+ * ## Features
+ *
+ * - **Configurable Selector**: Detect any overlay element via CSS selector
+ * - **iFrame Validation**: Optionally validates iFrame's `contentWindow` availability
+ * - **Resilient Polling**: Configurable polling interval for cross-origin iFrames
+ * - **Position Detection**: Automatically detects overlay position (top/bottom/left/right)
+ * - **Manual Override**: Supports manual offset for cases where auto-detection fails
+ * - **Content Offset Calculation**: Provides ready-to-use offset values
+ *
+ * ## Manual Offset
+ *
+ * For cross-origin iFrames that fill the entire viewport but have smaller internal
+ * content (e.g., a 50px toolbar inside a full-screen iFrame), use `manualOffset`.
+ *
+ * **Important**: The `manualOffset` is only applied when the element matching the
+ * `selector` is actually present in the DOM. The hook always observes the selector
+ * via MutationObserver, so the offset will automatically appear/disappear when
+ * the element is added/removed.
+ *
+ * ```tsx
+ * // Applies 50px offset only when the element matching the selector exists
+ * useOverlayResistant({
+ *   selector: 'iframe#my-overlay',
+ *   manualOffset: { position: 'top', pixels: 50 }
+ * })
+ * ```
+ *
+ * @param {UseOverlayResistantConfig} [config] - Configuration options
+ * @returns {OverlayInfo} Object with presence, dimensions, position, and content offset
+ *
+ * @example
+ * // Custom selector
+ * const toolbar = useOverlayResistant({
+ *   selector: '.admin-toolbar',
+ *   validateIframe: false
+ * });
+ *
+ * @example
+ * // Manual offset for cross-origin iFrame with 50px internal toolbar
+ * const overlay = useOverlayResistant({
+ *   manualOffset: { position: 'top', pixels: 50 }
+ * });
+ *
+ * @example
+ * // Disable overlay detection entirely
+ * const noOverlay = useOverlayResistant({ selector: null });
+ *
+ * @example
+ * // Full sidebar positioning with config
+ * function DQMSidebarContainer({ overlayConfig }) {
+ *   const overlay = useOverlayResistant(overlayConfig);
+ *
+ *   return (
+ *     <aside
+ *       style={{
+ *         position: 'fixed',
+ *         top: overlay.contentOffset.top,
+ *         right: 0,
+ *         bottom: overlay.contentOffset.bottom,
+ *         height: `calc(100vh - ${overlay.contentOffset.top + overlay.contentOffset.bottom}px)`,
+ *       }}
+ *     >
+ *       <DQMSidebar />
+ *     </aside>
+ *   );
+ * }
+ */
+export declare const useOverlayResistant: (config?: UseOverlayResistantConfig) => OverlayInfo;
+//# sourceMappingURL=useDomPresence.d.ts.map

package/dist/utils/useDomPresence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDomPresence.d.ts","sourceRoot":"","sources":["../../src/utils/useDomPresence.tsx"],"names":[],"mappings":"AAeA;;;;;;;;;GASG;AACH,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEpF;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,WAAW;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACjB;AAuBD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,iBAAiB;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,eAAe,CAAC;IAC1B,aAAa,EAAE;QACX,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAuRD;;;;;GAKG;AACH,MAAM,WAAW,yBAAyB;IACtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,YAAY,CAAC,EAAE;QACX;;WAEG;QACH,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;QAE9C;;WAEG;QACH,MAAM,EAAE,MAAM,CAAC;KAClB,CAAC;CACL;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,WAAW;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC;IAC1B,aAAa,EAAE;QACX,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,iFAAiF;IACjF,cAAc,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,yBAAyB,KAAG,WA4ExE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crownpeak/dqm-react-component",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
   "description": "A React component for Crownpeak Digital Quality Management (DQM) integration",
   "type": "module",
@@ -14,10 +14,17 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
+    "./widget": {
+      "types": "./dist/dqm-widget.d.ts",
+      "import": "./dist/dqm-widget.esm.js",
+      "default": "./dist/dqm-widget.esm.js"
+    },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/dqm-widget.iife.js"
+  ],
   "files": [
     "dist",
     "README.md",
@@ -55,12 +62,14 @@
     "dev:client": "vite",
     "dev:server": "REDIS_URL=redis://localhost:6379 tsx watch server/index.ts",
     "dev:auth-ui": "cd server-ui && vite",
-    "build": "npm run build:lib && npm run build:server && npm run build:auth-ui",
+    "build": "npm run build:lib && npm run build:widget && npm run build:server && npm run build:auth-ui",
     "build:lib": "tsc && vite build --mode library",
+    "build:widget": "vite build --mode widget && cp src/html-pages/dqm-widget.d.ts dist/",
     "build:server": "tsc -p tsconfig.server.json",
     "build:auth-ui": "cd server-ui && vite build",
     "start": "npm run build && concurrently \"npm run start:server\" \"vite\"",
     "start:server": "REDIS_URL=redis://localhost:6379 node dist/server/index.js",
+    "serve:widget": "npx serve -l 4173 -c serve.json",
     "prepublishOnly": "npm run build && npm run lint",
     "lint": "eslint . || true",
     "preview": "vite preview --host"