@adaptabletools/adaptable 12.1.8-canary.1 → 12.2.0

package/src/components/DragAndDropContext/TabList.js

@@ -4,11 +4,12 @@ exports.ToolbarItem = exports.ToolbarList = exports.TabItem = exports.TabList =
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const rebass_1 = require("rebass");
 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" }),
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({}, provided.droppableProps, { className: "ab-ModuleSelector__TabList", ref: provided.innerRef, 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))));
 }
@@ -16,29 +17,15 @@ 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)',
-            } },
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", Object.assign({ className: "ab-ModuleSelector__TabItem", "data-name": "dashboard-tab", ref: provided.innerRef }, provided.draggableProps, { style: Object.assign({}, (isDragDisabled ? {} : provided.draggableProps.style)) }),
+        React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
             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) => {
+            context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
                     onChangeTabName(event.target.value);
                 } })) : (tab.Name),
             context.permittedActions.deleteTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))),
@@ -46,15 +33,7 @@ function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, di
 }
 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,
-        } }),
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(rebass_1.Box, Object.assign({ className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef }, (disabled ? {} : provided.droppableProps), { "data-name": "dashboard-toolbar-drop-target", backgroundColor: snapshot.isDraggingOver ? 'var(--ab-dashboard-tab-drop-target__background)' : '' }),
         toolbars.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
         provided.placeholder))));
 }
@@ -63,9 +42,9 @@ 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)' }) }),
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", backgroundColor: snapshot.isDragging
+            ? 'var(--ab-dashboard-toolbar-drag__background)'
+            : 'var(--ab-color-primarylight)', ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
         React.createElement("div", { style: { flex: 1 } }, title),
         React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "clear", variant: "text", padding: 1, onClick: onRemove })))));
 }

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -6,13 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const react_beautiful_dnd_1 = require("react-beautiful-dnd");
 const DragAndDropContext_1 = require("./DragAndDropContext");
 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)',
-            paddingBottom: 'var(--ab-space-1)',
-            backgroundColor: 'var(--ab-color-defaultbackground)',
-        } },
+    return (React.createElement("div", { className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
         React.createElement("div", { style: { padding: 'var(--ab-space-2)' } },
             React.createElement("b", null, title),
             " (",

package/src/components/DropdownButton/index.js

@@ -83,7 +83,7 @@ const DropdownButton = React.forwardRef((props, ref) => {
     const positionerRef = react_1.useRef(null);
     const { expanded, toggle, setExpanded, positionInfo } = useExpanded_1.default(props, positionerRef);
     const { maxHeight: maxListHeight, maxWidth: maxListWidth } = positionInfo;
-    listStyle = Object.assign({ minWidth: typeof maxListWidth === 'number' ? Math.min(listMinWidth, maxListWidth) : listMinWidth, maxHeight: maxListHeight, maxWidth: maxListWidth, overflow: 'auto', border: 'var(--ab-cmp-dropdownbutton-list__border)', borderRadius: 'var(--ab-cmp-dropdownbutton-list__border-radius)', zIndex: 'var(--ab-cmp-dropdownbutton-list__z-index)', background: 'var(--ab-cmp-dropdownbutton-list__background)' }, listStyle);
+    listStyle = Object.assign({ minWidth: typeof maxListWidth === 'number' ? Math.min(listMinWidth, maxListWidth) : listMinWidth, maxHeight: maxListHeight, maxWidth: maxListWidth }, listStyle);
     let icon = expanded
         ? react_1.cloneElement(exports.DROPDOWN_ICON, {
             style: Object.assign(Object.assign({}, exports.DROPDOWN_ICON.props.style), { transform: 'rotate(180deg) translate3d(0px, -2px, 0px)' }),
@@ -117,7 +117,7 @@ const DropdownButton = React.forwardRef((props, ref) => {
                 else {
                     ref.current = btn;
                 }
-            }, style: Object.assign(Object.assign({ overflow: 'visible' }, domProps.style), { outline: 'none' }), className: className, onClick: (e) => {
+            }, style: domProps.style, className: className, onClick: (e) => {
                 if (domProps.onClick) {
                     domProps.onClick(e);
                 }

package/src/components/EmptyContent/index.js

@@ -10,7 +10,7 @@ const EmptyContent = (_a) => {
     if (typeof children === 'string') {
         children = React.createElement("p", null, children);
     }
-    return (React.createElement(rebass_1.Box, { style: { position: 'relative' }, width: "100%", flex: 1, height: "100%" },
-        React.createElement(rebass_1.Flex, Object.assign({ alignItems: "center", justifyContent: "center", flexDirection: "column", padding: 4, fontSize: 'var(--ab-font-size-3)' }, flexProps, { className: join_1.default(baseClassName, className), style: Object.assign({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, style) }), children)));
+    return (React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__wrapper` },
+        React.createElement(rebass_1.Flex, Object.assign({ alignItems: "center", justifyContent: "center", flexDirection: "column" }, flexProps, { className: join_1.default(baseClassName, className), style: style }), children)));
 };
 exports.default = EmptyContent;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -56,6 +56,7 @@ function BaseEditorInput(props) {
                 node: testRowNode,
                 adaptableApi: props.api,
                 functions: expressionFunctions,
+                evaluateCustomQueryVariable: props.api.internalApi.getQueryLanguageService().evaluateCustomQueryVariable,
             });
         }
         catch (err) {

package/src/components/ExpressionEditor/index.js

@@ -126,20 +126,30 @@ function ExpressionEditor(props) {
                 React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, showColumnIds ? `[${column.columnId}]` : column.friendlyName)) }, column.dataType === 'Number' ? (React.createElement(Input_1.default, { type: "number", "data-name": "column-input", "data-value": column.columnId, value: getColValue(column), onChange: (e) => setData(updateColValue(data, column, Number(e.target.value))), width: "100%", disabled: column.readOnly })) : column.dataType === 'String' ? (React.createElement(Input_1.default, { type: "text", "data-name": "column-input", "data-value": column.columnId, value: getColValue(column), onChange: (e) => setData(updateColValue(data, column, e.target.value)), width: "100%", disabled: column.readOnly })) : column.dataType === 'Date' ? (React.createElement(AdaptableInput_1.default, { type: "date", "data-name": "column-input", "data-value": column.columnId, value: getColDateValue(column), onChange: (e) => {
                 setData(updateColValue(data, column, new Date(e.target.value)));
             }, style: { width: '100%' }, disabled: column.readOnly })) : column.dataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-input", "data-value": column.columnId, checked: getColValue(column), onChange: (checked) => setData(updateColValue(data, column, checked)), disabled: column.readOnly })) : null))))));
-    const namedQueries = (React.createElement("div", null, props.namedQueries.map((namedQuery) => (React.createElement(rebass_1.Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
-            padding: 3,
-            marginTop: 'var(--ab-space-2)',
-            marginBottom: 'var(--ab-space-2)',
-        }, backgroundColor: "primarylight" },
-        ' ',
-        React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
-                background: 'var(--ab-color-primary)',
-                cursor: 'grab',
-            }, data: `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
-            React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
-        React.createElement(rebass_1.Flex, { alignItems: "start", style: {
-                padding: 5,
-            } }, namedQuery.BooleanExpression))))));
+    const namedQueries = (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+        React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
+                float: 'right',
+                margin: 0,
+                paddingTop: 'var(--ab-space-1)',
+                paddingBottom: 'var(--ab-space-1)',
+            } }, 'Show Column IDs'),
+        props.namedQueries.map((namedQuery) => (React.createElement(rebass_1.Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
+                padding: 3,
+                marginTop: 'var(--ab-space-2)',
+                marginBottom: 'var(--ab-space-2)',
+                width: '100%',
+            }, backgroundColor: "primarylight" },
+            ' ',
+            React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
+                    background: 'var(--ab-color-primary)',
+                    cursor: 'grab',
+                }, data: `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
+                React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
+            React.createElement(rebass_1.Flex, { alignItems: "start", style: {
+                    padding: 5,
+                } }, showColumnIds
+                ? namedQuery.BooleanExpression
+                : props.api.queryLanguageApi.getAdaptableQueryExpressionWithColumnFriendlyNames(namedQuery)))))));
     const showDocumentationLinks = props.api.internalApi.isDocumentationLinksDisplayed();
     const queryDocumentationLink = queryDocumentationLinks[type];
     return (React.createElement(EditorContext_1.ExpressionEditorContext.Provider, { value: {

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

@@ -689,6 +689,15 @@ export declare const ADAPTABLE_METAMODEL: {
             gridInfo?: undefined;
             defaultValue?: undefined;
             reference?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional: boolean;
+            defaultValue: string;
+            gridInfo?: undefined;
+            reference?: undefined;
         } | {
             name: string;
             kind: string;
@@ -2617,22 +2626,22 @@ export declare const ADAPTABLE_METAMODEL: {
             kind: string;
             description: string;
             uiLabel: string;
-            isOptional: boolean;
+            isOptional?: undefined;
             reference?: undefined;
         } | {
             name: string;
             kind: string;
             description: string;
             uiLabel: string;
-            reference: string;
-            isOptional?: undefined;
+            isOptional: boolean;
+            reference?: undefined;
         } | {
             name: string;
             kind: string;
             description: string;
             uiLabel: string;
+            reference: string;
             isOptional?: undefined;
-            reference?: undefined;
         } | {
             name: string;
             kind: string;
@@ -2677,6 +2686,15 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         description: string;
         properties: ({
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            isOptional: boolean;
+            gridInfo?: undefined;
+            defaultValue?: undefined;
+            reference?: undefined;
+        } | {
             name: string;
             kind: string;
             description: string;
@@ -4900,6 +4918,18 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         description: string;
     };
+    UnbalancedGroupsKeyContext: {
+        name: string;
+        kind: string;
+        description: string;
+        properties: {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            reference: string;
+        }[];
+    };
     UserInterfaceApi: {
         name: string;
         kind: string;
@@ -5005,11 +5035,5 @@ export declare const ADAPTABLE_METAMODEL: {
         name: string;
         kind: string;
         description: string;
-        properties: {
-            name: string;
-            kind: string;
-            description: string;
-            uiLabel: string;
-        }[];
     };
 };