@adaptabletools/adaptable 16.2.0-canary.3 → 16.2.1

package/package.json

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

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1700578109539;
+declare const _default: 1700847739740;
 export default _default;

package/publishTimestamp.js

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

package/src/AdaptableOptions/DataImportOptions.d.ts

@@ -19,17 +19,17 @@ export interface DataImportOptions<T = Record<string, unknown>> {
     /**
      * Function to handle the Imported Data and apply it to the Grid. If not provided then the Data will be applied to the Grid automatically.
      */
-    handleImportedData?: (context: HandleImportedDataContext<T>) => Promise<HandleImportedDataResolution>;
+    handleImportedData?: (context: HandleImportedDataContext<T>) => Promise<void | HandleImportedDataResolution>;
     /**
      * Function to pre-process the data before it is imported
      *
-     * @experimental might change in a future version
+     * @experimental It might change in a future version
      */
     _preprocessData?: (context: PreprocessDataContext<T>) => Record<string, unknown>[];
     /**
      * Function to get the Primary Key value for a data row (defaults to value of the primaryKey column)
      *
-     * @experimental might change in a future version
+     * @experimental It might change in a future version
      */
     _getPrimaryKeyValue?: (context: GetPrimaryKeyValueContext<T>) => string | number;
 }
@@ -78,16 +78,16 @@ export interface DataImportValidationError {
     error: string;
 }
 /**
- * Context that manages Data Validation
+ * Context passed to the `validate` function
  */
 export interface DataImportValidateContext<T = Record<string, unknown>> extends BaseContext {
     /**
-     * Data being validated
+     * Imported Row Data
      */
     rowData: T;
 }
 /**
- * Context used to define the Primary Key for a row
+ * Context passed to the `getPrimaryKeyValue` function
  */
 export interface GetPrimaryKeyValueContext<T = Record<string, unknown>> extends BaseContext {
     /**
@@ -102,7 +102,7 @@ export interface HandleImportedDataResolution {
     /**
      * Whether to emit the `DataImported` event
      */
-    emitDataImportedEvent?: boolean;
+    emitDataImportedEvent: boolean;
     /**
      * Rows that were added
      */

package/src/Api/DashboardApi.d.ts

@@ -33,16 +33,18 @@ export interface DashboardApi {
      */
     setDashboardTitle(title: string): void;
     /**
-     * Returns 'div' element for given Custom Toolbar
+     * Returns the HTML Element for the given Custom Toolbar. This should only be used in Vanilla AdapTable for toolbars created via a `render` function.
      * @param customToolbarName the name of the Custom Toolbar
+     *
      */
-    getCustomToolbarContentsDiv(customToolbarName: string): HTMLElement | null;
+    getCustomToolbarHTMLElement(customToolbarName: string): HTMLElement | null;
     /**
-     * Populates a Custom Toolbar with content
+     * Renders the given HTML string in the given Custom Toolbar. This should only be used in Vanilla AdapTable for toolbars created via a `render` function!
      * @param customToolbarName name of Custom Toolbar hosting content
-     * @param contents contents to render
+     * @param htmlContent HTML string to render
+     *
      */
-    setCustomToolbarContents(customToolbarName: string, contents: string): void;
+    setCustomToolbarHTMLContent(customToolbarName: string, htmlContent: string): void;
     /**
      * Returns Custom Toolbar with the given name
      * @param customToolbarName the name of the Custom Toolbar
@@ -137,4 +139,15 @@ export interface DashboardApi {
      * Is Dashboard Visible
      */
     isDashboardVisible(): boolean;
+    /**
+     * DEPRECATED
+     */
+    /**
+     * @deprecated use `getCustomToolbarHTMLElement` instead
+     */
+    getCustomToolbarContentsDiv(customToolbarName: string): HTMLElement | null;
+    /**
+     * @deprecated use `setCustomToolbarHTMLContent` instead
+     */
+    setCustomToolbarContents(customToolbarName: string, contents: string): void;
 }

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

@@ -3,8 +3,7 @@ import { DashboardApi } from '../DashboardApi';
 import { DashboardState, DashboardTab } from '../../PredefinedConfig/DashboardState';
 import { AdaptableDashboardToolbar, AdaptableDashboardToolbars, AdaptableModuleButtons } from '../../PredefinedConfig/Common/Types';
 import { AdaptableButton } from '../../PredefinedConfig/Common/AdaptableButton';
-import { DashboardButtonContext } from '../../types';
-import { CustomToolbar } from '../../AdaptableOptions/DashboardOptions';
+import { CustomToolbar, DashboardButtonContext } from '../../types';
 import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
 import { DashboardInternalApi } from '../Internal/DashboardInternalApi';
 export declare class DashboardApiImpl extends ApiBase implements DashboardApi {
@@ -17,7 +16,9 @@ export declare class DashboardApiImpl extends ApiBase implements DashboardApi {
     setModuleButtons(moduleButtons: AdaptableModuleButtons): void;
     setDashboardTitle(title: string): void;
     getCustomToolbarContentsDiv(customToolbarName: string): HTMLElement | null;
+    getCustomToolbarHTMLElement(customToolbarName: string): HTMLElement | null;
     setCustomToolbarContents(customToolbarName: string, contents: string): void;
+    setCustomToolbarHTMLContent(customToolbarName: string, htmlContent: string): void;
     getCustomToolbarByName(customToolbarName: string): CustomToolbar;
     getTabByName(tabName: string): DashboardTab;
     collapseDashboard(): void;
@@ -32,7 +33,7 @@ export declare class DashboardApiImpl extends ApiBase implements DashboardApi {
     isToolbarVisible(toolbar: AdaptableDashboardToolbar | string): boolean;
     setActiveTabIndex(tabIndex: number): void;
     setActiveTab(tabName: string): void;
-    getCurrentToolbars(): AdaptableDashboardToolbars | string[] | undefined;
+    getCurrentToolbars(): AdaptableDashboardToolbars | string[];
     openDashboardSettingsPanel(): void;
     isDashboardCollapsed(): boolean;
     isDashboardExpanded(): boolean;

package/src/Api/Implementation/DashboardApiImpl.js

@@ -8,6 +8,7 @@ const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/
 const React = tslib_1.__importStar(require("react"));
 const SystemRedux_1 = require("../../Redux/ActionsReducers/SystemRedux");
 const DashboardInternalApi_1 = require("../Internal/DashboardInternalApi");
+const logDeprecation_1 = require("../../Utilities/logDeprecation");
 class DashboardApiImpl extends ApiBase_1.ApiBase {
     constructor(adaptable) {
         super(adaptable);
@@ -41,17 +42,38 @@ class DashboardApiImpl extends ApiBase_1.ApiBase {
         this.dispatchAction(DashboardRedux.DashboardSetTitle(title));
     }
     getCustomToolbarContentsDiv(customToolbarName) {
+        (0, logDeprecation_1.logDeprecation)(this.adaptable.logger, 'DashboardApi', 'getCustomToolbarContentsDiv', 'getCustomToolbarHTMLElement');
         let customToolbar = this.getCustomToolbarByName(customToolbarName);
         if (customToolbar) {
-            let divId = 'ab-CustomToolbar__' + customToolbar.name + '__contents';
+            let divId = this.internalApi.getCustomToolbarRenderContainerId(customToolbarName);
             return document.getElementById(divId);
         }
         return null;
     }
+    getCustomToolbarHTMLElement(customToolbarName) {
+        let customToolbar = this.getCustomToolbarByName(customToolbarName);
+        if (!customToolbar) {
+            this.logWarn(`Could not find custom toolbar with name ${customToolbarName}`);
+            return;
+        }
+        if (customToolbar.render) {
+            return document.getElementById(this.internalApi.getCustomToolbarRenderContainerId(customToolbarName));
+        }
+        if (customToolbar.toolbarButtons) {
+            return document.getElementById(this.internalApi.getCustomToolbarButtonsContainerId(customToolbarName));
+        }
+        if (customToolbar.frameworkComponent) {
+            return document.getElementById(this.internalApi.getCustomToolbarComponentContainerId(customToolbarName));
+        }
+    }
     setCustomToolbarContents(customToolbarName, contents) {
-        let contentsDiv = this.getCustomToolbarContentsDiv(customToolbarName);
-        if (contentsDiv) {
-            this.adaptable.renderReactRoot(React.createElement("div", { dangerouslySetInnerHTML: { __html: contents } }), contentsDiv);
+        (0, logDeprecation_1.logDeprecation)(this.adaptable.logger, 'DashboardApi', 'setCustomToolbarContents', 'setCustomToolbarHTMLContent');
+        this.setCustomToolbarHTMLContent(customToolbarName, contents);
+    }
+    setCustomToolbarHTMLContent(customToolbarName, htmlContent) {
+        let customRenderedContainer = this.getCustomToolbarHTMLElement(customToolbarName);
+        if (customRenderedContainer) {
+            this.adaptable.renderReactRoot(React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } }), customRenderedContainer);
         }
     }
     getCustomToolbarByName(customToolbarName) {
@@ -104,11 +126,11 @@ class DashboardApiImpl extends ApiBase_1.ApiBase {
     getCurrentToolbars() {
         // if hidden or collapsed return fasle
         if (this.getDashboardState().IsCollapsed == true || this.getDashboardState().IsHidden == true) {
-            return undefined;
+            return [];
         }
         const currentTab = this.getActiveTab();
         if (!currentTab) {
-            return undefined;
+            return [];
         }
         return currentTab.Toolbars;
     }

package/src/Api/Internal/AdaptableInternalApi.d.ts

@@ -16,7 +16,7 @@ import { IDataService } from '../../Utilities/Services/Interface/IDataService';
 import { IEntitlementService } from '../../Utilities/Services/Interface/IEntitlementService';
 import { IQueryLanguageService } from '../../Utilities/Services/Interface/IQueryLanguageService';
 import { IAlertService } from '../../Utilities/Services/Interface/IAlertService';
-import { IRowNode } from '@ag-grid-community/core';
+import { ColDef, IRowNode } from '@ag-grid-community/core';
 import { ITeamSharingService } from '../../Utilities/Services/Interface/ITeamSharingService';
 import { ButtonStyle } from '../../PredefinedConfig/Common/ButtonStyle';
 import { AdaptableButton } from '../../PredefinedConfig/Common/AdaptableButton';
@@ -26,7 +26,6 @@ import { IModuleCollection } from '../../Strategy/Interface/IModule';
 import { AdaptableObjectTag, AdaptableObjectWithScope } from '../../PredefinedConfig/Common/AdaptableObject';
 import { IRowEditService } from '../../Utilities/Services/Interface/IRowEditService';
 import { Fdc3Service } from '../../Utilities/Services/Fdc3Service';
-import { ColDef } from '@ag-grid-community/core/dist/esm/es6/entities/colDef';
 export declare class AdaptableInternalApi extends ApiBase {
     getSystemState(): SystemState;
     showPopupConfirmation(confirmation: UIConfirmation): void;

package/src/Api/Internal/DashboardInternalApi.d.ts

@@ -6,4 +6,7 @@ export declare class DashboardInternalApi extends ApiBase {
      */
     fireDashboardChangedEvent(trigger: string, oldDashboardState: DashboardState, newDashboardState: DashboardState): void;
     isToolbarInActiveTab(toolbarName: string, dashboardState: DashboardState): boolean;
+    getCustomToolbarRenderContainerId(customToolbarName: string): string;
+    getCustomToolbarButtonsContainerId(customToolbarName: string): string;
+    getCustomToolbarComponentContainerId(customToolbarName: string): string;
 }

package/src/Api/Internal/DashboardInternalApi.js

@@ -49,5 +49,14 @@ class DashboardInternalApi extends ApiBase_1.ApiBase {
         }
         return false;
     }
+    getCustomToolbarRenderContainerId(customToolbarName) {
+        return `ab-CustomToolbar__${customToolbarName}__renderContent`;
+    }
+    getCustomToolbarButtonsContainerId(customToolbarName) {
+        return `ab-CustomToolbar__${customToolbarName}__buttons`;
+    }
+    getCustomToolbarComponentContainerId(customToolbarName) {
+        return `ab-CustomToolbar__${customToolbarName}__component`;
+    }
 }
 exports.DashboardInternalApi = DashboardInternalApi;

package/src/Api/Internal/DataImportInternalApi.js

@@ -12,9 +12,9 @@ class DataImportInternalApi extends ApiBase_1.ApiBase {
             importData = dataImportOptions._preprocessData(Object.assign({ data: partialRows }, (0, ObjectFactory_1.createBaseContext)(this.getAdaptableApi())));
         }
         if (typeof dataImportOptions.handleImportedData === 'function') {
-            const { emitDataImportedEvent, updatedRows, addedRows } = await dataImportOptions.handleImportedData(Object.assign({ data: importData }, (0, ObjectFactory_1.createBaseContext)(this.getAdaptableApi())));
-            if (emitDataImportedEvent) {
-                this.publishDataImportedEvent(importData, addedRows, updatedRows);
+            const resolution = await dataImportOptions.handleImportedData(Object.assign({ data: importData }, (0, ObjectFactory_1.createBaseContext)(this.getAdaptableApi())));
+            if (resolution && (resolution === null || resolution === void 0 ? void 0 : resolution.emitDataImportedEvent)) {
+                this.publishDataImportedEvent(importData, resolution.addedRows, resolution.updatedRows);
             }
             return;
         }

package/src/View/Dashboard/CustomToolbar.js

@@ -8,15 +8,17 @@ const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
 const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
 const CustomToolbarCmp = (props) => {
-    let contentsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__contents';
-    let buttonsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__buttons';
-    const [contentsHTML, setContentsHTML] = (0, react_1.useState)('');
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
     // dummy object which is used to force a re-render of the toolbar
     const [componentRevision, setComponentRevision] = (0, react_1.useState)(1);
-    const contentsDivRef = (0, react_1.useRef)(null);
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const renderContentContainerId = api.dashboardApi.internalApi.getCustomToolbarRenderContainerId(props.customToolbar.name);
+    const renderContentContainerRef = (0, react_1.useRef)(null);
+    const [renderedContentHTML, setRenderedContentHTML] = (0, react_1.useState)('');
+    const buttonsContainerId = api.dashboardApi.internalApi.getCustomToolbarButtonsContainerId(props.customToolbar.name);
+    const componentContainerId = api.dashboardApi.internalApi.getCustomToolbarComponentContainerId(props.customToolbar.name);
+    const componentContainerRef = (0, react_1.useRef)(null);
     (0, react_1.useLayoutEffect)(() => {
-        const element = contentsDivRef.current;
+        const element = renderContentContainerRef.current;
         const adaptableApi = api;
         if (props.customToolbar.render) {
             const html = props.customToolbar.render({
@@ -26,11 +28,11 @@ const CustomToolbarCmp = (props) => {
                 userName: adaptableApi.optionsApi.getUserName(),
                 adaptableId: adaptableApi.optionsApi.getAdaptableId(),
             });
-            setContentsHTML(html);
+            setRenderedContentHTML(html);
         }
     }, [componentRevision, props.dashboardRevision]);
     (0, react_1.useLayoutEffect)(() => {
-        const element = contentsDivRef.current;
+        const element = renderContentContainerRef.current;
         const adaptableApi = api;
         // cleanup runs in a separate effect, this way it's executed only once on unmount
         return () => {
@@ -46,26 +48,26 @@ const CustomToolbarCmp = (props) => {
         };
     }, []);
     (0, react_1.useLayoutEffect)(() => {
-        const element = contentsDivRef.current;
+        const containerElement = componentContainerRef.current;
         const adaptableApi = api;
         if (props.customToolbar.frameworkComponent) {
-            adaptableApi.internalApi.createFrameworkComponent(element, props.customToolbar.frameworkComponent, 'toolbar');
+            adaptableApi.internalApi.createFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
         }
         const destroyUnsubscribe = adaptableApi.eventApi.on('AdaptableDestroy', () => {
             var _a;
-            (_a = adaptableApi === null || adaptableApi === void 0 ? void 0 : adaptableApi.internalApi) === null || _a === void 0 ? void 0 : _a.destroyFrameworkComponent(element, props.customToolbar.frameworkComponent, 'toolbar');
+            (_a = adaptableApi === null || adaptableApi === void 0 ? void 0 : adaptableApi.internalApi) === null || _a === void 0 ? void 0 : _a.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
         });
         return () => {
             var _a;
             destroyUnsubscribe();
             if (props.customToolbar.frameworkComponent) {
-                (_a = adaptableApi === null || adaptableApi === void 0 ? void 0 : adaptableApi.internalApi) === null || _a === void 0 ? void 0 : _a.destroyFrameworkComponent(element, props.customToolbar.frameworkComponent, 'toolbar');
+                (_a = adaptableApi === null || adaptableApi === void 0 ? void 0 : adaptableApi.internalApi) === null || _a === void 0 ? void 0 : _a.destroyFrameworkComponent(containerElement, props.customToolbar.frameworkComponent, 'toolbar');
             }
         };
     }, []);
     return (React.createElement(React.Fragment, null,
-        contentsHTML && (React.createElement("div", { id: contentsDivId, ref: contentsDivRef, className: "CustomToolBarContents ab-CustomToolbar__contents ab-CustomToolbar__contents--render", style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: contentsHTML } })),
-        props.customToolbar.toolbarButtons && (React.createElement("div", { id: buttonsDivId, className: "ab-CustomToolbar__buttons", style: { minHeight: 22 } }, props.customToolbar.toolbarButtons.map((button, index) => {
+        props.customToolbar.render && (React.createElement("div", { id: renderContentContainerId, ref: renderContentContainerRef, className: `ab-CustomToolbar__rendered-content ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: renderedContentHTML } })),
+        props.customToolbar.toolbarButtons && (React.createElement("div", { id: buttonsContainerId, className: `ab-CustomToolbar__buttons ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 } }, props.customToolbar.toolbarButtons.map((button, index) => {
             const dashboardContext = {
                 customToolbar: props.customToolbar,
                 adaptableApi: api,
@@ -90,12 +92,13 @@ const CustomToolbarCmp = (props) => {
                         setComponentRevision(componentRevision + 1);
                     }, 16);
                 } }, buttonLabel));
-        })))));
+        }))),
+        props.customToolbar.frameworkComponent && (React.createElement("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}` }))));
 };
 exports.CustomToolbarCmp = CustomToolbarCmp;
 const CustomToolbarWrapper = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    return (React.createElement(PanelDashboard_1.PanelDashboard, { className: `ab-CustomToolbar ab-DashboardToolbar__${props.customToolbar.name}`, "data-name": `ab-CustomToolbar ab-DashboardToolbar__${props.customToolbar.name}`, headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureButton: props.customToolbar.showConfigureButton != null &&
+    return (React.createElement(PanelDashboard_1.PanelDashboard, { headerText: props.customToolbar.title ? props.customToolbar.title : '', showConfigureButton: props.customToolbar.showConfigureButton != null &&
             props.customToolbar.showConfigureButton == true, showCloseButton: props.customToolbar.showCloseButton != null && props.customToolbar.showCloseButton == true, onConfigure: () => {
             const customToolbarConfiguredInfo = {
                 adaptableApi: api,

package/src/View/Dashboard/PinnedDashboard.js

@@ -13,9 +13,9 @@ const PinnedDashboard = (props) => {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement(rebass_1.Flex, { p: 1, className: "ab-Dashboard__pinned-content" }, pinnedToolbars.map((toolbar, index) => {
-        return (React.createElement(rebass_1.Box, { mr: 2, mb: 1, className: `ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
+        return (React.createElement(rebass_1.Box, { key: index, mr: 2, mb: 1, className: `ab-Dashboard__pinned-container ab-Dashboard__pinned-container--${toolbar}` },
             React.createElement(rebass_1.Box, { className: "ab-Dashboard__toolbar-content" },
-                React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { key: index, toolbarName: toolbar }))));
+                React.createElement(DashboardToolbarFactory_1.DashboardToolbarFactory, { toolbarName: toolbar }))));
     })));
 };
 exports.PinnedDashboard = PinnedDashboard;

package/src/View/Query/QueryViewPanel.js

@@ -86,7 +86,7 @@ class QueryViewPanelComponent extends React.Component {
             }
         };
         const renderTextInput = () => {
-            return this.props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { marginRight: 1, width: 600 },
+            return this.props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { marginRight: 1, width: 500 },
                 React.createElement(ButtonExpand_1.ButtonExpand, { variant: "text", tone: "neutral", onClick: () => this.props.api.queryApi.expandCurrentQuery(this.state.expression), tooltip: "Expand", marginLeft: 1 }),
                 React.createElement(Input_1.default, { type: "text", "data-name": "query-input", placeholder: "Query", spellCheck: false, value: this.state.expression, onChange: (x) => this.setState({ expression: x.target.value }), style: { fontFamily: 'monospace', fontSize: 12 } }),
                 isExpressionValid ? (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => this.runQuery(), tooltip: '', accessLevel: 'Full', variant: "text", tone: "neutral", disabled: this.state.expression == '' || this.state.expression == this.props.CurrentQuery, marginRight: 1 })) : (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Query", marginRight: 1 })),

package/src/View/QuickSearch/QuickSearchInput.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 export interface QuickSearchInputProps {
     className?: string;
     autoFocus?: boolean;
+    width?: string | number;
 }
 export declare const QuickSearchInput: React.FunctionComponent<QuickSearchInputProps>;

package/src/View/QuickSearch/QuickSearchInput.js

@@ -9,6 +9,7 @@ const AdaptableFormControlTextClear_1 = require("../Components/Forms/AdaptableFo
 const useQuickSearchDebounced_1 = require("./useQuickSearchDebounced");
 const AdaptableContext_1 = require("../AdaptableContext");
 const QuickSearchInput = (props) => {
+    var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const QuickSearchText = (0, react_redux_1.useSelector)((state) => state.QuickSearch.QuickSearchText);
     const dispatch = (0, react_redux_1.useDispatch)();
@@ -17,6 +18,6 @@ const QuickSearchInput = (props) => {
         QuickSearchText,
         onRunQuickSearch,
     });
-    return (react_1.default.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: props.className, value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: '10rem' } }));
+    return (react_1.default.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", autoFocus: props.autoFocus, placeholder: adaptable.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: props.className, value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: (_a = props.width) !== null && _a !== void 0 ? _a : '10rem' } }));
 };
 exports.QuickSearchInput = QuickSearchInput;

package/src/View/QuickSearch/QuickSearchViewPanel.js

@@ -6,6 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const QuickSearchInput_1 = require("./QuickSearchInput");
 const QuickSearchViewPanelControl = (props) => {
     let elementType = props.viewType === 'ToolPanel' ? 'DashboardToolbar' : 'ToolPanel';
-    return React.createElement(QuickSearchInput_1.QuickSearchInput, { className: `ab-${elementType}__QuickSearch__text` });
+    return React.createElement(QuickSearchInput_1.QuickSearchInput, { className: `ab-${elementType}__QuickSearch__text`, width: '15rem' });
 };
 exports.QuickSearchViewPanelControl = QuickSearchViewPanelControl;

package/src/metamodel/adaptable.metamodel.d.ts

@@ -3503,17 +3503,11 @@ export declare const ADAPTABLE_METAMODEL: {
         name: string;
         kind: string;
         desc: string;
-        props: ({
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt?: undefined;
-        } | {
+        props: {
             name: string;
             kind: string;
             desc: string;
-            isOpt: boolean;
-        })[];
+        }[];
     };
     IAdaptableNoCodeWizard: {
         name: string;