@adaptabletools/adaptable 17.0.0-canary.8 → 17.0.0

package/src/View/Layout/Wizard/sections/FilterSection.js

@@ -58,7 +58,7 @@ const FilterSection = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, { mb: 2 },
                 React.createElement(FormLayout_1.FormRow, { label: "Add Column Filter" },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), value: "none", onChange: (option) => {
+                    React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), placeholder: "Select column to create filter", onChange: (option) => {
                             props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
                                     ...layoutFilters,
                                     {

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -30,7 +30,7 @@ exports.renderNamedQueryExpressionSummary = renderNamedQueryExpressionSummary;
 const NamedQueryExpressionWizardSection = (props) => {
     const { data, moduleInfo, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = (0, react_1.useMemo)(() => api.internalApi.getQueryPreviewData(), []);
-    return (React.createElement(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: false, type: 'boolean', module: moduleInfo.ModuleName, value: data.BooleanExpression, onChange: (BooleanExpression) => {
+    return (React.createElement(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: false, showQueryBuilder: true, type: 'boolean', module: moduleInfo.ModuleName, value: data.BooleanExpression, onChange: (BooleanExpression) => {
             props.onChange(Object.assign(Object.assign({}, data), { BooleanExpression }));
         }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }));
 };

package/src/View/Notes/NotesPopup.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotePopup = void 0;
 const tslib_1 = require("tslib");
-const lodash_1 = require("lodash");
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const rebass_1 = require("rebass");
@@ -15,7 +15,7 @@ const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
     const textAreaRef = React.useRef(null);
     const [liveValue, setLiveValue] = React.useState(note || '');
     const throttledOnChange = React.useMemo(() => {
-        const throttled = (0, lodash_1.throttle)((value) => onNoteChange(value), 300);
+        const throttled = (0, throttle_1.default)((value) => onNoteChange(value), 300);
         return (value) => {
             setLiveValue(value);
             throttled(value);

package/src/View/PlusMinus/MovePlusMinus.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AccessLevel, PlusMinusNudge } from '../../types';
+export declare const MovePlusMinus: React.FunctionComponent<{
+    data: PlusMinusNudge;
+    id?: string;
+    accessLevel: AccessLevel;
+}>;

package/src/View/PlusMinus/MovePlusMinus.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MovePlusMinus = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const PlusMinusRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PlusMinusRedux"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const MovePlusMinus = (props) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const plusMinusNudges = (0, react_redux_1.useSelector)((state) => state.PlusMinus.PlusMinusNudges);
+    const handleMoveUp = React.useCallback(() => {
+        dispatch(PlusMinusRedux.PlusMinusMoveUp(props.data));
+    }, []);
+    const handleMoveDown = React.useCallback(() => {
+        dispatch(PlusMinusRedux.PlusMinusMoveDown(props.data));
+    }, []);
+    if ((plusMinusNudges === null || plusMinusNudges === void 0 ? void 0 : plusMinusNudges.length) <= 1) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SimpleButton_1.default, { "data-id": "move-up", title: "move up", onClick: handleMoveUp, variant: "text", icon: "arrow-up" }),
+        React.createElement(SimpleButton_1.default, { "data-name": "move-down", title: "move down", onClick: handleMoveDown, variant: "text", icon: "arrow-down" })));
+};
+exports.MovePlusMinus = MovePlusMinus;

package/src/agGrid/Adaptable.js

@@ -1784,7 +1784,7 @@ class Adaptable {
         };
         this.api.gridApi.internalApi.setSelectedCells(selectedCellInfo);
         this._emit('CellsSelected');
-        this.agGridHelper.fireSelectionChangedEvent();
+        this.agGridHelper.fireCellSelectionChangedEvent();
         return selectedCellInfo;
     }
     setSelectedRows() {
@@ -1818,7 +1818,7 @@ class Adaptable {
         }
         const selectedRowInfo = { gridRows: selectedRows };
         this.api.gridApi.internalApi.setSelectedRows(selectedRowInfo);
-        this.agGridHelper.fireSelectionChangedEvent();
+        this.agGridHelper.fireRowSelectionChangedEvent();
         return selectedRowInfo;
     }
     setDataValue(value, column, primaryKeyValue, rowNode) {

package/src/agGrid/agGridHelper.d.ts

@@ -30,7 +30,8 @@ export declare class agGridHelper {
     isSideBarDefObject(sidebarDef: unknown): sidebarDef is SideBarDef;
     mapToolPanelDefs(toolPanelDefs?: (ToolPanelDef | string)[]): (ToolPanelDef | string)[];
     reselectSelectedCells(): void;
-    fireSelectionChangedEvent(): void;
+    fireCellSelectionChangedEvent(): void;
+    fireRowSelectionChangedEvent(): void;
     private isColumnReadonly;
     private isColumnFieldonly;
     private isColumnSortable;

package/src/agGrid/agGridHelper.js

@@ -300,15 +300,25 @@ class agGridHelper {
             this.gridOptions.api.addCellRange(cellRangeParams);
         }
     }
-    fireSelectionChangedEvent() {
-        let selectionChangedInfo = {
+    fireCellSelectionChangedEvent() {
+        let cellSelectionChangedInfo = {
             adaptableApi: this.adaptable.api,
             selectedCellInfo: this.adaptable.api.gridApi.getGridState().SelectedCellInfo,
+            //   selectedRowInfo: this.adaptable.api.gridApi.getGridState().SelectedRowInfo,
+            userName: this.adaptable.api.optionsApi.getUserName(),
+            adaptableId: this.adaptable.api.optionsApi.getAdaptableId(),
+        };
+        this.adaptable.api.eventApi.emit('CellSelectionChanged', cellSelectionChangedInfo);
+    }
+    fireRowSelectionChangedEvent() {
+        let rowSelectionChangedInfo = {
+            adaptableApi: this.adaptable.api,
+            //  selectedCellInfo: this.adaptable.api.gridApi.getGridState().SelectedCellInfo,
             selectedRowInfo: this.adaptable.api.gridApi.getGridState().SelectedRowInfo,
             userName: this.adaptable.api.optionsApi.getUserName(),
             adaptableId: this.adaptable.api.optionsApi.getAdaptableId(),
         };
-        this.adaptable.api.eventApi.emit('SelectionChanged', selectionChangedInfo);
+        this.adaptable.api.eventApi.emit('RowSelectionChanged', rowSelectionChangedInfo);
     }
     isColumnReadonly(colDef) {
         // if the column has conditional/dynamic editability, we assume some rows may be editable

package/src/components/Datepicker/index.js

@@ -17,13 +17,13 @@ const DatepickerContext_1 = require("./DatepickerContext");
 const addDays_1 = tslib_1.__importDefault(require("date-fns/addDays"));
 const addBusinessDays_1 = tslib_1.__importDefault(require("date-fns/addBusinessDays"));
 const react_day_picker_1 = require("react-day-picker");
-const DatepickerOverlay = ({ onHide, children, onKeyDown, }) => {
+const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
     const domRef = React.useRef(null);
     React.useEffect(() => {
         var _a;
         (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, tabIndex: -1, onKeyDown: onKeyDown, onBlur: (e) => {
+    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
             var _a;
             const { relatedTarget } = e;
             const node = domRef.current;
@@ -87,7 +87,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
     return (React.createElement(rebass_1.Flex, null,
-        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onHide: () => setVisible(false), onKeyDown: (e) => {
+        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);
                     }
@@ -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/QueryBuilder.js

@@ -110,9 +110,9 @@ const QueryBuilder = (props) => {
         } },
         React.createElement(QueryBuilderContext.Provider, { value: context },
             React.createElement(rebass_1.Box, { className: QUERY_BUILDER_CLASSNAME },
-                React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
+                React.createElement(HelpBlock_1.default, { "data-name": "query-builder-help", mt: 2, mb: 2, p: 2, fontSize: 3 }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
                 errorOrEditor,
-                React.createElement(Panel_1.default, { variant: "default", header: "AdapTableQL Expression", mt: 3 },
+                React.createElement(Panel_1.default, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", mt: 3 },
                     React.createElement(rebass_1.Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression`, minHeight: 48, my: 2, p: 3 }, expressionStr || 'Outputted Expression will display here'))))));
 };
 exports.QueryBuilder = QueryBuilder;

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, { 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" })));
+            }, value: typeOption.value, options: options, onChange: (value) => handleTypeChange(value) }),
         editor));
 };
 exports.PrimiteValueInput = PrimiteValueInput;

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

@@ -24,7 +24,6 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     accessLevel?: AccessLevel;
     style?: React.CSSProperties;
     onInputChange?: (value: string) => void;
-    variant?: 'default' | 'raised';
     size?: 'small' | 'normal';
     isCreatable?: boolean;
 };

package/src/components/Select/Select.js

@@ -71,7 +71,9 @@ const Select = function (props) {
         };
     }, []);
     const SelectComponent = props.isCreatable ? creatable_1.default : react_select_1.default;
-    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 : 'fixed', isClearable: props.isClearable, onChange: (option) => {
+    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) => {
             if (props.isMulti) {
                 props.onChange(option.map((x) => x === null || x === void 0 ? void 0 : x.value));
             }
@@ -136,9 +138,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)',
                     } });
             },