@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.1

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" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignSelf" | "backgroundColor" | "color" | "content" | "flex" | "fontSize" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "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" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "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" | "onKeyDown" | "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" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "css" | "showClearButton" | "onHide" | "showOutsideDays" | "showWeekNumber" | "datepickerButtons" | "dateProps"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "color" | "content" | "display" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textAlign" | "translate" | "verticalAlign" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "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" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "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" | "onKeyDown" | "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" | "onResize" | "onResizeCapture" | "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" | "bg" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "variant" | "tx" | "sx" | "onHide" | "showOutsideDays" | "showWeekNumber" | "showClearButton" | "datepickerButtons" | "dateProps"> & React.RefAttributes<HTMLInputElement>>;

package/src/components/Datepicker/index.js

@@ -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, alignHorizontal: 'left', render: () => (React.createElement(DatepickerOverlay, { onHide: () => setVisible(false), onKeyDown: (e) => {
+        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);
                     }

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

@@ -16,10 +16,12 @@ declare type TypeProps = {
     onDismiss?: () => void;
     dismissOnClickOutside?: boolean;
 };
-export interface DialogProps extends BoxProps, TypeProps {
+export interface DialogProps extends Omit<BoxProps, 'ref'>, TypeProps {
 }
 export declare type DialogRefType = {
     bringToFront: VoidFunction;
 };
-export declare const Dialog: React.FunctionComponent<DialogProps>;
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<DialogRefType>>;
 export default Dialog;

package/src/components/Dialog/index.js

@@ -14,7 +14,7 @@ const useAutoFocus_1 = tslib_1.__importDefault(require("../utils/useAutoFocus"))
 const icons_1 = require("../icons");
 const WindowModal_1 = require("../WindowModal");
 const baseClassName = 'ab-Dialog';
-exports.Dialog = React.forwardRef((props, ref) => {
+exports.Dialog = React.forwardRef((props, dialogRef) => {
     let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps } = props, boxProps = tslib_1.__rest(props, ["modal", "fixed", "focusOnBrowserVisible", "autoFocus", "className", "children", "modalProps", "dismissOnClickOutside", "onDismiss", "windowModal", "windowModalProps"]);
     modal = props.modal === undefined ? true : props.modal;
     fixed = props.fixed === undefined ? true : props.fixed;
@@ -76,7 +76,7 @@ exports.Dialog = React.forwardRef((props, ref) => {
             boxRef.current.focus();
         }
     }, [boxRef]);
-    React.useImperativeHandle(ref, () => ({
+    React.useImperativeHandle(dialogRef, () => ({
         bringToFront,
     }));
     (0, react_1.useEffect)(() => {

package/src/components/DragAndDropContext/TabList.js

@@ -42,7 +42,7 @@ 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(rebass_1.Flex, Object.assign({ className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", backgroundColor: snapshot.isDragging
+    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", mb: 1, pl: 1, 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),

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -4,10 +4,11 @@ exports.UnusedPanel = void 0;
 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 DragAndDropContext_1 = require("./DragAndDropContext");
 function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return (React.createElement("div", { className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
-        React.createElement("div", { style: { padding: 'var(--ab-space-2)' } },
+    return (React.createElement(rebass_1.Box, { pb: 1, mb: 2, className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
+        React.createElement(rebass_1.Box, { p: 2 },
             React.createElement("b", null, title),
             " (",
             dragItemText,

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

@@ -5,7 +5,7 @@ import { ExpandedProps } from './useExpanded';
 import DropdownButtonItem from './DropdownButtonItem';
 import { OverlayTriggerProps } from '../OverlayTrigger';
 export declare const DROPDOWN_ICON: JSX.Element;
-export declare type DropdownButtonProps = BoxProps & React.HTMLProps<HTMLElement> & SimpleButtonProps & ExpandedProps & {
+export declare type DropdownButtonProps = React.PropsWithChildren<Omit<BoxProps, 'ref'>> & Omit<React.HTMLProps<HTMLElement>, 'ref'> & SimpleButtonProps & ExpandedProps & {
     collapseOnItemClick?: boolean;
     columns?: string[];
     overlayProps?: OverlayTriggerProps;
@@ -23,7 +23,24 @@ export declare type DropdownButtonProps = BoxProps & React.HTMLProps<HTMLElement
     isItemDisabled?: (item: DropdownButtonItem) => boolean | undefined;
     showToggleIcon?: boolean;
 };
-declare const DropdownButton: React.FunctionComponent<DropdownButtonProps> & {
-    ref?: React.Ref<HTMLButtonElement>;
-};
+declare const DropdownButton: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & {
+    children?: React.ReactNode;
+} & Omit<React.HTMLProps<HTMLElement>, "ref"> & SimpleButtonProps & ExpandedProps & {
+    collapseOnItemClick?: boolean;
+    columns?: string[];
+    overlayProps?: OverlayTriggerProps;
+    listOffset?: number;
+    items?: DropdownButtonItem[];
+    idProperty?: string;
+    showClearButton?: boolean;
+    focusOnClear?: boolean;
+    onClear?: () => void;
+    clearButtonProps?: SimpleButtonProps;
+    listItemClassName?: string;
+    listStyle?: React.CSSProperties;
+    listMinWidth?: number;
+    listItemStyle?: React.CSSProperties | ((item: DropdownButtonItem, index: number) => React.CSSProperties);
+    isItemDisabled?: (item: DropdownButtonItem) => boolean | undefined;
+    showToggleIcon?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default DropdownButton;

package/src/components/DropdownButton/index.js

@@ -16,7 +16,7 @@ const baseClassName = 'ab-DropdownButton';
 const defaultListItemStyle = {
     padding: 'var(--ab-cmp-dropdownbutton-list-item__padding)',
 };
-const DropdownButton = React.forwardRef((props, ref) => {
+const DropdownButton = React.forwardRef((props, theRef) => {
     let { columns, overlayProps, listOffset = 10, collapseOnItemClick = true, focusOnClear = true, idProperty = 'id', isItemDisabled, items, children, listMinWidth = 100, listStyle, listItemStyle, listItemClassName, constrainTo, showClearButton = false, onClear, clearButtonProps, onExpand, onCollapse, showToggleIcon = true } = props, domProps = tslib_1.__rest(props, ["columns", "overlayProps", "listOffset", "collapseOnItemClick", "focusOnClear", "idProperty", "isItemDisabled", "items", "children", "listMinWidth", "listStyle", "listItemStyle", "listItemClassName", "constrainTo", "showClearButton", "onClear", "clearButtonProps", "onExpand", "onCollapse", "showToggleIcon"]);
     isItemDisabled = isItemDisabled || ((item) => item.disabled);
     if (!columns) {
@@ -79,7 +79,6 @@ const DropdownButton = React.forwardRef((props, ref) => {
     }
     const dropdownButtonClassName = props.className;
     const className = (0, join_1.default)(props.className, baseClassName);
-    //const
     const positionerRef = (0, react_1.useRef)(null);
     const { expanded, toggle, setExpanded, positionInfo } = (0, useExpanded_1.default)(props, positionerRef);
     const { maxHeight: maxListHeight, maxWidth: maxListWidth } = positionInfo;
@@ -103,19 +102,19 @@ const DropdownButton = React.forwardRef((props, ref) => {
         hasClearButton ? clearButton : null,
         icon));
     const buttonRef = (0, react_1.useRef)(null);
-    return (React.createElement(OverlayTrigger_1.default, Object.assign({ visible: expanded, constrainTo: constrainTo, anchor: "vertical", targetOffset: listOffset, render: () => {
+    return (React.createElement(OverlayTrigger_1.default, Object.assign({ visible: expanded, targetOffset: listOffset, render: () => {
             return (React.createElement("div", { "data-name": `${dropdownButtonClassName}`, style: listStyle, className: `${baseClassName}__list` }, content));
-        } }, overlayProps, { target: domProps.tooltip ? (node) => node.previousSibling : undefined }),
+        } }, overlayProps),
         React.createElement(SimpleButton_1.default, Object.assign({ iconPosition: "end" }, (showToggleIcon && { icon, paddingRight: 0 }), domProps, { ref: (btn) => {
                 buttonRef.current = btn;
-                if (!ref) {
+                if (!theRef) {
                     return;
                 }
-                if (typeof ref === 'function') {
-                    ref(btn);
+                if (typeof theRef === 'function') {
+                    theRef(btn);
                 }
                 else {
-                    ref.current = btn;
+                    theRef.current = btn;
                 }
             }, style: domProps.style, className: className, onClick: (e) => {
                 if (domProps.onClick) {

package/src/components/EllipsisContainer/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EllipsisContainer = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const react_1 = require("react");
+const rebass_1 = require("rebass");
 const useLatest_1 = require("../utils/useLatest");
 const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
 const Container = ({ children, index, hidden, observerRef, }) => {

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

@@ -7,7 +7,7 @@ interface BaseEditorInputProps {
     onChange: (value: string) => void;
     disabled?: boolean;
     onSelectedFunctionChange: (expressionFunction: ExpressionFunction | null) => void;
-    expressionFunctions: ExpressionFunctionMap;
+    expressionFunctions: ExpressionFunctionMap<string>;
     editorButtons: OperatorEditorButton[];
     testData: any;
     placeholder?: string;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -19,6 +19,11 @@ const DocumentationLinkConstants_1 = require("../../Utilities/Constants/Document
 const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const icons_1 = require("../icons");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const ExpressionFunctionDocumentation_1 = require("./ExpressionFunctionDocumentation");
+const Tag_1 = require("../Tag");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
+const Radio_1 = tslib_1.__importDefault(require("../Radio"));
 const VarEditorButton = () => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -31,6 +36,93 @@ const VarEditorButton = () => {
         return (React.createElement(EditorButton_1.default, { data: varString, key: varOption }, varString));
     })));
 };
+const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
+    const [currentFunctionCategory, setCurrentFunctionCategory] = React.useState('all');
+    const dropdownRef = React.useRef(null);
+    const [overFunction, setOverFunction] = React.useState();
+    React.useEffect(() => {
+        setOverFunction(null);
+    }, [currentFunctionCategory]);
+    const groupedFunctions = React.useMemo(() => {
+        return Object.keys(expressionFunctions).reduce((acc, key) => {
+            const functionDef = expressionFunctions[key];
+            // filter
+            if (currentFunctionCategory !== 'all' && functionDef.category !== currentFunctionCategory) {
+                return acc;
+            }
+            if (functionDef.category) {
+                acc[functionDef.category] = Object.assign(Object.assign({}, acc[functionDef.category]), { [key]: functionDef });
+            }
+            else {
+                acc.noCategory[key] = functionDef;
+            }
+            return acc;
+        }, { noCategory: {} });
+    }, [currentFunctionCategory]);
+    const handleFunctionCategoryChange = React.useCallback((type) => (event) => {
+        setCurrentFunctionCategory(type);
+    }, [currentFunctionCategory]);
+    const categoryOptions = React.useMemo(() => {
+        const categoryOptions = Object.keys(expressionFunctions)
+            .reduce((acc, functionName) => {
+            const funcitonExpression = expressionFunctions[functionName];
+            if (!acc.includes(funcitonExpression.category)) {
+                acc.push(funcitonExpression.category);
+            }
+            return acc;
+        }, [])
+            .map((category) => ({
+            label: StringExtensions_1.default.Humanize(category),
+            value: category,
+        }));
+        return [{ label: 'All', value: 'all' }, ...categoryOptions];
+    }, [expressionFunctions]);
+    const hidePopup = () => {
+        dropdownRef.current.hide();
+        setOverFunction(null);
+    };
+    /**
+     * Hide when:
+     * - mouse leaves
+     * - a function is inserted
+     */
+    return (React.createElement(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper`, flexDirection: "column", onMouseLeave: () => hidePopup() },
+            React.createElement(rebass_1.Flex, { pl: 2, style: { gap: 10 } }, categoryOptions.map((option) => {
+                return (React.createElement(Radio_1.default, { onFocus: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }, onClick: handleFunctionCategoryChange(option.value), checked: currentFunctionCategory === option.value }, option.label));
+            })),
+            React.createElement(rebass_1.Flex, null,
+                React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list`, "data-name": "expression-dropdown-fuctions-list", flexDirection: "column", p: 2, maxHeight: '50vh' }, Object.keys(groupedFunctions).map((groupName) => {
+                    const functionsInGroup = Object.keys(groupedFunctions[groupName]);
+                    if (functionsInGroup.length === 0) {
+                        return React.createElement(React.Fragment, null);
+                    }
+                    const getEditorButtonData = (functionName) => {
+                        // handle special cases
+                        if (functionName === 'CASE') {
+                            return `CASE <caseValue> WHEN <whenValue> THEN <thenValue> ELSE <defaultValue> END`;
+                        }
+                        return `${functionName}()`;
+                    };
+                    return (React.createElement(rebass_1.Box, { mb: 2, key: groupName },
+                        React.createElement(Tag_1.Tag, { mb: 1 }, StringExtensions_1.default.Humanize(groupName)),
+                        functionsInGroup.map((functionName) => (React.createElement(rebass_1.Box, { key: functionName, onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup() }, functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton_1.default, { data: getEditorButtonData(functionName), key: functionName, mr: 1 }, functionName)))))));
+                })),
+                React.createElement(rebass_1.Box, { className: `${baseClassName}__dropdown-functions-description`, p: 2, width: 600, maxWidth: "30vw" }, overFunction ? (React.createElement(React.Fragment, null,
+                    React.createElement(Tag_1.Tag, null, overFunction),
+                    React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] }))) : (React.createElement(Tag_1.Tag, { padding: 20 },
+                    React.createElement("ul", null,
+                        React.createElement("li", null,
+                            "Hover over a Function to learn more",
+                            React.createElement("br", null),
+                            React.createElement("br", null)),
+                        React.createElement("li", null, "Select a Function to add to the Expression in the Editor")))))))) },
+        React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
+            React.createElement(rebass_1.Flex, { marginRight: 1, fontSize: 2 },
+                React.createElement(icons_1.Icon, { name: "equation" })))));
+};
 function BaseEditorInput(props) {
     const { expressionFunctions, testData, style, type } = props;
     const { ref: textAreaRefCallback, selectionStart, selectionEnd } = (0, useSelectionRange_1.useSelectionRange)();
@@ -39,6 +131,7 @@ function BaseEditorInput(props) {
     let evaluationError;
     let expressionError;
     let selectedFunctionName;
+    const baseClassName = 'ab-ExpressionEditorInput';
     const buildParserExceptionMessage = (e) => {
         const parserExceptionSummary = 'Invalid expression is not parsable';
         if (!e.message) {
@@ -101,55 +194,28 @@ function BaseEditorInput(props) {
             props.onSelectedFunctionChange(selectedFunctionName ? expressionFunctions[selectedFunctionName] : null);
         }
     }, [selectedFunctionName]);
-    const functionsDropdown = (React.createElement(OverlayTrigger_1.default, { render: () => (React.createElement(rebass_1.Flex, { "data-name": "expression-dropdown-list", flexDirection: "column", p: 2, style: {
-                fontSize: 'var(--ab-font-size-2)',
-                border: '1px solid var(--ab-color-primarydark)',
-                borderRadius: 'var(--ab__border-radius)',
-                background: 'var(--ab-color-primarylight)',
-                zIndex: 1000,
-                maxHeight: 300,
-                overflow: 'auto',
-            } }, Object.keys(expressionFunctions)
-            .filter((functionName) => !expressionFunctions[functionName].isHiddenFromMenu)
-            .map((functionName) => functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton_1.default, { data: `${functionName}()`, key: functionName, mr: 1 }, functionName))))), showEvent: "focus", hideEvent: "blur" },
-        React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
-            React.createElement(rebass_1.Flex, { marginRight: 1, style: { fontSize: 'var(--ab-font-size-2)' } },
-                React.createElement(icons_1.Icon, { name: 'equation', style: { marginTop: 0 } })))));
     const operatorButtons = props.editorButtons
         .filter((editorButtonDef) => !!expressionFunctions[editorButtonDef.functionName])
         .map((editorButtonDef) => (React.createElement(EditorButton_1.default, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName))));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { "data-name": "expression-toolbar", py: 2, mb: 2, flexWrap: "wrap", style: {
-                background: 'var(--ab-color-primarylight)',
-                borderRadius: 'var(--ab__border-radius)',
-                '--ab-overlay-horizontal-align': 'left',
-                width: '100%',
-                marginTop: 5,
-            } },
+        React.createElement(rebass_1.Flex, { className: baseClassName, "data-name": "expression-toolbar", py: 2, mb: 2, mt: 2, flexWrap: "wrap" },
             React.createElement(rebass_1.Flex, { style: { flex: 1, marginLeft: 5 }, flexWrap: "wrap" },
-                functionsDropdown,
+                React.createElement(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }),
                 operatorButtons),
             showDocumentationLink && (React.createElement(rebass_1.Flex, { alignItems: "flex-start" },
-                React.createElement(ButtonInfo_1.ButtonInfo, { style: {
-                        color: 'var(--ab-color-text-on-add)',
-                        fill: 'var(--ab-color-text-on-add)',
-                        background: 'var(--ab-color-action-add)',
-                        marginRight: 5,
-                    }, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
-        React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: "ab-ExpressionEditor__textarea", autoFocus: true, spellCheck: "false", onChange: (event) => {
+                React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
+        React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: (0, join_1.default)('ab-ExpressionEditor__textarea', // left for backwards compatibility
+            `${baseClassName}__textarea`), autoFocus: true, spellCheck: "false", onChange: (event) => {
                 props.onChange(event.target.value);
-            }, style: Object.assign({ width: '100%', minHeight: 100, fontFamily: 'monospace', resize: 'vertical', fontSize: '1rem', padding: 'var(--ab-space-2)' }, style) }),
-        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
+            }, style: style }),
+        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 },
             "This Query must resolve to a ",
             React.createElement("b", null, "boolean "),
             "(i.e. true / false) value")),
-        expressionError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
+        expressionError && (React.createElement(ErrorBox_1.default, { width: "100%", style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
         evaluationError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
-        !props.hideResultPreview && result !== undefined && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-feedback", mt: 2, p: 2, style: {
-                background: 'var(--ab-color-primarylight)',
-                borderRadius: 'var(--ab__border-radius)',
-            } },
+        !props.hideResultPreview && result !== undefined && (React.createElement(rebass_1.Box, { className: `${baseClassName}__editor-feedback`, "data-name": "expression-editor-feedback", mt: 2, p: 2 },
             React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } },
                 "Result (using Test Data): ",
                 React.createElement("b", null, JSON.stringify(result)))))));

package/src/components/ExpressionEditor/EditorInput.js

@@ -13,7 +13,7 @@ const editorButtonsCumulativeAggregatedScalar_1 = require("./editorButtonsCumula
 function EditorInput(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
-        .getModuleExpressionFunctions(props.module);
+        .getModuleExpressionFunctionsMap(props.module);
     const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
         const sourceExpressionFunctions = type === 'aggregatedScalar'
             ? aggregatedScalarExpressionFunctions_1.aggregatedExpressionFunctions

package/src/components/ExpressionEditor/EditorInputWithWhereClause.js

@@ -15,7 +15,7 @@ const editorButtonsAggregatedBoolean_1 = require("./editorButtonsAggregatedBoole
 function EditorInputWithWhereClause(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
-        .getModuleExpressionFunctions(props.module);
+        .getModuleExpressionFunctionsMap(props.module);
     const reactiveExpressionFns = props.type === 'observable'
         ? moduleExpressionFunctions.observableFunctions
         : moduleExpressionFunctions.aggregatedBooleanFunctions;

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -4,6 +4,7 @@ exports.ExpressionFunctionDocumentation = void 0;
 const tslib_1 = require("tslib");
 const rebass_1 = require("rebass");
 const React = tslib_1.__importStar(require("react"));
+const Tag_1 = require("../Tag");
 const ExpressionFunctionDocumentation = (props) => {
     return props.expressionFunction ? (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation", my: 2, p: 2, style: {
             background: 'var(--ab-color-primary)',
@@ -17,6 +18,9 @@ const ExpressionFunctionDocumentation = (props) => {
         props.expressionFunction.examples && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Examples"),
             React.createElement("ul", null, props.expressionFunction.examples.map((example, index) => (React.createElement("li", { key: index },
-                React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } }, example))))))))) : null;
+                React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } }, example))))))),
+        props.expressionFunction.returnType && (React.createElement(rebass_1.Box, { "data-name": "expression-editor-documentation-examples" },
+            React.createElement("b", null, "Return Type"),
+            React.createElement(Tag_1.Tag, null, props.expressionFunction.returnType))))) : null;
 };
 exports.ExpressionFunctionDocumentation = ExpressionFunctionDocumentation;

package/src/components/ExpressionEditor/index.js

@@ -31,6 +31,7 @@ function ExpressionEditor(props) {
     const [data, setData] = (0, react_1.useState)(props.initialData);
     const [showColumnIds, setShowColumnIds] = (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);
     const [expressionText, setExpressionText] = (0, react_1.useState)('');
     const { namedQuery, setNamedQuery } = (0, NamedQueryContext_1.useNamedQueryContext)();
@@ -49,50 +50,12 @@ function ExpressionEditor(props) {
     const queryableColumns = type === 'scalar' || type === 'boolean' || type === 'aggregatedScalar'
         ? props.columns
         : props.columns.filter((c) => !props.api.columnApi.isCalculatedColumn(c.columnId));
-    // borrowed from https://github.com/ag-grid/ag-grid/blob/v27.2.1/community-modules/core/src/ts/utils/object.ts#L205
     const getColValue = (column) => {
-        var _a, _b;
-        const columnValueKey = (_a = column.field) !== null && _a !== void 0 ? _a : column.columnId;
-        const isColumnValueContainsDots = (_b = column.field) === null || _b === void 0 ? void 0 : _b.includes('.');
-        // if no '.', then it's not a deep value
-        if (!isColumnValueContainsDots) {
-            return data[columnValueKey];
-        }
-        // otherwise it is a deep value, so need to dig for it
-        const fields = columnValueKey.split('.');
-        let currentObject = data;
-        for (let i = 0; i < fields.length; i++) {
-            if (currentObject == null) {
-                return undefined;
-            }
-            currentObject = currentObject[fields[i]];
-        }
-        return currentObject;
+        return props.api.internalApi.getValueUsingField(data, column);
     };
-    // borrowed from https://github.com/ag-grid/ag-grid/blob/v27.2.1/community-modules/core/src/ts/valueService/valueService.ts#L217
     const updateColValue = (rowData, column, newValue) => {
-        var _a, _b;
-        const columnValueKey = (_a = column.field) !== null && _a !== void 0 ? _a : column.columnId;
-        const isColumnValueContainsDots = (_b = column.field) === null || _b === void 0 ? void 0 : _b.includes('.');
-        // if no '.', then it's not a deep value
-        if (!isColumnValueContainsDots) {
-            rowData[columnValueKey] = newValue;
-        }
-        else {
-            // otherwise it is a deep value, so need to dig for it
-            const fieldPieces = columnValueKey.split('.');
-            let currentObject = rowData;
-            while (fieldPieces.length > 0 && currentObject) {
-                const fieldPiece = fieldPieces.shift();
-                if (fieldPieces.length === 0) {
-                    currentObject[fieldPiece] = newValue;
-                }
-                else {
-                    currentObject = currentObject[fieldPiece];
-                }
-            }
-        }
-        return Object.assign({}, rowData);
+        const updatedRowData = props.api.internalApi.setValueUsingField(rowData, column, newValue);
+        return Object.assign({}, updatedRowData);
     };
     const getColDateValue = (column) => {
         const colValue = getColValue(column);
@@ -102,7 +65,7 @@ function ExpressionEditor(props) {
     };
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const dataTableEditor = (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+        React.createElement(rebass_1.Flex, { className: `${baseClassName}__columns-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
             React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
                     float: 'right',
                     margin: 0,
@@ -157,28 +120,24 @@ function ExpressionEditor(props) {
             setSelectedFunction,
             textAreaRef,
         } },
-        React.createElement("div", { "data-name": "expression-editor", style: Object.assign({ flex: 1, overflow: 'auto', display: 'flex', paddingLeft: 'var(--ab-space-2)' }, props.style) },
+        React.createElement(rebass_1.Flex, { className: baseClassName, flex: 1, "data-name": "expression-editor-wrapper", pl: 2, style: props.style },
             React.createElement(rebass_1.Flex, { flex: 1, style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
                     if (event.target.tagName === 'TEXTAREA') {
                         textAreaRef.current = event.target;
                     }
                 } },
-                React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", style: { fontSize: 'var(--ab-font-size-2)', minHeight: 0, flex: 1 } },
+                React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", fontSize: 2, style: { minHeight: 0 } },
                     React.createElement(rebass_1.Flex, { flex: 1, paddingRight: 2, style: { overflow: 'auto' }, "data-name": "expression-builder", flexDirection: "column" },
                         editorInput,
                         StringExtensions_1.default.IsNotNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && (React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
                         /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
                         StringExtensions_1.default.IsNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && renderQueryHints(type),
-                        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 2, mb: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
-                            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, style: {
-                                    color: 'var(--ab-color-text-on-add)',
-                                    fill: 'var(--ab-color-text-on-add)',
-                                    background: 'var(--ab-color-action-add)',
-                                }, onClick: () => window.open(queryDocumentationLink, '_blank') }),
+                        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
+                            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
                             "See ",
                             StringExtensions_1.default.CapitaliseFirstLetter(type),
                             " Query documentation for more details and examples")),
-                        React.createElement("div", { style: { flex: 1 } }),
+                        React.createElement(rebass_1.Box, { flex: 1 }),
                         allowSaveNamedQuery &&
                             props.api.internalApi
                                 .getModuleService()
@@ -202,13 +161,8 @@ function ExpressionEditor(props) {
                                         BooleanExpression: expressionText,
                                     });
                                 } })) : null))),
-                    React.createElement(rebass_1.Box, { "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, style: {
-                            overflow: 'auto',
-                            minWidth: 220,
-                            height: '100%',
-                            paddingRight: 'var(--ab-space-2)',
-                        } },
-                        ArrayExtensions_1.default.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "start", style: { padding: 3, marginTop: 5 }, backgroundColor: "primarylight" },
+                    React.createElement(rebass_1.Box, { className: `${baseClassName}__column-picker`, "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, pr: 2 },
+                        ArrayExtensions_1.default.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "start", p: 1, mt: 2, backgroundColor: "primarylight" },
                             React.createElement(Radio_1.default, { checked: !showNamedQueries, onChange: (checked) => setShowNamedQueries(!checked), style: { marginRight: 10 } }, "Columns"),
                             React.createElement(Radio_1.default, { checked: showNamedQueries, onChange: (checked) => setShowNamedQueries(checked), style: { marginLeft: 10, whiteSpace: 'nowrap' } }, "Named Queries"))),
                         showNamedQueries ? React.createElement("div", null, namedQueries) : React.createElement("div", null, dataTableEditor)))))));

package/src/components/FormLayout/index.js

@@ -73,7 +73,7 @@ const FormRow = (props) => {
         }
         if (props.as != null || column.component != null) {
             const Cmp = column.component;
-            value = (React.createElement(Cmp, { style: Object.assign(Object.assign({}, column.style), { gridColumn: columnIndex + 1, gridRow: rowIndex + 1 }), className: column.className }, value));
+            value = (React.createElement(Cmp, { "data-name": props.dataName, style: Object.assign(Object.assign({}, column.style), { gridColumn: columnIndex + 1, gridRow: rowIndex + 1 }), className: column.className }, value));
         }
         return typeof value === 'string' ? value : React.cloneElement(value, { key: columnName });
     });