@adaptabletools/adaptable 24.0.0 → 24.0.2

package/devtools.d.ts

@@ -255,6 +255,18 @@ export type DevToolsMountPayload = {
     primaryKey?: string;
     /** Grouped modules visible in the Settings Panel sidebar for this instance. */
     settingsPanelNavigation?: DevToolsSettingsPanelNavigationGroup[];
+    appThemeVars?: DevToolsThemeVars;
+    themeVariant?: DevToolsThemeVariant;
+};
+/** Whether the current AdapTable theme is light or dark. */
+export type DevToolsThemeVariant = 'light' | 'dark';
+/**
+ * Computed `--ab-*` values of the page for the light and the dark theme: the AdapTable
+ * defaults with every app override applied.
+ */
+export type DevToolsThemeVars = {
+    light: Record<string, string>;
+    dark: Record<string, string>;
 };
 export type DevToolsHostPageLogMessage = {
     type: Extract<DevToolsHostPageMessageType, 'log'>;
@@ -294,6 +306,7 @@ export type DevToolsHostPageMessage = {
         userName?: string;
         primaryKey?: string;
         settingsPanelNavigation?: DevToolsSettingsPanelNavigationGroup[];
+        themeVariant?: DevToolsThemeVariant;
     };
 } | {
     type: Extract<DevToolsHostPageMessageType, 'column-info'>;

package/index.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer adaptable.reset, adaptable.components, adaptable.utilities, adaptable.theming;
 @property --tw-animation-delay {
@@ -2438,7 +2438,7 @@
   }
   .twa\:tabular-nums {
     --tw-numeric-spacing: tabular-nums;
-    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
   }
   .twa\:underline-offset-4 {
     text-underline-offset: 4px;
@@ -2489,19 +2489,19 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:ring-0 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:ring-1 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:ring-2 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:ring-3 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:ring-accent {
@@ -2531,7 +2531,7 @@
   }
   .twa\:ring-offset-1 {
     --tw-ring-offset-width: 1px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
   .twa\:ring-offset-background {
     --tw-ring-offset-color: var(--ab-color-background);
@@ -2556,7 +2556,7 @@
   .twa\:drop-shadow-\[0_0_1px_rgba\(0\,0\,0\,0\.9\)\] {
     --tw-drop-shadow-size: drop-shadow(0 0 1px var(--tw-drop-shadow-color, rgba(0,0,0,0.9)));
     --tw-drop-shadow: var(--tw-drop-shadow-size);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
   .twa\:transition-\(--ab-cmp-simple-button__transition\) {
     transition-property: var(--ab-cmp-simple-button__transition);
@@ -2699,103 +2699,103 @@
   .twa\:not-focus-within\:\[--ab-focus__box-shadow\:none\]:not(:focus-within) {
     --ab-focus__box-shadow: none;
   }
-  .twa\:group-focus-within\:shadow-\(--ab-focus__box-shadow\):is(:where(.twa\:group):focus-within *) {
+  :is(:where(.twa\:group):focus-within .twa\:group-focus-within\:shadow-\(--ab-focus__box-shadow\)) {
     --tw-shadow: var(--ab-focus__box-shadow);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .twa\:group-focus\/dropdown-menu-item\:text-accent-foreground:is(:where(.twa\:group\/dropdown-menu-item):focus *) {
+  :is(:where(.twa\:group\/dropdown-menu-item):focus .twa\:group-focus\/dropdown-menu-item\:text-accent-foreground) {
     color: var(--ab-color-accent-foreground);
   }
-  .twa\:group-has-data-\[slot\=combobox-clear\]\/input-group\:hidden:is(:where(.twa\:group\/input-group):has([data-slot="combobox-clear"]) *) {
+  :is(:where(.twa\:group\/input-group):has([data-slot="combobox-clear"]) .twa\:group-has-data-\[slot\=combobox-clear\]\/input-group\:hidden) {
     display: none;
   }
-  .twa\:group-has-\[\>input\]\/input-group\:pt-2:is(:where(.twa\:group\/input-group):has( > input) *) {
+  :is(:where(.twa\:group\/input-group):has( > input) .twa\:group-has-\[\>input\]\/input-group\:pt-2) {
     padding-top: calc(var(--ab-base-space) * 2);
   }
-  .twa\:group-has-\[\>input\]\/input-group\:pb-2:is(:where(.twa\:group\/input-group):has( > input) *) {
+  :is(:where(.twa\:group\/input-group):has( > input) .twa\:group-has-\[\>input\]\/input-group\:pb-2) {
     padding-bottom: calc(var(--ab-base-space) * 2);
   }
-  .twa\:group-data-empty\/combobox-content\:flex:is(:where(.twa\:group\/combobox-content)[data-empty] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-empty] .twa\:group-data-empty\/combobox-content\:flex) {
     display: flex;
   }
-  .twa\:group-data-resizable\/combobox-content\:flex:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:flex) {
     display: flex;
   }
-  .twa\:group-data-resizable\/combobox-content\:h-auto:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:h-auto) {
     height: auto;
   }
-  .twa\:group-data-resizable\/combobox-content\:max-h-none:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:max-h-none) {
     max-height: none;
   }
-  .twa\:group-data-resizable\/combobox-content\:min-h-0:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:min-h-0) {
     min-height: 0px;
   }
-  .twa\:group-data-resizable\/combobox-content\:flex-1:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:flex-1) {
     flex: 1;
   }
-  .twa\:group-data-resizable\/combobox-content\:flex-col:is(:where(.twa\:group\/combobox-content)[data-resizable] *) {
+  :is(:where(.twa\:group\/combobox-content)[data-resizable] .twa\:group-data-resizable\/combobox-content\:flex-col) {
     flex-direction: column;
   }
-  .twa\:group-data-vertical\/tabs\:w-full:is(:where(.twa\:group\/tabs)[data-vertical] *) {
+  :is(:where(.twa\:group\/tabs)[data-vertical] .twa\:group-data-vertical\/tabs\:w-full) {
     width: 100%;
   }
-  .twa\:group-data-vertical\/tabs\:justify-start:is(:where(.twa\:group\/tabs)[data-vertical] *) {
+  :is(:where(.twa\:group\/tabs)[data-vertical] .twa\:group-data-vertical\/tabs\:justify-start) {
     justify-content: flex-start;
   }
-  .twa\:group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.twa\:group\/input-group)[data-disabled="true"] *) {
+  :is(:where(.twa\:group\/input-group)[data-disabled="true"] .twa\:group-data-\[disabled\=true\]\/input-group\:opacity-50) {
     opacity: 50%;
   }
-  .twa\:group-data-\[focused\=true\]\/day\:relative:is(:where(.twa\:group\/day)[data-focused="true"] *) {
+  :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:relative) {
     position: relative;
   }
-  .twa\:group-data-\[focused\=true\]\/day\:z-10:is(:where(.twa\:group\/day)[data-focused="true"] *) {
+  :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:z-10) {
     z-index: 10;
   }
-  .twa\:group-data-\[focused\=true\]\/day\:border-ring:is(:where(.twa\:group\/day)[data-focused="true"] *) {
+  :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:border-ring) {
     border-color: var(--ab-color-ring);
   }
-  .twa\:group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.twa\:group\/day)[data-focused="true"] *) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:ring-\[3px\]) {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .twa\:group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.twa\:group\/day)[data-focused="true"] *) {
+  :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:ring-ring\/50) {
     --tw-ring-color: var(--ab-color-ring);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    .twa\:group-data-\[focused\=true\]\/day\:ring-ring\/50:is(:where(.twa\:group\/day)[data-focused="true"] *) {
+    :is(:where(.twa\:group\/day)[data-focused="true"] .twa\:group-data-\[focused\=true\]\/day\:ring-ring\/50) {
       --tw-ring-color: color-mix(in oklab, var(--ab-color-ring) 50%, transparent);
     }
   }
-  .twa\:group-data-\[orientation\=horizontal\]\/tabs\:h-input:is(:where(.twa\:group\/tabs)[data-orientation="horizontal"] *) {
+  :is(:where(.twa\:group\/tabs)[data-orientation="horizontal"] .twa\:group-data-\[orientation\=horizontal\]\/tabs\:h-input) {
     height: var(--ab-input-height);
   }
-  .twa\:group-data-\[orientation\=vertical\]\/tabs\:h-fit:is(:where(.twa\:group\/tabs)[data-orientation="vertical"] *) {
+  :is(:where(.twa\:group\/tabs)[data-orientation="vertical"] .twa\:group-data-\[orientation\=vertical\]\/tabs\:h-fit) {
     height: fit-content;
   }
-  .twa\:group-data-\[orientation\=vertical\]\/tabs\:flex-col:is(:where(.twa\:group\/tabs)[data-orientation="vertical"] *) {
+  :is(:where(.twa\:group\/tabs)[data-orientation="vertical"] .twa\:group-data-\[orientation\=vertical\]\/tabs\:flex-col) {
     flex-direction: column;
   }
-  .twa\:group-data-\[size\=sm\]\/alert-dialog-content\:grid:is(:where(.twa\:group\/alert-dialog-content)[data-size="sm"] *) {
+  :is(:where(.twa\:group\/alert-dialog-content)[data-size="sm"] .twa\:group-data-\[size\=sm\]\/alert-dialog-content\:grid) {
     display: grid;
   }
-  .twa\:group-data-\[size\=sm\]\/alert-dialog-content\:grid-cols-2:is(:where(.twa\:group\/alert-dialog-content)[data-size="sm"] *) {
+  :is(:where(.twa\:group\/alert-dialog-content)[data-size="sm"] .twa\:group-data-\[size\=sm\]\/alert-dialog-content\:grid-cols-2) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  .twa\:group-data-\[variant\=line\]\/tabs-list\:bg-transparent:is(:where(.twa\:group\/tabs-list)[data-variant="line"] *) {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="line"] .twa\:group-data-\[variant\=line\]\/tabs-list\:bg-transparent) {
     background-color: transparent;
   }
-  .twa\:peer-focus-visible\:border-ring:is(:where(.twa\:peer):focus-visible ~ *) {
+  :is(:where(.twa\:peer):focus-visible ~ .twa\:peer-focus-visible\:border-ring) {
     border-color: var(--ab-color-ring);
   }
-  .twa\:peer-focus-visible\:ring-3:is(:where(.twa\:peer):focus-visible ~ *) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  :is(:where(.twa\:peer):focus-visible ~ .twa\:peer-focus-visible\:ring-3) {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .twa\:peer-focus-visible\:ring-ring\/50:is(:where(.twa\:peer):focus-visible ~ *) {
+  :is(:where(.twa\:peer):focus-visible ~ .twa\:peer-focus-visible\:ring-ring\/50) {
     --tw-ring-color: var(--ab-color-ring);
   }
   @supports (color: color-mix(in lab, red, red)) {
-    .twa\:peer-focus-visible\:ring-ring\/50:is(:where(.twa\:peer):focus-visible ~ *) {
+    :is(:where(.twa\:peer):focus-visible ~ .twa\:peer-focus-visible\:ring-ring\/50) {
       --tw-ring-color: color-mix(in oklab, var(--ab-color-ring) 50%, transparent);
     }
   }
@@ -3043,27 +3043,27 @@
     --tw-content: "";
     content: var(--tw-content);
   }
-  .twa\:group-data-horizontal\/tabs\:after\:inset-x-0:is(:where(.twa\:group\/tabs)[data-horizontal] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-horizontal] .twa\:group-data-horizontal\/tabs\:after\:inset-x-0)::after {
     content: var(--tw-content);
     inset-inline: 0px;
   }
-  .twa\:group-data-horizontal\/tabs\:after\:bottom-\[-5px\]:is(:where(.twa\:group\/tabs)[data-horizontal] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-horizontal] .twa\:group-data-horizontal\/tabs\:after\:bottom-\[-5px\])::after {
     content: var(--tw-content);
     bottom: -5px;
   }
-  .twa\:group-data-horizontal\/tabs\:after\:h-0\.5:is(:where(.twa\:group\/tabs)[data-horizontal] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-horizontal] .twa\:group-data-horizontal\/tabs\:after\:h-0\.5)::after {
     content: var(--tw-content);
     height: calc(var(--ab-base-space) * 0.5);
   }
-  .twa\:group-data-vertical\/tabs\:after\:inset-y-0:is(:where(.twa\:group\/tabs)[data-vertical] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-vertical] .twa\:group-data-vertical\/tabs\:after\:inset-y-0)::after {
     content: var(--tw-content);
     inset-block: 0px;
   }
-  .twa\:group-data-vertical\/tabs\:after\:-right-1:is(:where(.twa\:group\/tabs)[data-vertical] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-vertical] .twa\:group-data-vertical\/tabs\:after\:-right-1)::after {
     content: var(--tw-content);
     right: calc(var(--ab-base-space) * -1);
   }
-  .twa\:group-data-vertical\/tabs\:after\:w-0\.5:is(:where(.twa\:group\/tabs)[data-vertical] *)::after {
+  :is(:where(.twa\:group\/tabs)[data-vertical] .twa\:group-data-vertical\/tabs\:after\:w-0\.5)::after {
     content: var(--tw-content);
     width: calc(var(--ab-base-space) * 0.5);
   }
@@ -3082,7 +3082,7 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-within\:ring-3:focus-within {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-within\:ring-ring\/50:focus-within {
@@ -3115,7 +3115,7 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   :is(.twa\:\*\:focus-within\:ring-3 > *):focus-within {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   :is(.twa\:\*\:focus-within\:ring-ring\/50 > *):focus-within {
@@ -3244,7 +3244,7 @@
       opacity: 100%;
     }
     .twa\:hover\:ring-2:hover {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     .twa\:hover\:ring-ring\/40:hover {
@@ -3282,7 +3282,7 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus\:ring-3:focus {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus\:ring-ring\/50:focus {
@@ -3329,23 +3329,23 @@
     border-color: var(--ab-color-ring);
   }
   .twa\:focus-visible\:ring-0:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-visible\:ring-1:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-visible\:ring-2:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-visible\:ring-3:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-visible\:ring-\[3px\]:focus-visible {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:focus-visible\:ring-accent:focus-visible {
@@ -3372,7 +3372,7 @@
   }
   .twa\:focus-visible\:ring-offset-1:focus-visible {
     --tw-ring-offset-width: 1px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
   .twa\:focus-visible\:outline-hidden:focus-visible {
     --tw-outline-style: none;
@@ -3425,7 +3425,7 @@
     border-color: inherit;
   }
   :where([data-slot="combobox-content"]) .twa\:in-data-\[slot\=combobox-content\]\:focus-within\:ring-0:focus-within {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   :where([data-slot="popover-content"]) .twa\:in-data-\[slot\=popover-content\]\:bg-transparent {
@@ -3444,7 +3444,7 @@
     border-color: var(--ab-color-destructive);
   }
   .twa\:has-aria-invalid\:ring-3:has([aria-invalid="true"]) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:has-aria-invalid\:ring-destructive\/20:has([aria-invalid="true"]) {
@@ -3498,7 +3498,7 @@
     border-color: var(--ab-color-ring);
   }
   .twa\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-3:has(:is([data-slot=input-group-control]:focus-visible)) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has(:is([data-slot=input-group-control]:focus-visible)) {
@@ -3513,7 +3513,7 @@
     border-color: var(--ab-color-destructive);
   }
   .twa\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-3:has(:is([data-slot][aria-invalid=true])) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has(:is([data-slot][aria-invalid=true])) {
@@ -3576,11 +3576,11 @@
     border-color: var(--ab-color-destructive);
   }
   .twa\:aria-invalid\:ring-0[aria-invalid="true"] {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:aria-invalid\:ring-3[aria-invalid="true"] {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .twa\:aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
@@ -3642,21 +3642,21 @@
   .twa\:data-active\:text-accent-foreground[data-active] {
     color: var(--ab-color-accent-foreground);
   }
-  .twa\:group-data-\[variant\=default\]\/tabs-list\:data-active\:shadow-sm:is(:where(.twa\:group\/tabs-list)[data-variant="default"] *)[data-active] {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="default"] .twa\:group-data-\[variant\=default\]\/tabs-list\:data-active\:shadow-sm)[data-active] {
     --tw-shadow: var(--ab-shadow-sm);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:border-transparent:is(:where(.twa\:group\/tabs-list)[data-variant="line"] *)[data-active] {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="line"] .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:border-transparent)[data-active] {
     border-color: transparent;
   }
-  .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(:where(.twa\:group\/tabs-list)[data-variant="line"] *)[data-active] {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="line"] .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent)[data-active] {
     background-color: transparent;
   }
-  .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:shadow-none:is(:where(.twa\:group\/tabs-list)[data-variant="line"] *)[data-active] {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="line"] .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:shadow-none)[data-active] {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:after\:opacity-100:is(:where(.twa\:group\/tabs-list)[data-variant="line"] *)[data-active]::after {
+  :is(:where(.twa\:group\/tabs-list)[data-variant="line"] .twa\:group-data-\[variant\=line\]\/tabs-list\:data-active\:after\:opacity-100)[data-active]::after {
     content: var(--tw-content);
     opacity: 100%;
   }
@@ -3942,8 +3942,8 @@
   @supports (backdrop-filter: var(--tw)) {
     .twa\:supports-backdrop-filter\:backdrop-blur-xs {
       --tw-backdrop-blur: blur(var(--twa-blur-xs));
-      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+      backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
     }
   }
   @media (width >= 40rem) {
@@ -3956,19 +3956,19 @@
     .twa\:sm\:justify-end {
       justify-content: flex-end;
     }
-    .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:row-span-2:is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] *) {
+    :is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:row-span-2) {
       grid-row: span 2 / span 2;
     }
-    .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:place-items-start:is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] *) {
+    :is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:place-items-start) {
       place-items: start;
     }
-    .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:text-left:is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] *) {
+    :is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:text-left) {
       text-align: left;
     }
-    .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:group-has-data-\[slot\=alert-dialog-media\]\/alert-dialog-content\:col-start-2:is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] *):is(:where(.twa\:group\/alert-dialog-content):has([data-slot="alert-dialog-media"]) *) {
+    :is(:where(.twa\:group\/alert-dialog-content):has([data-slot="alert-dialog-media"]) :is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:group-has-data-\[slot\=alert-dialog-media\]\/alert-dialog-content\:col-start-2)) {
       grid-column-start: 2;
     }
-    .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_1fr\]:is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] *):has([data-slot="alert-dialog-media"]) {
+    :is(:where(.twa\:group\/alert-dialog-content)[data-size="default"] .twa\:sm\:group-data-\[size\=default\]\/alert-dialog-content\:has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_1fr\]):has([data-slot="alert-dialog-media"]) {
       grid-template-rows: auto 1fr;
     }
     .twa\:data-\[size\=default\]\:sm\:max-w-lg[data-size="default"] {
@@ -10628,7 +10628,7 @@
   }
 }
 @layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-animation-delay: 0s;
       --tw-animation-direction: normal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "24.0.0",
+  "version": "24.0.2",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/Api/Internal/FormatColumnInternalApi.d.ts

@@ -118,8 +118,9 @@ export declare class FormatColumnInternalApi extends ApiBase {
     getFormatColumnsWithExpression(): FormatColumn[];
     getFormatColumnsDependentOnColumns(columnSet: Set<string>): FormatColumn[];
     /**
-     * Retrieves the columns that need rerendering based on format column predicates.
+     * Retrieves the columns that need rerendering based on format column predicates,
+     * for a batch of changed columns.
      */
-    getFormatColumnColumnsDependentOnColumnChange(column: AdaptableColumn): string[];
+    getFormatColumnColumnsDependentOnColumnChanges(columns: AdaptableColumn[]): string[];
     formatColumnHeaderName(headerName: string, params: HeaderValueGetterParams): string;
 }

package/src/Api/Internal/FormatColumnInternalApi.js

@@ -232,14 +232,22 @@ export class FormatColumnInternalApi extends ApiBase {
             .getColumnsFromExpression(fc.Rule)
             .some((columnId) => columnSet.has(columnId)));
     }
-    getFormatColumnColumnsDependentOnColumnChange(column) {
+    getFormatColumnColumnsDependentOnColumnChanges(columns) {
         const impactedColumnIds = new Set();
-        impactedColumnIds.add(column.columnId);
-        this.getCalculatedColumnApi()
-            .internalApi.getCalculatedColumnsDependentOnColumn(column)
-            .forEach((calculatedColumnId) => {
-            impactedColumnIds.add(calculatedColumnId);
-        });
+        const visitedColumnIds = new Set();
+        const calculatedColumnInternalApi = this.getCalculatedColumnApi().internalApi;
+        for (const column of columns) {
+            if (visitedColumnIds.has(column.columnId)) {
+                continue;
+            }
+            visitedColumnIds.add(column.columnId);
+            impactedColumnIds.add(column.columnId);
+            calculatedColumnInternalApi
+                .getCalculatedColumnsDependentOnColumn(column)
+                .forEach((calculatedColumnId) => {
+                impactedColumnIds.add(calculatedColumnId);
+            });
+        }
         const columnsThatNeedRefresh = new Set();
         this.getFormatColumnsDependentOnColumns(impactedColumnIds).forEach((formatColumn) => {
             this.getAdaptableApi()

package/src/Utilities/Services/QueryLanguageService.js

@@ -11,7 +11,7 @@ import { PROTECTED_CORE_EXPRESSION_FUNCTIONS } from '../../aql/resolveCustomExpr
 import { resolveCustomExpressionFunctions } from '../../aql/resolveCustomExpressionFunctions';
 import { getTypedKeys } from '../Extensions/TypeExtensions';
 const VALID = { isValid: true, errorMessage: '' };
-const ROW_EVALUATOR_CACHE_SIZE = 64;
+const ROW_EVALUATOR_CACHE_SIZE = 150;
 const CANONICAL_TEXT_CACHE_SIZE = 1024;
 const DEFAULT_MAX_WINDOW_MS = 28_800_000;
 const DEFAULT_MAX_HISTORY_PER_CELL = 1000;

package/src/agGrid/AdaptableAgGrid.js

@@ -3995,7 +3995,7 @@ export class AdaptableAgGrid {
             allRowsColumnIds: new Set(),
         };
         const isVisible = this.agGridAdapter.isVisibleNode(rowNode);
-        if (isVisible) {
+        if (isVisible && cellDataChangedInfos.length > 0) {
             this.checkFormatColumnExpressionStyleChanges(scope, cellDataChangedInfos);
             if (!scope.wholeRow) {
                 this.checkFormatColumnPredicateStyleChanges(scope, cellDataChangedInfos);
@@ -4065,12 +4065,10 @@ export class AdaptableAgGrid {
         });
     }
     checkFormatColumnPredicateStyleChanges(dataChangedScope, cellDataChangedInfos) {
-        cellDataChangedInfos.forEach((cellDataChangeInfo) => {
-            const dependentColumns = this.api.formatColumnApi.internalApi.getFormatColumnColumnsDependentOnColumnChange(cellDataChangeInfo.column);
-            for (let colId of dependentColumns) {
-                dataChangedScope.columnIds.add(colId);
-            }
-        });
+        const dependentColumns = this.api.formatColumnApi.internalApi.getFormatColumnColumnsDependentOnColumnChanges(cellDataChangedInfos.map((cellDataChangeInfo) => cellDataChangeInfo.column));
+        for (const colId of dependentColumns) {
+            dataChangedScope.columnIds.add(colId);
+        }
     }
     checkFreeTextColumnChanges(dataChangedScope, cellDataChangedInfos) {
         cellDataChangedInfos.forEach((cellDataChangedInfo) => {
@@ -4087,34 +4085,27 @@ export class AdaptableAgGrid {
         });
     }
     checkFormatColumnExpressionStyleChanges(dataChangedScope, cellDataChangedInfos) {
-        const formatColumnsWithExpression = [];
-        formatColumnsWithExpression.push(...this.api.formatColumnApi.internalApi.getFormatColumnsWithExpression());
+        if (dataChangedScope.wholeRow) {
+            return;
+        }
+        const formatColumnsWithExpression = this.api.formatColumnApi.internalApi.getFormatColumnsWithExpression();
         if (ArrayExtensions.IsNullOrEmpty(formatColumnsWithExpression)) {
             return;
         }
-        cellDataChangedInfos.forEach((cellDataChangedInfo) => {
-            if (!dataChangedScope.wholeRow) {
-                formatColumnsWithExpression.forEach((formatColumn) => {
-                    if (!dataChangedScope.wholeRow) {
-                        const columnIds = this.api.expressionApi.getColumnsFromExpression(formatColumn.Rule);
-                        if (columnIds.includes(cellDataChangedInfo.column.columnId)) {
-                            if (this.api.columnScopeApi.scopeIsAll(formatColumn.Scope)) {
-                                dataChangedScope.wholeRow = true;
-                                return;
-                            }
-                            else {
-                                this.api.columnScopeApi
-                                    .getColumnsInScope(formatColumn.Scope)
-                                    .map((c) => c.columnId)
-                                    .forEach((colId) => {
-                                    dataChangedScope.columnIds.add(colId);
-                                });
-                            }
-                        }
-                    }
-                });
+        const changedColumnIds = new Set(cellDataChangedInfos.map((cellDataChangedInfo) => cellDataChangedInfo.column.columnId));
+        for (const formatColumn of formatColumnsWithExpression) {
+            const columnIds = this.api.expressionApi.getColumnsFromExpression(formatColumn.Rule);
+            if (!columnIds.some((columnId) => changedColumnIds.has(columnId))) {
+                continue;
             }
-        });
+            if (this.api.columnScopeApi.scopeIsAll(formatColumn.Scope)) {
+                dataChangedScope.wholeRow = true;
+                return;
+            }
+            this.api.columnScopeApi.getColumnsInScope(formatColumn.Scope).forEach((column) => {
+                dataChangedScope.columnIds.add(column.columnId);
+            });
+        }
     }
     checkIfChangedCellCurrentlySelected(cellDataChangedInfo) {
         let selectedCellInfo = this.api.gridApi.getSelectedCellInfo();

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1793356932854 || Date.now(),
-    VERSION: "24.0.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1793805399874 || Date.now(),
+    VERSION: "24.0.2" || '--current-version--',
 };