@deephaven/components 0.108.1-beta.1 → 0.108.1-beta.13

package/dist/theme/useExternalTheme.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useState } from 'react';
+import Log from '@deephaven/log';
+import { getWindowParent } from '@deephaven/utils';
+import { MSG_REQUEST_SET_THEME } from "./ThemeModel.js";
+import { isExternalThemeData, isExternalThemeEnabled, parseExternalThemeData, requestExternalThemeData } from "./ThemeUtils.js";
+var logger = Log.module('useExternalTheme');
+/**
+ * If external theme is configured via `theme=EXTERNAL_THEME_KEY` query param,
+ * handle `postMessage` communication to retrieve the theme data from the parent
+ * Window. The hook will also listen for `MSG_REQUEST_SET_THEME` messages from
+ * the parent and current Window to allow explicitly setting the theme.
+ */
+export function useExternalTheme() {
+  var [result, setResult] = useState(() => {
+    var isEnabled = isExternalThemeEnabled();
+    return {
+      isEnabled,
+      isPending: isEnabled
+    };
+  });
+
+  /** Parse external theme data and update the result */
+  var handleExternalThemeData = useCallback(externalThemeData => {
+    var themeData = parseExternalThemeData(externalThemeData);
+    setResult({
+      isEnabled: true,
+      isPending: false,
+      themeData
+    });
+  }, []);
+  useEffect(() => {
+    if (!result.isEnabled) {
+      return;
+    }
+    logger.debug('Requesting external theme data');
+
+    /** Parent or current Window can explicitly set the theme */
+    function onMessage(event) {
+      var parent = getWindowParent();
+
+      // Allow messages from parent or current window
+      if (event.source !== window && event.source !== parent) {
+        return;
+      }
+      if (event.data.message === MSG_REQUEST_SET_THEME) {
+        if (isExternalThemeData(event.data.payload)) {
+          handleExternalThemeData(event.data.payload);
+        }
+      }
+    }
+    window.addEventListener('message', onMessage);
+
+    /** Request initial theme data from parent window */
+    requestExternalThemeData().then(handleExternalThemeData).catch(err => {
+      logger.error(err);
+      setResult({
+        isEnabled: true,
+        isPending: false
+      });
+    });
+    return () => {
+      window.removeEventListener('message', onMessage);
+    };
+  }, [handleExternalThemeData, result.isEnabled]);
+  return result;
+}
+export default useExternalTheme;
+//# sourceMappingURL=useExternalTheme.js.map

package/dist/theme/useExternalTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExternalTheme.js","names":["useCallback","useEffect","useState","Log","getWindowParent","MSG_REQUEST_SET_THEME","isExternalThemeData","isExternalThemeEnabled","parseExternalThemeData","requestExternalThemeData","logger","module","useExternalTheme","result","setResult","isEnabled","isPending","handleExternalThemeData","externalThemeData","themeData","debug","onMessage","event","parent","source","window","data","message","payload","addEventListener","then","catch","err","error","removeEventListener"],"sources":["../../src/theme/useExternalTheme.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { getWindowParent, type PostMessage } from '@deephaven/utils';\nimport {\n  MSG_REQUEST_SET_THEME,\n  type ExternalThemeData,\n  type ThemeData,\n} from './ThemeModel';\nimport {\n  isExternalThemeData,\n  isExternalThemeEnabled,\n  parseExternalThemeData,\n  requestExternalThemeData,\n} from './ThemeUtils';\n\nconst logger = Log.module('useExternalTheme');\nexport interface UseExternalThemeResult {\n  isEnabled: boolean;\n  isPending: boolean;\n  themeData?: ThemeData;\n}\n\n/**\n * If external theme is configured via `theme=EXTERNAL_THEME_KEY` query param,\n * handle `postMessage` communication to retrieve the theme data from the parent\n * Window. The hook will also listen for `MSG_REQUEST_SET_THEME` messages from\n * the parent and current Window to allow explicitly setting the theme.\n */\nexport function useExternalTheme(): UseExternalThemeResult {\n  const [result, setResult] = useState<UseExternalThemeResult>(() => {\n    const isEnabled = isExternalThemeEnabled();\n    return {\n      isEnabled,\n      isPending: isEnabled,\n    };\n  });\n\n  /** Parse external theme data and update the result */\n  const handleExternalThemeData = useCallback(\n    (externalThemeData: ExternalThemeData) => {\n      const themeData = parseExternalThemeData(externalThemeData);\n\n      setResult({\n        isEnabled: true,\n        isPending: false,\n        themeData,\n      });\n    },\n    []\n  );\n\n  useEffect(() => {\n    if (!result.isEnabled) {\n      return;\n    }\n\n    logger.debug('Requesting external theme data');\n\n    /** Parent or current Window can explicitly set the theme */\n    function onMessage(event: MessageEvent<PostMessage<unknown>>): void {\n      const parent = getWindowParent();\n\n      // Allow messages from parent or current window\n      if (event.source !== window && event.source !== parent) {\n        return;\n      }\n\n      if (event.data.message === MSG_REQUEST_SET_THEME) {\n        if (isExternalThemeData(event.data.payload)) {\n          handleExternalThemeData(event.data.payload);\n        }\n      }\n    }\n\n    window.addEventListener('message', onMessage);\n\n    /** Request initial theme data from parent window */\n    requestExternalThemeData()\n      .then(handleExternalThemeData)\n      .catch(err => {\n        logger.error(err);\n        setResult({ isEnabled: true, isPending: false });\n      });\n\n    return () => {\n      window.removeEventListener('message', onMessage);\n    };\n  }, [handleExternalThemeData, result.isEnabled]);\n\n  return result;\n}\n\nexport default useExternalTheme;\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AACxD,OAAOC,GAAG,MAAM,gBAAgB;AAChC,SAASC,eAAe,QAA0B,kBAAkB;AAAC,SAEnEC,qBAAqB;AAAA,SAKrBC,mBAAmB,EACnBC,sBAAsB,EACtBC,sBAAsB,EACtBC,wBAAwB;AAG1B,IAAMC,MAAM,GAAGP,GAAG,CAACQ,MAAM,CAAC,kBAAkB,CAAC;AAO7C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAA,EAA2B;EACzD,IAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGZ,QAAQ,CAAyB,MAAM;IACjE,IAAMa,SAAS,GAAGR,sBAAsB,CAAC,CAAC;IAC1C,OAAO;MACLQ,SAAS;MACTC,SAAS,EAAED;IACb,CAAC;EACH,CAAC,CAAC;;EAEF;EACA,IAAME,uBAAuB,GAAGjB,WAAW,CACxCkB,iBAAoC,IAAK;IACxC,IAAMC,SAAS,GAAGX,sBAAsB,CAACU,iBAAiB,CAAC;IAE3DJ,SAAS,CAAC;MACRC,SAAS,EAAE,IAAI;MACfC,SAAS,EAAE,KAAK;MAChBG;IACF,CAAC,CAAC;EACJ,CAAC,EACD,EACF,CAAC;EAEDlB,SAAS,CAAC,MAAM;IACd,IAAI,CAACY,MAAM,CAACE,SAAS,EAAE;MACrB;IACF;IAEAL,MAAM,CAACU,KAAK,CAAC,gCAAgC,CAAC;;IAE9C;IACA,SAASC,SAASA,CAACC,KAAyC,EAAQ;MAClE,IAAMC,MAAM,GAAGnB,eAAe,CAAC,CAAC;;MAEhC;MACA,IAAIkB,KAAK,CAACE,MAAM,KAAKC,MAAM,IAAIH,KAAK,CAACE,MAAM,KAAKD,MAAM,EAAE;QACtD;MACF;MAEA,IAAID,KAAK,CAACI,IAAI,CAACC,OAAO,KAAKtB,qBAAqB,EAAE;QAChD,IAAIC,mBAAmB,CAACgB,KAAK,CAACI,IAAI,CAACE,OAAO,CAAC,EAAE;UAC3CX,uBAAuB,CAACK,KAAK,CAACI,IAAI,CAACE,OAAO,CAAC;QAC7C;MACF;IACF;IAEAH,MAAM,CAACI,gBAAgB,CAAC,SAAS,EAAER,SAAS,CAAC;;IAE7C;IACAZ,wBAAwB,CAAC,CAAC,CACvBqB,IAAI,CAACb,uBAAuB,CAAC,CAC7Bc,KAAK,CAACC,GAAG,IAAI;MACZtB,MAAM,CAACuB,KAAK,CAACD,GAAG,CAAC;MACjBlB,SAAS,CAAC;QAAEC,SAAS,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAM,CAAC,CAAC;IAClD,CAAC,CAAC;IAEJ,OAAO,MAAM;MACXS,MAAM,CAACS,mBAAmB,CAAC,SAAS,EAAEb,SAAS,CAAC;IAClD,CAAC;EACH,CAAC,EAAE,CAACJ,uBAAuB,EAAEJ,MAAM,CAACE,SAAS,CAAC,CAAC;EAE/C,OAAOF,MAAM;AACf;AAEA,eAAeD,gBAAgB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "0.108.1-beta.1+728ad95f",
+  "version": "0.108.1-beta.13+1c9a8ed1",
   "description": "Deephaven React component library",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@adobe/react-spectrum": "3.38.0",
-    "@deephaven/icons": "^0.108.1-beta.1+728ad95f",
-    "@deephaven/log": "^0.108.1-beta.1+728ad95f",
-    "@deephaven/react-hooks": "^0.108.1-beta.1+728ad95f",
-    "@deephaven/utils": "^0.108.1-beta.1+728ad95f",
+    "@deephaven/icons": "^0.108.1-beta.13+1c9a8ed1",
+    "@deephaven/log": "^0.108.1-beta.13+1c9a8ed1",
+    "@deephaven/react-hooks": "^0.108.1-beta.13+1c9a8ed1",
+    "@deephaven/utils": "^0.108.1-beta.13+1c9a8ed1",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@internationalized/date": "^3.5.5",
@@ -50,6 +50,7 @@
     "popper.js": "^1.16.1",
     "prop-types": "^15.7.2",
     "react-beautiful-dnd": "^13.1.0",
+    "react-reverse-portal": "^2.3.0",
     "react-transition-group": "^4.4.2",
     "react-virtualized-auto-sizer": "1.0.6",
     "react-window": "^1.8.6"
@@ -60,8 +61,8 @@
     "react-is": ">=16.8.0"
   },
   "devDependencies": {
-    "@deephaven/mocks": "^0.108.1-beta.1+728ad95f",
-    "@deephaven/test-utils": "^0.108.1-beta.1+728ad95f",
+    "@deephaven/mocks": "^0.108.1-beta.13+1c9a8ed1",
+    "@deephaven/test-utils": "^0.108.1-beta.13+1c9a8ed1",
     "react-redux": "^7.2.4"
   },
   "files": [
@@ -76,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "728ad95fe43ea966fb47632015572b5e901228d8"
+  "gitHead": "1c9a8ed1ebd923ffa07235b453602f9775660a6f"
 }