@adaptabletools/adaptable-cjs 21.2.2-canary.0 → 22.0.0-canary.0

package/src/components/Tree/TreeDropdown/index.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeDropdown = exports.toDisplayValueDefault = void 0;
+exports.toDisplayValueDefault = toDisplayValueDefault;
+exports.TreeDropdown = TreeDropdown;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const FieldWrap_1 = tslib_1.__importDefault(require("../../FieldWrap"));
 const TreeList_1 = require("../TreeList");
 const react_1 = require("react");
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../../OverlayTrigger"));
-const rebass_1 = require("rebass");
 const NotifyResize_1 = tslib_1.__importDefault(require("../../NotifyResize"));
 const Input_1 = tslib_1.__importDefault(require("../../Input"));
 const InfiniteTable_1 = require("../../InfiniteTable");
@@ -16,6 +16,7 @@ const CheckBox_1 = require("../../CheckBox");
 const useLatest_1 = require("../../utils/useLatest");
 const re_resizable_1 = require("re-resizable");
 const AdaptableComputedCSSVarsContext_1 = require("../../../View/AdaptableComputedCSSVarsContext");
+const Flex_1 = require("../../Flex");
 const resizableDirections = {
     right: true,
     bottom: true,
@@ -27,7 +28,6 @@ function toDisplayValueDefault(value) {
     }
     return value.map((v) => (Array.isArray(v) ? v.join('-') : v)).join(', ');
 }
-exports.toDisplayValueDefault = toDisplayValueDefault;
 const getLabelColumn = (field, { includeExpandCollapseButton }) => {
     return {
         field,
@@ -39,7 +39,7 @@ const getLabelColumn = (field, { includeExpandCollapseButton }) => {
             if (!rowInfo.isTreeNode) {
                 return null;
             }
-            return (React.createElement(CheckBox_1.CheckBox, { mx: 1, checked: rowInfo?.rowSelected, onChange: (checked) => {
+            return (React.createElement(CheckBox_1.CheckBox, { className: "twa:mx-1", checked: rowInfo?.rowSelected, onChange: (checked) => {
                     dataSourceApi.treeApi.setNodeSelection(rowInfo.nodePath, checked);
                     api.focus();
                 } }));
@@ -49,11 +49,11 @@ const getLabelColumn = (field, { includeExpandCollapseButton }) => {
             const allFirstLevelCollapsed = dataSourceApi
                 .getOriginalDataArray()
                 .every((item) => !treeApi.isNodeExpanded([item.id]));
-            return (React.createElement(rebass_1.Flex, { flexDirection: 'row', alignItems: 'center', width: '100%', onMouseDown: (e) => {
+            return (React.createElement(Flex_1.Flex, { flexDirection: 'row', alignItems: 'center', className: "twa:w-full", onMouseDown: (e) => {
                     // so we can keep the focus on the Grid
                     e.preventDefault();
                 } },
-                React.createElement(CheckBox_1.CheckBox, { checked: someRowsSelected && !allRowsSelected ? null : allRowsSelected, mr: 2, onChange: () => {
+                React.createElement(CheckBox_1.CheckBox, { checked: someRowsSelected && !allRowsSelected ? null : allRowsSelected, className: "twa:mr-2", onChange: () => {
                         if (allRowsSelected) {
                             dataSourceApi.treeApi.deselectAll();
                         }
@@ -62,7 +62,7 @@ const getLabelColumn = (field, { includeExpandCollapseButton }) => {
                         }
                         api.focus();
                     } }, allRowsSelected ? '(Deselect All)' : '(Select All)'),
-                React.createElement(rebass_1.Flex, { flex: 1 }),
+                React.createElement(Flex_1.Flex, { className: "twa:flex-1" }),
                 includeExpandCollapseButton ? (React.createElement(SimpleButton_1.default, { label: "toggle-expand-collapse", icon: allFirstLevelCollapsed ? 'expand-all' : 'collapse-all', onMouseDown: () => {
                         if (allFirstLevelCollapsed) {
                             dataSourceApi.treeApi.expandAll();
@@ -184,10 +184,7 @@ function TreeDropdown(props) {
         }
         return filterTreeNode(data);
     }, [nodeMatches]);
-    return (React.createElement(rebass_1.Flex, { flexDirection: 'row', className: "ab-TreeDropdown", style: {
-            width: '100%',
-            ...props.style,
-        }, onMouseDown: props.onMouseDown, onBlur: (e) => {
+    return (React.createElement(Flex_1.Flex, { flexDirection: 'row', className: "ab-TreeDropdown twa:w-full", style: props.style, onMouseDown: props.onMouseDown, onBlur: (e) => {
             const { relatedTarget } = e;
             const overlayDOMNode = overlayDOMRef.current;
             if ((overlayDOMNode && relatedTarget == overlayDOMNode) ||
@@ -235,8 +232,8 @@ function TreeDropdown(props) {
                         setTreeListApi(api);
                         api.focus();
                     }, defaultTreeExpandState: treeExpandState, onTreeExpandStateChange: setTreeExpandState, columns: columns, options: props.options, treeSelection: treeSelection, onTreeSelectionChange: (0, InfiniteTable_1.withSelectedLeafNodesOnly)(onChange), style: treeListStyle }));
-                let children = (React.createElement(rebass_1.Flex, { flexDirection: 'column', height: '100%' },
-                    React.createElement(rebass_1.Flex, { backgroundColor: 'defaultbackground', p: 1, alignItems: 'center', justifyContent: 'stretch', justifyItems: 'stretch' },
+                let children = (React.createElement(Flex_1.Flex, { flexDirection: 'column', className: "twa:h-full" },
+                    React.createElement(Flex_1.Flex, { className: "twa:bg-defaultbackground twa:p-1 twa:items-center twa:justify-stretch twa:justify-items-stretch" },
                         React.createElement(Input_1.default, { "data-name": "menulist-search-input", placeholder: "Search...", style: { width: '100%' }, value: searchValue, onChange: (e) => setSearchValue(e.target.value) })),
                     treeList));
                 if (resizable) {
@@ -252,14 +249,12 @@ function TreeDropdown(props) {
                             e.preventDefault();
                         } }, children));
                 }
-                return (React.createElement(rebass_1.Box, { ref: overlayDOMRef, className: "ab-TreeDropdownOverlay", "data-name": "menu-container", style: {
+                return (React.createElement(Flex_1.Box, { ref: overlayDOMRef, className: "ab-TreeDropdownOverlay", "data-name": "menu-container", style: {
                         fontSize: 'var(--ab-cmp-select__font-size)',
                     } }, children));
             } },
-            React.createElement(FieldWrap_1.default, { style: { width: '100%', ...props.fieldStyle } },
-                React.createElement(Input_1.default, { type: "text", readOnly: true, "data-name": "Select Values", placeholder: props.placeholder ?? 'Select a value', style: {
-                        width: '100%',
-                    }, pr: props.clearable ? 0 : undefined, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
+            React.createElement(FieldWrap_1.default, { style: props.fieldStyle, className: "twa:w-full" },
+                React.createElement(Input_1.default, { type: "text", readOnly: true, "data-name": "Select Values", placeholder: props.placeholder ?? 'Select a value', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
                         if (!visible) {
                             setVisible(true);
                         }
@@ -269,4 +264,3 @@ function TreeDropdown(props) {
                         visibility: Array.isArray(value) && value.length > 0 ? 'visible' : 'hidden',
                     }, variant: "text", icon: "close", onClick: () => onChange({ selectedPaths: [] }) }))))));
 }
-exports.TreeDropdown = TreeDropdown;

package/src/components/Tree/TreeList/index.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeList = void 0;
+exports.TreeList = TreeList;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const InfiniteTable_1 = require("../../InfiniteTable");
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../utils/join"));
+const Flex_1 = require("../../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const columns = {
     label: {
         field: 'label',
@@ -17,24 +17,19 @@ const columns = {
     },
 };
 const domProps = {
-    style: {
-        height: '100%',
-        flex: 1,
-    },
-    className: 'ab-TreeList',
+    className: 'ab-TreeList twa:flex-1 twa:h-full',
 };
 const DEFAULT_TREE_EXPAND_STATE = {
     expandedPaths: [],
     defaultExpanded: false,
 };
 function TreeList(props) {
-    return (React.createElement(rebass_1.Flex, { flex: 1, flexDirection: 'column', className: "ab-TreeList", style: props.style },
+    return (React.createElement(Flex_1.Flex, { flexDirection: 'column', className: "ab-TreeList twa:flex-1", style: props.style },
         React.createElement(InfiniteTable_1.TreeDataSource, { data: props.options, primaryKey: props.primaryKey ?? 'id', defaultTreeSelection: props.defaultTreeSelection, treeSelection: props.treeSelection, onTreeSelectionChange: props.onTreeSelectionChange, treeFilterFunction: props.treeFilterFunction, onTreeExpandStateChange: props.onTreeExpandStateChange, defaultTreeExpandState: props.defaultTreeExpandState ?? DEFAULT_TREE_EXPAND_STATE },
             React.createElement(InfiniteTable_1.TreeGrid, { defaultActiveRowIndex: 0, onReady: props.onReady, debugId: props.debugId, keyboardSelection: true, rowHeight: props.rowHeight ?? '--ab-grid-row-height', keyboardNavigation: "row", columnHeaderHeight: props.columnHeaderHeight, domProps: {
                     ...domProps,
                     ...props.domProps,
-                    className: (0, join_1.default)(domProps.className, props.domProps?.className),
+                    className: (0, clsx_1.default)(domProps.className, props.domProps?.className),
                     style: { ...domProps.style, ...props.domProps?.style },
                 }, columns: props.columns ?? columns, showZebraRows: false }))));
 }
-exports.TreeList = TreeList;

package/src/components/WarningBox/index.d.ts

@@ -1,4 +1,8 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
+import { BoxProps } from '../Flex';
 export declare const baseClassName = "ab-WarningBox";
-export declare const WarningBox: (props: BoxProps) => React.JSX.Element;
+export declare const WarningBox: (props: BoxProps & {
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;

package/src/components/WarningBox/index.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WarningBox = exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-WarningBox';
 const WarningBox = (props) => {
-    return React.createElement(rebass_1.Box, { ...props, className: (0, join_1.default)(props.className, exports.baseClassName) });
+    return (React.createElement(Flex_1.Box, { ...props, className: (0, clsx_1.default)('twa:p-3 twa:rounded-standard twa:bg-warn twa:text-text-on-warn', exports.baseClassName, props.className) }));
 };
 exports.WarningBox = WarningBox;

package/src/components/WizardPanel/index.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
 import { PanelProps } from '../Panel';
-declare const WizardPanel: (props: PanelProps) => React.JSX.Element;
+declare const WizardPanel: (props: {
+    bodyProps?: PanelProps["bodyProps"];
+    className?: string;
+    "data-name"?: string;
+    children?: React.ReactNode;
+}) => React.JSX.Element;
 export default WizardPanel;

package/src/components/WizardPanel/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Panel_1 = tslib_1.__importDefault(require("../Panel"));
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const twMerge_1 = require("../../twMerge");
 const WizardPanel = (props) => {
-    return (React.createElement(Panel_1.default, { border: "none", borderRadius: "none", variant: "primary", bodyScroll: true, ...props, className: (0, join_1.default)(props.className, 'ab-WizardPanel'), style: { height: '100%', ...props.style } }));
+    return (React.createElement(Panel_1.default, { bodyScroll: true, bodyProps: props.bodyProps, "data-name": props['data-name'], className: (0, twMerge_1.twMerge)('ab-WizardPanel', 'twa:border-none twa:rounded-none twa:h-full', props.className) }, props.children));
 };
 exports.default = WizardPanel;

package/src/components/icons/DefaultIcon.d.ts

@@ -7,6 +7,7 @@ export type IconProps = {
     tabIndex?: number;
     style?: React.CSSProperties;
     color?: string;
+    fill?: string;
 };
 declare const _default: ({ children, size, name, tabIndex, color, ...props }: IconProps) => React.JSX.Element;
 export default _default;

package/src/components/icons/index.d.ts

@@ -12,6 +12,6 @@ type IconProps = {
     props?: React.SVGProps<SVGElement>;
 };
 export declare const Icon: ({ name, style, className, tabIndex, ...props }: IconProps) => React.JSX.Element;
-export declare const NaturallySizedIcon: (props: Omit<IconProps, 'size'>) => React.JSX.Element;
+export declare const NaturallySizedIcon: (props: Omit<IconProps, "size">) => React.JSX.Element;
 export declare const iconToString: (icon: AdaptableSystemIcon | AdaptableCustomIcon, style?: CSSProperties) => string;
 export {};

package/src/components/icons/index.js

@@ -77,6 +77,7 @@ const plus_minus_1 = tslib_1.__importDefault(require("./plus-minus"));
 const quick_search_1 = tslib_1.__importDefault(require("./quick-search"));
 const reminder_1 = tslib_1.__importDefault(require("./reminder"));
 const schedule_1 = tslib_1.__importDefault(require("./schedule"));
+const inspector_1 = tslib_1.__importDefault(require("./inspector"));
 const shortcut_1 = tslib_1.__importDefault(require("./shortcut"));
 const updated_row_1 = tslib_1.__importDefault(require("./updated-row"));
 const logout_1 = tslib_1.__importDefault(require("./logout"));
@@ -268,6 +269,7 @@ exports.allIcons = {
     logout: logout_1.default,
     'import-export': import_export_1.default,
     import: import_1.default,
+    inspector: inspector_1.default,
     paperclip: attach_file_1.default,
     info: info_1.default,
     'cloud-upload': cloud_upload_1.default,

package/src/components/icons/inspector.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/src/components/icons/inspector.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DefaultIcon_1 = tslib_1.__importDefault(require("./DefaultIcon"));
+exports.default = (props) => (React.createElement(DefaultIcon_1.default, { ...props },
+    React.createElement("path", { d: "M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z" }),
+    React.createElement("path", { d: "M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6" })));

package/src/components/twUtils.d.ts

@@ -0,0 +1,7 @@
+export declare const targetOwn: {
+    focusOutline: string;
+    focusWithinOutline: string;
+};
+export declare const targetChildren: {
+    focusWithinOutline: string;
+};

package/src/components/twUtils.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.targetChildren = exports.targetOwn = void 0;
+exports.targetOwn = {
+    focusOutline: 
+    // 'twa:outline-0 twa:focus:outline-2 twa:focus:outline-offset-1 twa:focus:outline-accent',
+    'twa:outline-0 twa:focus:shadow-(--ab-focus__box-shadow)',
+    focusWithinOutline: 
+    // 'twa:outline-0 twa:focus-within:outline-2 twa:focus-within:outline-offset-1 twa:focus-within:outline-accent',
+    'twa:outline-0 twa:focus-within:shadow-(--ab-focus__box-shadow)',
+};
+exports.targetChildren = {
+    focusWithinOutline: 
+    // 'twa:*:outline-0 twa:*:focus-within:outline-2 twa:*:focus-within:outline-offset-1 twa:*:focus-within:outline-accent',
+    'twa:*:outline-0 twa:*:focus-within:shadow-(--ab-focus__box-shadow)',
+};

package/src/components/utils/contains.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = contains;
 const DOCUMENT_POSITION_CONTAINED_BY = 16;
 function contains(container, elem) {
     if (container === elem) {
@@ -11,4 +12,3 @@ function contains(container, elem) {
     let comparison = container.compareDocumentPosition(elem);
     return comparison === 0 || comparison & DOCUMENT_POSITION_CONTAINED_BY;
 }
-exports.default = contains;

package/src/components/utils/useDraggable.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function useDraggable({ onMove, onDrop, getBoundingRect, handleSelector, }: {
     onMove?: (event: MouseEvent) => void;
     onDrop?: (dx: number, dy: number) => void;

package/src/components/utils/useDraggable.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useDraggable;
 const react_1 = require("react");
 function clamp(num, min, max) {
     return num <= min ? min : num >= max ? max : num;
@@ -93,4 +94,3 @@ function useDraggable({ onMove, onDrop, getBoundingRect = () => document.body.ge
     };
     return { handleRef: handleRefCallback, targetRef, applyTransform };
 }
-exports.default = useDraggable;

package/src/components/utils/usePropState.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = usePropState;
 const react_1 = require("react");
 function usePropState(state, setState, initialState) {
     const [localState, setLocalState] = (0, react_1.useState)(initialState);
@@ -8,4 +9,3 @@ function usePropState(state, setState, initialState) {
         setState !== undefined ? setState : setLocalState,
     ];
 }
-exports.default = usePropState;

package/src/components/utils/useSelectionRange.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectionRange = void 0;
+exports.useSelectionRange = useSelectionRange;
 const react_1 = require("react");
 function useSelectionRange() {
     const [range, setRange] = (0, react_1.useState)([null, null]);
@@ -21,4 +21,3 @@ function useSelectionRange() {
     }, []);
     return { ref: refCallback, selectionStart: range[0], selectionEnd: range[1] };
 }
-exports.useSelectionRange = useSelectionRange;

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/devTools/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMarker = exports.areAdaptableProfileTracksEnabled = exports.DevToolsMarker = void 0;
+exports.DevToolsMarker = void 0;
+exports.areAdaptableProfileTracksEnabled = areAdaptableProfileTracksEnabled;
+exports.getMarker = getMarker;
 const infinite_react_1 = require("@infinite-table/infinite-react");
 const DevToolsTracks_1 = require("./DevToolsTracks");
 const AVAILABLE_COLORS = [
@@ -152,7 +154,6 @@ function areAdaptableProfileTracksEnabled(adaptableId) {
     }
     return false;
 }
-exports.areAdaptableProfileTracksEnabled = areAdaptableProfileTracksEnabled;
 function getMarker(adaptableId) {
     const enabled = areAdaptableProfileTracksEnabled(adaptableId);
     const marker = DevToolsMarker.create(adaptableId);
@@ -162,4 +163,3 @@ function getMarker(adaptableId) {
     }
     return marker;
 }
-exports.getMarker = getMarker;

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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: 1768333338805 || Date.now(),
-    VERSION: "21.2.2-canary.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1768988354720 || 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

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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.destructurePivotColumnId = void 0;
+exports.destructurePivotColumnId = destructurePivotColumnId;
 // supports only pivotTotalColumns (aggregation total) and pivotGroupTotal
 // AG Grid builds the ID as: `pivot_${pivotCols.join('-')}_${pivotKeys.join('-')}_${measureColumnId}`
 // see https://github.com/ag-grid/ag-grid/blob/e0cfe533b55b75cdc148cdfb1a4e977731dc0712/packages/ag-grid-enterprise/src/pivot/pivotColDefService.ts#L454C16-L454C88
@@ -81,4 +81,3 @@ function destructurePivotColumnId(colDef, currentModel, logWarning) {
         aggregationColumnId,
     };
 }
-exports.destructurePivotColumnId = destructurePivotColumnId;

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

@@ -175,13 +175,13 @@ class LayoutManager extends LMEmitter_1.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) => {

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

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isLayoutEqual = exports.isPivotLayoutEqual = exports.isTableLayoutEqual = exports.logChanges = exports.getChanges = void 0;
+exports.logChanges = exports.getChanges = void 0;
+exports.isTableLayoutEqual = isTableLayoutEqual;
+exports.isPivotLayoutEqual = isPivotLayoutEqual;
+exports.isLayoutEqual = isLayoutEqual;
 const tslib_1 = require("tslib");
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const infinite_react_1 = require("@infinite-table/infinite-react");
@@ -51,7 +54,6 @@ function isTableLayoutEqual(l1, l2) {
     }
     return res;
 }
-exports.isTableLayoutEqual = isTableLayoutEqual;
 //#clearIgnoredProperties
 function clearIgnoredProperties(layout) {
     delete layout.Ignore_GridFilter;
@@ -77,7 +79,6 @@ function isPivotLayoutEqual(l1, l2) {
     }
     return res;
 }
-exports.isPivotLayoutEqual = isPivotLayoutEqual;
 function isLayoutEqual(l1, l2) {
     if ((0, isPivotLayoutModel_1.isPivotLayoutModel)(l1) != (0, isPivotLayoutModel_1.isPivotLayoutModel)(l2)) {
         return false;
@@ -90,4 +91,3 @@ function isLayoutEqual(l1, l2) {
     }
     return false;
 }
-exports.isLayoutEqual = isLayoutEqual;

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isPivotAggTotalColumn = void 0;
+exports.isPivotAggTotalColumn = isPivotAggTotalColumn;
 function isPivotAggTotalColumn(colDef) {
     return !!colDef.pivotTotalColumnIds?.length;
 }
-exports.isPivotAggTotalColumn = isPivotAggTotalColumn;

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

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isPivotColumnTotal = void 0;
+exports.isPivotColumnTotal = isPivotColumnTotal;
 function isPivotColumnTotal(colId) {
     // pivot group total are spanning cross all aggregations
     // therefore the last part of the colId is empty (hence the "dangling" underscore)
     return colId?.startsWith('pivot_') && colId?.endsWith('_');
 }
-exports.isPivotColumnTotal = isPivotColumnTotal;

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isPivotGrandTotal = void 0;
+exports.isPivotGrandTotal = isPivotGrandTotal;
 function isPivotGrandTotal(colDef) {
     return colDef?.colId?.startsWith('PivotRowTotal_pivot_');
 }
-exports.isPivotGrandTotal = isPivotGrandTotal;

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

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeLayoutModel = exports.normalizePivotLayoutModel = exports.normalizeTableLayoutModel = exports.AUTO_GROUP_COLUMN_ID__MULTI_PREFIX = exports.AUTO_GROUP_COLUMN_ID__SINGLE = void 0;
+exports.AUTO_GROUP_COLUMN_ID__MULTI_PREFIX = exports.AUTO_GROUP_COLUMN_ID__SINGLE = void 0;
+exports.normalizeTableLayoutModel = normalizeTableLayoutModel;
+exports.normalizePivotLayoutModel = normalizePivotLayoutModel;
+exports.normalizeLayoutModel = normalizeLayoutModel;
 const isPivotLayoutModel_1 = require("./isPivotLayoutModel");
 exports.AUTO_GROUP_COLUMN_ID__SINGLE = 'ag-Grid-AutoColumn';
 exports.AUTO_GROUP_COLUMN_ID__MULTI_PREFIX = 'ag-Grid-AutoColumn-';
@@ -118,7 +121,6 @@ function normalizeTableLayoutModel(layout, options) {
     }
     return layout;
 }
-exports.normalizeTableLayoutModel = normalizeTableLayoutModel;
 function normalizePivotLayoutModel(layout) {
     layout = structuredClone(layout);
     if (!layout.ColumnVisibility) {
@@ -174,13 +176,11 @@ function normalizePivotLayoutModel(layout) {
     // }
     return layout;
 }
-exports.normalizePivotLayoutModel = normalizePivotLayoutModel;
 function normalizeLayoutModel(layout, options) {
     if ((0, isPivotLayoutModel_1.isPivotLayoutModel)(layout)) {
         return normalizePivotLayoutModel(layout);
     }
     return normalizeTableLayoutModel(layout, options);
 }
-exports.normalizeLayoutModel = normalizeLayoutModel;
 //@ts-ignore
 globalThis.normalizeTableLayoutModel = normalizeTableLayoutModel;