@adaptabletools/adaptable 18.0.0-canary.8 → 18.0.0-canary.9

package/src/View/Components/AdaptableDateInput/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { AdaptableInputProps } from '../AdaptableInput';
 export type AdaptableDateInputProps = AdaptableInputProps;
-declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "onClick" | "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" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
+declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "onClick" | "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" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
 export default AdaptableDateInput;

package/src/View/Components/NewScopeComponent.js

@@ -79,6 +79,9 @@ export const NewScopeComponent = (props) => {
         if (scopeApi.scopeHasDataType(props.scope)) {
             return 'DataType';
         }
+        if (scopeApi.scopeHasColumnType(props.scope)) {
+            return 'ColumnType';
+        }
         return undefined;
     };
     const onScopeSelectChanged = (value) => {
@@ -93,6 +96,11 @@ export const NewScopeComponent = (props) => {
                 DataTypes: [],
             };
         }
+        else if (value == 'ColumnType') {
+            newScope = {
+                ColumnTypes: [],
+            };
+        }
         else {
             newScope = {
                 All: true,
@@ -128,6 +136,9 @@ export const NewScopeComponent = (props) => {
     if (Array.isArray(props.availableDataTypes)) {
         dataTypeOptions = props.availableDataTypes.map((dataType) => DATA_TYPES_MAP[dataType]);
     }
+    const hasColumnTypes = React.useMemo(() => {
+        return api.optionsApi.getColumnOptions().columnTypes.length > 0;
+    }, []);
     return (React.createElement(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs.Tab, { value: "Row" },
             React.createElement(Radio, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
@@ -135,6 +146,8 @@ export const NewScopeComponent = (props) => {
             React.createElement(Radio, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
         !props.disableDataTypes && (React.createElement(Tabs.Tab, { value: "DataType" },
             React.createElement(Radio, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
+        hasColumnTypes && (React.createElement(Tabs.Tab, { value: "ColumnType" },
+            React.createElement(Radio, { margin: 0, value: "ColumnType", checked: scopeChoice == 'ColumnType', tabIndex: -1 }, "Column Types"))),
         props.hideWholeRow ? null : (React.createElement(Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
             React.createElement(Text, { padding: 2, pl: 0, fontSize: 2 }, props.descriptions.rowScope))),
         !props.disableColumns && (React.createElement(Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },
@@ -147,5 +160,23 @@ export const NewScopeComponent = (props) => {
         !props.disableDataTypes && (React.createElement(Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
             React.createElement(Box, null,
                 props.descriptions.dataTypeScope && (React.createElement(Text, { p: 2, pl: 0, mb: 2, fontSize: 2 }, props.descriptions.dataTypeScope)),
-                React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label)))))))));
+                React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
+        hasColumnTypes && (React.createElement(Tabs.Content, { value: "ColumnType", style: { flex: 'none' }, "data-name": "column-type-scope" },
+            React.createElement(Box, null,
+                React.createElement(Flex, { flexDirection: "column" }, api.optionsApi.getColumnOptions().columnTypes.map((columnType) => {
+                    var _a;
+                    return (React.createElement(CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && ((_a = props.scope.ColumnTypes) === null || _a === void 0 ? void 0 : _a.includes(columnType)), onChange: (checked) => {
+                            let columnTypes = [].concat(props.scope.ColumnTypes);
+                            if (checked) {
+                                columnTypes.push(columnType);
+                            }
+                            else {
+                                columnTypes = columnTypes.filter((ct) => ct !== columnType);
+                            }
+                            let newScope = {
+                                ColumnTypes: columnTypes,
+                            };
+                            props.updateScope(newScope);
+                        } }, columnType));
+                })))))));
 };

package/src/View/Layout/TransposedPopup.js

@@ -4,6 +4,7 @@ import FormLayout, { FormRow } from '../../components/FormLayout';
 import Panel from '../../components/Panel';
 import { useAdaptable } from '../AdaptableContext';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
+import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
 export const TransposedPopup = (props) => {
     const adaptable = useAdaptable();
     const rowNodes = React.useMemo(() => {
@@ -155,14 +156,14 @@ export const TransposedPopup = (props) => {
             sideBar: false,
         };
         const modules = adaptable.getAgGridRegisteredModules();
-        const adaptableInitFn = Object.getPrototypeOf(adaptable).constructor.init;
-        const agGridConfig = {
-            gridOptions: agGridOptions,
-            modules: modules,
-        };
         let transposedAdaptableApi;
         (async () => {
-            transposedAdaptableApi = await adaptableInitFn(adaptableOptions, agGridConfig);
+            transposedAdaptableApi = await AdaptableAgGrid._initInternal({
+                variant: 'vanilla',
+                adaptableOptions,
+                gridOptions: agGridOptions,
+                modules,
+            });
             adaptable.api.eventApi.on('ThemeChanged', (event) => {
                 transposedAdaptableApi.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
             });

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -26,6 +26,7 @@ import { RenderReactRootFn } from '../renderReactRoot';
 import { AgGridOptionsService } from './AgGridOptionsService';
 import { AgGridColumnAdapter } from './AgGridColumnAdapter';
 import { RowEditService } from '../Utilities/Services/RowEditService';
+import { SummaryService } from '../Utilities/Services/SummaryService';
 export type AdaptableVariant = 'vanilla' | 'react' | 'angular';
 export type AdaptableLifecycleState = 'initial' | 'preprocessOptions' | 'initAdaptableState' | 'setupAgGrid' | 'initAgGrid' | 'available' | 'ready' | 'preDestroyed';
 type RenderAgGridFrameworkComponentResult = false | GridApi;
@@ -52,6 +53,11 @@ export declare class AdaptableAgGrid implements IAdaptable {
     hasAutogeneratedPrimaryKey: boolean;
     hasAdaptableToolPanel: boolean;
     private initWithLazyData;
+    /**
+     * once layouts are properly handled with the new aggrid methods & events
+     * we can remove this hack
+     */
+    private previousAgGridColumnState;
     _rawAdaptableOptions: AdaptableOptions;
     adaptableOptions: AdaptableOptions;
     agGridOptionsService: AgGridOptionsService;
@@ -76,6 +82,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     RowEditService: RowEditService;
     Fdc3Service: Fdc3Service;
     CellPopupService: CellPopupService;
+    SummaryService: SummaryService;
     private LicenseService;
     private ChartingService;
     private ThemeService;
@@ -129,6 +136,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private _initAdaptableAgGrid;
     private normaliseLayoutState;
     private normaliseToolPanelState;
+    refreshQuickFilter(): void;
     applyColumnFiltering(): void;
     applyGridFiltering(): void;
     private refreshColDefs;
@@ -152,6 +160,8 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private initAdaptableStore;
     private mapAdaptableStateToAgGridState;
     private addGridEventListeners;
+    private shouldAutoSizeLayout;
+    private autoSizeLayoutIfNeeded;
     private performAudit;
     forPlugins(callback: (plugin: AdaptablePlugin) => any): void;
     getPluginProperty(pluginId: string, propertyName: string, ...args: any): any;
@@ -175,7 +185,9 @@ export declare class AdaptableAgGrid implements IAdaptable {
     getDisplayValueFromRawValue(rowNode: IRowNode, columnId: string, rawValue: any): string | undefined;
     private getCleanValue;
     getNormalisedValueFromRawValue(rawValue: any, column: AdaptableColumn): string | number | boolean | Date | unknown;
-    updateColumnModelAndRefreshGrid(): void;
+    updateColumnModelAndRefreshGrid(config?: {
+        skipColDefsRefresh?: boolean;
+    }): void;
     redrawBody(): void;
     refreshHeader(): void;
     redrawRows(rowNodes?: IRowNode[]): void;
@@ -333,5 +345,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private restoreUnGroupColumnOrder;
     private onSortChanged;
     private getColumnSorts;
+    setPinnedRows(pinnedRows: any, location: 'top' | 'bottom'): void;
+    setupRowSummaries(): void;
 }
 export {};

package/src/agGrid/AdaptableAgGrid.js

@@ -95,6 +95,7 @@ import { AdaptableUpgradeHelper } from '../migration/AdaptableUpgradeHelper';
 import { ensurePortalElement } from '../components/Modal';
 import { AdaptableLoadingScreen } from '../View/Components/Popups/AdaptableLoadingScreen';
 import { createElement } from 'react';
+import { SummaryService } from '../Utilities/Services/SummaryService';
 const RowNodeProto = RowNode.prototype;
 const RowNode_dispatchLocalEvent = RowNodeProto.dispatchLocalEvent;
 /**
@@ -138,6 +139,11 @@ const adaptableInstances = {};
 const publishTimestamp = Number(ADAPTABLE_PUBLISH_TIMESTAMP);
 export class AdaptableAgGrid {
     constructor() {
+        /**
+         * once layouts are properly handled with the new aggrid methods & events
+         * we can remove this hack
+         */
+        this.previousAgGridColumnState = '';
         this.columnMinMaxValuesCache = {};
         this.renderReactRoot = (node, container) => defaultRenderReactRoot(node, container);
         /**
@@ -251,8 +257,7 @@ export class AdaptableAgGrid {
         this.lifecycleState = 'preprocessOptions';
         this._rawAdaptableOptions = config.adaptableOptions;
         if (StringExtensions.IsNullOrEmptyOrWhiteSpace(this._rawAdaptableOptions.adaptableId)) {
-            AdaptableLogger.consoleErrorBase(`'AdaptableOptions.adaptableId' is a required property and cannot be empty or null`);
-            this._rawAdaptableOptions.adaptableId = `AdapTable_${Date.now()}`;
+            this._rawAdaptableOptions.adaptableId = `adaptable_id_${Date.now()}`;
         }
         this.logger = (_a = this.logger) !== null && _a !== void 0 ? _a : new AdaptableLogger(this._rawAdaptableOptions.adaptableId);
         const perfInitAdaptableAgGrid = this.logger.beginPerf(`Adaptable._initAdaptableAgGrid()`);
@@ -451,15 +456,21 @@ export class AdaptableAgGrid {
         state.ToolPanel = toolPanelState;
         return state;
     }
-    applyColumnFiltering() {
-        if (this.api.columnFilterApi.isQuickFilterAvailable()) {
-            if (this.api.columnFilterApi.isQuickFilterVisible()) {
-                this.showQuickFilter();
-            }
-            else {
-                this.hideQuickFilter();
-            }
+    refreshQuickFilter() {
+        const isQuickFilterVisible = this.api.internalApi.getSystemState().IsQuickFilterVisible;
+        const isQuickFilterAvailable = this.isQuickFilterAvailable();
+        if (isQuickFilterVisible === isQuickFilterAvailable) {
+            return;
         }
+        if (isQuickFilterAvailable) {
+            this.api.columnFilterApi.showQuickFilterBar();
+        }
+        else {
+            this.api.columnFilterApi.hideQuickFilterBar();
+        }
+    }
+    applyColumnFiltering() {
+        this.refreshQuickFilter();
         this.applyGridFiltering();
         this.agGridAdapter.updateColumnFilterActiveState();
     }
@@ -702,6 +713,20 @@ export class AdaptableAgGrid {
                     return nodeA.key < nodeB.key ? -1 : 1;
                 };
             });
+            /**
+             * `autoSizeStrategy`
+             *
+             * This is needed here, even if we do auto sizing on FIRST_DATA_RENDERED.
+             * Sometimes FIRST_DATA_RENDERED is triggered too early and autoSizing doesn't work initially
+             * so we need this block
+             */
+            this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'autoSizeStrategy', (original_autoSizeStrategy) => {
+                return this.shouldAutoSizeLayout()
+                    ? {
+                        type: 'fitCellContents',
+                    }
+                    : original_autoSizeStrategy;
+            });
         }
         /**
          * `components`
@@ -850,6 +875,16 @@ export class AdaptableAgGrid {
                 return (returnValue === null || returnValue === void 0 ? void 0 : returnValue.length) ? returnValue : undefined;
             };
         });
+        /**
+         * `floatingFiltersHeight`
+         */
+        this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'floatingFiltersHeight', (original_floatingFiltersHeight) => {
+            if (this.api.layoutApi.getCurrentLayout().EnablePivot) {
+                // if the default layout is a pivot on, hide the floating filters from the beginning, otherwise we get an annoying flicker
+                return 0;
+            }
+            return original_floatingFiltersHeight;
+        });
         /**
          * `columnTypes`
          */
@@ -1235,7 +1270,9 @@ export class AdaptableAgGrid {
             if (this.initWithLazyData) {
                 this.updateColumnModelAndRefreshGrid();
                 this.api.calculatedColumnApi.refreshAggregatedCalculatedColumns();
+                this._emit('FirstDataRendered');
             }
+            this.autoSizeLayoutIfNeeded();
         }));
         /**
          * Use Case: Entered or Left Pivot Mode
@@ -1437,6 +1474,25 @@ export class AdaptableAgGrid {
             },
         };
     }
+    shouldAutoSizeLayout() {
+        const { layoutApi } = this.api;
+        const { layoutOptions } = this.adaptableOptions;
+        const currentLayout = layoutApi.getCurrentLayout();
+        if (currentLayout.ColumnWidthMap && Object.keys(currentLayout.ColumnWidthMap).length > 0) {
+            return;
+        }
+        const autoSize = currentLayout.EnablePivot
+            ? layoutOptions.autoSizeColumnsInPivotLayout
+            : layoutOptions.autoSizeColumnsInLayout;
+        return autoSize;
+    }
+    autoSizeLayoutIfNeeded() {
+        if (this.shouldAutoSizeLayout()) {
+            requestAnimationFrame(() => {
+                this.autoSizeAllColumns();
+            });
+        }
+    }
     performAudit(action, oldState, newState) {
         if (this.isReady) {
             const adaptableStateChangedInfo = {
@@ -1492,6 +1548,7 @@ export class AdaptableAgGrid {
         this.AlertService = new AlertService(this.api);
         this.TeamSharingService = new TeamSharingService(this.api);
         this.Fdc3Service = new Fdc3Service(this.api);
+        this.SummaryService = new SummaryService(this.api);
         this.CellPopupService = new CellPopupService(this.api);
         this.RowEditService = new RowEditService(this.api);
         this.MetamodelService = new MetamodelService(() => this.api.optionsApi.getAdaptableOptions(), true);
@@ -1752,7 +1809,10 @@ export class AdaptableAgGrid {
         }
         return rawValue;
     }
-    updateColumnModelAndRefreshGrid() {
+    updateColumnModelAndRefreshGrid(config) {
+        if (!(config === null || config === void 0 ? void 0 : config.skipColDefsRefresh)) {
+            this.refreshColDefs();
+        }
         this.deriveAdaptableColumnStateFromAgGrid();
         this.agGridColumnAdapter.setupColumns();
         this.redrawBody();
@@ -2865,6 +2925,7 @@ export class AdaptableAgGrid {
         else {
             (_b = this.agGridAdapter.getAgGridApi()) === null || _b === void 0 ? void 0 : _b.destroy();
         }
+        this.previousAgGridColumnState = '';
         const gridContainerElement = this.getAgGridContainerElement();
         if (gridContainerElement) {
             gridContainerElement.removeEventListener('keydown', this.agGridListenerKeydown);
@@ -3030,6 +3091,10 @@ export class AdaptableAgGrid {
         // });
     }
     isQuickFilterAvailable() {
+        if (this.api.layoutApi.getCurrentLayout().EnablePivot) {
+            // hide completely the quick filter if pivot is enabled
+            return false;
+        }
         return this.hasFloatingFilterOnAtLeastOneColumn(this.agGridAdapter.getAgGridApi().getColumnDefs());
     }
     hasFloatingFilterOnAtLeastOneColumn(columnDefs) {
@@ -3254,18 +3319,20 @@ export class AdaptableAgGrid {
             requestAnimationFrame(() => {
                 this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
             });
-            //but if it's also the first time the grid is loading
-            //it's not timely enough the above call, so we keep trying... I know it's ugly, we need to find a better way
-            setTimeout(() => {
-                this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
-                setTimeout(() => {
-                    this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
-                }, 200);
-            }, 100);
+            // //but if it's also the first time the grid is loading
+            // //it's not timely enough the above call, so we keep trying... I know it's ugly, we need to find a better way
+            // setTimeout(() => {
+            //   this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
+            //   setTimeout(() => {
+            //     this.agGridAdapter.getAgGridApi().autoSizeAllColumns();
+            //   }, 200);
+            // }, 100);
         }
-        else if (((_f = (_e = this.adaptableOptions) === null || _e === void 0 ? void 0 : _e.layoutOptions) === null || _f === void 0 ? void 0 : _f.autoSizeColumnsInLayout) &&
-            colsToAutoSizeArray.length) {
-            this.agGridAdapter.getAgGridApi().autoSizeColumns(colsToAutoSizeArray);
+        else {
+            if (((_f = (_e = this.adaptableOptions) === null || _e === void 0 ? void 0 : _e.layoutOptions) === null || _f === void 0 ? void 0 : _f.autoSizeColumnsInLayout) &&
+                colsToAutoSizeArray.length) {
+                this.agGridAdapter.getAgGridApi().autoSizeColumns(colsToAutoSizeArray);
+            }
         }
         this.forPlugins((plugin) => {
             if (plugin.afterSetLayout) {
@@ -3614,6 +3681,21 @@ export class AdaptableAgGrid {
      */
     updateLayoutFromGrid() {
         var _a, _b;
+        const agGridApi = this.agGridAdapter.getAgGridApi();
+        const columnState = agGridApi.getColumnState();
+        try {
+            const stringifiedState = JSON.stringify(columnState);
+            if (stringifiedState === this.previousAgGridColumnState) {
+                // same grid column state as a previous,
+                // so no need to update, as the layout has already been updated
+                // for this grid column state
+                return;
+            }
+            this.previousAgGridColumnState = stringifiedState;
+        }
+        catch (ex) {
+            this.logger.consoleError('Error stringifying column state', ex);
+        }
         const currentLayout = this.api.layoutApi.getCurrentLayout();
         if (currentLayout.IsReadOnly) {
             // reaply the layout so the grid is reverted
@@ -3625,7 +3707,6 @@ export class AdaptableAgGrid {
         const columnFlexes = {};
         const pinnedColumns = {};
         const columnSorts = [];
-        const columnState = this.agGridAdapter.getAgGridApi().getColumnState();
         let groupedColumns = [...new Array(columnState.length)];
         let pivotedColumns = [...new Array(columnState.length)];
         const pivotColumns = [];
@@ -3818,4 +3899,31 @@ export class AdaptableAgGrid {
             };
         });
     }
+    setPinnedRows(pinnedRows, location) {
+        const gridApi = this.agGridAdapter.getAgGridApi();
+        switch (location) {
+            case 'top':
+                gridApi.setGridOption('pinnedTopRowData', pinnedRows);
+                break;
+            case 'bottom':
+                gridApi.setGridOption('pinnedBottomRowData', pinnedRows);
+                break;
+        }
+    }
+    setupRowSummaries() {
+        var _a;
+        const rowSummaries = (_a = this.api.internalApi.getAdaptableState().System.RowSummary.rowSummaries) !== null && _a !== void 0 ? _a : [];
+        const { top, bottom } = rowSummaries.reduce((acc, summaryRow) => {
+            const row = summaryRow.RowData;
+            if (summaryRow.Position === 'Bottom' || !summaryRow.Position) {
+                acc.bottom.push(row);
+            }
+            else {
+                acc.top.push(row);
+            }
+            return acc;
+        }, { top: [], bottom: [] });
+        this.setPinnedRows(top, 'top');
+        this.setPinnedRows(bottom, 'bottom');
+    }
 }

package/src/agGrid/AgGridAdapter.d.ts

@@ -48,6 +48,7 @@ export declare class AgGridAdapter {
     private isColumnExportable;
     private isColumnHideable;
     private isColumnFilterable;
+    private getColumnTypes;
     private getColumnPinnedPosition;
     private isColumnFixed;
     private isColumnRowGrouped;

package/src/agGrid/AgGridAdapter.js

@@ -272,6 +272,7 @@ export class AgGridAdapter {
             isGrouped: this.isColumnRowGrouped(colDef),
             isFixed: this.isColumnFixed(colDef),
             pinned: this.getColumnPinnedPosition(colDef),
+            columnTypes: this.getColumnTypes(colDef),
             isExcludedFromQuickSearch: false,
             isSparkline: this.isColumnSparkline(colDef),
         };
@@ -490,6 +491,13 @@ export class AgGridAdapter {
         }
         return colDef != null && colDef.filter != null && colDef.filter != false;
     }
+    getColumnTypes(colDef) {
+        if (!colDef.type) {
+            return [];
+        }
+        const allTypes = typeof colDef.type === 'string' ? [colDef.type] : colDef.type;
+        return allTypes;
+    }
     getColumnPinnedPosition(colDef) {
         return colDef.pinned
             ? colDef.pinned === 'left' || colDef.pinned === true

package/src/agGrid/AgGridColumnAdapter.js

@@ -11,6 +11,7 @@ import UIHelper from '../View/UIHelper';
 import { getPercentBarRendererForColumn } from './PercentBarRenderer';
 import { getBadgeRendererForColumn } from './BadgeRenderer';
 import Helper from '../Utilities/Helpers/Helper';
+import { ROW_SUMMARY_ROW_ID } from '../PredefinedConfig/Common/RowSummary';
 export class AgGridColumnAdapter {
     constructor(adaptableInstance) {
         this.adaptableInstance = adaptableInstance;
@@ -413,10 +414,14 @@ export class AgGridColumnAdapter {
                 return userValue;
             }
             const cellEditableFn = this.adaptableOptions.editOptions.isCellEditable;
-            if (!cellEditableFn) {
-                return userValue;
-            }
             const editableCallback = (params) => {
+                // Adaptable Row Summarie rows are not editable
+                if (params.node.data[ROW_SUMMARY_ROW_ID]) {
+                    return false;
+                }
+                if (!cellEditableFn) {
+                    return typeof userValue === 'function' ? userValue(params) : userValue;
+                }
                 const gridCell = this.adaptableInstance.getGridCellFromRowNode(params.node, params.column.getColId());
                 const cellEditableContext = {
                     gridCell,
@@ -601,6 +606,9 @@ export class AgGridColumnAdapter {
         if (!this.adaptableApi.internalApi.getModuleService().isModuleAvailable('Notes')) {
             return;
         }
+        if (!this.adaptableApi.notesApi.internalApi.areNotesAvailable()) {
+            return;
+        }
         const cellPosition = {
             PrimaryKeyValue: gridCell.primaryKeyValue,
             ColumnId: gridCell.column.columnId,
@@ -615,6 +623,9 @@ export class AgGridColumnAdapter {
         if (!this.adaptableApi.internalApi.getModuleService().isModuleAvailable('Comments')) {
             return;
         }
+        if (!this.adaptableApi.commentApi.internalApi.areCommentsAvailable()) {
+            return;
+        }
         const position = {
             PrimaryKeyValue: gridCell.primaryKeyValue,
             ColumnId: gridCell.column.columnId,

package/src/components/ColorPicker/ColorPicker.d.ts

@@ -8,4 +8,4 @@ export type ColorPickerProps = Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
     value: string;
     includeAlpha?: boolean;
 } & Omit<BoxProps, 'onChange'>;
-export declare const ColorPicker: React.ForwardRefExoticComponent<Pick<ColorPickerProps, "api" | "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "onClick" | "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" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "includeAlpha"> & React.RefAttributes<unknown>>;
+export declare const ColorPicker: React.ForwardRefExoticComponent<Pick<ColorPickerProps, "api" | "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "onClick" | "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" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "includeAlpha"> & React.RefAttributes<unknown>>;