@adaptabletools/adaptable 11.1.7 → 11.1.10

package/src/agGrid/Adaptable.js

@@ -58,6 +58,9 @@ const DocumentationLinkConstants_1 = require("../Utilities/Constants/Documentati
 const ModuleConstants_1 = require("../Utilities/Constants/ModuleConstants");
 const CheckboxRenderer_1 = require("./CheckboxRenderer");
 const DateHelper_1 = require("../Utilities/Helpers/DateHelper");
+const StatusBarState_1 = require("../PredefinedConfig/StatusBarState");
+const createAgStatusPanelComponent_1 = require("./createAgStatusPanelComponent");
+const AdaptableStatusBar_1 = require("../View/StatusBar/AdaptableStatusBar");
 const tinycolor = require('tinycolor2');
 all_modules_1.ModuleRegistry.registerModules(all_modules_1.AllCommunityModules);
 const GROUP_PATH_SEPARATOR = '/';
@@ -561,6 +564,7 @@ class Adaptable {
                 }
             }
         }
+        this.createStatusBars();
         const checkAgGridContainer = () => {
             let agGridContainer = this.getAgGridContainerElement();
             if (!agGridContainer) {
@@ -635,6 +639,29 @@ class Adaptable {
         }
         return (this.adaptableOptions.containerOptions.agGridContainer = agGridContainer);
     }
+    createStatusBars() {
+        var _a, _b;
+        const statusBarOptions = Object.assign({}, this.gridOptions.statusBar);
+        const statusPanels = (_b = ((_a = statusBarOptions === null || statusBarOptions === void 0 ? void 0 : statusBarOptions.statusPanels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.map((statusPanel) => {
+            if (statusPanel.statusPanel === StatusBarState_1.ADAPTABLE_STATUS_PANEL) {
+                const context = {
+                    Key: statusPanel.key,
+                };
+                return Object.assign(Object.assign({}, statusPanel), { statusPanel: createAgStatusPanelComponent_1.createAgStatusPanelComponent(AdaptableStatusBar_1.AdaptableStatusBar, this, context) });
+            }
+            return statusPanel;
+        });
+        statusBarOptions.statusPanels = statusPanels;
+        this.gridOptions.statusBar = statusBarOptions;
+        const statusBarModule = this.ModuleService.getModuleById(ModuleConstants.StatusBarModuleId);
+        this.api.eventApi.on('AdaptableReady', () => {
+            statusBarModule.syncStateWithOptions();
+        });
+    }
+    getAgGridStatusPanels() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
+    }
     filterOnEditDataChange() {
         if (this.adaptableOptions.filterOptions.filterActionOnUserDataChange.applyFilter ==
             Enums_1.FilterOnDataChangeOptions.Always) {
@@ -758,7 +785,7 @@ class Adaptable {
         // TODO sort the visible columns by layout order
         agGridCols.forEach((agGridColumn) => {
             const colId = agGridColumn.getColId();
-            if (!this.api.columnApi.isRowGroupColumn(colId)) {
+            if (!this.api.columnApi.isAutoRowGroupColumn(colId)) {
                 allColumns.push(this.createAdaptableColumn(agGridColumn, colsToGroups));
             }
         });
@@ -1081,8 +1108,8 @@ class Adaptable {
             const colId2 = colState2.colId;
             const originalIndex1 = columnsStateIndexes[colId1];
             const originalIndex2 = columnsStateIndexes[colId2];
-            const isRowGroup1 = this.api.columnApi.isRowGroupColumn(colId1);
-            const isRowGroup2 = this.api.columnApi.isRowGroupColumn(colId2);
+            const isRowGroup1 = this.api.columnApi.isAutoRowGroupColumn(colId1);
+            const isRowGroup2 = this.api.columnApi.isAutoRowGroupColumn(colId2);
             if (isRowGroup1 && isRowGroup2) {
                 return 1;
             }

package/src/agGrid/agGridHelper.js

@@ -40,6 +40,7 @@ const SettingsPanelModule_1 = require("../Strategy/SettingsPanelModule");
 const ChartingModule_1 = require("../Strategy/ChartingModule");
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
 const Helper_1 = require("../Utilities/Helpers/Helper");
+const StatusBarModule_1 = require("../Strategy/StatusBarModule");
 const tinycolor = require('tinycolor2');
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
@@ -97,6 +98,7 @@ class agGridHelper {
         modules.set(ModuleConstants.ThemeModuleId, new ThemeModule_1.ThemeModule(api));
         modules.set(ModuleConstants.GridInfoModuleId, new GridInfoModule_1.GridInfoModule(api));
         modules.set(ModuleConstants.SettingsPanelModuleId, new SettingsPanelModule_1.SettingsPanelModule(api));
+        modules.set(ModuleConstants.StatusBarModuleId, new StatusBarModule_1.StatusBarModule(api));
         modules.set(ModuleConstants.ChartingModuleId, new ChartingModule_1.ChartingModule(api));
         return modules;
     }

package/src/agGrid/agGridMenuHelper.js

@@ -219,7 +219,7 @@ class agGridMenuHelper {
             adaptableColumn: adaptableColumn,
             agGridColumn: agGridColumn,
             adaptableApi: this.adaptable.api,
-            isRowGroupColumn: this.adaptable.api.columnApi.isRowGroupColumn(agGridColumn.getColId()),
+            isRowGroupColumn: this.adaptable.api.columnApi.isAutoRowGroupColumn(agGridColumn.getColId()),
         };
     }
     createContextMenuContextObject(params, adaptableColumn) {
@@ -254,7 +254,7 @@ class agGridMenuHelper {
             adaptableApi: this.adaptable.api,
             selectedCellInfo: selectedCellInfo,
             selectedRowInfo: selectedRowInfo,
-            isRowGroupColumn: this.adaptable.api.columnApi.isRowGroupColumn(params.column.getColId()),
+            isRowGroupColumn: this.adaptable.api.columnApi.isAutoRowGroupColumn(params.column.getColId()),
         };
     }
     createAgGridContextMenuItems(originalgetContextMenuItems, params) {

package/src/agGrid/createAgStatusPanelComponent.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IStatusPanelParams } from '@ag-grid-community/all-modules';
+import { AdaptableApi } from '../../types';
+import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
+export interface StatusPanelProps {
+    params: IStatusPanelParams;
+    adaptableApi: AdaptableApi;
+    context: {
+        Key: string;
+    };
+}
+export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps['context']) => {
+    new (): {
+        params: IStatusPanelParams;
+        eGui: HTMLElement;
+        init(params: IStatusPanelParams): void;
+        render(): void;
+        getGui(): HTMLElement;
+        destroy(): void;
+    };
+};

package/src/agGrid/createAgStatusPanelComponent.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAgStatusPanelComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ReactDOM = tslib_1.__importStar(require("react-dom"));
+const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
+exports.createAgStatusPanelComponent = (component, adaptable, context) => {
+    return class StatusBarRenderer {
+        init(params) {
+            this.params = params;
+            this.eGui = document.createElement('div');
+            this.render();
+        }
+        render() {
+            const props = {
+                params: this.params,
+                adaptableApi: adaptable.api,
+                context,
+            };
+            const children = renderWithAdaptableContext_1.renderWithAdaptableContext(React.createElement(component, props), adaptable);
+            ReactDOM.render(children, this.eGui);
+        }
+        getGui() {
+            return this.eGui;
+        }
+        destroy() {
+            ReactDOM.unmountComponentAtNode(this.eGui);
+        }
+    };
+};

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -76,7 +76,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
                         overflow: 'hidden',
                         textOverflow: 'ellipsis',
                         fontSize: 'small',
-                    }, items: items, className: "ab-options__select", variant: "outlined" }, value));
+                    }, items: items, className: "ab-options__select", variant: "outlined", columns: ['label'] }, value));
             case 'checkbox':
                 return (React.createElement(Input_1.default, { type: "checkbox", name: field.name, checked: value, onChange: (event) => {
                         setFieldValue(field.name, event.target.checked);

package/src/components/Dashboard/DashboardManager.js

@@ -1,171 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = require("react");
 const React = tslib_1.__importStar(require("react"));
-const react_beautiful_dnd_1 = require("react-beautiful-dnd");
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-const icons_1 = require("../icons");
-const PanelWithButton_1 = require("../../View/Components/Panels/PanelWithButton");
-const DashboardManagerContext = react_1.createContext({
-    availableToolbars: [],
-});
-const getToolbarTitle = (availableToolbars, toolbarId) => {
-    const found = availableToolbars.find((t) => t.Id === toolbarId);
-    return found ? found.Title : toolbarId;
-};
-function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }) {
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { style: { display: 'flex' }, "data-name": "dashboard-tabs" }),
-        tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
-        provided.placeholder))));
-}
-function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", Object.assign({ "data-name": "dashboard-tab", ref: provided.innerRef }, provided.draggableProps, { style: Object.assign(Object.assign({}, (disabled ? {} : provided.draggableProps.style)), { boxSizing: 'border-box', border: '1px solid var(--ab-color-primarydark)', borderRadius: 'var(--ab__border-radius)', marginRight: 'var(--ab-space-2)', width: 160, display: 'flex', flexDirection: 'column' }) }),
-        React.createElement("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                padding: 'var(--ab-space-1)',
-                borderBottom: '1px solid var(--ab-color-primarydark)',
-            } },
-            React.createElement("div", Object.assign({}, (disabled ? {} : provided.dragHandleProps), { style: {} }),
-                React.createElement(icons_1.Icon, { name: "drag" })),
-            React.createElement("input", { type: "text", disabled: disabled, value: tab.Name, style: {
-                    flex: 1,
-                    width: '100%',
-                    border: 'none',
-                    marginLeft: 'var(--ab-space-1)',
-                    marginRight: 'var(--ab-space-1)',
-                    alignSelf: 'stretch',
-                    background: 'transparent',
-                    color: 'var(--ab-color-text-on-primary)',
-                }, onChange: (event) => {
-                    onChangeTabName(event.target.value);
-                } }),
-            React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove })),
-        React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Toolbars, droppableId: String(tabIndex), onRemove: onRemoveToolbar })))));
-}
-function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, (disabled ? {} : provided.droppableProps), { "data-name": "dashboard-toolbar-drop-target", style: {
-            flex: 1,
-            padding: 4,
-            paddingBottom: 0,
-            background: snapshot.isDraggingOver
-                ? 'var(--ab-dashboard-tab-drop-target__background)'
-                : '',
-            minHeight: 200,
-        } }),
-        toolbars.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
-        provided.placeholder))));
-}
-function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
-    const { availableToolbars } = react_1.useContext(DashboardManagerContext);
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { display: 'flex', alignItems: 'center', border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
-                ? 'var(--ab-dashboard-toolbar-drag__background)'
-                : 'var(--ab-color-primarylight)', paddingLeft: 'var(--ab-space-1)', marginBottom: 'var(--ab-space-1)' }) }),
-        React.createElement("div", { style: { flex: 1 } }, getToolbarTitle(availableToolbars, toolbar)),
-        React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "clear", variant: "text", padding: 1, onClick: onRemove })))));
-}
-function UnusedPanel({ toolbars, disabled }) {
-    return (React.createElement("div", { "data-name": "dashboard-toolbars", style: {
-            border: '1px solid var(--ab-color-primarydark)',
-            borderRadius: 'var(--ab__border-radius)',
-            marginBottom: 'var(--ab-space-2)',
-            paddingBottom: 'var(--ab-space-1)',
-            backgroundColor: 'var(--ab-color-defaultbackground)',
-        } },
-        React.createElement("div", { style: { padding: 'var(--ab-space-2)' } },
-            React.createElement("b", null, "Available Toolbars"),
-            " (drag into a Tab below)"),
-        React.createElement(UnusedToolbarList, { disabled: disabled, toolbars: toolbars })));
-}
-function UnusedToolbarList({ toolbars, disabled }) {
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({ ref: provided.innerRef, "data-name": "dashboard-toolbars-list" }, provided.droppableProps, { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            paddingLeft: 'var(--ab-space-2)',
-            paddingRight: 'var(--ab-space-2)',
-        } }),
-        toolbars.map((toolbar, toolbarIndex) => (React.createElement(UnusedToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex }))),
-        provided.placeholder))));
-}
-function UnusedToolbarItem({ toolbar, toolbarIndex, disabled, }) {
-    const { availableToolbars } = react_1.useContext(DashboardManagerContext);
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => {
-        const eventHandlers = disabled
-            ? {}
-            : Object.assign(Object.assign({}, provided.draggableProps), provided.dragHandleProps);
-        const dragStyle = disabled ? {} : provided.draggableProps.style;
-        return (React.createElement("div", Object.assign({ "data-name": "dashboard-toolbar", ref: provided.innerRef }, eventHandlers, { style: Object.assign(Object.assign({}, dragStyle), { border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
-                    ? 'var(--ab-dashboard-toolbar-drag__background)'
-                    : 'var(--ab-color-primarylight)', padding: 'var(--ab-space-1) var(--ab-space-2)', marginRight: 'var(--ab-space-1)', marginBottom: 'var(--ab-space-1)' }) }), getToolbarTitle(availableToolbars, toolbar)));
-    }));
-}
+const ModuleManager_1 = require("../DragAndDropContext/ModuleManager");
 const DashboardManager = ({ tabs, onTabsChange, availableToolbars, api, disabled, }) => {
     const moduleService = api.internalApi.getModuleService();
     const moduleInfo = moduleService.getModuleInfoByModule('Dashboard');
-    const contextValue = react_1.useMemo(() => ({
-        availableToolbars,
-    }), [availableToolbars]);
-    const unusedToolbars = react_1.useMemo(() => availableToolbars
-        .map((t) => t.Id)
-        .filter((toolbar) => {
-        return !tabs.some((tab) => tab.Toolbars.includes(toolbar));
-    }), [tabs, availableToolbars]);
-    const handleToolbarDragEnd = (result) => {
-        const { source, destination, draggableId } = result;
-        if (!source || !destination) {
-            return;
-        }
-        if (source.droppableId !== 'UNUSED') {
-            const sourceTabToolbars = tabs[Number(source.droppableId)].Toolbars;
-            sourceTabToolbars.splice(source.index, 1);
-        }
-        if (destination.droppableId !== 'UNUSED') {
-            const destinationTabToolbars = tabs[Number(destination.droppableId)].Toolbars;
-            destinationTabToolbars.splice(destination.index, 0, draggableId);
-        }
-        onTabsChange([...tabs]);
-    };
-    const handleTabDragEnd = (result) => {
-        const { source, destination } = result;
-        if (!source || !destination)
-            return;
-        const [removed] = tabs.splice(source.index, 1);
-        tabs.splice(destination.index, 0, removed);
-        onTabsChange([...tabs]);
-    };
-    const handleRemoveTab = (tabIndex) => {
-        onTabsChange(tabs.filter((_, index) => index !== tabIndex));
-    };
-    const handleTabAdd = () => {
-        onTabsChange([...tabs, { Name: 'New Tab', Toolbars: [] }]);
-    };
-    const handleRemoveToolbar = (tabIndex, toolbarIndex) => {
-        onTabsChange(tabs.map((tab, index) => {
-            if (index !== tabIndex)
-                return tab;
-            return Object.assign(Object.assign({}, tab), { Toolbars: tab.Toolbars.filter((_, index) => index !== toolbarIndex) });
-        }));
-    };
-    const handleChangeTabName = (tabIndex, tabName) => {
-        onTabsChange(tabs.map((tab, index) => {
-            if (index !== tabIndex)
-                return tab;
-            return Object.assign(Object.assign({}, tab), { Name: tabName });
-        }));
-    };
-    return (React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: (result) => {
-            if (result.type === 'TAB')
-                handleTabDragEnd(result);
-            if (result.type === 'TOOLBAR')
-                handleToolbarDragEnd(result);
-        } },
-        React.createElement(DashboardManagerContext.Provider, { value: contextValue },
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(UnusedPanel, { disabled: disabled, toolbars: unusedToolbars }),
-                React.createElement(PanelWithButton_1.PanelWithButton, { headerText: moduleInfo.FriendlyName + ' Tabs', button: React.createElement(SimpleButton_1.default, { disabled: disabled, onClick: handleTabAdd }, "Add Tab") },
-                    React.createElement("div", { style: { display: 'flex', flex: 1 } },
-                        React.createElement(TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName })))))));
+    const preparedTabs = tabs.map((tab) => {
+        return Object.assign(Object.assign({}, tab), { Items: tab.Toolbars });
+    });
+    const handleTabsChange = React.useCallback((tabs) => {
+        const preparedTabs = tabs.map((tab) => (Object.assign(Object.assign({}, tab), { Toolbars: tab.Items })));
+        onTabsChange(preparedTabs);
+    }, []);
+    return (React.createElement(ModuleManager_1.ModuleManager, { availableItems: availableToolbars, disabled: disabled, onTabsChange: handleTabsChange, tabs: preparedTabs, tabsTitle: moduleInfo.FriendlyName + ' Tabs', unusedPanelTitle: 'Available Toolbars' }));
 };
 exports.default = DashboardManager;

package/src/components/Datepicker/index.d.ts

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

package/src/components/DragAndDropContext/DragAndDropContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ModuleManagerProps } from './ModuleManager';
+import { ModuleDraggableItem } from './types';
+export declare const DragAndDropContext: React.Context<{
+    availableItems: ModuleDraggableItem[];
+    permittedActions: ModuleManagerProps['permittedActions'];
+}>;

package/src/components/DragAndDropContext/DragAndDropContext.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragAndDropContext = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+exports.DragAndDropContext = React.createContext({
+    availableItems: [],
+    permittedActions: {
+        createTab: true,
+        editTabName: true,
+        dragAndDropTab: true,
+        deleteTab: true,
+    },
+});

package/src/components/DragAndDropContext/ModuleManager.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { BaseModuleTab, ModuleDraggableItem } from './types';
+export interface ModuleManagerProps {
+    availableItems: ModuleDraggableItem[];
+    disabled: boolean;
+    onTabsChange: (tabs: BaseModuleTab[]) => void;
+    tabs: BaseModuleTab[];
+    unusedPanelTitle: string;
+    tabsTitle?: string;
+    permittedActions?: {
+        createTab?: boolean;
+        editTabName?: boolean;
+        dragAndDropTab?: boolean;
+        deleteTab?: boolean;
+    };
+}
+export declare const ModuleManager: React.FunctionComponent<ModuleManagerProps>;

package/src/components/DragAndDropContext/ModuleManager.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModuleManager = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const PanelWithButton_1 = require("../../View/Components/Panels/PanelWithButton");
+const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const DragAndDropContext_1 = require("./DragAndDropContext");
+const TabList_1 = require("./TabList");
+const UnusedPanel_1 = require("./UnusedPanel");
+exports.ModuleManager = (props) => {
+    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, permittedActions, } = props;
+    const contextValue = React.useMemo(() => {
+        const preparedPermittedAction = Object.assign({ createTab: true, editTabName: true, dragAndDropTab: true, deleteTab: true }, permittedActions);
+        return {
+            permittedActions: preparedPermittedAction,
+            availableItems: props.availableItems,
+        };
+    }, [props.availableItems, props.permittedActions]);
+    const unusedToolbars = React.useMemo(() => availableItems
+        .map((t) => t.Id)
+        .filter((item) => {
+        return !tabs.some((tab) => tab.Items.includes(item));
+    }), [tabs, availableItems]);
+    const handleToolbarDragEnd = (result) => {
+        const { source, destination, draggableId } = result;
+        if (!source || !destination) {
+            return;
+        }
+        if (source.droppableId !== 'UNUSED') {
+            const sourceTabToolbars = tabs[Number(source.droppableId)].Items;
+            sourceTabToolbars.splice(source.index, 1);
+        }
+        if (destination.droppableId !== 'UNUSED') {
+            const destinationTabToolbars = tabs[Number(destination.droppableId)].Items;
+            destinationTabToolbars.splice(destination.index, 0, draggableId);
+        }
+        onTabsChange([...tabs]);
+    };
+    const handleTabDragEnd = (result) => {
+        const { source, destination } = result;
+        if (!source || !destination)
+            return;
+        const [removed] = tabs.splice(source.index, 1);
+        tabs.splice(destination.index, 0, removed);
+        onTabsChange([...tabs]);
+    };
+    const handleRemoveTab = (tabIndex) => {
+        onTabsChange(tabs.filter((_, index) => index !== tabIndex));
+    };
+    const handleTabAdd = () => {
+        onTabsChange([...tabs, { Name: 'New Tab', Items: [] }]);
+    };
+    const handleRemoveToolbar = (tabIndex, toolbarIndex) => {
+        onTabsChange(tabs.map((tab, index) => {
+            if (index !== tabIndex)
+                return tab;
+            return Object.assign(Object.assign({}, tab), { Items: tab.Items.filter((_, index) => index !== toolbarIndex) });
+        }));
+    };
+    const handleChangeTabName = (tabIndex, tabName) => {
+        onTabsChange(tabs.map((tab, index) => {
+            if (index !== tabIndex)
+                return tab;
+            return Object.assign(Object.assign({}, tab), { Name: tabName });
+        }));
+    };
+    return (React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: (result) => {
+            if (result.type === 'TAB')
+                handleTabDragEnd(result);
+            if (result.type === 'TOOLBAR')
+                handleToolbarDragEnd(result);
+        } },
+        React.createElement(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+                React.createElement(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, toolbars: unusedToolbars }),
+                React.createElement(PanelWithButton_1.PanelWithButton, { headerText: tabsTitle, button: contextValue.permittedActions.createTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, onClick: handleTabAdd }, "Add Tab")) },
+                    React.createElement("div", { style: { display: 'flex', flex: 1 } },
+                        React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName })))))));
+};

package/src/components/DragAndDropContext/TabList.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { BaseModuleTab } from './types';
+export declare function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }: {
+    disabled: boolean;
+    tabs: BaseModuleTab[];
+    onRemoveTab: (tabIndex: number) => void;
+    onRemoveToolbar: (tabIndex: number, toolbarIndex: number) => void;
+    onChangeTabName: (tabIndex: number, tabName: string) => void;
+}): JSX.Element;
+export declare function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }: {
+    tab: BaseModuleTab;
+    tabIndex: number;
+    disabled: boolean;
+    onRemove: () => void;
+    onRemoveToolbar: (toolbarIndex: number) => void;
+    onChangeTabName: (tabName: string) => void;
+}): JSX.Element;
+export declare function ToolbarList({ toolbars, droppableId, onRemove, disabled, }: {
+    toolbars: string[];
+    droppableId: string;
+    disabled: boolean;
+    onRemove: (toolbarIndex: number) => void;
+}): JSX.Element;
+export declare function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }: {
+    disabled: boolean;
+    toolbar: string;
+    toolbarIndex: number;
+    onRemove: () => void;
+}): JSX.Element;

package/src/components/DragAndDropContext/TabList.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarItem = exports.ToolbarList = exports.TabItem = exports.TabList = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const icons_1 = require("../icons");
+const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const DragAndDropContext_1 = require("./DragAndDropContext");
+function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }) {
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { style: { display: 'flex' }, "data-name": "dashboard-tabs" }),
+        tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
+        provided.placeholder))));
+}
+exports.TabList = TabList;
+function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
+    const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", Object.assign({ "data-name": "dashboard-tab", ref: provided.innerRef }, provided.draggableProps, { style: Object.assign(Object.assign({}, (isDragDisabled ? {} : provided.draggableProps.style)), { boxSizing: 'border-box', border: '1px solid var(--ab-color-primarydark)', borderRadius: 'var(--ab__border-radius)', marginRight: 'var(--ab-space-2)', width: 160, display: 'flex', flexDirection: 'column' }) }),
+        React.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                padding: 'var(--ab-space-1)',
+                borderBottom: '1px solid var(--ab-color-primarydark)',
+            } },
+            React.createElement("div", Object.assign({}, (disabled ? {} : provided.dragHandleProps), { style: context.permittedActions.dragAndDropTab
+                    ? {}
+                    : {
+                        display: 'none',
+                    } }),
+                React.createElement(icons_1.Icon, { name: "drag" })),
+            context.permittedActions.editTabName ? (React.createElement("input", { type: "text", disabled: disabled, value: tab.Name, style: {
+                    flex: 1,
+                    width: '100%',
+                    border: 'none',
+                    marginLeft: 'var(--ab-space-1)',
+                    marginRight: 'var(--ab-space-1)',
+                    alignSelf: 'stretch',
+                    background: 'transparent',
+                    color: 'var(--ab-color-text-on-primary)',
+                }, onChange: (event) => {
+                    onChangeTabName(event.target.value);
+                } })) : (tab.Name),
+            context.permittedActions.deleteTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))),
+        React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })))));
+}
+exports.TabItem = TabItem;
+function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, (disabled ? {} : provided.droppableProps), { "data-name": "dashboard-toolbar-drop-target", style: {
+            flex: 1,
+            padding: 4,
+            paddingBottom: 0,
+            background: snapshot.isDraggingOver
+                ? 'var(--ab-dashboard-tab-drop-target__background)'
+                : '',
+            minHeight: 200,
+        } }),
+        toolbars.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
+        provided.placeholder))));
+}
+exports.ToolbarList = ToolbarList;
+function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
+    const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    let currentItem = availableItems.find((t) => t.Id === toolbar);
+    const title = currentItem ? currentItem.Title : toolbar;
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { display: 'flex', alignItems: 'center', border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
+                ? 'var(--ab-dashboard-toolbar-drag__background)'
+                : 'var(--ab-color-primarylight)', paddingLeft: 'var(--ab-space-1)', marginBottom: 'var(--ab-space-1)' }) }),
+        React.createElement("div", { style: { flex: 1 } }, title),
+        React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "clear", variant: "text", padding: 1, onClick: onRemove })))));
+}
+exports.ToolbarItem = ToolbarItem;

package/src/components/DragAndDropContext/UnusedPanel.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function UnusedPanel({ toolbars, disabled, title, }: {
+    title: string;
+    toolbars: string[];
+    disabled: boolean;
+}): JSX.Element;