@netless/telebox-insider 1.0.0-alpha.34 → 1.0.0-alpha.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/telebox-insider",
-  "version": "1.0.0-alpha.34",
+  "version": "1.0.0-alpha.37",
   "private": false,
   "description": "Window widget for Whiteboard",
   "license": "MIT",

package/src/TeleBoxManager/MaxTitleBar/index.ts

@@ -123,10 +123,12 @@ export class MaxTitleBar extends DefaultTitleBar {
             this.$titles,
             "wheel",
             (ev) => {
-                (ev.currentTarget as HTMLElement).scrollBy({
-                    left: ev.deltaY > 0 ? 250 : -250,
-                    behavior: "smooth",
-                });
+                if (!ev.deltaX) {
+                    (ev.currentTarget as HTMLElement).scrollBy({
+                        left: ev.deltaY > 0 ? 250 : -250,
+                        behavior: "smooth",
+                    });
+                }
             },
             { passive: false },
             "max-render-wheel-titles"

package/src/TeleBoxManager/index.ts

@@ -69,6 +69,7 @@ type ValConfig = {
     stageStyle: Val<string>;
     defaultBoxBodyStyle: Val<string | null>;
     defaultBoxStageStyle: Val<string | null>;
+    theme: Val<TeleBoxManagerThemeConfig | null>;
 };
 
 type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> &
@@ -92,7 +93,7 @@ export class TeleBoxManager {
         stageStyle = "",
         defaultBoxBodyStyle = null,
         defaultBoxStageStyle = null,
-        theme = {},
+        theme = null,
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
 
@@ -185,9 +186,15 @@ export class TeleBoxManager {
                 const handler = (evt: MediaQueryListEvent): void => {
                     prefersDark$.setValue(evt.matches);
                 };
-                prefersDarkMatch.addEventListener("change", handler);
-                return () =>
-                    prefersDarkMatch.removeEventListener("change", handler);
+                if (prefersDarkMatch.addEventListener) {
+                    prefersDarkMatch.addEventListener("change", handler);
+                    return () =>
+                        prefersDarkMatch.removeEventListener("change", handler);
+                } else {
+                    // Old Safari
+                    prefersDarkMatch.addListener(handler);
+                    return () => prefersDarkMatch.removeListener(handler);
+                }
             });
         }
 
@@ -221,6 +228,10 @@ export class TeleBoxManager {
                     : TELE_BOX_STATE.Normal
         );
 
+        const theme$ = new Val<TeleBoxManagerThemeConfig | null>(theme, {
+            compare: shallowequal,
+        });
+
         const readonlyValConfig: ReadonlyValConfig = {
             darkMode: darkMode$,
             state: state$,
@@ -243,6 +254,7 @@ export class TeleBoxManager {
             stageStyle: stageStyle$,
             defaultBoxBodyStyle: defaultBoxBodyStyle$,
             defaultBoxStageStyle: defaultBoxStageStyle$,
+            theme: theme$,
         };
 
         withValueEnhancer(this, valConfig, valManager);
@@ -334,9 +346,20 @@ export class TeleBoxManager {
                     minimized
                 );
             }),
-            containerStyle$.subscribe((containerStyle) => {
-                this.$container.style.cssText = containerStyle;
-            }),
+            combine([containerStyle$, theme$]).subscribe(
+                ([containerStyle, theme]) => {
+                    this.$container.style.cssText = containerStyle;
+                    if (theme) {
+                        Object.keys(theme).forEach((key) => {
+                            this.$container.style.setProperty(
+                                `--tele-${key}`,
+                                theme[key as keyof TeleBoxManagerThemeConfig] ??
+                                    null
+                            );
+                        });
+                    }
+                }
+            ),
             stageStyle$.subscribe((stageStyle) => {
                 this.$stage.style.cssText = stageStyle;
                 this.$stage.style.width = stageRect$.value.width + "px";
@@ -624,15 +647,6 @@ export class TeleBoxManager {
         return deletedBoxes;
     }
 
-    public setTheme(theme: TeleBoxManagerThemeConfig): void {
-        Object.keys(theme).forEach((key) => {
-            this.$container.style.setProperty(
-                `--tele-${key}`,
-                theme[key as keyof TeleBoxManagerThemeConfig] ?? null
-            );
-        });
-    }
-
     /**
      * Mount manager to a container element.
      */

package/src/TeleBoxManager/typings.ts

@@ -32,7 +32,7 @@ export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
     readonly defaultBoxStageStyle?: string | null;
     /** Theme variable */
-    readonly theme?: TeleBoxManagerThemeConfig;
+    readonly theme?: TeleBoxManagerThemeConfig | null;
 }
 
 type TeleBoxManagerBoxConfigBaseProps =