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

package/src/View/Wizard/OnePageWizards.js

@@ -14,9 +14,12 @@ const icons_1 = require("../../components/icons");
 const ResizeObserver_1 = require("../../components/ResizeObserver");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const useKeyboardNavigation_1 = require("./useKeyboardNavigation");
-exports.SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
-exports.SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
-exports.FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
+const SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
+exports.SummaryTag = SummaryTag;
+const SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
+exports.SummaryText = SummaryText;
+const FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
+exports.FormDescriptionText = FormDescriptionText;
 exports.OnePageWizardContext = React.createContext({
     data: null,
     sections: [],
@@ -26,7 +29,7 @@ function useOnePageWizardContext() {
     return React.useContext(exports.OnePageWizardContext);
 }
 exports.useOnePageWizardContext = useOnePageWizardContext;
-exports.OnePageWizard = (props) => {
+const OnePageWizard = (props) => {
     var _a, _b;
     let defaultCurrentIndex = 0;
     if (props.defaultCurrentSectionName) {
@@ -185,3 +188,4 @@ exports.OnePageWizard = (props) => {
                             } }, firstErrorMessage),
                         React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, "Finish")))))));
 };
+exports.OnePageWizard = OnePageWizard;

package/src/View/Wizard/useKeyboardNavigation.js

@@ -4,7 +4,7 @@ exports.useKeyboardNavigation = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const useGlobalEvent_1 = require("../../components/utils/useGlobalEvent");
-exports.useKeyboardNavigation = (setCurrentSection, sections) => {
+const useKeyboardNavigation = (setCurrentSection, sections) => {
     const handleKeyPress = React.useCallback((event) => {
         if ((event.ctrlKey || event.metaKey) &&
             (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
@@ -33,3 +33,4 @@ exports.useKeyboardNavigation = (setCurrentSection, sections) => {
     }, [sections, setCurrentSection]);
     useGlobalEvent_1.useGlobalEvent('keydown', handleKeyPress);
 };
+exports.useKeyboardNavigation = useKeyboardNavigation;

package/src/View/renderWithAdaptableContext.js

@@ -7,8 +7,9 @@ const react_redux_1 = require("react-redux");
 const styled_components_1 = require("styled-components");
 const theme_1 = tslib_1.__importDefault(require("../theme"));
 const AdaptableContext_1 = tslib_1.__importDefault(require("./AdaptableContext"));
-exports.renderWithAdaptableContext = (children, adaptable) => {
+const renderWithAdaptableContext = (children, adaptable) => {
     return (React.createElement(react_redux_1.Provider, { store: adaptable.adaptableStore.TheStore },
         React.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
             React.createElement(AdaptableContext_1.default.Provider, { value: adaptable }, children))));
 };
+exports.renderWithAdaptableContext = renderWithAdaptableContext;

package/src/agGrid/ActionColumnRenderer.d.ts

@@ -1,5 +1,5 @@
 import { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/all-modules';
-import { ActionColumn } from '../AdaptableOptions/UserInterfaceOptions';
+import { ActionColumn } from '../AdaptableOptions/ActionOptions';
 interface ActionColumnCellRendererParams extends ICellRendererParams {
     actionColumn?: ActionColumn;
 }

package/src/agGrid/ActionColumnRenderer.js

@@ -13,7 +13,7 @@ class ActionColumnRenderer {
         const adaptable = params.api.__adaptable;
         const actionCol = params.actionColumn
             ? params.actionColumn
-            : (_a = adaptable.api.userInterfaceApi
+            : (_a = adaptable.api.actionApi
                 .getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == params.colDef.colId);
         if (actionCol && actionCol.actionColumnButton) {
             let actionButtons = Array.isArray(actionCol.actionColumnButton)

package/src/agGrid/Adaptable.js

@@ -976,14 +976,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 +1025,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 +1330,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 +1668,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 +2186,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 +2199,7 @@ class Adaptable {
                     label,
                     tooltip: 'Create',
                     onClick: () => {
-                        this.api.gridApi.openCreateRowForm();
+                        this.api.actionApi.displayCreateActionRow();
                     },
                 };
             }
@@ -2208,7 +2210,7 @@ class Adaptable {
                     label,
                     tooltip: 'Edit',
                     onClick: (button, context) => {
-                        this.api.gridApi.openEditRowForm(context.primaryKeyValue);
+                        this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
                     },
                 };
             }
@@ -2219,7 +2221,7 @@ class Adaptable {
                     label,
                     tooltip: 'Clone',
                     onClick: (button, context) => {
-                        this.api.gridApi.openCloneRowForm(context.primaryKeyValue);
+                        this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
                     },
                 };
             }
@@ -2236,8 +2238,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 +2258,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 +2269,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 +2287,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;