@adaptabletools/adaptable 24.0.0-canary.6 → 24.0.0-canary.8

package/index.css

@@ -611,6 +611,9 @@
   .twa\:field-sizing-content {
     field-sizing: content;
   }
+  .twa\:aspect-auto {
+    aspect-ratio: auto;
+  }
   .twa\:aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -662,10 +665,6 @@
     width: calc(var(--ab-base-space) * 16);
     height: calc(var(--ab-base-space) * 16);
   }
-  .twa\:size-\[calc\(100\%-2\*var\(--ab-base-space\)\)\] {
-    width: calc(100% - 2 * var(--ab-base-space));
-    height: calc(100% - 2 * var(--ab-base-space));
-  }
   .twa\:size-auto {
     width: auto;
     height: auto;
@@ -721,9 +720,6 @@
   .twa\:h-\[22px\] {
     height: 22px;
   }
-  .twa\:h-\[24px\] {
-    height: 24px;
-  }
   .twa\:h-\[33px\] {
     height: 33px;
   }
@@ -736,6 +732,9 @@
   .twa\:h-\[calc\(100\%-1px\)\] {
     height: calc(100% - 1px);
   }
+  .twa\:h-\[calc\(100\%-2\*var\(--ab-base-space\)\)\] {
+    height: calc(100% - 2 * var(--ab-base-space));
+  }
   .twa\:h-\[min\(22rem\,var\(--total-size\)\)\] {
     height: min(22rem, var(--total-size));
   }
@@ -907,6 +906,9 @@
   .twa\:w-8 {
     width: calc(var(--ab-base-space) * 8);
   }
+  .twa\:w-12 {
+    width: calc(var(--ab-base-space) * 12);
+  }
   .twa\:w-20 {
     width: calc(var(--ab-base-space) * 20);
   }
@@ -955,9 +957,6 @@
   .twa\:w-\[15rem\] {
     width: 15rem;
   }
-  .twa\:w-\[36px\] {
-    width: 36px;
-  }
   .twa\:w-\[44px\] {
     width: 44px;
   }
@@ -1027,6 +1026,9 @@
   .twa\:max-w-3xl {
     max-width: var(--twa-container-3xl);
   }
+  .twa\:max-w-28 {
+    max-width: calc(var(--ab-base-space) * 28);
+  }
   .twa\:max-w-50 {
     max-width: calc(var(--ab-base-space) * 50);
   }
@@ -2444,9 +2446,6 @@
   .twa\:opacity-0 {
     opacity: 0%;
   }
-  .twa\:opacity-30 {
-    opacity: 30%;
-  }
   .twa\:opacity-50 {
     opacity: 50%;
   }
@@ -4112,19 +4111,6 @@
       background-color: color-mix(in oklab, var(--ab-color-destructive) 20%, transparent);
     }
   }
-  .twa\:\[\&_\.ab-ColorPicker-swatch\]\:absolute .ab-ColorPicker-swatch {
-    position: absolute;
-  }
-  .twa\:\[\&_\.ab-ColorPicker-swatch\]\:inset-0 .ab-ColorPicker-swatch {
-    inset: 0px;
-  }
-  .twa\:\[\&_\.ab-ColorPicker-swatch\]\:size-full .ab-ColorPicker-swatch {
-    width: 100%;
-    height: 100%;
-  }
-  .twa\:\[\&_\.ab-ColorPicker-swatch\]\:opacity-0 .ab-ColorPicker-swatch {
-    opacity: 0%;
-  }
   .twa\:\[\&_\.ab-Input\]\:w-full .ab-Input {
     width: 100%;
   }
@@ -6360,26 +6346,26 @@
     --ab-color-palette-10: #4a5568;
     --ab-color-palette-11: #f3e8ff;
     --ab-color-palette-12: #553c9a;
-    --ab-color-swatch-1: #000000;
-    --ab-color-swatch-2: #ffffff;
-    --ab-color-swatch-3: #d3d3d3;
-    --ab-color-swatch-4: #808080;
-    --ab-color-swatch-5: #a52a2a;
-    --ab-color-swatch-6: #006400;
-    --ab-color-swatch-7: #008000;
-    --ab-color-swatch-8: #32cd32;
-    --ab-color-swatch-9: #ffff00;
-    --ab-color-swatch-10: #ffffe0;
-    --ab-color-swatch-11: #00008b;
-    --ab-color-swatch-12: #0000ff;
-    --ab-color-swatch-13: #87cefa;
-    --ab-color-swatch-14: #00ffff;
-    --ab-color-swatch-15: #ff00ff;
-    --ab-color-swatch-16: #800080;
-    --ab-color-swatch-17: #8b0000;
-    --ab-color-swatch-18: #ff0000;
-    --ab-color-swatch-19: #dc143c;
-    --ab-color-swatch-20: #ffa500;
+    --ab-color-palette-13: #000000;
+    --ab-color-palette-14: #ffffff;
+    --ab-color-palette-15: #d3d3d3;
+    --ab-color-palette-16: #808080;
+    --ab-color-palette-17: #a52a2a;
+    --ab-color-palette-18: #006400;
+    --ab-color-palette-19: #008000;
+    --ab-color-palette-20: #32cd32;
+    --ab-color-palette-21: #ffff00;
+    --ab-color-palette-22: #ffffe0;
+    --ab-color-palette-23: #00008b;
+    --ab-color-palette-24: #0000ff;
+    --ab-color-palette-25: #87cefa;
+    --ab-color-palette-26: #00ffff;
+    --ab-color-palette-27: #ff00ff;
+    --ab-color-palette-28: #800080;
+    --ab-color-palette-29: #8b0000;
+    --ab-color-palette-30: #ff0000;
+    --ab-color-palette-31: #dc143c;
+    --ab-color-palette-32: #ffa500;
     --ab-icon-fill: currentColor;
     --ab-custom-scrollbar-size: 8px;
     --ab-color-custom-scrollbar-track: var(--ab-color-background);
@@ -9000,133 +8986,6 @@
   .ab-ModuleSelector__UnusedGroups--row .ab-ModuleSelector__UnusedPanel {
     margin-bottom: 0;
   }
-  .ab-ColorPicker-swatch {
-    width: 36px;
-    height: 24px;
-    min-height: 24px !important;
-    padding: 0;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    cursor: pointer;
-  }
-  .ab-ColorPicker-swatch::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  .ab-ColorPicker-swatch::-webkit-color-swatch {
-    border: none;
-    border-radius: calc(var(--ab-border-radius-input, 4px) - 1px);
-  }
-  .ab-ColorPicker-swatch::-moz-color-swatch {
-    border: none;
-  }
-  .ab-OptionalColorPicker-empty {
-    width: 36px;
-    height: 24px;
-    min-height: 24px;
-    padding: 0;
-    border: 1px dashed var(--ab-color-border, #ccc);
-    border-radius: var(--ab-border-radius-input, 4px);
-    cursor: pointer;
-    background-color: #fff;
-    background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
-    background-size: 6px 6px;
-    background-position: 0 0, 0 3px, 3px -3px, -3px 0;
-  }
-  .ab-OptionalColorPicker-empty:hover:not(:disabled) {
-    border-color: var(--ab-color-accent, #43429e);
-  }
-  .ab-OptionalColorPicker-empty:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-  .ab-ColorPicker-range[type='range'] {
-    width: 120px;
-    margin: 0;
-    height: 12px !important;
-    min-height: 12px !important;
-    padding: 0;
-    border-radius: 6px;
-    -webkit-appearance: none;
-    appearance: none;
-  }
-  .ab-ColorPicker-range[type='range']:focus {
-    outline: none;
-  }
-  .ab-ColorPicker-range[type='range']::-webkit-slider-runnable-track {
-    background: transparent;
-    border: 0;
-    width: 100%;
-    height: 12px;
-    cursor: pointer;
-  }
-  .ab-ColorPicker-range[type='range']::-webkit-slider-thumb {
-    margin-top: -4px;
-    width: 20px;
-    height: 20px;
-    background: #ffffff;
-    border: 1px solid #000000;
-    border-radius: 50%;
-    cursor: pointer;
-    -webkit-appearance: none;
-    box-sizing: border-box;
-  }
-  .ab-ColorPicker-range[type='range']:focus::-webkit-slider-runnable-track {
-    background: none;
-  }
-  .ab-ColorPicker-range[type='range']::-moz-range-track {
-    background: transparent;
-    border: 0;
-    width: 100%;
-    height: 12px;
-    cursor: pointer;
-  }
-  .ab-ColorPicker-range[type='range']::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    background: #ffffff;
-    border: 1px solid #000000;
-    border-radius: 50%;
-    cursor: pointer;
-    box-sizing: border-box;
-  }
-  .ab-ColorPicker-range[type='range']::-ms-track {
-    background: transparent;
-    border-color: transparent;
-    border-width: 1px 0;
-    color: transparent;
-    width: 100%;
-    height: 12px;
-    cursor: pointer;
-  }
-  .ab-ColorPicker-range[type='range']::-ms-fill-lower {
-    background: #43429e;
-    border: 0;
-  }
-  .ab-ColorPicker-range[type='range']::-ms-fill-upper {
-    background: none;
-    border: 0;
-  }
-  .ab-ColorPicker-range[type='range']::-ms-thumb {
-    width: 20px;
-    height: 20px;
-    background: #ffffff;
-    border: 1px solid #000000;
-    border-radius: 50%;
-    cursor: pointer;
-    margin-top: 0px;
-    box-sizing: border-box;
-  }
-  .ab-ColorPicker-range[type='range']:focus::-ms-fill-lower {
-    background: none;
-  }
-  .ab-ColorPicker-range[type='range']:focus::-ms-fill-upper {
-    background: none;
-  }
-  @supports (-ms-ime-align: auto) {
-    .ab-ColorPicker-range[type='range'] {
-      margin: 0;
-    }
-  }
   .ab-AdaptableOptions {
     background: var(--ab-cmp-adaptable-options__background-color);
   }
@@ -9665,6 +9524,10 @@
     min-width: 0;
     max-width: none;
     width: 100%;
+    --ab-color-input-background: var(--ab-color-primarylight);
+  }
+  .ab--theme-dark .ab-AgGridColumnFilter-host--tool-panel, .ab--theme-dark .ab-ColumnFilter--tool-panel {
+    --ab-color-input-background: unset;
   }
   .ab-IconSelector__Popup {
     color: var(--ab-cmp-icon-selector__popup__color);

package/package.json

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

package/src/AdaptableOptions/DefaultAdaptableOptions.js

@@ -334,6 +334,12 @@ const DefaultAdaptableOptions = {
             showOutsideDays: true,
             datepickerButtons: ['close', 'today'],
         },
+        colourPickerOptions: {
+            tabs: ['Custom', 'Palette'],
+            orderPaletteColours: true,
+            removeDuplicates: true,
+            showGroupLabels: false,
+        },
         editableCellStyle: undefined,
         readOnlyCellStyle: undefined,
         editedCellStyle: undefined,

package/src/AdaptableOptions/UserInterfaceOptions.d.ts

@@ -1,4 +1,5 @@
 import { AdaptableIcon } from '../AdaptableState/Common/AdaptableIcon';
+import { AdaptableModule } from '../AdaptableState/Common/Types';
 import { DateInputOptions } from './DateInputOptions';
 import { AdaptableObjectTag } from '../AdaptableState/Common/AdaptableObject';
 import { AdaptableStyle } from '../AdaptableState/Common/AdaptableStyle';
@@ -30,9 +31,9 @@ export interface UserInterfaceOptions<TData = any> {
      */
     dateInputOptions?: DateInputOptions;
     /**
-     * @deprecated Override `--ab-color-swatch-*`, `--ab-color-palette-*`, and semantic `--ab-color-*` variables in light/dark theme instead; will be removed in future release
+     * Options for the Colour Picker, including which colours to display
      */
-    colorPalette?: string[] | ((currentTheme: string) => string[]);
+    colourPickerOptions?: ColourPickerOptions;
     /**
      * Style to set for editable Cells
      */
@@ -52,9 +53,11 @@ export interface UserInterfaceOptions<TData = any> {
      */
     styleClassNames?: string[];
     /**
-     * Optional list of AdaptableObjectTags that can be associated with AdaptableObjects
+     * Optional list of AdaptableObjectTags that can be associated with AdaptableObjects.
+     *
+     * When provided as a function, return `undefined` to provide no tags.
      */
-    objectTags?: AdaptableObjectTag[] | ((context: ObjectTagsContext) => AdaptableObjectTag[]);
+    objectTags?: AdaptableObjectTag[] | ((context: ObjectTagsContext) => AdaptableObjectTag[] | undefined);
     /**
      * Provide links to AdapTable documentation (in Module popups and Expression Editor)
      *
@@ -132,6 +135,82 @@ export interface LoadingScreenOptions<TData = any> {
      */
     loadingScreenText?: string;
 }
+/**
+ * Options for the Colour Picker.
+ */
+export interface ColourPickerOptions {
+    /**
+     * Colour Picker tabs to display in order provided; `Custom`, `Palette`, or both
+     *
+     * @defaultValue ['Custom', 'Palette']
+     */
+    tabs?: ColourPickerTab[];
+    /**
+     * Orders Palette swatches around the colour wheel; if `false`, each colour stays the order supplied
+     *
+     * @defaultValue true
+     */
+    orderPaletteColours?: boolean;
+    /**
+     * Leave out duplicates of swatches already displayed
+     *
+     * @defaultValue true
+     */
+    removeDuplicates?: boolean;
+    /**
+     * Chooses which of the supplied colours (theme & colour palette) the Palette tab shows
+     */
+    filterColours?: (context: ColourPickerFilterContext) => ColourPickerFilterResult | void;
+    /**
+     * Show **Theme** and **Palette** headings on the Palette tab (if both have colours)
+     *
+     * @defaultValue false
+     */
+    showGroupLabels?: boolean;
+}
+/**
+ * Colour Picker tabs: `Custom` is free colour picker, `Palette` is list of swatches
+ */
+export type ColourPickerTab = 'Custom' | 'Palette';
+/**
+ * A colour the Colour Picker can offer. `value` is what gets stored
+ */
+export interface ColourPickerColour {
+    /**
+     * The CSS value that gets stored, e.g. `var(--ab-color-success)`.
+     */
+    value: string;
+    /** The name shown for the colour, e.g. "Success" or "Palette 3". */
+    label: string;
+    /**
+     * The colour as the active theme paints it
+     */
+    hex?: string;
+}
+/**
+ * Colours available when Colour Picker opens, and module being edited.
+ */
+export interface ColourPickerFilterContext {
+    /**
+     * Available Theme colours
+     */
+    themeColours: ColourPickerColour[];
+    /**
+     * Available Palette colours
+     */
+    paletteColours: ColourPickerColour[];
+    /**
+     * Module being edited
+     */
+    module?: AdaptableModule;
+}
+/**
+ * Colours to show - must be in list provided (otherwise ignored)
+ */
+export interface ColourPickerFilterResult {
+    themeColours: ColourPickerColour[];
+    paletteColours: ColourPickerColour[];
+}
 /**
  * Context used when evaluating Object Tags
  */

package/src/AdaptableState/StyledColumns/GradientStyle.d.ts

@@ -7,10 +7,14 @@ import { NumericStyledColumn } from './Common/NumericStyledColumn';
 export interface ZeroCentredColors {
     /**
      * Colour applied to negative cell values (`Col-Min`…`0`)
+     *
+     * @defaultValue `var(--ab-color-destructive)`
      */
     NegativeColor: string;
     /**
      * Colour applied to positive cell values (`0`…`Col-Max`)
+     *
+     * @defaultValue `var(--ab-color-success)`
      */
     PositiveColor: string;
 }

package/src/Api/Implementation/QuickSearchApiImpl.js

@@ -8,10 +8,10 @@ export class QuickSearchApiImpl extends ApiBase {
         return this.getAdaptableState().QuickSearch;
     }
     runQuickSearch(quickSearchText) {
-        this.dispatchAction(QuickSearchRedux.QuickSearchRun(quickSearchText));
+        this.dispatchAction(QuickSearchRedux.QuickSearchTextAction(quickSearchText));
     }
     clearQuickSearch() {
-        this.dispatchAction(QuickSearchRedux.QuickSearchRun(''));
+        this.dispatchAction(QuickSearchRedux.QuickSearchClear());
     }
     gotoNextMatch() {
         this.getAdaptableApi().agGridApi.findNext();

package/src/Api/Implementation/UserInterfaceApiImpl.d.ts

@@ -11,7 +11,6 @@ export declare class UserInterfaceApiImpl extends ApiBase implements UserInterfa
     internalApi: UserInterfaceInternalApi;
     private showProgressIndicatorTimeout;
     constructor(_adaptable: IAdaptable);
-    getColorPalette(): string[];
     getCustomIcons(): CustomIcon[];
     getStyleClassNames(): string[] | undefined;
     getEditableCellStyle(): AdaptableStyle | undefined;

package/src/Api/Implementation/UserInterfaceApiImpl.js

@@ -1,8 +1,6 @@
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { ArrayExtensions } from '../../Utilities/Extensions/ArrayExtensions';
 import { resolveValueOrFunction } from '../../Utilities/Helpers/ValueOrFunctionHelper';
-import { logDeprecation } from '../../Utilities/logDeprecation';
-import UIHelper from '../../Utilities/Helpers/UIHelper';
 import { CUSTOM_WINDOW_FACTORY_ID } from '../../View/Components/Popups/WindowPopups/WindowPopups';
 import { UserInterfaceInternalApi } from '../Internal/UserInterfaceInternalApi';
 import { ApiBase } from './ApiBase';
@@ -15,16 +13,6 @@ export class UserInterfaceApiImpl extends ApiBase {
         super(_adaptable);
         this.internalApi = new UserInterfaceInternalApi(_adaptable);
     }
-    getColorPalette() {
-        const colorPalette = this.getUserInterfaceOptions().colorPalette;
-        if (colorPalette != null) {
-            logDeprecation(this._adaptable.logger, 'UserInterfaceOptions', 'colorPalette', undefined, 'Override `--ab-color-swatch-*`, `--ab-color-palette-*`, and semantic `--ab-color-*` variables in your light or dark theme CSS instead. `colorPalette` will be removed in a future major release.');
-            if (typeof colorPalette === 'function' || Array.isArray(colorPalette)) {
-                return resolveValueOrFunction(colorPalette, this.getThemeApi().getCurrentTheme());
-            }
-        }
-        return UIHelper.getDefaultColorPalette();
-    }
     getCustomIcons() {
         return resolveValueOrFunction(this.getUserInterfaceOptions().customIcons) ?? [];
     }
@@ -42,9 +30,15 @@ export class UserInterfaceApiImpl extends ApiBase {
     }
     getAdaptableObjectTags() {
         const objectTags = this.getUserInterfaceOptions().objectTags;
-        const resolvedTags = resolveValueOrFunction(objectTags, this.getAdaptableInternalApi().buildBaseContext());
-        if (resolvedTags && ArrayExtensions.IsNotNullOrEmpty(resolvedTags)) {
-            return resolvedTags;
+        if (typeof objectTags === 'function') {
+            const tags = objectTags(this.getAdaptableInternalApi().buildBaseContext());
+            if (!Array.isArray(tags)) {
+                return;
+            }
+            return tags.filter((tag) => typeof tag === 'string');
+        }
+        if (objectTags && ArrayExtensions.IsNotNullOrEmpty(objectTags)) {
+            return objectTags;
         }
     }
     getAdaptableObjectsWithTag(tag, adaptableModule) {

package/src/Api/Internal/AdaptableInternalApi.js

@@ -276,9 +276,11 @@ export class AdaptableInternalApi extends ApiBase {
             return userInterfaceOptions.objectTags;
         }
         if (typeof userInterfaceOptions.objectTags === 'function') {
-            return userInterfaceOptions
-                .objectTags(this.buildBaseContext())
-                .filter((tag) => typeof tag === 'string');
+            const tags = userInterfaceOptions.objectTags(this.buildBaseContext());
+            if (!Array.isArray(tags)) {
+                return;
+            }
+            return tags.filter((tag) => typeof tag === 'string');
         }
     }
     dispatchReduxAction(action) {

package/src/Api/Internal/StateInternalApi.js

@@ -92,14 +92,15 @@ export class StateInternalApi extends ApiBase {
                         rowModelType: this._adaptable.agGridAdapter.getGridOption('rowModelType'),
                         treeData: this._adaptable.agGridAdapter.getGridOption('treeData'),
                     };
-                    const clonedState = state.Internal
-                        ? JSON.parse(JSON.stringify(state))
-                        : getPersistableState(JSON.parse(JSON.stringify(state)));
+                    const clonedState = getPersistableState(JSON.parse(JSON.stringify(state)));
                     let processedState = this._adaptable.migrateLoadedAdaptableState(clonedState);
                     processedState = this._adaptable.normalizeAdaptableState(processedState, agGridOptions);
+                    const oldState = this.getAdaptableApi().stateApi.getPersistentState();
                     this.getAdaptableStore().TheStore.dispatch(LoadState(processedState));
                     this.getAdaptableStore().TheStore.dispatch(InitState());
                     this._adaptable.refreshLayout();
+                    const newState = this.getAdaptableApi().stateApi.getPersistentState();
+                    this.getEventApi().internalApi.fireAdaptableStateReloadedEvent(oldState, newState);
                     void this.getAdaptableStore()
                         .saveStateNow(this._adaptable)
                         .then(() => resolve())

package/src/Api/UserInterfaceApi.d.ts

@@ -8,10 +8,6 @@ import { UserInterfaceState } from '../AdaptableState/UserInterfaceState';
  * Functions relating to User Interface section of Adaptable State
  */
 export interface UserInterfaceApi {
-    /**
-     * Retrieves Color Palette currently being used
-     */
-    getColorPalette(): string[];
     /**
      * Retrieves Custom Icons provided by users
      */

package/src/Redux/ActionsReducers/QuickSearchRedux.d.ts

@@ -14,6 +14,10 @@ export declare const QUICK_SEARCH_DEFAULT_CURRENT_TEXT_MATCH_STYLE: {
  * @ReduxAction Runs Quick Search
  */
 export declare const QUICK_SEARCH_RUN = "QUICK_SEARCH_RUN";
+/**
+ * @ReduxAction Clears Quick Search text
+ */
+export declare const QUICK_SEARCH_CLEAR = "QUICK_SEARCH_CLEAR";
 /**
  * @ReduxAction Sets Quick Search whole-cell style (SSRM / legacy)
  */
@@ -33,6 +37,8 @@ export declare const QUICK_SEARCH_READY = "QUICK_SEARCH_READY";
 export interface QuickSearchRunAction extends Redux.Action {
     quickSearchText: string;
 }
+export interface QuickSearchClearAction extends Redux.Action {
+}
 export interface QuickSearchSetMatchingCellStyleAction extends Redux.Action {
     matchingCellStyle: AdaptableStyle;
 }
@@ -46,6 +52,9 @@ export interface QuickSearchReadyAction extends Redux.Action {
     quickSearchState: QuickSearchState;
 }
 export declare const QuickSearchRun: (quickSearchText: string) => QuickSearchRunAction;
+export declare const QuickSearchClear: () => QuickSearchClearAction;
+/** Runs Quick Search, or clears it when the text is empty. */
+export declare const QuickSearchTextAction: (quickSearchText: string) => QuickSearchRunAction | QuickSearchClearAction;
 export declare const QuickSearchSetCellMatchingStyle: (matchingCellStyle: AdaptableStyle) => QuickSearchSetMatchingCellStyleAction;
 export declare const QuickSearchSetTextMatchingStyle: (textMatchStyle: AdaptableStyle) => QuickSearchSetTextMatchingStyleAction;
 export declare const QuickSearchSetCurrentTextMatchingStyle: (currentTextMatchStyle: AdaptableStyle) => QuickSearchSetCurrentTextMatchingStyleAction;

package/src/Redux/ActionsReducers/QuickSearchRedux.js

@@ -10,6 +10,7 @@ export const QUICK_SEARCH_DEFAULT_CURRENT_TEXT_MATCH_STYLE = {
     FontWeight: 'Bold',
 };
 export const QUICK_SEARCH_RUN = 'QUICK_SEARCH_RUN';
+export const QUICK_SEARCH_CLEAR = 'QUICK_SEARCH_CLEAR';
 export const QUICK_SEARCH_SET_CELL_MATCHING_STYLE = 'QUICK_SEARCH_SET_CELL_MATCHING_STYLE';
 export const QUICK_SEARCH_SET_TEXT_MATCHING_STYLE = 'QUICK_SEARCH_SET_TEXT_MATCHING_STYLE';
 export const QUICK_SEARCH_SET_CURRENT_TEXT_MATCHING_STYLE = 'QUICK_SEARCH_SET_CURRENT_TEXT_MATCHING_STYLE';
@@ -18,6 +19,10 @@ export const QuickSearchRun = (quickSearchText) => ({
     type: QUICK_SEARCH_RUN,
     quickSearchText,
 });
+export const QuickSearchClear = () => ({
+    type: QUICK_SEARCH_CLEAR,
+});
+export const QuickSearchTextAction = (quickSearchText) => quickSearchText ? QuickSearchRun(quickSearchText) : QuickSearchClear();
 export const QuickSearchSetCellMatchingStyle = (matchingCellStyle) => ({
     type: QUICK_SEARCH_SET_CELL_MATCHING_STYLE,
     matchingCellStyle: matchingCellStyle,
@@ -43,6 +48,10 @@ export const QuickSearchReducer = (state = initialState, action) => {
             return Object.assign({}, state, {
                 QuickSearchText: action.quickSearchText,
             });
+        case QUICK_SEARCH_CLEAR:
+            return Object.assign({}, state, {
+                QuickSearchText: EMPTY_STRING,
+            });
         case QUICK_SEARCH_SET_CELL_MATCHING_STYLE:
             return Object.assign({}, state, {
                 CellMatchStyle: action.matchingCellStyle,

package/src/Redux/Store/AdaptableStore.js

@@ -720,10 +720,12 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     adaptable.refreshSortIfColumnsSorted();
                     return returnAction;
                 }
+                case QuickSearchRedux.QUICK_SEARCH_CLEAR:
                 case QuickSearchRedux.QUICK_SEARCH_RUN: {
                     let returnAction = next(action);
-                    const actionTyped = action;
-                    const searchText = actionTyped.quickSearchText;
+                    const searchText = action.type === QuickSearchRedux.QUICK_SEARCH_CLEAR
+                        ? ''
+                        : action.quickSearchText;
                     adaptable.setAgGridFindSearchValue(searchText);
                     adaptable.api.gridApi.refreshAllCells(true);
                     if (adaptable.adaptableOptions.quickSearchOptions.filterGridAfterQuickSearch) {

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

@@ -8,15 +8,13 @@ import { AdaptableAlert } from '../../AdaptableState/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../../AdaptableState/Common/AdaptableMessageType';
 /** A theme colour token as a CSS value: `themeColorVar('badge')` → `var(--ab-color-badge)`. */
 export declare function themeColorVar(token: string): string;
-/** Generic swatch entries for the Colour Picker (resolved at runtime per active theme). */
-export declare function getSwatchColorVar(index: number): string;
 /** Default colour of a new range in Range Bar, Bullet and Ranges styled columns. */
 export declare function getDefaultRangeColor(): string;
-export declare function getSwatchColorPaletteEntries(): string[];
-/** Theme semantic colours for the Colour Picker (resolved at runtime per active theme). */
-export declare function getThemeSemanticColorPaletteEntries(): string[];
-/** Swatch and theme semantic entries (default Colour Picker set). */
-export declare function getDefaultColorPalette(): string[];
+/** Default colours for a new Gradient Zero Centred range (follows the theme). */
+export declare function getDefaultZeroCentredColors(): {
+    NegativeColor: string;
+    PositiveColor: string;
+};
 export declare function getEmptyConfigState(): EditableConfigEntityState;
 export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "text" | "number" | "date";
 export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
@@ -44,11 +42,8 @@ export declare function setCSSVariableValue(cssVariable: string, value: string):
 export declare function isBrowserDocumentAvailable(): boolean;
 export declare const UIHelper: {
     themeColorVar: typeof themeColorVar;
-    getSwatchColorVar: typeof getSwatchColorVar;
     getDefaultRangeColor: typeof getDefaultRangeColor;
-    getSwatchColorPaletteEntries: typeof getSwatchColorPaletteEntries;
-    getThemeSemanticColorPaletteEntries: typeof getThemeSemanticColorPaletteEntries;
-    getDefaultColorPalette: typeof getDefaultColorPalette;
+    getDefaultZeroCentredColors: typeof getDefaultZeroCentredColors;
     getEmptyConfigState: typeof getEmptyConfigState;
     getDescriptionForDataType: typeof getDescriptionForDataType;
     getPlaceholderForDataType: typeof getPlaceholderForDataType;