@adaptabletools/adaptable 17.0.0 → 17.0.1

package/package.json

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

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1705575504370;
+declare const _default: 1705922479309;
 export default _default;

package/publishTimestamp.js

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

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

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

package/src/Api/Internal/DashboardInternalApi.js

@@ -60,6 +60,11 @@ class DashboardInternalApi extends ApiBase_1.ApiBase {
         }
         return false;
     }
+    isToolbarCustom(toolbarName) {
+        return this.adaptable.api.dashboardApi
+            .getCustomToolbars()
+            .some((tb) => tb.name === toolbarName);
+    }
     getCustomToolbarRenderContainerId(customToolbarName) {
         return `ab-CustomToolbar__${customToolbarName}__renderContent`;
     }

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -154,7 +154,7 @@ const AlertButtonsEditor = (props) => {
                                             label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
                                             value: variant,
                                         };
-                                    }), rederSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, onChange: (value) => {
+                                    }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, onChange: (value) => {
                                         setVariant(value);
                                     } })),
                             React.createElement(Select_1.Select, { options: [
@@ -168,7 +168,7 @@ const AlertButtonsEditor = (props) => {
                                             value: tone,
                                         };
                                     }),
-                                ], rederSingleValue: (option) => `Tone: ${option.label}`, onChange: (value) => {
+                                ], renderSingleValue: (option) => `Tone: ${option.label}`, onChange: (value) => {
                                     if (value === 'text') {
                                         setTone(null);
                                     }

package/src/View/Dashboard/PinnedDashboard.js

@@ -11,7 +11,8 @@ const PinnedDashboard = (props) => {
     var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dashboardState = (0, react_redux_1.useSelector)((state) => state.Dashboard);
-    const pinnedToolbars = ((_a = dashboardState.PinnedToolbars) !== null && _a !== void 0 ? _a : []).filter((tb) => adaptable.api.internalApi.getModuleService().isModuleAvailable(tb));
+    const pinnedToolbars = ((_a = dashboardState.PinnedToolbars) !== null && _a !== void 0 ? _a : []).filter((tb) => adaptable.api.dashboardApi.internalApi.isToolbarCustom(tb) ||
+        adaptable.api.internalApi.getModuleService().isModuleAvailable(tb));
     if (!pinnedToolbars || pinnedToolbars.length == 0) {
         return React.createElement(React.Fragment, null);
     }

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -102,7 +102,7 @@ const PrimiteValueInput = (props) => {
     ];
     const typeOption = options.find((option) => option.value === type);
     return (react_1.default.createElement(InputGroup_1.InputGroup, { Component: rebass_1.Flex, "data-id": "query-input-wrapper", mr: 2 },
-        react_1.default.createElement(Select_1.Select, { rederSingleValue: (value) => {
+        react_1.default.createElement(Select_1.Select, { renderSingleValue: (value) => {
                 return (react_1.default.createElement(react_1.default.Fragment, null, typeOption.value === 'column-name' ? react_1.default.createElement(icons_1.Icon, { name: "grid" }) : react_1.default.createElement(icons_1.Icon, { name: "edit" })));
             }, value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) }),
         editor));
@@ -114,18 +114,37 @@ const PrimitiveMultiValueInput = (props) => {
         } }));
 };
 exports.PrimitiveMultiValueInput = PrimitiveMultiValueInput;
+const SymbolToIcon = (props) => {
+    switch (props.symbol) {
+        case '=':
+            return react_1.default.createElement(icons_1.Icon, { name: "equals" });
+        case '!=':
+            return react_1.default.createElement(icons_1.Icon, { name: "not-equal" });
+        case '>':
+            return react_1.default.createElement(icons_1.Icon, { name: "greater-than" });
+        case '>=':
+            return react_1.default.createElement(icons_1.Icon, { name: "greater-than-or-equal" });
+        case '<':
+            return react_1.default.createElement(icons_1.Icon, { name: "less-than" });
+        case '<=':
+            return react_1.default.createElement(icons_1.Icon, { name: "less-than-or-equal" });
+        default:
+            return react_1.default.createElement(react_1.default.Fragment, null, props.symbol);
+    }
+};
 const ExpressionSelector = (props) => {
     var _a;
     const { getExpressions } = (0, QueryBuilder_1.useQueryBuilderContext)();
     const expressions = props.dataType ? getExpressions(props.dataType) : [];
-    return (react_1.default.createElement(DropdownButton_1.default, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", columns: ['label'], items: expressions.map((expression) => ({
-            label: (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(expression),
+    return (react_1.default.createElement(DropdownButton_1.default, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", tone: 'accent', columns: ['label'], items: expressions.map((expression) => ({
+            label: react_1.default.createElement(SymbolToIcon, { symbol: (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(expression) }),
             onClick: () => {
                 if (expression !== props.value) {
                     props.onExpressionChange(expression);
                 }
             },
-        })) }, (_a = (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(props.value)) !== null && _a !== void 0 ? _a : 'Select Operator'));
+        })) },
+        react_1.default.createElement(SymbolToIcon, { symbol: (_a = (0, mapQlPredicateToExpression_1.getQlPredicateSymbol)(props.value)) !== null && _a !== void 0 ? _a : 'Select Operator' })));
 };
 exports.ExpressionSelector = ExpressionSelector;
 const CombinatorSelector = (props) => {

package/src/components/Select/Select.d.ts

@@ -17,7 +17,7 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     placeholder?: string;
     'data-name'?: string;
     'data-id'?: string;
-    rederSingleValue?: (option: SelectOption<SelectValue>) => React.ReactNode;
+    renderSingleValue?: (option: SelectOption<SelectValue>) => React.ReactNode;
     className?: string;
     isLoding?: boolean;
     onFocus?: () => void;

package/src/components/Select/Select.js

@@ -6,6 +6,7 @@ const date_fns_1 = require("date-fns");
 const React = tslib_1.__importStar(require("react"));
 const react_select_1 = tslib_1.__importStar(require("react-select"));
 const creatable_1 = tslib_1.__importDefault(require("react-select/creatable"));
+const icons_1 = require("../icons");
 const commonStyles = ({ isFocused, isDisabled, }) => {
     return {
         color: 'var(--ab-cmp-input__color)',
@@ -71,6 +72,18 @@ const Select = function (props) {
         };
     }, []);
     const SelectComponent = props.isCreatable ? creatable_1.default : react_select_1.default;
+    const ClearIndicator = React.useMemo(() => {
+        return (clearIndicatorProps) => {
+            return (React.createElement(react_select_1.components.ClearIndicator, Object.assign({}, clearIndicatorProps),
+                React.createElement(icons_1.Icon, { name: "close" })));
+        };
+    }, []);
+    const DropdownIndicator = React.useMemo(() => {
+        return (props) => {
+            return (React.createElement(react_select_1.components.DropdownIndicator, Object.assign({}, props),
+                React.createElement(icons_1.Icon, { name: "triangle-down", style: { height: 20, width: 20 } })));
+        };
+    }, []);
     return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, isMulti: props.isMulti, value: selectedOption, menuPosition: (_g = props.menuPosition) !== null && _g !== void 0 ? _g : 'absolute', 
         // This needed so the menu is not clipped by overflow: hidden
         menuPortalTarget: document.body, isClearable: props.isClearable, onChange: (option) => {
@@ -84,10 +97,12 @@ const Select = function (props) {
             SelectContainer,
             ValueContainer,
             SingleValue: (singleValueProps) => {
-                return (React.createElement(react_select_1.components.SingleValue, Object.assign({}, singleValueProps), props.rederSingleValue
-                    ? props.rederSingleValue(selectedOption)
+                return (React.createElement(react_select_1.components.SingleValue, Object.assign({}, singleValueProps), props.renderSingleValue
+                    ? props.renderSingleValue(selectedOption)
                     : singleValueProps.children));
             },
+            ClearIndicator,
+            DropdownIndicator,
         }, 
         /**
          * Using styles is the preferred way to style react-select.

package/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "17.0.0";
+declare const _default: "17.0.1";
 export default _default;

package/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '17.0.0'; // PLEASE DONT UPDATE THIS!!! - will be updated at build time with the correct version
+exports.default = '17.0.1'; // PLEASE DONT UPDATE THIS!!! - will be updated at build time with the correct version