@adaptabletools/adaptable 17.0.0-canary.9 → 17.0.1

package/src/components/Datepicker/index.js

@@ -97,7 +97,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
                     borderRadius: style === null || style === void 0 ? void 0 : style.borderRadius,
                     width: style === null || style === void 0 ? void 0 : style.width,
                     maxWidth: style === null || style === void 0 ? void 0 : style.maxWidth,
-                }, onFocus: () => {
+                }, className: "ab-Datepicker", onFocus: () => {
                     if (!visible) {
                         setVisible(true);
                     }

package/src/components/ExpressionEditor/ExpressionPreview.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AdaptableQuery } from '../../types';
+interface ExpressionPreviewProps {
+    query: AdaptableQuery;
+}
+export declare const ExpressionPreview: React.FunctionComponent<ExpressionPreviewProps>;
+export {};

package/src/components/ExpressionEditor/ExpressionPreview.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpressionPreview = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const ExpressionPreview = (props) => {
+    var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const displayColumnFriendlyNames = (_a = adaptable.api.optionsApi.getExpressionOptions()) === null || _a === void 0 ? void 0 : _a.displayColumnFriendlyNamesForExpressions;
+    if (!displayColumnFriendlyNames) {
+        return React.createElement(React.Fragment, null, adaptable.api.expressionApi.getAdaptableQueryExpression(props.query));
+    }
+    const expressionWithFriendlyNames = adaptable.api.expressionApi.getAdaptableQueryExpressionWithColumnFriendlyNames(props.query);
+    // '[Column Name] > 2' => ['[Column Name]', '>', '2']
+    // not the prettiest
+    const strWithMarkedGroupes = expressionWithFriendlyNames.replace(/\]/gi, '],').split(',');
+    return (React.createElement(React.Fragment, null, strWithMarkedGroupes.map((part, index) => {
+        const partEl = part.includes('[') ? React.createElement("i", null, part.replace(/[\[\]]/g, '')) : part;
+        return React.createElement(React.Fragment, { key: index },
+            "\u00A0",
+            partEl);
+    })));
+};
+exports.ExpressionPreview = ExpressionPreview;

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

@@ -11,6 +11,7 @@ const PermittedValuesSelector_1 = require("../../../View/Components/Selectors/Pe
 const CheckBox_1 = require("../../CheckBox");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../DropdownButton"));
 const icons_1 = require("../../icons");
+const InputGroup_1 = require("../../InputGroup");
 const Select_1 = require("../../Select");
 const QueryBuilder_1 = require("./QueryBuilder");
 const utils_1 = require("./utils");
@@ -85,22 +86,25 @@ const PrimiteValueInput = (props) => {
     }
     const options = [
         {
-            label: 'Column',
+            label: (react_1.default.createElement(rebass_1.Flex, null,
+                react_1.default.createElement(icons_1.Icon, { name: "columns" }),
+                react_1.default.createElement(rebass_1.Text, { ml: 2 }, "Column"))),
             icon: 'columns',
             value: 'column-name',
         },
         {
-            label: 'Value',
+            label: (react_1.default.createElement(rebass_1.Flex, null,
+                react_1.default.createElement(icons_1.Icon, { name: "edit" }),
+                react_1.default.createElement(rebass_1.Text, { ml: 2 }, "Value"))),
             icon: 'edit',
             value: 'input-value',
         },
     ];
     const typeOption = options.find((option) => option.value === type);
-    return (react_1.default.createElement(rebass_1.Flex, { "data-id": "query-input-wrapper", mr: 2 },
-        react_1.default.createElement(rebass_1.Flex, null,
-            react_1.default.createElement(Select_1.Select, { rederSingleValue: (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" })));
-                }, variant: "raised", value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) })),
+    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, { 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));
 };
 exports.PrimiteValueInput = PrimiteValueInput;
@@ -110,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/ExpressionEditor/index.js

@@ -32,6 +32,7 @@ function ExpressionEditor(props) {
     const { type, module } = props;
     const [data, setData] = (0, react_1.useState)(props.initialData);
     const [showColumnIds, setShowColumnIds] = (0, react_1.useState)(false);
+    const [inlineQuery, setInlineQuery] = (0, react_1.useState)(false);
     const [showNamedQueries, setShowNamedQueries] = (0, react_1.useState)(false);
     const baseClassName = `ab-ExpressionEditor`;
     const [selectedFunction, setSelectedFunction] = (0, react_1.useState)(null);
@@ -94,12 +95,8 @@ function ExpressionEditor(props) {
                 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(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'),
+        React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked) }, "Show Column IDs"),
+        React.createElement(CheckBox_1.CheckBox, { checked: inlineQuery, onChange: (checked) => setInlineQuery(checked) }, "Inline Query"),
         props.namedQueries.map((namedQuery) => (React.createElement(rebass_1.Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
                 padding: 3,
                 marginTop: 'var(--ab-space-2)',
@@ -110,7 +107,7 @@ function ExpressionEditor(props) {
             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" },
+                }, data: inlineQuery ? namedQuery.BooleanExpression : `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,

package/src/components/InputGroup/InputGroup.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type InputGroupProps<T extends React.ComponentType<any>> = {
+    Component?: T;
+    children: React.ReactNode;
+} & React.ComponentProps<T>;
+export declare const InputGroup: <T extends React.ComponentType<any>>({ Component, children, ...rest }: InputGroupProps<T>) => JSX.Element;
+export {};

package/src/components/InputGroup/InputGroup.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputGroup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const InputGroup = (_a) => {
+    var _b;
+    var { Component = 'div', children } = _a, rest = tslib_1.__rest(_a, ["Component", "children"]);
+    const Comp = Component;
+    return (React.createElement(Comp, Object.assign({}, rest, { className: `ab-cmp-input-group ${(_b = rest.className) !== null && _b !== void 0 ? _b : ''}` }), children));
+};
+exports.InputGroup = InputGroup;

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

@@ -0,0 +1 @@
+export * from './InputGroup';

package/src/components/InputGroup/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./InputGroup"), exports);

package/src/components/OverlayTrigger/index.js

@@ -4,6 +4,7 @@ exports.getConstrainRect = exports.getConstrainElement = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
 const selectParent_1 = tslib_1.__importDefault(require("../utils/selectParent"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
@@ -72,7 +73,11 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
     const overlayRef = (0, react_1.useRef)(null);
     const [visible, doSetVisible] = (0, useProperty_1.default)(props, 'visible', false);
     const hideTimeoutRef = (0, react_1.useRef)(null);
-    const setVisible = React.useCallback((visible) => {
+    const setVisible = React.useCallback(
+    // visible state may quickly change from true -> false -> true
+    // when moving the mouse cursor from the trigger to the overlay
+    // for this case we debounce the visible change for a very small amount of time
+    (0, debounce_1.default)((visible) => {
         onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
         if (!visible) {
             hideTimeoutRef.current = setTimeout(() => {
@@ -86,7 +91,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             hideTimeoutRef.current = null;
         }
         doSetVisible(true);
-    }, []);
+    }, 50), []);
     const prevVisible = (0, usePrevious_1.default)(visible, false);
     ensurePortalElement();
     const onShow = React.useCallback((event) => {

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

@@ -17,14 +17,13 @@ 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;
     accessLevel?: AccessLevel;
     style?: React.CSSProperties;
     onInputChange?: (value: string) => void;
-    variant?: 'default' | 'raised';
     size?: 'small' | 'normal';
     isCreatable?: boolean;
 };

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.
@@ -138,9 +153,7 @@ const Select = function (props) {
                 state;
                 return Object.assign(Object.assign(Object.assign({}, baseStyle), commonStyles(state)), { 
                     // height: 30,
-                    minHeight: props.size === 'small' ? 0 : 32, boxShadow: state.isFocused ? 'var(--ab-cmp-select-focused__box-shadow)' : 'none', outline: state.isFocused ? 'var(--ab-cmp-select-focused__outline)' : 'none', border: props.variant && props.variant === 'raised'
-                        ? '1px solid transparent'
-                        : 'var(--ab-cmp-select__border)', '&:hover': {
+                    minHeight: props.size === 'small' ? 0 : 32, boxShadow: state.isFocused ? 'var(--ab-cmp-select-focused__box-shadow)' : 'none', outline: state.isFocused ? 'var(--ab-cmp-select-focused__outline)' : 'none', border: 'var(--ab-cmp-select__border)', borderRadius: 'var(--ab-cmp-select__border-radius)', '&:hover': {
                         border: 'var(--ab-cmp-select__border)',
                     } });
             },

package/src/types.d.ts

@@ -127,7 +127,8 @@ export type { GridFilterAppliedInfo } from './Api/Events/GridFilterApplied';
 export type { GridSortedInfo, AdaptableSortState } from './Api/Events/GridSorted';
 export type { AdaptableSearchState } from './Api/Events/AdaptableSearchState';
 export type { DataSetSelectedInfo } from './Api/Events/DataSetSelected';
-export type { SelectionChangedInfo } from './Api/Events/SelectionChanged';
+export type { CellSelectionChangedInfo } from './Api/Events/CellSelectionChanged';
+export type { RowSelectionChangedInfo } from './Api/Events/RowSelectionChanged';
 export type { AdaptableStateReloadedInfo } from './Api/Events/AdaptableStateReloaded';
 export type { ThemeChangedInfo } from './Api/Events/ThemeChanged';
 export type { ThemeEditedInfo } from './Api/Events/ThemeEdited';

package/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "17.0.0-canary.9";
+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-canary.9'; // 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

package/src/Api/Events/SelectionChanged.d.ts

@@ -1,16 +0,0 @@
-import { SelectedCellInfo } from '../../PredefinedConfig/Selection/SelectedCellInfo';
-import { SelectedRowInfo } from '../../PredefinedConfig/Selection/SelectedRowInfo';
-import { BaseEventInfo } from './BaseEventInfo';
-/**
- * Event Info published by SelectionChanged event
- */
-export interface SelectionChangedInfo extends BaseEventInfo {
-    /**
-     * Details of cells currently selected in the Grid
-     */
-    selectedCellInfo: SelectedCellInfo;
-    /**
-     * Details of rows currently selected in the Grid
-     */
-    selectedRowInfo: SelectedRowInfo;
-}