@adaptabletools/adaptable 22.0.7 → 22.0.9

package/src/View/Wizard/OnePageWizards.d.ts

@@ -40,6 +40,7 @@ export interface OnePageWizardProps<ENTITY> {
     closeText?: React.ReactNode;
     closeTooltip?: string;
     finishText?: React.ReactNode;
+    moduleName?: string;
 }
 export declare const OnePageWizard: <ENTITY extends unknown>(props: OnePageWizardProps<ENTITY>) => React.JSX.Element;
 export {};

package/src/View/Wizard/OnePageWizards.js

@@ -13,6 +13,8 @@ import { useKeyboardNavigation } from './useKeyboardNavigation';
 import { Box, Flex } from '../../components/Flex';
 import { twMerge } from '../../twMerge';
 import { targetOwn } from '../../components/twUtils';
+/** Same template for header row and main row so module/details align with nav / content columns. */
+const ONE_PAGE_WIZARD_SECTION_GRID = 'twa:grid twa:grid-cols-[minmax(160px,14rem)_minmax(0,1fr)]';
 export const SummaryTag = (props) => (React.createElement(Box, { ...props }));
 export const SummaryText = (props) => (React.createElement(Box, { ...props, className: twMerge('twa:text-2 twa:mb-3', props.className) }));
 export const FormDescriptionText = (props) => React.createElement(Box, { ...props, className: twMerge('twa:text-2 twa:mt-1', props.className) });
@@ -63,7 +65,6 @@ export const OnePageWizard = (props) => {
             return React.createElement(React.Fragment, { key: index });
         }
         return (React.createElement(Flex, { flexDirection: "column", key: index, "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2" },
-            React.createElement(Box, { className: "ab-OnePageWizard__details twa:text-4 twa:py-3 twa:pl-2" }, section.details),
             React.createElement(Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-defaultbackground" }, section.render(props.data, index))));
     };
     const handleNavigation = useKeyboardNavigation(setCurrentSection, visibleSections);
@@ -104,6 +105,8 @@ export const OnePageWizard = (props) => {
         return acc;
     }, new Map());
     const canFinish = !invalidCount;
+    const activeSection = visibleSections[currentSection];
+    const activeSectionDetails = activeSection !== '-' ? activeSection?.details : undefined;
     return (React.createElement(NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
         React.createElement(OnePageWizardContext.Provider, { value: contextValue },
             React.createElement(Dialog, { modal: props.modal ?? true, isOpen: true, showCloseButton: false, focusOnBrowserVisible: true, className: "twa:rounded-standard twa:overflow-hidden twa:h-[90vh]", ref: dialogRef, onDismiss: () => props.onHide?.(), onKeyDown: (event) => {
@@ -124,8 +127,12 @@ export const OnePageWizard = (props) => {
                     }
                 } },
                 React.createElement(Box, { className: clsx('ab-OnePageWizard twa:flex twa:flex-col twa:h-full twa:w-[90vw] twa:max-w-[1200px]', 'twa:bg-primarylight twa:text-primary-foreground'), "data-name": props.name, style: props.style },
-                    React.createElement(Flex, { flexDirection: "row", alignItems: "stretch", className: "twa:flex-1 twa:overflow-auto" },
-                        React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:p-3 twa:flex-none twa:overflow-auto twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle },
+                    (props.moduleName || activeSectionDetails) && (React.createElement(Box, { className: clsx('ab-OnePageWizard__header', ONE_PAGE_WIZARD_SECTION_GRID, 'twa:items-start twa:mt-4 twa:mb-2 twa:px-2') },
+                        React.createElement(Box, { className: "ab-OnePageWizard__module-name twa:min-w-0 twa:pl-3 twa:font-bold" }, props.moduleName),
+                        React.createElement(Box, { className: "ab-OnePageWizard__details twa:min-w-0 twa:pr-2 twa:text-4" }, activeSectionDetails))),
+                    React.createElement(Box, { as: "hr", className: "ab-OnePageWizard__module-separator twa:w-full twa:border-0 twa:border-t twa:border-t-inputborder" }),
+                    React.createElement(Box, { className: clsx(ONE_PAGE_WIZARD_SECTION_GRID, 'twa:flex-1 twa:min-h-0 twa:overflow-auto twa:items-stretch') },
+                        React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:min-h-0 twa:min-w-0 twa:overflow-auto twa:p-3 twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle },
                             visibleSections.map((section, index) => {
                                 if (section === '-') {
                                     return (React.createElement(Box, { as: "hr", className: "ab-OnePageWizard__section-separator twa:mt-2 twa:w-full twa:border-t twa:border-t-inputborder", key: `${index}-` }));
@@ -167,7 +174,7 @@ export const OnePageWizard = (props) => {
                                 "or arrow keys",
                                 React.createElement("br", null),
                                 "to navigate")),
-                        React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:flex-1" }, renderSection(currentSection))),
+                        React.createElement(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1" }, renderSection(currentSection))),
                     React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2" },
                         React.createElement(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: 'Full' }, props.closeText ?? 'CLOSE'),
                         React.createElement(KeyHint, { className: "twa:ml-2" }, "Esc"),

package/src/agGrid/AdaptableAgGrid.js

@@ -1020,7 +1020,7 @@ export class AdaptableAgGrid {
             }
             return (params) => {
                 // might be a summary row
-                if (params.data?.[ROW_SUMMARY_ROW_ID]) {
+                if (params.data?.[ROW_SUMMARY_ROW_ID] != undefined) {
                     return params.data[ROW_SUMMARY_ROW_ID];
                 }
                 if (params.level > 0) {
@@ -1036,7 +1036,7 @@ export class AdaptableAgGrid {
                     const id = [...parentKeys, Math.abs(hash)].join('/');
                     return id;
                 }
-                if (params.data?.[primaryKey]) {
+                if (params.data?.[primaryKey] != undefined) {
                     const primaryKeyValue = params.data[primaryKey];
                     return typeof primaryKeyValue === 'number'
                         ? `${primaryKeyValue}`
@@ -2154,38 +2154,16 @@ export class AdaptableAgGrid {
         }
         const colDef = this.agGridAdapter.getAgGridApi().getColumnDef(columnId);
         if (colDef) {
-            if (typeof colDef.valueFormatter == 'function') {
-                const column = this.agGridAdapter.getAgGridApi().getColumn(columnId);
-                const params = {
-                    value: rawValue,
-                    node: rowNode,
-                    data: rowNode.data,
-                    colDef,
-                    column,
-                    api: this.agGridAdapter.getAgGridApi(),
-                    context: this.agGridAdapter.getGridOption('context'),
-                };
-                const formattedValue = colDef.valueFormatter(params);
-                return formattedValue || '';
-            }
+            const formattedValue = this.agGridAdapter._agGridApi_getFormattedValue(columnId, rowNode);
+            return formattedValue || '';
         }
-        else if (this.api.columnApi.isPivotResultColumn(columnId)) {
+        if (this.api.columnApi.isPivotResultColumn(columnId)) {
             const pivotResultColumn = this.agGridAdapter
                 .getAgGridApi()
                 .getPivotResultColumns()
                 .find((col) => col.getColId() === columnId);
-            const pivotResultColDef = pivotResultColumn?.getColDef();
-            if (pivotResultColDef && typeof pivotResultColDef.valueFormatter === 'function') {
-                const params = {
-                    value: rawValue,
-                    node: rowNode,
-                    data: rowNode.data,
-                    colDef: pivotResultColDef,
-                    column: pivotResultColumn,
-                    api: this.agGridAdapter.getAgGridApi(),
-                    context: this.agGridAdapter.getGridOption('context'),
-                };
-                const formattedValue = pivotResultColDef.valueFormatter(params);
+            if (pivotResultColumn) {
+                const formattedValue = this.agGridAdapter._agGridApi_getFormattedValue(pivotResultColumn, rowNode);
                 return formattedValue || '';
             }
         }
@@ -2773,7 +2751,9 @@ export class AdaptableAgGrid {
                     const result = gridApiInternal
                         .sortDistinctValues(getCurrentGridCells(), column)
                         .map((gridCell) => {
+                        const itemId = `${gridCell.rowNode?.id}-${gridCell.column?.columnId}`;
                         return {
+                            id: itemId,
                             label: gridCell.displayValue,
                             value: gridCell.rawValue,
                             isSelected: gridCell.rowNode.displayed,
@@ -2799,7 +2779,9 @@ export class AdaptableAgGrid {
                 },
                 get defaultValues() {
                     const result = getCurrentGridCells().map((gridCell) => {
+                        const itemId = `${gridCell.rowNode?.id}-${gridCell.column?.columnId}`;
                         return {
+                            id: itemId,
                             label: gridCell.displayValue,
                             value: gridCell.rawValue,
                             isSelected: gridCell.rowNode.displayed,
@@ -2827,7 +2809,9 @@ export class AdaptableAgGrid {
                     const rowNodes = gridApiInternal.getSortedRowNodesWithCurrentLayoutSortOrder();
                     const currentGridCells = self.getDistinctGridCellsForColumn(column, rowNodes);
                     const result = currentGridCells.map((gridCell) => {
+                        const itemId = `${gridCell.rowNode?.id}-${gridCell.column?.columnId}`;
                         return {
+                            id: itemId,
                             label: gridCell.displayValue,
                             value: gridCell.rawValue,
                             isSelected: gridCell.rowNode.displayed,
@@ -3730,7 +3714,11 @@ export class AdaptableAgGrid {
         }
         const distinctRawValues = this.api.gridApi.internalApi
             .getUnsortedDistinctRawValuesForColumn(columnId)
-            .map((item) => item.rawValue);
+            .map((item) => item.rawValue)
+            .filter((v) => typeof v === 'number' && !isNaN(v));
+        if (distinctRawValues.length === 0) {
+            return undefined;
+        }
         value = minMax === 'min' ? Math.min(...distinctRawValues) : Math.max(...distinctRawValues);
         this.columnMinMaxValuesCache[columnId] = {
             ...this.columnMinMaxValuesCache[columnId],

package/src/agGrid/AgGridAdapter.d.ts

@@ -81,4 +81,5 @@ export declare class AgGridAdapter {
     traverseColDefs(colDefs: (ColDef | ColGroupDef)[], modifyFn: (colDef: ColDef) => ColDef | null): (ColDef | ColGroupDef)[];
     getDefaultColumnDefinition(): GridOptions['defaultColDef'];
     _agGridApi_getValue(colKey: string | Column, rowNode: IRowNode, gridApi?: GridApi): any;
+    _agGridApi_getFormattedValue(colKey: string | Column, rowNode: IRowNode, gridApi?: GridApi): any;
 }

package/src/agGrid/AgGridAdapter.js

@@ -835,4 +835,8 @@ export class AgGridAdapter {
         gridApi = gridApi || this.getAgGridApi();
         return gridApi.getCellValue({ colKey, rowNode });
     }
+    _agGridApi_getFormattedValue(colKey, rowNode, gridApi) {
+        gridApi = gridApi || this.getAgGridApi();
+        return gridApi.getCellValue({ colKey, rowNode, useFormatter: true });
+    }
 }

package/src/agGrid/AgGridColumnAdapter.js

@@ -1194,8 +1194,8 @@ export class AgGridColumnAdapter {
     getStyledColumnStyle(styledColumn, abColumn, params) {
         let style = {};
         const gradientStyle = styledColumn?.GradientStyle;
-        if (params.value === undefined) {
-            return;
+        if (params.value == undefined || params.value === '') {
+            return style;
         }
         let colValue = params.value;
         if (this.adaptableApi.gridApi.isGroupRowNode(params.node)) {
@@ -1311,7 +1311,7 @@ export class AgGridColumnAdapter {
         const columnHighlight = this.adaptableApi.internalApi
             .getInternalState()
             .ColumnHighlightInfo.find((columnHighlightInfo) => {
-            return (gridCell.column.columnId === columnHighlightInfo.columnId);
+            return gridCell.column.columnId === columnHighlightInfo.columnId;
         });
         if (columnHighlight) {
             return convertAdaptableStyleToCSS(columnHighlight.highlightStyle);

package/src/agGrid/AgGridExportAdapter.js

@@ -430,9 +430,7 @@ export class AgGridExportAdapter {
         }
         const getColIdAndRawValue = () => {
             if (this.adaptableApi.columnApi.isAutoRowGroupColumn(agColumn?.getColId())) {
-                const columnId = rowNode.rowGroupColumn?.getColId() ??
-                    rowNode.rowGroupColumn?.getColDef()?.field ??
-                    rowNode.field;
+                const columnId = agColumn.getColId();
                 let rawValue = rowNode.key;
                 return { columnId, rawValue };
             }

package/src/components/Tree/TreeDropdown/index.d.ts

@@ -24,4 +24,13 @@ export type TreeDropdownProps<T extends TreeListItem<any>> = {
     clearable?: boolean;
 };
 export declare function toDisplayValueDefault(value: any[][] | string[]): string;
+/**
+ * Formats the closed TreeDropdown input using each option's `label` for the stored `value` path
+ * segments (same shape as {@link toDisplayValueDefault}, but resolves raw values to labels).
+ */
+export declare function toDisplayValueFromOptionTree<T extends {
+    value: any;
+    label: string;
+    children?: T[];
+}>(paths: any[][] | string[], options: T[]): string;
 export declare function TreeDropdown<T extends TreeListItem<any>>(props: TreeDropdownProps<T>): React.JSX.Element;

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

@@ -23,6 +23,25 @@ export function toDisplayValueDefault(value) {
     }
     return value.map((v) => (Array.isArray(v) ? v.join('-') : v)).join(', ');
 }
+/**
+ * Formats the closed TreeDropdown input using each option's `label` for the stored `value` path
+ * segments (same shape as {@link toDisplayValueDefault}, but resolves raw values to labels).
+ */
+export function toDisplayValueFromOptionTree(paths, options) {
+    const valueToLabel = new Map();
+    const walk = (node) => {
+        valueToLabel.set(node.value, node.label);
+        if (Array.isArray(node.children)) {
+            node.children.forEach(walk);
+        }
+    };
+    options.forEach(walk);
+    return paths
+        .map((path) => Array.isArray(path)
+        ? path.map((segment) => valueToLabel.get(segment) ?? String(segment)).join('-')
+        : valueToLabel.get(path) ?? String(path))
+        .join(', ');
+}
 const getLabelColumn = (field, { includeExpandCollapseButton }) => {
     return {
         field,
@@ -249,7 +268,7 @@ export function TreeDropdown(props) {
                     } }, children));
             } },
             React.createElement(FieldWrap, { style: props.fieldStyle, className: "twa:w-full" },
-                React.createElement(Input, { type: "text", readOnly: true, "data-name": "Select Values", "aria-expanded": visible, placeholder: props.placeholder ?? 'Select a value', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
+                React.createElement(Input, { type: "text", readOnly: true, "data-name": "Select Values", "aria-expanded": visible, placeholder: props.placeholder ?? 'Select...', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
                         if (!visible) {
                             setVisible(true);
                         }

package/src/components/Tree/TreeList/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DataSourcePropOnTreeSelectionChange_MultiNode, InfiniteTableProps, TreeDataSourceProps } from '../../InfiniteTable';
 export type TreeListItem<T = any> = {
-    id: string | number;
+    id?: string | number;
     label: string;
     children?: TreeListItem<T>[];
 };

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: 1774369234081 || Date.now(),
-    VERSION: "22.0.7" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1775641544194 || Date.now(),
+    VERSION: "22.0.9" || '--current-version--',
 };