@adaptabletools/adaptable 24.0.0-canary.6 → 24.0.0-canary.8

package/src/setupDevTools.js

@@ -4,6 +4,7 @@ import { resolveVisibleSettingsPanelNavigationGroups } from './Utilities/Helpers
 import { isTransientReduxAction } from './Redux/Store/isTransientReduxAction';
 import { isPivotLayout } from './Utilities/Helpers/Layouts/LayoutHelper';
 import { debug } from '@infinite-table/infinite-react';
+import { colorSchemeDark, colorSchemeLight, themeQuartz } from 'ag-grid-enterprise';
 import { warnOnce } from './agGrid/AdaptableLogger';
 let DEV_TOOLS_LISTENING_STARTED = false;
 let DEV_TOOLS_READY = false;
@@ -204,39 +205,192 @@ function handleOpenSettingsPanelMessage(payload) {
         console.warn(error.message);
     }
 }
-function applyThemeToDocumentElement(payload) {
-    const style = document.documentElement.style;
+const THEME_PREVIEW_ATTR = 'data-ab-devtools-theme-preview';
+function clearInlineAbVars(el) {
+    const style = el.style;
     for (let i = style.length - 1; i >= 0; i--) {
         const prop = style[i];
-        if (prop.startsWith('--ab-')) {
+        if (prop?.startsWith('--ab-') && !prop.startsWith('--ab-qs-')) {
             style.removeProperty(prop);
         }
     }
+}
+let themeAliasMaps = null;
+let themeAliasSheetCount = -1;
+function collectThemeAliases() {
+    const sheetCount = document.styleSheets.length;
+    if (themeAliasMaps && themeAliasSheetCount === sheetCount) {
+        return themeAliasMaps;
+    }
+    const root = new Map();
+    const dark = new Map();
+    const visit = (rules) => {
+        for (let index = 0; index < rules.length; index++) {
+            const rule = rules[index];
+            const group = rule;
+            if (group.cssRules) {
+                visit(group.cssRules);
+            }
+            const styleRule = rule;
+            if (!styleRule.style || !styleRule.selectorText) {
+                continue;
+            }
+            const selector = styleRule.selectorText;
+            const isDark = selector.includes('ab--theme-dark');
+            const isRoot = selector.includes(':root') ||
+                selector.includes('ab--theme-light') ||
+                /(^|[^\w-])html([^\w-]|$)/.test(selector);
+            if (!isDark && !isRoot) {
+                continue;
+            }
+            const target = isDark ? dark : root;
+            for (let i = 0; i < styleRule.style.length; i++) {
+                const prop = styleRule.style[i];
+                if (!prop?.startsWith('--')) {
+                    continue;
+                }
+                const value = styleRule.style.getPropertyValue(prop).trim();
+                if (value.includes('var(')) {
+                    target.set(prop, value);
+                }
+            }
+        }
+    };
+    for (let index = 0; index < document.styleSheets.length; index++) {
+        const sheet = document.styleSheets[index];
+        try {
+            visit(sheet.cssRules);
+        }
+        catch {
+        }
+    }
+    themeAliasMaps = { root, dark };
+    themeAliasSheetCount = sheetCount;
+    return themeAliasMaps;
+}
+let darkThemeProbe = null;
+function themeDefaultStyle(variant) {
+    if (variant === 'light') {
+        return getComputedStyle(document.documentElement);
+    }
+    if (!darkThemeProbe) {
+        darkThemeProbe = document.createElement('div');
+        darkThemeProbe.className = 'ab--theme-dark';
+        darkThemeProbe.setAttribute('data-ab-devtools-theme-probe', '');
+        darkThemeProbe.style.cssText =
+            'position:absolute;width:0;height:0;overflow:hidden;pointer-events:none';
+        document.body.appendChild(darkThemeProbe);
+    }
+    return getComputedStyle(darkThemeProbe);
+}
+function installLiveAliases(el, variant) {
+    const { root, dark } = collectThemeAliases();
+    const defaults = themeDefaultStyle(variant);
+    const aliases = variant === 'dark' ? new Map([...root, ...dark]) : root;
+    for (const [name, raw] of aliases) {
+        const inline = el.style.getPropertyValue(name).trim();
+        const fallback = defaults.getPropertyValue(name).trim();
+        if (!inline || inline === raw || inline === fallback) {
+            el.style.setProperty(name, raw);
+        }
+    }
+}
+function clearDocumentThemePreview() {
+    clearInlineAbVars(document.documentElement);
+}
+function getInstanceThemeElements(adaptableId) {
+    const instance = getRegistration(adaptableId)?.instance;
+    if (!instance) {
+        return [];
+    }
+    const elements = [
+        instance.getAdaptableContainerElement(),
+        instance.getAgGridContainerElement(),
+    ].filter((el) => el instanceof HTMLElement);
+    return [...new Set(elements)];
+}
+const originalAgGridThemes = new Map();
+function applyAgGridPreviewTheme(adaptableId, variant) {
+    const instance = getRegistration(adaptableId)?.instance;
+    const gridApi = instance?.agGridAdapter.getAgGridApi();
+    if (!instance || instance.isDestroyed || !gridApi || gridApi.isDestroyed()) {
+        return;
+    }
+    if (instance.agGridThemeAdapter.getAgGridThemeMode() === 'legacy') {
+        return;
+    }
+    if (!originalAgGridThemes.has(adaptableId)) {
+        originalAgGridThemes.set(adaptableId, gridApi.getGridOption('theme'));
+    }
+    const original = originalAgGridThemes.get(adaptableId);
+    const base = original && original !== 'legacy' && typeof original.withPart === 'function'
+        ? original
+        : themeQuartz;
+    gridApi.setGridOption('theme', base.withPart(variant === 'dark' ? colorSchemeDark : colorSchemeLight));
+}
+function syncAgGridPreviewThemes(activeId, variant) {
+    applyAgGridPreviewTheme(activeId, variant);
+}
+function applyThemeVars(el, payload) {
+    clearInlineAbVars(el);
     for (const [name, value] of Object.entries(payload.light)) {
         if (value != null && value !== '') {
-            style.setProperty(name, String(value));
+            el.style.setProperty(name, String(value));
         }
     }
     if (payload.variant === 'dark') {
         for (const [name, value] of Object.entries(payload.dark)) {
             if (value != null && value !== '') {
-                style.setProperty(name, String(value));
+                el.style.setProperty(name, String(value));
             }
         }
+        el.classList.add('ab--theme-dark');
     }
+    else if (el.getAttribute(THEME_PREVIEW_ATTR) === 'dark') {
+        el.classList.remove('ab--theme-dark');
+    }
+    el.setAttribute(THEME_PREVIEW_ATTR, payload.variant);
+    installLiveAliases(el, payload.variant);
 }
 function handleThemeVarChangeMessage(payload) {
-    const { name, value } = payload ?? {};
-    if (!name) {
+    const { name, value, adaptableId } = payload ?? {};
+    if (!name || !adaptableId) {
         return;
     }
-    document.documentElement.style.setProperty(name, String(value ?? ''));
+    const targets = getInstanceThemeElements(adaptableId);
+    if (targets.length === 0) {
+        console.warn(`Adaptable DevTools: no theme container for "${adaptableId}"`);
+        return;
+    }
+    const variant = payload.variant === 'dark' ? 'dark' : 'light';
+    clearDocumentThemePreview();
+    for (const el of targets) {
+        if (!el.hasAttribute(THEME_PREVIEW_ATTR)) {
+            el.setAttribute(THEME_PREVIEW_ATTR, variant);
+        }
+        installLiveAliases(el, variant);
+        el.style.setProperty(name, String(value ?? ''));
+    }
 }
 function handleApplyThemeMessage(payload) {
     if (!payload || (payload.variant !== 'light' && payload.variant !== 'dark')) {
         return;
     }
-    applyThemeToDocumentElement(payload);
+    const { adaptableId } = payload;
+    if (!adaptableId) {
+        console.warn('Adaptable DevTools: apply-theme message missing adaptableId');
+        return;
+    }
+    const targets = getInstanceThemeElements(adaptableId);
+    if (targets.length === 0) {
+        console.warn(`Adaptable DevTools: no theme container for "${adaptableId}"`);
+        return;
+    }
+    clearDocumentThemePreview();
+    for (const el of targets) {
+        applyThemeVars(el, payload);
+    }
+    syncAgGridPreviewThemes(adaptableId, payload.variant);
 }
 function handleLoadVariantMessage(payload) {
     const { adaptableId, variant } = payload ?? {};

package/src/types.d.ts

@@ -49,7 +49,7 @@ export type { BaseState } from './AdaptableState/BaseState';
 export type { AdaptableNote, NoteState, AdaptableNotes } from './AdaptableState/NoteState';
 export type { TeamSharingOptions, SharedEntitiesContext, } from './AdaptableOptions/TeamSharingOptions';
 export type { ToolPanelOptions, CustomToolPanel, ToolPanelButtonContext, CustomToolPanelButtonContext, } from './AdaptableOptions/ToolPanelOptions';
-export type { UserInterfaceOptions, LoadingScreenOptions, ObjectTagsContext, CustomIcon, } from './AdaptableOptions/UserInterfaceOptions';
+export type { UserInterfaceOptions, LoadingScreenOptions, ColourPickerOptions, ColourPickerTab, ColourPickerColour, ColourPickerFilterContext, ColourPickerFilterResult, ObjectTagsContext, CustomIcon, } from './AdaptableOptions/UserInterfaceOptions';
 export type { ContextMenuOptions, AdaptableSystemContextMenuItem, CustomContextMenuContext, CustomContextMenuItem, UserContextMenuItem, AgGridContextMenuItemType, DefaultAdaptableMenuStructure, DefaultAgGridMenuStructure, CustomGroupContextMenuItem, } from './AdaptableOptions/ContextMenuOptions';
 export type { ColumnMenuOptions, CustomColumnMenuContext, CustomColumnMenuItem, UserColumnMenuItem, AdaptableSystemColumnMenuItem, AgGridColumnMenuItemType, CustomGroupColumnMenuItem, } from './AdaptableOptions/ColumnMenuOptions';
 export type { CustomSettingsPanel, SettingsPanelOptions, SettingsPanelDisplayOptions, SettingsPanelNavigation, SettingsPanelNavigationGroup, SettingsPanelNavigationContext, SettingsPanelNavigationConfigurer, LegacyFlatSettingsPanelNavigation, PopupType, } from './AdaptableOptions/SettingsPanelOptions';