@adaptabletools/adaptable 12.0.0-canary.3 → 12.0.0-canary.6

package/src/agGrid/Adaptable.js

@@ -345,7 +345,7 @@ class Adaptable {
         }
         this.emitter = new Emitter_1.default();
         // we create AdaptableOptions by merging the values provided by the user with the defaults (where no value has been set)
-        this.adaptableOptions = AdaptableHelper_1.default.assignadaptableOptions(adaptableOptions);
+        this.adaptableOptions = AdaptableHelper_1.default.assignAdaptableOptions(adaptableOptions);
         if (this.hasAutogeneratedPrimaryKey()) {
             LoggingHelper_1.LogAdaptableWarning(`Autogenerated primary key (adaptableOptions.autogeneratedPrimaryKey = TRUE) should be used only as a last resort,
       when no unique column is available, as it limits some Adaptable functionalities!
@@ -354,7 +354,6 @@ class Adaptable {
             this.adaptableOptions.primaryKey = GeneralConstants_1.AUTOGENERATED_PK_COLUMN;
         }
         Adaptable.collectInstance(this);
-        AdaptableHelper_1.default.checkAdaptableOptions(this.adaptableOptions);
         this.runtimeConfig = runtimeConfig || {};
         this.agGridModules = this.runtimeConfig.modules || [];
         this.gridOptions = this.adaptableOptions.gridOptions;
@@ -420,6 +419,8 @@ class Adaptable {
         if (this.gridOptions.columnTypes.abColDefDate.cellEditor === undefined) {
             this.gridOptions.columnTypes.abColDefDate.cellEditor = AdaptableDateEditor_1.AdaptableDateEditor;
         }
+        // validate the provided AdaptableOptions
+        this.MetamodelService.validateAdaptableOptionsValues();
         return this.initializeAgGrid().then((initialized) => {
             if (!initialized) {
                 // we have no grid, we can't do anything
@@ -976,14 +977,16 @@ class Adaptable {
         const alert = this.getActiveAlertWithHighlightCell(col, params);
         const highlightCell = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.alertDefinition) === null || _a === void 0 ? void 0 : _a.AlertProperties) === null || _b === void 0 ? void 0 : _b.HighlightCell;
         return typeof highlightCell === 'object' && (highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName)
-            ? highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName : null;
+            ? highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName
+            : null;
     }
     getAlertRowClass(params) {
         var _a, _b;
         const alert = this.getActiveAlertWithHighlightRow(params);
         const highlightRow = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.alertDefinition) === null || _a === void 0 ? void 0 : _a.AlertProperties) === null || _b === void 0 ? void 0 : _b.HighlightRow;
         return typeof highlightRow === 'object' && (highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName)
-            ? highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName : null;
+            ? highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName
+            : null;
     }
     getAlertRowStyle(params) {
         var _a, _b;
@@ -1023,9 +1026,12 @@ class Adaptable {
             return;
         }
         return flashingCell.direction === 'up'
-            ? (_a = flashingCell.flashingCellDefinition.UpChangeStyle) === null || _a === void 0 ? void 0 : _a.ClassName : flashingCell.direction === 'down'
-            ? (_b = flashingCell.flashingCellDefinition.DownChangeStyle) === null || _b === void 0 ? void 0 : _b.ClassName : flashingCell.direction === 'neutral'
-            ? (_c = flashingCell.flashingCellDefinition.NeutralChangeStyle) === null || _c === void 0 ? void 0 : _c.ClassName : undefined;
+            ? (_a = flashingCell.flashingCellDefinition.UpChangeStyle) === null || _a === void 0 ? void 0 : _a.ClassName
+            : flashingCell.direction === 'down'
+                ? (_b = flashingCell.flashingCellDefinition.DownChangeStyle) === null || _b === void 0 ? void 0 : _b.ClassName
+                : flashingCell.direction === 'neutral'
+                    ? (_c = flashingCell.flashingCellDefinition.NeutralChangeStyle) === null || _c === void 0 ? void 0 : _c.ClassName
+                    : undefined;
     }
     getCellHighlightStyle(col, params) {
         const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
@@ -1325,16 +1331,12 @@ class Adaptable {
                 newColState.aggFunc =
                     aggregationFunctionsColumnsMap[colId] === true
                         ? // if we have true, it means - take the default aggFunc from colDef
-                         (_e = (_d = (_c = 
-                        // NOTE: colState gives us the current aggFunc, which can be null,
-                        // while the colDef gives us the initially configured aggFunc for that column
-                        colState.aggFunc) !== null && _c !== void 0 ? _c : colDef === null || colDef === void 0 ? void 0 : colDef.aggFunc) !== null && _d !== void 0 ? _d : 
-                        // @ts-ignore available only wth ag-Grid v27.3.x
-                        colDef === null || 
-                        // @ts-ignore available only wth ag-Grid v27.3.x
-                        colDef === void 0 ? void 0 : 
-                        // @ts-ignore available only wth ag-Grid v27.3.x
-                        colDef.defaultAggFunc) !== null && _e !== void 0 ? _e : 'sum' : aggregationFunctionsColumnsMap[colId];
+                            // NOTE: colState gives us the current aggFunc, which can be null,
+                            // while the colDef gives us the initially configured aggFunc for that column
+                            (_e = (_d = (_c = colState.aggFunc) !== null && _c !== void 0 ? _c : colDef === null || colDef === void 0 ? void 0 : colDef.aggFunc) !== null && _d !== void 0 ? _d : 
+                            // @ts-ignore available only wth ag-Grid v27.3.x
+                            colDef === null || colDef === void 0 ? void 0 : colDef.defaultAggFunc) !== null && _e !== void 0 ? _e : 'sum'
+                        : aggregationFunctionsColumnsMap[colId];
             }
             if (sortModelMap[colId]) {
                 newColState.sort = sortModelMap[colId].sort;
@@ -1667,7 +1669,8 @@ class Adaptable {
         let returnValues = [];
         // this function does NOT look up for server values but actually it should...
         // that is currently commented out in the column api function (previously in filter form)
-        permittedValues = permittedValues !== null && permittedValues !== void 0 ? permittedValues : this.api.userInterfaceApi.getPermittedValuesForColumn(column);
+        permittedValues =
+            permittedValues !== null && permittedValues !== void 0 ? permittedValues : this.api.userInterfaceApi.getPermittedValuesForColumn(column);
         if (ArrayExtensions_1.ArrayExtensions.IsNotNull(permittedValues)) {
             returnValues = permittedValues.map((pv) => {
                 return {
@@ -2184,7 +2187,7 @@ class Adaptable {
         }
     }
     getColDefsForRowEditColumns() {
-        const actionRowButtons = this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtons;
+        const actionRowButtons = this.adaptableOptions.actionOptions.actionRowButtons;
         if (!(actionRowButtons === null || actionRowButtons === void 0 ? void 0 : actionRowButtons.length)) {
             return [];
         }
@@ -2197,7 +2200,7 @@ class Adaptable {
                     label,
                     tooltip: 'Create',
                     onClick: () => {
-                        this.api.gridApi.openCreateRowForm();
+                        this.api.actionApi.displayCreateActionRow();
                     },
                 };
             }
@@ -2208,7 +2211,7 @@ class Adaptable {
                     label,
                     tooltip: 'Edit',
                     onClick: (button, context) => {
-                        this.api.gridApi.openEditRowForm(context.primaryKeyValue);
+                        this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
                     },
                 };
             }
@@ -2219,7 +2222,7 @@ class Adaptable {
                     label,
                     tooltip: 'Clone',
                     onClick: (button, context) => {
-                        this.api.gridApi.openCloneRowForm(context.primaryKeyValue);
+                        this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
                     },
                 };
             }
@@ -2236,8 +2239,8 @@ class Adaptable {
                             rowNode: context.rowNode,
                             adaptableApi: context.adaptableApi,
                         };
-                        this.api.eventApi.emit('RowFormSubmitted', eventInfo);
-                        (_b = (_a = this.adaptableOptions.editOptions.rowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+                        this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
+                        (_b = (_a = this.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
                     },
                 };
             }
@@ -2256,7 +2259,8 @@ class Adaptable {
                 colId: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
                 hide: false,
                 editable: false,
-                width: editButtons.length * 42,
+                // 17px is the icon widht + left&right padding
+                width: editButtons.length * (UIHelper_1.default.getSimpleButtonPaddingWidth() * 2 + 17) + 3,
                 resizable: false,
                 lockVisible: true,
                 suppressColumnsToolPanel: true,
@@ -2266,8 +2270,7 @@ class Adaptable {
                 filter: false,
                 sortable: false,
                 enableRowGroup: false,
-                pinned: this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtonsPosition ===
-                    'pinnedRight'
+                pinned: this.adaptableOptions.actionOptions.actionRowButtonsPosition === 'pinnedRight'
                     ? 'right'
                     : 'left',
                 cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
@@ -2285,7 +2288,7 @@ class Adaptable {
             suppressMenu: false,
             suppressMovable: false,
         };
-        return this.api.userInterfaceApi.getAllActionColumn().map((actionColumn) => {
+        return this.api.actionApi.getAllActionColumn().map((actionColumn) => {
             const actionColumnSettings = Object.assign(Object.assign({}, defaultActionColumnSettings), actionColumn.actionColumnSettings);
             const newColDef = {
                 headerName: actionColumn.friendlyName ? actionColumn.friendlyName : actionColumn.columnId,

package/src/agGrid/CheckboxRenderer.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxEditor = exports.getCheckboxRendererForColumn = void 0;
-exports.getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
+const getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     const CheckboxRenderer = function () {
         return '';
     };
@@ -54,6 +54,7 @@ exports.getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     };
     return CheckboxRenderer;
 };
+exports.getCheckboxRendererForColumn = getCheckboxRendererForColumn;
 // this is just a stub editor instance, we just need the `isCancelBeforeStart()` hook
 class CheckboxEditor {
     isCancelBeforeStart() {

package/src/agGrid/FilterWrapper.js

@@ -4,7 +4,7 @@ exports.FilterWrapperFactory = void 0;
 const tslib_1 = require("tslib");
 const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const FilterForm_1 = require("../View/Components/FilterForm/FilterForm");
-exports.FilterWrapperFactory = (adaptable) => {
+let FilterWrapperFactory = (adaptable) => {
     return class FilterWrapper {
         init(params) {
             this.params = params;
@@ -52,3 +52,4 @@ exports.FilterWrapperFactory = (adaptable) => {
         }
     };
 };
+exports.FilterWrapperFactory = FilterWrapperFactory;

package/src/agGrid/FloatingFilterWrapper.js

@@ -4,7 +4,7 @@ exports.FloatingFilterWrapperFactory = void 0;
 const tslib_1 = require("tslib");
 const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const QuickFilterForm_1 = require("../View/Components/FilterForm/QuickFilterForm");
-exports.FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper {
+const FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper {
     onParentModelChanged(parentModel, filterChangedEvent) {
         // todo?
     }
@@ -41,3 +41,4 @@ exports.FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrappe
         this.filterContainer = null;
     }
 };
+exports.FloatingFilterWrapperFactory = FloatingFilterWrapperFactory;

package/src/agGrid/PercentBarRenderer.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const FormatHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/FormatHelper"));
-exports.getPercentBarRendererForColumn = (formatColumn, api) => {
+const getPercentBarRendererForColumn = (formatColumn, api) => {
     var _a;
     if (!((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle)) {
         return;
@@ -82,3 +82,4 @@ exports.getPercentBarRendererForColumn = (formatColumn, api) => {
         }
     };
 };
+exports.getPercentBarRendererForColumn = getPercentBarRendererForColumn;

package/src/agGrid/agGridHelper.js

@@ -162,7 +162,8 @@ class agGridHelper {
         const customFriendlyName = typeof columnFriendlyName === 'function'
             ? columnFriendlyName({ colId: colId, agColumn: agGridColumn })
             : null;
-        const FriendlyName = (customFriendlyName !== null && customFriendlyName !== void 0 ? customFriendlyName : isActionRowButtonColumn) ? GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME
+        const FriendlyName = (customFriendlyName !== null && customFriendlyName !== void 0 ? customFriendlyName : isActionRowButtonColumn)
+            ? GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME
             : this.gridOptions.columnApi.getDisplayNameForColumn(agGridColumn, 'header');
         if (!this.initialAgGridColDefs[colId]) {
             this.initialAgGridColDefs[colId] = Object.assign({}, agGridColumn.getUserProvidedColDef());
@@ -220,6 +221,7 @@ class agGridHelper {
             iconKey: 'menu',
             width: UIHelper_1.default.getAdaptableToolPanelWidth(),
             minWidth: UIHelper_1.default.getAdaptableToolPanelWidth(),
+            // maxWidth = undefined,
         };
     }
     isSideBarDefObject(sidebarDef) {

package/src/agGrid/agGridMenuHelper.js

@@ -107,9 +107,7 @@ class agGridMenuHelper {
                 ? x.onClick
                 : () => this.adaptable.api.internalApi.dispatchReduxAction(x.reduxAction),
             icon: icons_1.iconToString(x.icon, {
-                style: {
-                    fill: 'var(--ab-color-text-on-primary)',
-                },
+                fill: 'var(--ab-color-text-on-primary)',
             }),
         };
     }
@@ -127,9 +125,7 @@ class agGridMenuHelper {
                     ? () => this.adaptable.api.internalApi.dispatchReduxAction(adaptableMenuItem.reduxAction)
                     : undefined,
             icon: icons_1.iconToString(adaptableMenuItem.icon, {
-                style: {
-                    fill: 'var(--ab-color-text-on-primary)',
-                },
+                fill: 'var(--ab-color-text-on-primary)',
             }),
             subMenu: subMenuItems,
         };
@@ -140,7 +136,9 @@ class agGridMenuHelper {
         return {
             name: this.getLabelFromUserColumnMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
-            icon: menuItem.icon,
+            icon: icons_1.iconToString(menuItem.icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            }),
             disabled: disabled,
             subMenu: ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(menuItem.subMenuItems)
                 ? undefined
@@ -155,7 +153,9 @@ class agGridMenuHelper {
         return {
             name: this.getLabelFromUserContextMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
-            icon: menuItem.icon,
+            icon: icons_1.iconToString(menuItem.icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            }),
             disabled: disabled,
             subMenu: ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(menuItem.subMenuItems)
                 ? undefined
@@ -188,7 +188,9 @@ class agGridMenuHelper {
                 label: groupedCols.length == 1 ? 'Ungroup Column' : 'Ungroup All',
                 onClick: () => this.gridOptions.columnApi.setRowGroupColumns([]),
                 isVisible: true,
-                icon: 'undo',
+                icon: {
+                    name: 'undo',
+                },
             };
             let menuItem = this.createAgGridMenuDefFromAdaptableMenu(ungroupMenuItem);
             return menuItem;
@@ -367,7 +369,8 @@ class agGridMenuHelper {
         });
     }
     buildStandaloneColumnHeader(adaptableColumn) {
-        let menuContext = this.createColumnMenuContextObject(adaptableColumn, null);
+        const agGridColumn = this.adaptable.api.columnApi.getAgGridColumnForAdaptableColumn(adaptableColumn.columnId);
+        let menuContext = this.createColumnMenuContextObject(adaptableColumn, agGridColumn);
         let returnMenuItems = [];
         returnMenuItems.push(...this.getAdaptableMenuItemsColumnHeader(adaptableColumn, menuContext));
         let userColumnMenuItems = this.getUserMenuItemsColumnHeader(menuContext);

package/src/agGrid/createAgStatusPanelComponent.js

@@ -5,7 +5,7 @@ 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) => {
+const createAgStatusPanelComponent = (component, adaptable, context) => {
     return class StatusBarRenderer {
         init(params) {
             this.params = params;
@@ -30,3 +30,4 @@ exports.createAgStatusPanelComponent = (component, adaptable, context) => {
         }
     };
 };
+exports.createAgStatusPanelComponent = createAgStatusPanelComponent;

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -39,11 +39,14 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         const newData = Object.assign(Object.assign({}, data), { [key]: value });
         onChange(newData);
     };
-    const disabledButtons = react_1.useMemo(() => { var _a, _b; return (_b = (_a = formDef.buttons) === null || _a === void 0 ? void 0 : _a.map((button) => {
-        // defensive programming: conventionally context should ALWAYS be present for validating buttons
-        const isValid = !!button.disabled && !!context ? !button.disabled(button, context) : true;
-        return !isValid;
-    })) !== null && _b !== void 0 ? _b : []; }, [data]);
+    const disabledButtons = react_1.useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = formDef.buttons) === null || _a === void 0 ? void 0 : _a.map((button) => {
+            // defensive programming: conventionally context should ALWAYS be present for validating buttons
+            const isValid = !!button.disabled && !!context ? !button.disabled(button, context) : true;
+            return !isValid;
+        })) !== null && _b !== void 0 ? _b : [];
+    }, [data]);
     const renderLabel = (field) => {
         return (React.createElement(rebass_1.Box, { className: 'ab-FormLayout_column--label', style: { textAlign: 'end' } }, field.label));
     };

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { AdaptableExternalIcon, AdaptableIcon, AdaptableInternalIcon } from '../../PredefinedConfig/Common/AdaptableIcon';
+export interface AdaptableIconComponentProps {
+    icon: AdaptableIcon;
+    iconClassName?: string;
+}
+export declare const AdaptableIconComponent: (props: AdaptableIconComponentProps) => JSX.Element;
+export declare const isAdaptableInternalIcon: (icon: unknown) => icon is AdaptableInternalIcon;
+export declare const isAdaptableExternalIcon: (icon: unknown) => icon is AdaptableExternalIcon;
+export declare const isAdaptableIcon: (icon: unknown) => icon is AdaptableIcon;

package/src/components/AdaptableIconComponent/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAdaptableIcon = exports.isAdaptableExternalIcon = exports.isAdaptableInternalIcon = exports.AdaptableIconComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const icons_1 = require("../icons");
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const AdaptableIconComponent = (props) => {
+    var _a, _b, _c, _d, _e;
+    const { icon, iconClassName } = props;
+    if (!icon) {
+        return null;
+    }
+    const className = join_1.default(icon.className, iconClassName);
+    if (exports.isAdaptableInternalIcon(icon)) {
+        return React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className });
+    }
+    if (exports.isAdaptableExternalIcon(icon)) {
+        let width = (_b = (_a = icon.style) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 'var(--ab-cmp-icon__width)';
+        let height = (_d = (_c = icon.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 'var(--ab-cmp-icon__height)';
+        const iconStyle = (_e = icon.style) !== null && _e !== void 0 ? _e : {};
+        return React.createElement("img", { src: icon.src, className: className, style: Object.assign({ height, width }, iconStyle) });
+    }
+    return null;
+};
+exports.AdaptableIconComponent = AdaptableIconComponent;
+const isAdaptableInternalIcon = (icon) => {
+    var _a;
+    return typeof ((_a = icon) === null || _a === void 0 ? void 0 : _a.name) === 'string';
+};
+exports.isAdaptableInternalIcon = isAdaptableInternalIcon;
+const isAdaptableExternalIcon = (icon) => {
+    var _a;
+    return typeof ((_a = icon) === null || _a === void 0 ? void 0 : _a.src) === 'string';
+};
+exports.isAdaptableExternalIcon = isAdaptableExternalIcon;
+const isAdaptableIcon = (icon) => {
+    return exports.isAdaptableInternalIcon(icon) || exports.isAdaptableExternalIcon(icon);
+};
+exports.isAdaptableIcon = isAdaptableIcon;

package/src/components/CheckBox/index.js

@@ -55,7 +55,8 @@ const CheckBox = (_a) => {
         after));
 };
 exports.CheckBox = CheckBox;
-exports.CheckBoxGroup = (props) => {
+const CheckBoxGroup = (props) => {
     const { orientation } = props, flexProps = tslib_1.__rest(props, ["orientation"]);
     return (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-CheckBoxGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start' }, flexProps)));
 };
+exports.CheckBoxGroup = CheckBoxGroup;

package/src/components/CodeBlock/index.js

@@ -6,6 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 exports.baseClassName = 'ab-CodeBlock';
-exports.CodeBlock = (props) => {
+const CodeBlock = (props) => {
     return React.createElement(rebass_1.Box, Object.assign({ as: "code" }, props, { className: join_1.default(props.className, exports.baseClassName) }));
 };
+exports.CodeBlock = CodeBlock;

package/src/components/Dashboard/DashboardManager.js

@@ -13,6 +13,6 @@ const DashboardManager = ({ tabs, onTabsChange, availableToolbars, api, disabled
         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' }));
+    return (React.createElement(ModuleManager_1.ModuleManager, { availableItems: availableToolbars, disabled: disabled, onTabsChange: handleTabsChange, tabs: preparedTabs, tabsTitle: moduleInfo.FriendlyName + ' Tabs', unusedPanelTitle: 'Available Toolbars', dragItemText: "Drag into a Tab below" }));
 };
 exports.default = DashboardManager;

package/src/components/Datepicker/DatepickerContext.js

@@ -7,6 +7,7 @@ exports.DatepickerContext = React.createContext({
     onShow: () => { },
     onHide: () => { },
 });
-exports.useDatepickerContext = () => {
+const useDatepickerContext = () => {
     return React.useContext(exports.DatepickerContext);
 };
+exports.useDatepickerContext = useDatepickerContext;

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" | "type" | "min" | "contextMenu" | "value" | "onKeyDown" | "rows" | "name" | "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" | "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>>;
+export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "max" | "required" | "default" | "high" | "low" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "disabled" | "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" | "type" | "min" | "contextMenu" | "value" | "onKeyDown" | "rows" | "name" | "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" | "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/ModuleManager.d.ts

@@ -6,6 +6,7 @@ export interface ModuleManagerProps {
     onTabsChange: (tabs: BaseModuleTab[]) => void;
     tabs: BaseModuleTab[];
     unusedPanelTitle: string;
+    dragItemText: string;
     tabsTitle?: string;
     permittedActions?: {
         createTab?: boolean;

package/src/components/DragAndDropContext/ModuleManager.js

@@ -9,8 +9,8 @@ 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 ModuleManager = (props) => {
+    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, } = props;
     const contextValue = React.useMemo(() => {
         const preparedPermittedAction = Object.assign({ createTab: true, editTabName: true, dragAndDropTab: true, deleteTab: true }, permittedActions);
         return {
@@ -18,7 +18,7 @@ exports.ModuleManager = (props) => {
             availableItems: props.availableItems,
         };
     }, [props.availableItems, props.permittedActions]);
-    const unusedToolbars = React.useMemo(() => availableItems
+    const unusedItems = React.useMemo(() => availableItems
         .map((t) => t.Id)
         .filter((item) => {
         return !tabs.some((tab) => tab.Items.includes(item));
@@ -74,8 +74,9 @@ exports.ModuleManager = (props) => {
         } },
         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(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
                 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 })))))));
 };
+exports.ModuleManager = ModuleManager;

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

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

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_beautiful_dnd_1 = require("react-beautiful-dnd");
 const DragAndDropContext_1 = require("./DragAndDropContext");
-function UnusedPanel({ toolbars, disabled, title, }) {
-    return (React.createElement("div", { "data-name": "dashboard-toolbars", style: {
+function UnusedPanel({ items, disabled, title, dragItemText, }) {
+    return (React.createElement("div", { "data-name": "unusedpanel-items", style: {
             border: '1px solid var(--ab-color-primarydark)',
             borderRadius: 'var(--ab__border-radius)',
             marginBottom: 'var(--ab-space-2)',
@@ -15,31 +15,33 @@ function UnusedPanel({ toolbars, disabled, title, }) {
         } },
         React.createElement("div", { style: { padding: 'var(--ab-space-2)' } },
             React.createElement("b", null, title),
-            " (drag into a Tab below)"),
-        React.createElement(UnusedToolbarList, { disabled: disabled, toolbars: toolbars })));
+            " (",
+            dragItemText,
+            ")"),
+        React.createElement(UnusedItemList, { disabled: disabled, items: items })));
 }
 exports.UnusedPanel = UnusedPanel;
-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: {
+function UnusedItemList({ items, 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": "unusedpanel-items-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 }))),
+        items.map((unusedItem, unusedItemIndex) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem, unusedItemIndex: unusedItemIndex }))),
         provided.placeholder))));
 }
-function UnusedToolbarItem({ toolbar, toolbarIndex, disabled, }) {
+function UnusedItem({ unusedItem, unusedItemIndex, 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) => {
+    let currentItem = availableItems.find((t) => t.Id === unusedItem);
+    const title = currentItem ? currentItem.Title : unusedItem;
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: unusedItem, index: unusedItemIndex }, (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
+        return (React.createElement("div", Object.assign({ "data-name": "unused-item", 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)' }) }), title));
     }));