@adaptabletools/adaptable 21.2.1 → 22.0.0-canary.0

package/src/devTools/index.d.ts

@@ -22,75 +22,75 @@ export declare class DevToolsMarker implements PerfMarker {
     private stopped;
     private constructor();
     start: (startDetails?: {
-        details?: DevToolsMarkerDetails['details'];
+        details?: DevToolsMarkerDetails["details"];
     }) => this;
     get startTimestamp(): number;
     get track(): {
         readonly Init: {
-            start: DevToolsMarker['start'];
+            start: DevToolsMarker["start"];
             end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
                 label: "Init" | "InitStore" | "LoadStore" | "InitAGGrid";
             }) => DevToolsMarker;
             label: {
                 readonly Init: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
                 readonly InitStore: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
                 readonly LoadStore: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
                 readonly InitAGGrid: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
             };
         };
         readonly LayoutManager: {
-            start: DevToolsMarker['start'];
+            start: DevToolsMarker["start"];
             end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
                 label: "SetLayout" | "ApplyPivotLayout" | "ApplyTableLayout";
             }) => DevToolsMarker;
             label: {
                 readonly SetLayout: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
                 readonly ApplyPivotLayout: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
                 readonly ApplyTableLayout: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
             };
         };
         readonly Runtime: {
-            start: DevToolsMarker['start'];
+            start: DevToolsMarker["start"];
             end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
                 label: "SetLayout";
             }) => DevToolsMarker;
             label: {
                 readonly SetLayout: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
             };
         };
         readonly Redux: {
-            start: DevToolsMarker['start'];
+            start: DevToolsMarker["start"];
             end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
                 label: "Action";
             }) => DevToolsMarker;
             label: {
                 readonly Action: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
             };
         };

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: 1768226502639 || Date.now(),
-    VERSION: "21.2.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1768988317720 || Date.now(),
+    VERSION: "22.0.0-canary.0" || '--current-version--',
 };

package/src/layout-manager/src/LMEmitter.d.ts

@@ -4,6 +4,7 @@ import { LMLogger } from './LMLogger';
 type LMEmitterEventTypes = {
     gridLayoutChanged: (layout: TableLayoutModel | PivotLayoutModel) => void;
     columnDefsChanged: (colDefs: GridOptions['columnDefs']) => void;
+    rowModelUpdated: () => void;
 };
 export declare class LMEmitter extends LMLogger {
     protected destroyed: boolean;

package/src/layout-manager/src/LMEmitter.js

@@ -13,6 +13,7 @@ export class LMEmitter extends LMLogger {
         this.eventSets = {
             gridLayoutChanged: new Set(),
             columnDefsChanged: new Set(),
+            rowModelUpdated: new Set(),
         };
     }
     on(event, callback) {

package/src/layout-manager/src/index.d.ts

@@ -87,6 +87,12 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     applyPivotTotals(layout: PivotLayoutModel): void;
     applyColumnGroupCollapseExpandState(layout: PivotLayoutModel | TableLayoutModel): void;
     private withSuppressColumnAnimation;
+    private withSuppressRowAnimation;
+    /**
+     * Refreshes the sort order by refreshing the client side row model.
+     * This is useful when custom sort comparers are defined and the sort needs to be re-applied after filtering.
+     */
+    refreshSort(): void;
     private patchColDefType;
     private setupPivotTotals;
     private patchPivotAggregationTotal;

package/src/layout-manager/src/index.js

@@ -172,13 +172,13 @@ export class LayoutManager extends LMEmitter {
                 const gridLayout = this.getLayoutModelFromGrid();
                 // but if we do have a current layout set
                 // then only emit the event if the layout has changed
-                if (isGridLayoutSame({
+                if (!isGridLayoutSame({
                     layoutFromGrid: gridLayout,
                     layoutFromModel: this.currentLayout,
                 })) {
+                    this.onGridLayoutChanged(gridLayout);
                     return;
                 }
-                this.onGridLayoutChanged(gridLayout);
             }
         };
         this.columnDefsChanged = (colDefs) => {
@@ -1630,6 +1630,26 @@ export class LayoutManager extends LMEmitter {
         }
         return res;
     }
+    withSuppressRowAnimation(fn) {
+        const animateRows = this.gridApi.getGridOption('animateRows');
+        if (animateRows) {
+            this.gridApi.setGridOption('animateRows', false);
+        }
+        const res = fn();
+        if (animateRows) {
+            this.gridApi.setGridOption('animateRows', true);
+        }
+        return res;
+    }
+    /**
+     * Refreshes the sort order by refreshing the client side row model.
+     * This is useful when custom sort comparers are defined and the sort needs to be re-applied after filtering.
+     */
+    refreshSort() {
+        this.withSuppressRowAnimation(() => {
+            this.gridApi.refreshClientSideRowModel('sort');
+        });
+    }
     patchColDefType(colDef, colTypes) {
         const originalTypes = colDef.type == undefined ? [] : Array.isArray(colDef.type) ? colDef.type : [colDef.type];
         const columnTypes = new Set(originalTypes);

package/src/migration/VersionUpgrade20.js

@@ -220,16 +220,17 @@ export class VersionUpgrade20 extends VersionUpgrade {
                     styledColumn.SparklineStyle?.options?.axis?.type == undefined) {
                     styledColumn.SparklineStyle.options.axis.type = 'category';
                 }
-                if (styledColumn.SparklineStyle?.options?.highlightStyle) {
+                const obsoleteHighlightStyle = styledColumn.SparklineStyle?.options
+                    ?.highlightStyle;
+                if (obsoleteHighlightStyle) {
                     const obsoleteKeys = ['fill', 'stroke', 'strokeWidth'];
                     obsoleteKeys.forEach((obsoleteKey) => {
                         if (
                         // @ts-ignore
-                        styledColumn.SparklineStyle?.options?.highlightStyle?.[obsoleteKey] != undefined) {
-                            const itemHighlightStyle = styledColumn.SparklineStyle.options.highlightStyle.item ?? {};
+                        obsoleteHighlightStyle?.[obsoleteKey] != undefined) {
+                            const itemHighlightStyle = obsoleteHighlightStyle.item ?? {};
                             // @ts-ignore
-                            itemHighlightStyle[obsoleteKey] = styledColumn.SparklineStyle?.options
-                                ?.highlightStyle?.[obsoleteKey];
+                            itemHighlightStyle[obsoleteKey] = obsoleteHighlightStyle?.[obsoleteKey];
                             // @ts-ignore
                             delete styledColumn.SparklineStyle.options.highlightStyle[obsoleteKey];
                         }

package/src/twMerge.d.ts

@@ -0,0 +1 @@
+export declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;

package/src/twMerge.js

@@ -0,0 +1,11 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+export const twMerge = extendTailwindMerge({
+    prefix: 'twa',
+    extend: {
+        theme: {
+            // ↓ `text` is the key of the namespace `--text-*`
+            text: ['0', '1', '2', '3', '4', '5', '6', '7'],
+            radius: ['none', 'standard', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', 'full'],
+        },
+    },
+});

package/themes/dark.css

@@ -1,22 +1,48 @@
 .ab--theme-dark {
-  font-family: Helvetica, Arial, sans-serif;
   --ab-theme-loaded: dark;
-  --ab-cmp-input--disabled__background: #232323;
+
+  --ab-cmp-input--disabled__background: #232323; /* #b6b7b8 */
+
   --ab-color-defaultbackground: #3e444c;
   --ab-color-text-on-defaultbackground: #e2e2e2;
+
   --ab-color-primary: #262d2f;
-  --ab-color-primarylight: #2d3537;
+  --ab-color-primarylight: #3d3e3f;
   --ab-color-primarydark: #1c2021;
-  --ab-color-text-on-primary: #e2e2e2;
+  --ab-color-text-on-primary: #e2e2e2; /* F2F2F2 */
+
+  --ab-color-shadow: rgb(255 255 255 / 0.45);
+  --ab-cmp-modal-backdrop__background: rgba(255, 255, 255, 0.2);
+
   --ab-dashboard__border: #555;
   --ab-cmp-dropdownbutton-list-separator__border: 1px solid #555;
+
   --ab-gridheader--filtered__background: var(--ab-color-defaultbackground);
+
   --ab-cmp-checkbox__border-color: var(--ab-color-text-on-primary);
   --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);
+
+  input[type='number'].ab-Input::-webkit-outer-spin-button,
+  input[type='number'].ab-Input::-webkit-inner-spin-button {
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>')
+      no-repeat center center;
+  }
 }
-.ab--theme-dark input[type=number].ab-Input::-webkit-outer-spin-button,
-.ab--theme-dark input[type=number].ab-Input::-webkit-inner-spin-button {
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>') no-repeat center center;
-}
 
-/*# sourceMappingURL=dark.css.map */
+/*
+The following are only redefined here so that the DARK theme in Storybook
+can be previewed correctly as that relies on an element (not the document element)
+to have the class ab--theme-dark.
+
+For our production release those are not needed and could be removed
+as our dark theme is anyways applied on the document element.
+
+*/
+.ab--theme-dark {
+  --ab-color-inputcolor: var(--ab-color-text-on-primary);
+  --ab-cmp-input__color: var(--ab-color-inputcolor);
+  --ab-cmp-input__background: var(--ab-color-defaultbackground);
+  --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
+  --ab-cmp-field-wrap__background: var(--ab-color-defaultbackground);
+  --ab-cmp-simple-button--outlined__background: var(--ab-color-defaultbackground);
+}

package/themes/light.css

@@ -1,5 +1,3 @@
 html.ab--theme-light {
   --ab-theme-loaded: light;
 }
-
-/*# sourceMappingURL=light.css.map */