Csmccarthy/z index config (#147)

allow z index specification in config

package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/transcend-io/consent-manager-ui.git"
   },
   "homepage": "https://github.com/transcend-io/consent-manager-ui",
-  "version": "4.8.3",
+  "version": "4.8.4",
   "license": "MIT",
   "main": "build/ui",
   "files": [
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@monaco-editor/react": "^4.4.5",
-    "@transcend-io/airgap.js-types": "^10.6.1",
+    "@transcend-io/airgap.js-types": "^10.6.2",
     "@transcend-io/type-utils": "^1.0.7",
     "@types/node": "^17.0.21",
     "@typescript-eslint/eslint-plugin": "^5.12.1",

src/components/App.tsx

@@ -4,7 +4,6 @@ import type {
   AirgapAPI,
   ConsentManagerAPI,
 } from '@transcend-io/airgap.js-types';
-import { getMergedConfig } from '../config';
 import { AirgapProvider, useLanguage, useViewState } from '../hooks';
 import { settings } from '../settings';
 import { Main } from './Main';
@@ -15,6 +14,7 @@ import { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
 import { makeConsentManagerAPI } from '../api';
 import { TranscendEventTarget } from '../event-target';
 import { useState } from 'preact/hooks';
+import { MergedConsentManagerConfig } from '../types';
 
 // TODO: https://transcend.height.app/T-13483
 // Fix IntlProvider JSX types
@@ -30,14 +30,16 @@ const eventTarget = new TranscendEventTarget();
 export function App({
   airgap,
   callback,
+  defaultConfig,
 }: {
   /** The Airgap API */
   airgap: AirgapAPI;
   /** A callback which passes the consent manager API out of Preact to be exposed on `window.transcend` */
   callback: (finalizedConsentManagerAPI: ConsentManagerAPI) => void;
+  /** Default consent manager configuration */
+  defaultConfig: MergedConsentManagerConfig;
 }): JSX.Element {
   // Consent manager configuration
-  const defaultConfig = getMergedConfig();
   const [{ config, supportedLanguages }, setConfig] = useState(defaultConfig);
 
   // Get the active privacy regime

src/components/Main.tsx

@@ -77,7 +77,7 @@ export function Main({
     return (
       <div
         role="dialog"
-        aria-model="true"
+        aria-modal="true"
         aria-labelledby="consent-dialog-title"
         className="modal-container"
         id="consentManagerMainDialog"

src/config.ts

@@ -8,11 +8,11 @@ import type {
   ExperienceToInitialViewState,
 } from '@transcend-io/airgap.js-types';
 import { ViewState } from '@transcend-io/airgap.js-types/build/enums/viewState';
-import { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
 import { CONSENT_MANAGER_SUPPORTED_LANGUAGES } from './i18n';
 import { logger } from './logger';
 import { settings, LOG_LEVELS, extraConfig } from './settings';
 import { jsonParseSafe } from './utils/safe-json-parse';
+import { MergedConsentManagerConfig } from './types';
 
 const {
   privacyCenter,
@@ -71,12 +71,7 @@ const baseConfig: Omit<
  *
  * @returns the consent manager config to use in the UI
  */
-export function getMergedConfig(): {
-  /** Merged config */
-  config: ConsentManagerConfig;
-  /** Languages split out separately for type-safety and preserving raw value */
-  supportedLanguages: ConsentManagerLanguageKey[];
-} {
+export function getMergedConfig(): MergedConsentManagerConfig {
   const settingsConfig: ConsentManagerConfigInput =
     typeof settings === 'string'
       ? jsonParseSafe(settings, () => ({}))

src/consent-manager.tsx

@@ -6,6 +6,7 @@ import type {
 import { App } from './components/App';
 import { logger } from './logger';
 import { createHTMLElement } from './utils/create-html-element';
+import { getMergedConfig } from './config';
 
 // The `transcend` API: methods which we'll create inside Preact and pass back out here via callback
 let consentManagerAPI: ConsentManagerAPI | null = null;
@@ -22,11 +23,12 @@ export const injectConsentManagerApp = async (
 ): Promise<ConsentManagerAPI> => {
   // The interface hasn't initialized yet
   if (consentManagerAPI === null) {
+    const mergedConfig = getMergedConfig();
     // The outer div to wrap the shadow root
     const consentManager = createHTMLElement('div');
     consentManager.style.position = 'fixed'; // so as not to affect position
-    consentManager.style.zIndex = '83951225900329'; // high z-index to stay on top
-    // 83951225900329..toString(36) === 'transcend'
+    // Use the user provided z-index or default to the maximum to make sure we overlap everything
+    consentManager.style.zIndex = mergedConfig.config.uiZIndex ?? '2147483647';
     consentManager.id = 'transcend-consent-manager';
 
     try {
@@ -59,6 +61,7 @@ export const injectConsentManagerApp = async (
             callback={(finalizedConsentManagerAPI: ConsentManagerAPI): void => {
               resolve(finalizedConsentManagerAPI);
             }}
+            defaultConfig={mergedConfig}
           />,
           appContainer,
         );

src/playground/index.html

@@ -10,13 +10,26 @@
     <!-- Stub transcendInit -->
     <script>
       if (!self.transcend) {
-        self.transcend = {
+        /**
+         * Check for loadOptions in local storage, and inject onto transcendInit
+         * This is before ui.js so we make sure to load our options before initializing the ui
+         */
+        let loadOptions = {};
+        const loadOptionsInStorage = localStorage.getItem('loadOptions');
+        if (loadOptionsInStorage) {
+          try {
+            loadOptions = JSON.parse(loadOptionsInStorage);
+          } catch (err) {}
+        }
+        const stub = {
+          consentManagerConfig: loadOptions,
           readyQueue: [],
           ready(callback) {
             this.readyQueue.push(callback);
           },
           ...self.transcend,
         };
+        self.transcend = stub;
       }
     </script>
 

src/playground/index.tsx

@@ -7,23 +7,6 @@ import Main from './Main';
  */
 window.airgap = Object.assign(airgapStub, window.airgap);
 
-/**
- * Check for loadOptions in local storage, and inject onto transcendInit
- */
-let loadOptions = {};
-const loadOptionsInStorage = localStorage.getItem('loadOptions');
-if (loadOptionsInStorage) {
-  try {
-    loadOptions = JSON.parse(loadOptionsInStorage);
-  } catch (err) {}
-}
-window.transcend = {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  loadOptions,
-  ...window.transcend,
-};
-
 const divToInjectPlayground = document.getElementById('playground');
 if (!divToInjectPlayground) {
   throw new Error('Element not found with id `playground`');

src/types.ts

@@ -2,6 +2,7 @@ import type {
   TrackingPurpose,
   ViewState,
   AirgapAuth,
+  ConsentManagerConfig,
 } from '@transcend-io/airgap.js-types';
 import { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
 
@@ -63,3 +64,10 @@ export type HandleSetLanguage = (language: ConsentManagerLanguageKey) => void;
  * Handler for changing the privacy policy link
  */
 export type HandleChangePrivacyPolicy = (privacyPolicyLink: string) => void;
+
+export interface MergedConsentManagerConfig {
+  /** Merged config */
+  config: ConsentManagerConfig;
+  /** Languages split out separately for type-safety and preserving raw value */
+  supportedLanguages: ConsentManagerLanguageKey[];
+}

yarn.lock

@@ -1155,14 +1155,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@transcend-io/airgap.js-types@npm:^10.6.1":
-  version: 10.6.1
-  resolution: "@transcend-io/airgap.js-types@npm:10.6.1"
+"@transcend-io/airgap.js-types@npm:^10.6.2":
+  version: 10.6.2
+  resolution: "@transcend-io/airgap.js-types@npm:10.6.2"
   dependencies:
     "@transcend-io/type-utils": ^1.0.5
     fp-ts: ^2.11.8
     io-ts: ^2.2.16
-  checksum: 8a5d9afbf4ecdfe1a67deb3a4225b7b87d64bc12552416a9063a6c912ac1822ab34d5edb846fc5af62a8259958908483e06e34ea739610f9e0fb0636f8fb44a8
+  checksum: e400db9a561f8ff196fd951a6a854a1dfea3b2219c10929e39f54ea27ea0cd3dcb7db90dabe1736b3a1f2335cd6cbfa2f30fc0b1a181772ee5e647e99fd59bd8
   languageName: node
   linkType: hard
 
@@ -1183,7 +1183,7 @@ __metadata:
   resolution: "@transcend-io/consent-manager-ui@workspace:."
   dependencies:
     "@monaco-editor/react": ^4.4.5
-    "@transcend-io/airgap.js-types": ^10.6.1
+    "@transcend-io/airgap.js-types": ^10.6.2
     "@transcend-io/internationalization": ^1.5.1
     "@transcend-io/logger": ^1.0.14
     "@transcend-io/type-utils": ^1.0.7