@adaptabletools/adaptable 11.1.1 → 11.1.2

package/index.css

@@ -3645,6 +3645,9 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
   max-height: 100%;
   box-shadow: var(--ab-cmp-adaptable-window-popup__box-shadow); }
 
+.ab-Window-Modal .ab-Dialog__close-button {
+    top: 3px; }
+
 .ab-Window-Modal .ab-Panel {
     max-height: initial; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "11.1.1",
+  "version": "11.1.2",
   "description": "Powerful data-agnostic HTML5 datagrid add-on that sits on top of an underlying grid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1648553646478;
+declare const _default: 1648639602191;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1648553646478;
+exports.default = 1648639602191;

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -164,7 +164,8 @@ export interface IAdaptable {
     lookupPlugins(propertyName: string, ...args: any): any;
     getPluginProperty(pluginId: string, propertyName: string, ...args: any): any;
     getPlugin(pluginId: string): AdaptablePlugin;
-    setValue(cellDataChangedInfo: CellDataChangedInfo): void;
+    setDataValue(value: any, column: AdaptableColumn, primaryKeyValue: any, rowNode?: RowNode): void;
+    setCellValue(cellDataChangedInfo: CellDataChangedInfo): void;
     cancelEdit(): any;
     isCellEditable(rowNode: RowNode, column: Column): boolean;
     getFirstRowNode(): RowNode;

package/src/AdaptableOptions/LayoutOptions.d.ts

@@ -42,4 +42,15 @@ export interface LayoutOptions {
      * @gridInfoItem
      */
     createDefaultLayout?: boolean;
+    /**
+     * Options to customize how layout items are shown in Settings Panel
+     */
+    view?: {
+        /**
+         * How many columns to display in the inline layout preview
+         *
+         * @defaultValue 10
+         */
+        maxColumnsToDisplay?: number;
+    };
 }

package/src/AdaptableOptions/UserInterfaceOptions.d.ts

@@ -244,4 +244,4 @@ export interface BulkUpdatePermittedValuesParams extends BaseParams {
     gridCells: GridCell[];
 }
 export declare type GridInfoSections = GridInfoSection[];
-export declare type GridInfoSection = 'GridSummary' | 'AdaptableOptions' | 'ColumnInfo';
+export declare type GridInfoSection = 'GridSummary' | 'AdaptableOptions' | 'ColumnInfo' | 'AdaptableObjectsSummary';

package/src/Api/Implementation/GridApiImpl.js

@@ -6,6 +6,7 @@ const ApiBase_1 = require("./ApiBase");
 const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
 const SystemRedux_1 = require("../../Redux/ActionsReducers/SystemRedux");
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 class GridApiImpl extends ApiBase_1.ApiBase {
     getGridState() {
         return this.getAdaptableState().Grid;
@@ -48,22 +49,20 @@ class GridApiImpl extends ApiBase_1.ApiBase {
     }
     setCellValue(columnId, newValue, primaryKeyValue) {
         const abColumn = this.adaptable.api.columnApi.getColumnFromId(columnId);
-        if (!abColumn || abColumn.readOnly) {
+        if (!abColumn) {
+            LoggingHelper_1.LogAdaptableWarning(`setCellValue() - column not found for columnId: ${columnId}`);
             return;
         }
         const rowNode = this.getRowNodeForPrimaryKey(primaryKeyValue);
+        if (!rowNode) {
+            LoggingHelper_1.LogAdaptableWarning(`setCellValue() - rowNode not found for primaryKeyValue: ${primaryKeyValue}`);
+            return;
+        }
         if (!this.adaptable.isCellEditable(rowNode, this.adaptable.getAgGridColumnForColumnId(columnId))) {
+            LoggingHelper_1.LogAdaptableInfo(`setCellValue() - cell is not editable (primaryKeyValue: ${primaryKeyValue},columnId: ${columnId},value: ${newValue})`);
             return;
         }
-        const gridCell = {
-            primaryKeyValue: primaryKeyValue,
-            rawValue: newValue,
-            displayValue: newValue,
-            normalisedValue: newValue,
-            rowNode: rowNode,
-            column: abColumn,
-        };
-        this.adaptable.api.internalApi.setGridCell(gridCell);
+        this.adaptable.setDataValue(newValue, abColumn, primaryKeyValue, rowNode);
     }
     setCellsValue(gridCells) {
         gridCells === null || gridCells === void 0 ? void 0 : gridCells.forEach((gridCell) => this.setCellValue(gridCell.columnId, gridCell.newValue, gridCell.primaryKeyValue));

package/src/Api/Implementation/InternalApiImpl.js

@@ -198,7 +198,7 @@ class InternalApiImpl extends ApiBase_1.ApiBase {
     }
     setGridCell(gridCell) {
         const cellDataChangedInfo = this.createDataChangedInfoFromGridCell(gridCell);
-        this.adaptable.setValue(cellDataChangedInfo);
+        this.adaptable.setCellValue(cellDataChangedInfo);
     }
     buildDataChangedInfo(config) {
         var _a;

package/src/Api/Implementation/LayoutApiImpl.js

@@ -252,14 +252,20 @@ class LayoutApiImpl extends ApiBase_1.ApiBase {
     }
     showLayoutEditor(layoutName, action = 'Edit') {
         const layout = layoutName ? this.getLayoutByName(layoutName) : this.getCurrentLayout();
+        const moduleInfo = this.adaptable.ModuleService.getModuleInfoByModule(ModuleConstants.LayoutModuleId);
         let preparedAction = action;
         if (!['Edit', 'New', 'Clone'].includes(action)) {
             preparedAction = 'Edit';
             LoggingHelper_1.LogAdaptableError(`When opening the layout editor the action must be one of: New, Clone, Edit; given: ${action}`);
         }
+        let title = 'Layout Editor';
+        if (action === 'Edit') {
+            title = `Edit Layout${(layout === null || layout === void 0 ? void 0 : layout.Name) ? `: ${layout.Name}` : ''}`;
+        }
         this.dispatchAction(PopupRedux.PopupShowWindow({
             Id: windowFactory_1.WINDOW_LAYOUT_EDITOR,
-            Title: `Edit Layout: ${layout.Name}`,
+            Title: title,
+            Icon: moduleInfo.Glyph,
             PopupProps: {
                 action: preparedAction,
                 layout,

package/src/Strategy/CalculatedColumnModule.js

@@ -71,6 +71,11 @@ class CalculatedColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 label: 'Column Id',
                 values: [calculateColumn.ColumnId],
             },
+            calculateColumn.FriendlyName && {
+                name: 'Settings',
+                label: 'Column Name',
+                values: [calculateColumn.FriendlyName],
+            },
             getExpressionViewItems_1.getExpressionViewItems(calculateColumn.Query),
         ];
         if (ArrayExtensions_1.default.IsNotNullOrEmpty(settingsTags)) {

package/src/Strategy/FreeTextColumnModule.js

@@ -75,7 +75,7 @@ class FreeTextColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     label: 'Data Type',
                     values: [(_a = freeTextColumn.DataType) !== null && _a !== void 0 ? _a : 'Not specified'],
                 },
-                freeTextColumn.DefaultValue !== undefined && {
+                Boolean(freeTextColumn.DefaultValue) && {
                     name: 'Settings',
                     label: 'Default Value',
                     values: [freeTextColumn.DefaultValue],

package/src/Strategy/Interface/IModule.d.ts

@@ -74,11 +74,12 @@ export interface AdaptableObjectView {
 export interface AdaptableModuleView {
     /**
      * List of actions.
-     * Allows to add custmo actions.
+     * Allows to add custom actions.
      */
     actions?: React.FunctionComponent<{
         data: AdaptableObject;
     }>[];
+    onOpenEditPopup?: (abObject?: AdaptableObject) => void;
     getDeleteAction?: (abObject: AdaptableObject) => Redux.Action;
     getSuspendAction?: (abObject: AdaptableObject) => Redux.Action;
     getUnSuspendAction?: (abObject: AdaptableObject) => Redux.Action;

package/src/Strategy/LayoutModule.d.ts

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 import { AdaptableModuleBase } from './AdaptableModuleBase';
 import { LayoutState, Layout } from '../PredefinedConfig/LayoutState';
 import { AdaptableMenuItem, ContextMenuContext } from '../PredefinedConfig/Common/Menu';
+import * as LayoutRedux from '../Redux/ActionsReducers/LayoutRedux';
 import { TeamSharingImportInfo } from '../PredefinedConfig/TeamSharingState';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
 import { AdaptableApi } from '../Api/AdaptableApi';
@@ -16,4 +18,25 @@ export declare class LayoutModule extends AdaptableModuleBase implements IModule
     addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
     addContextMenuItems(menuContext: ContextMenuContext): AdaptableMenuItem[] | undefined;
     getTeamSharingAction(): TeamSharingImportInfo<Layout>;
+    toViewAll(): {
+        items: {
+            name: string;
+            values: string[];
+        }[];
+        abObject: Layout;
+    }[];
+    toView(layout: Layout): {
+        items: {
+            name: string;
+            values: string[];
+        }[];
+        abObject: Layout;
+    };
+    getViewProperties(): {
+        actions: import("react").FunctionComponent<{
+            data: Layout;
+        }>[];
+        getDeleteAction: (layout: Layout) => LayoutRedux.LayoutDeleteAction;
+        onOpenEditPopup: (layout?: Layout) => void;
+    };
 }

package/src/Strategy/LayoutModule.js

@@ -6,6 +6,7 @@ const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
 const LayoutRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/LayoutRedux"));
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
+const LayoutRadioSelector_1 = require("../View/Layout/LayoutRadioSelector");
 class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.LayoutModuleId, 'Layout', 'layout', 'LayoutPopup', 'Named sets of column visibility, order, groupings, aggregation, pivots etc.', api);
@@ -128,5 +129,74 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             EditAction: LayoutRedux.LayoutSave,
         };
     }
+    toViewAll() {
+        return this.getModuleAdaptableObjects().map((layout) => this.toView(layout));
+    }
+    toView(layout) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const maxColumnsToDisplay = (_d = (_c = (_b = (_a = this.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.layoutOptions) === null || _b === void 0 ? void 0 : _b.view) === null || _c === void 0 ? void 0 : _c.maxColumnsToDisplay) !== null && _d !== void 0 ? _d : 10;
+        const columnIdToFriendlyName = (columnId) => {
+            return this.api.columnApi.getFriendlyNameFromColumnId(columnId);
+        };
+        let columns = layout.Columns;
+        if (columns.length >
+            maxColumnsToDisplay + 1 /* +1 is to show tag only beginning with 2, 'other 2' */) {
+            const extraColumns = columns.length - maxColumnsToDisplay;
+            const firstNColumns = columns
+                .slice(0, maxColumnsToDisplay)
+                .map((colId) => columnIdToFriendlyName(colId));
+            columns = [...firstNColumns, `and other ${extraColumns}`];
+        }
+        return {
+            items: [
+                {
+                    name: 'Name',
+                    values: [layout.Name],
+                },
+                {
+                    name: 'Columns',
+                    values: columns,
+                },
+                ((_e = layout.ColumnSorts) === null || _e === void 0 ? void 0 : _e.length) && {
+                    name: 'Sort',
+                    values: layout.ColumnSorts.map((customSort) => `[${columnIdToFriendlyName(customSort.ColumnId)}: ${customSort.SortOrder}]`),
+                },
+                ((_f = layout === null || layout === void 0 ? void 0 : layout.RowGroupedColumns) === null || _f === void 0 ? void 0 : _f.length) && {
+                    name: 'Grouped Columns',
+                    values: layout.RowGroupedColumns.map((colId) => columnIdToFriendlyName(colId)),
+                },
+                ((_g = layout === null || layout === void 0 ? void 0 : layout.PivotColumns) === null || _g === void 0 ? void 0 : _g.length) && {
+                    name: 'Pivot Columns',
+                    values: layout.PivotColumns.map((colId) => columnIdToFriendlyName(colId)),
+                },
+                (layout === null || layout === void 0 ? void 0 : layout.EnablePivot) && {
+                    name: 'Pivot Enabled',
+                    values: ['Yes'],
+                },
+            ].filter(Boolean),
+            abObject: layout,
+        };
+    }
+    getViewProperties() {
+        return {
+            actions: [LayoutRadioSelector_1.LayoutRadioSelector],
+            getDeleteAction: (layout) => {
+                // make sure we do not delete the last layout
+                if (this.getModuleAdaptableObjects().length === 1) {
+                    return null;
+                }
+                return LayoutRedux.LayoutDelete(layout);
+            },
+            onOpenEditPopup: (layout) => {
+                if (!layout) {
+                    // consider it is new
+                    this.api.layoutApi.showLayoutEditor(null, 'New');
+                }
+                else {
+                    this.api.layoutApi.showLayoutEditor(layout.Name);
+                }
+            },
+        };
+    }
 }
 exports.LayoutModule = LayoutModule;

package/src/Strategy/Utilities/getFlashingCellStyleViewItems.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const getFlashingCellStyleViewItems: () => {
     name: string;
+    label: string;
     view: import("react").FunctionComponent<import("../../View/FlashingCell/FlashingCellStyle").FlashingCellStyleProps>;
 };

package/src/Strategy/Utilities/getFlashingCellStyleViewItems.js

@@ -4,7 +4,8 @@ exports.getFlashingCellStyleViewItems = void 0;
 const FlashingCellStyle_1 = require("../../View/FlashingCell/FlashingCellStyle");
 exports.getFlashingCellStyleViewItems = () => {
     return {
-        name: 'Change Style',
+        name: 'Flash Styles',
+        label: 'Change Style',
         view: FlashingCellStyle_1.FlashingCellStyle,
     };
 };

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -131,6 +131,9 @@ exports.DefaultAdaptableOptions = {
         autoSizeColumnsInLayout: false,
         autoSizeColumnsInPivotLayout: false,
         createDefaultLayout: false,
+        view: {
+            maxColumnsToDisplay: 10,
+        },
     },
     menuOptions: {
         showAdaptableContextMenu: true,

package/src/Utilities/Defaults/DefaultSettingsPanel.js

@@ -10,6 +10,7 @@ exports.STANDALONE_MODULE_POPUPS = [
  * This constants determines the order and the items that appear in the navigation.
  */
 exports.DEFAULT_NAVIGATION_ITEMS = [
+    'GridInfo',
     'Dashboard',
     'ToolPanel',
     'StateManagement',
@@ -31,7 +32,6 @@ exports.DEFAULT_NAVIGATION_ITEMS = [
     'Schedule',
     'Shortcut',
     '-',
-    'GridInfo',
     'SystemStatus',
     'DataChangeHistory',
     'TeamSharing',

package/src/Utilities/Helpers/StyleHelper.d.ts

@@ -7,3 +7,4 @@ export declare const toStyle: (style?: AdaptableStyle) => {
     borderWidth: number;
     borderStyle: string;
 };
+export declare const getVariableColor: (variable: string) => string;

package/src/Utilities/Helpers/StyleHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toStyle = exports.convertCSSAbsoluteFontSizeToPt = exports.convertAdaptableStyleToCSS = void 0;
+exports.getVariableColor = exports.toStyle = exports.convertCSSAbsoluteFontSizeToPt = exports.convertAdaptableStyleToCSS = void 0;
 const EnumExtensions_1 = require("../Extensions/EnumExtensions");
 exports.convertAdaptableStyleToCSS = (style) => {
     let result = {};
@@ -45,3 +45,15 @@ exports.convertCSSAbsoluteFontSizeToPt = (fontSize) => {
 exports.toStyle = (style) => {
     return Object.assign(Object.assign({}, exports.convertAdaptableStyleToCSS(style !== null && style !== void 0 ? style : {})), { borderWidth: (style === null || style === void 0 ? void 0 : style.BorderColor) ? 2 : 0, borderStyle: 'solid' });
 };
+exports.getVariableColor = (variable) => {
+    var _a;
+    const isVariable = (_a = variable === null || variable === void 0 ? void 0 : variable.startsWith) === null || _a === void 0 ? void 0 : _a.call(variable, 'var(');
+    if (!isVariable) {
+        return variable;
+    }
+    const match = /\((.+)\)/.exec(variable);
+    if (!match) {
+        return variable;
+    }
+    return getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim();
+};

package/src/View/AdaptableViewFactory.js

@@ -4,10 +4,8 @@ exports.AdaptableViewPanelFactory = exports.AdaptableViewFactory = void 0;
 const tslib_1 = require("tslib");
 const SmartEditPopup_1 = require("./SmartEdit/SmartEditPopup");
 const QuickSearchPopup_1 = require("./QuickSearch/QuickSearchPopup");
-const ExpandedQueryPopup_1 = require("./Query/ExpandedQueryPopup");
 const ThemePopup_1 = require("./Theme/ThemePopup");
 const ToolPanelPopup_1 = require("./Components/ToolPanel/ToolPanelPopup");
-const LayoutPopup_1 = require("./Layout/LayoutPopup");
 const GridInfoPopup_1 = require("./GridInfo/GridInfoPopup");
 const TeamSharingPopup_1 = require("./TeamSharing/TeamSharingPopup");
 const DashboardPopup_1 = require("./Dashboard/DashboardPopup");
@@ -33,12 +31,12 @@ const DataChangeHistoryPopup_1 = require("./DataChangeHistory/DataChangeHistoryP
 const DataChangeHistoryViewPanel_1 = require("./DataChangeHistory/DataChangeHistoryViewPanel");
 const StateManagementViewPanel_1 = require("./StateManagement/StateManagementViewPanel");
 exports.AdaptableViewFactory = {
-    ExpandedQueryPopup: ExpandedQueryPopup_1.ExpandedQueryPopup,
+    // ExpandedQueryPopup,
     BulkUpdatePopup: BulkUpdatePopup_1.BulkUpdatePopup,
     DashboardPopup: DashboardPopup_1.DashboardPopup,
     StateManagementPopup: StateManagementPopup_1.StateManagementPopup,
     GridInfoPopup: GridInfoPopup_1.GridInfoPopup,
-    LayoutPopup: LayoutPopup_1.LayoutPopup,
+    // LayoutPopup,
     QuickSearchPopup: QuickSearchPopup_1.QuickSearchPopup,
     CellSummaryPopup: CellSummaryPopup_1.CellSummaryPopup,
     SmartEditPopup: SmartEditPopup_1.SmartEditPopup,

package/src/View/ColorPicker.d.ts

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { HTMLProps } from 'react';
 import { BoxProps } from 'rebass';
 import { AdaptableApi } from '../Api/AdaptableApi';
-export declare type ColorPickerProps = HTMLProps<HTMLInputElement> & {
+export declare type ColorPickerProps = Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
     api: AdaptableApi;
-} & BoxProps;
+    onChange: (color: string) => void;
+    value: string;
+} & Omit<BoxProps, 'onChange'>;
 export declare const ColorPicker: React.ForwardRefExoticComponent<Pick<ColorPickerProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "contextMenu" | "api" | "type" | "min" | "rows" | "download" | "value" | "checked" | "onClick" | "name" | "colSpan" | "rowSpan" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "headers" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg"> & React.RefAttributes<unknown>>;

package/src/View/ColorPicker.js

@@ -4,17 +4,29 @@ exports.ColorPicker = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../components/Input"));
+const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
 const tinycolor = require('tinycolor2');
 exports.ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
     let { api, value } = props, restProps = tslib_1.__rest(props, ["api", "value"]);
-    const ABcolorChoicesOptions = ColorPalette.map((x) => (React.createElement("option", { key: x, value: x }, x)));
+    const optionsMap = ColorPalette.reduce((acc, colorItem) => (Object.assign(Object.assign({}, acc), { [StyleHelper_1.getVariableColor(colorItem)]: colorItem })), {});
+    const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
+        return (React.createElement("option", { key: x, value: x }, x));
+    });
     const ABcolorChoices = React.createElement("datalist", { id: 'ABcolorChoices' }, ABcolorChoicesOptions);
-    value = React.useMemo(() => {
-        return tinycolor(value).toHexString();
+    const preparedValue = React.useMemo(() => {
+        const color = StyleHelper_1.getVariableColor(value);
+        return tinycolor(color).toHexString();
     }, [value]);
     return (React.createElement("div", { className: 'ColorPicker' },
-        React.createElement(Input_1.default, Object.assign({}, restProps, { value: value, ref: ref, type: "color", style: {
+        React.createElement(Input_1.default, Object.assign({}, restProps, { onChange: (event) => {
+                var _a;
+                /**
+                 * The value is not in the map when the color is not in the palette.
+                 */
+                const color = (_a = optionsMap[event.target.value]) !== null && _a !== void 0 ? _a : event.target.value;
+                props.onChange(color);
+            }, value: preparedValue, ref: ref, type: "color", style: {
                 width: 70,
                 padding: 0 /* we need this to be 0, since otherwise on Windows browsers, the chosen color cannot be seen */,
             }, list: "ABcolorChoices" })),

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -15,15 +15,16 @@ const ButtonEdit_1 = require("../Buttons/ButtonEdit");
 const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
 const ValueSelector_1 = require("../ValueSelector");
+const ICON_SIZE = 26;
 exports.AdaptableObjectListItem = (props) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const adaptable = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const [isEditWizardVisible, setIsEditWizardVisible] = React.useState(false);
     const [wizardStepName, setWizardStepName] = React.useState(null);
-    const viewOptions = (_a = props.module) === null || _a === void 0 ? void 0 : _a.getViewProperties();
-    const EditWizard = (_b = viewOptions.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(viewOptions, props.data.abObject);
-    const deleteAction = (_c = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.data.abObject);
+    const viewOptions = (_b = (_a = props.module) === null || _a === void 0 ? void 0 : _a.getViewProperties) === null || _b === void 0 ? void 0 : _b.call(_a);
+    const EditWizard = (_c = viewOptions.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.data.abObject);
+    const deleteAction = (_d = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _d === void 0 ? void 0 : _d.call(viewOptions, props.data.abObject);
     const teamSharingActivated = adaptable.api.teamSharingApi.isTeamSharingActivated() &&
         adaptable.api.teamSharingApi.hasTeamSharingFullRights();
     const entityType = props.module.moduleInfo.FriendlyName;
@@ -33,46 +34,50 @@ exports.AdaptableObjectListItem = (props) => {
     const accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(props.data.abObject, moduleAccessLevel);
     const baseClassName = `${props.baseClassName}__Item`;
     const itemClassName = join_1.default(baseClassName, props.data.abObject.IsSuspended && `${baseClassName}--is-suspended`);
-    const handleCloseWizard = () => {
+    const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
         setWizardStepName(null);
-    };
-    const handleOpenWizard = (sectionName) => {
-        setIsEditWizardVisible(true);
-        if (sectionName) {
-            setWizardStepName(sectionName);
+    }, []);
+    const handleOnEdit = React.useCallback((sectionName) => {
+        var _a;
+        if (EditWizard) {
+            setIsEditWizardVisible(true);
+            if (sectionName) {
+                setWizardStepName(sectionName);
+            }
         }
-    };
+        (_a = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.onOpenEditPopup) === null || _a === void 0 ? void 0 : _a.call(viewOptions, props.data.abObject);
+    }, []);
     const hasSuspend = Boolean(viewOptions.getSuspendAction);
-    const actions = (_e = (_d = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.actions) === null || _d === void 0 ? void 0 : _d.map) === null || _e === void 0 ? void 0 : _e.call(_d, (component, index) => {
+    const actions = (_f = (_e = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.actions) === null || _e === void 0 ? void 0 : _e.map) === null || _f === void 0 ? void 0 : _f.call(_e, (component, index) => {
         return React.createElement(component, {
             data: props.data.abObject,
             key: index,
         });
     });
-    const iconSize = 26;
+    const isEditDisabled = !Boolean(EditWizard || viewOptions.onOpenEditPopup);
     return (React.createElement(rebass_1.Flex, { as: "li", mb: 3, className: itemClassName },
-        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, (_f = props.data.items) === null || _f === void 0 ? void 0 : _f.map((tag, index) => {
+        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, (_g = props.data.items) === null || _g === void 0 ? void 0 : _g.map((tag, index) => {
             var _a;
             return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: index, mb: 2, className: `${baseClassName}__row` },
                 React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
                     tag.label || tag.name,
                     EditWizard && (React.createElement(SimpleButton_1.default, { accessLevel: accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
-                            handleOpenWizard(tag.name);
+                            handleOnEdit(tag.name);
                         } }))),
                 React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__values` },
                     tag.view &&
                         React.createElement(tag.view, {
                             data: props.data.abObject,
                         }),
-                    Boolean((tag === null || tag === void 0 ? void 0 : tag.values) && ((_a = tag === null || tag === void 0 ? void 0 : tag.values) === null || _a === void 0 ? void 0 : _a.length)) && (React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))));
+                    Boolean((tag === null || tag === void 0 ? void 0 : tag.values) && ((_a = tag === null || tag === void 0 ? void 0 : tag.values) === null || _a === void 0 ? void 0 : _a.length)) && (React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))));
         })),
         React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons` },
             React.createElement(rebass_1.Flex, { justifyContent: "end" },
                 actions,
-                teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: iconSize, Header: `TeamSharing ${entityType}`, accessLevel: accessLevel, onShare: (config) => dispatch(TeamSharingRedux_1.TeamSharingShare(props.data.abObject, props.module.moduleInfo.ModuleName, config)) })),
-                deleteAction && (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: iconSize, ConfirmationMsg: `Are you sure you want to delete this ${entityType}?`, ConfirmationTitle: `Delete ${entityType}`, ConfirmAction: deleteAction, accessLevel: accessLevel })),
-                React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: iconSize, disabled: !Boolean(EditWizard), accessLevel: accessLevel, onClick: () => handleOpenWizard() })),
+                teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${entityType}`, accessLevel: accessLevel, onShare: (config) => dispatch(TeamSharingRedux_1.TeamSharingShare(props.data.abObject, props.module.moduleInfo.ModuleName, config)) })),
+                deleteAction && (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: ICON_SIZE, ConfirmationMsg: `Are you sure you want to delete this ${entityType}?`, ConfirmationTitle: `Delete ${entityType}`, ConfirmAction: deleteAction, accessLevel: accessLevel })),
+                React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: isEditDisabled, accessLevel: accessLevel, onClick: () => handleOnEdit() })),
             React.createElement(rebass_1.Box, { flex: 1 }),
             hasSuspend && (React.createElement(rebass_1.Flex, { justifyContent: "end" },
                 React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)), suspendableObject: props.data.abObject, accessLevel: accessLevel })))),

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -31,5 +31,7 @@ exports.AdaptablePopupBody = (props) => {
         moduleInfo,
     };
     const BodyComponent = (AdaptableViewFactory_1.AdaptableViewFactory === null || AdaptableViewFactory_1.AdaptableViewFactory === void 0 ? void 0 : AdaptableViewFactory_1.AdaptableViewFactory[(_a = props === null || props === void 0 ? void 0 : props.componentName) !== null && _a !== void 0 ? _a : moduleInfo.Popup]) || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
-    return React.createElement(BodyComponent, Object.assign({ module: props.module }, moduleProps));
+    // key is to make sure state is reset between views
+    // most of the views use the `AdaptablePopupModuleView` component
+    return React.createElement(BodyComponent, Object.assign({ key: props === null || props === void 0 ? void 0 : props.componentName, module: props.module }, moduleProps));
 };