@adaptabletools/adaptable 18.0.0-canary.0 → 18.0.0-canary.2

package/package.json

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

package/src/Api/Implementation/NotesApiImpl.d.ts

@@ -11,6 +11,6 @@ export declare class NotesApiImpl extends ApiBase implements NotesApi {
     getCellNotes(config: {
         PrimaryKeyValue: string | number;
         ColumnId: string;
-    }): AdaptableNotes;
+    }): AdaptableNote[];
     getNoteByUuid(uuid: string): AdaptableNote | undefined;
 }

package/src/Redux/ActionsReducers/NotesRedux.d.ts

@@ -35,5 +35,5 @@ export declare const NotesReady: (note: NotesState) => NoteReadyAction;
 export declare const GetNotesSelector: (state: NotesState, config?: {
     PrimaryKeyValue: string | number;
     ColumnId: string;
-}) => import("../../PredefinedConfig/NotesState").AdaptableNotes;
+}) => AdaptableNote[];
 export declare const NotesReducer: Redux.Reducer<NotesState>;

package/src/Redux/ActionsReducers/NotesRedux.js

@@ -33,11 +33,11 @@ export const NotesReady = (note) => ({
     notesState: note,
 });
 export const GetNotesSelector = (state, config) => {
-    var _a, _b;
+    var _a;
     if (!config) {
-        return (_a = state === null || state === void 0 ? void 0 : state.Notes) !== null && _a !== void 0 ? _a : [];
+        return [];
     }
-    return ((_b = state === null || state === void 0 ? void 0 : state.Notes) !== null && _b !== void 0 ? _b : []).filter((note) => {
+    return ((_a = state === null || state === void 0 ? void 0 : state.Notes) !== null && _a !== void 0 ? _a : []).filter((note) => {
         if (note.PrimaryKeyValue === config.PrimaryKeyValue && note.ColumnId === config.ColumnId) {
             // happy check
             return true;

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
+import { Box, Flex } from 'rebass';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import DropdownButton from '../../components/DropdownButton';
 import FieldWrap from '../../components/FieldWrap';
+import Textarea from '../../components/Textarea';
 import { Icon } from '../../components/icons';
-import Input from '../../components/Input';
-import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { ButtonClear } from '../Components/Buttons/ButtonClear';
 import { ButtonExpand } from '../Components/Buttons/ButtonExpand';
 import { ButtonInvalid } from '../Components/Buttons/ButtonInvalid';
@@ -28,16 +28,50 @@ const QueryViewPanelComponent = (props) => {
     };
     const buttonExpand = (React.createElement(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }));
     const renderTextInput = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { marginRight: 1, width: 500 },
+        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { marginRight: 1, width: 500, style: { overflow: 'visible' } },
             buttonExpand,
-            React.createElement(Input, { disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { fontFamily: 'monospace', fontSize: 12 } }),
+            React.createElement(Box, { style: {
+                    position: 'relative',
+                    height: '100%',
+                }, flex: 1 },
+                React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
+                        left: 0,
+                        top: 0,
+                        right: 0,
+                        border: 0,
+                        position: 'absolute',
+                        resize: 'none',
+                        fontFamily: 'monospace',
+                        fontSize: 12,
+                        maxHeight: 52,
+                        height: 21,
+                        paddingTop: 7,
+                        zIndex: 100,
+                    }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
             isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
             gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
             ' ',
-            StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap, null,
+            StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap, { width: "100%", overflow: "visible" },
             ' ',
             buttonExpand,
-            React.createElement(Input, { disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { width: '100%' } })));
+            React.createElement(Box, { style: {
+                    position: 'relative',
+                    minHeight: 40,
+                    width: '100%',
+                }, flex: 1 },
+                React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
+                        left: 0,
+                        top: 0,
+                        right: 0,
+                        border: 0,
+                        position: 'absolute',
+                        resize: 'none',
+                        fontFamily: 'monospace',
+                        fontSize: 12,
+                        maxHeight: 60,
+                        paddingTop: 7,
+                        zIndex: 100,
+                    }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
     };
     const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
     const suspendButton = (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
@@ -61,7 +95,7 @@ const QueryViewPanelComponent = (props) => {
             namedQuerySelector));
     };
     return (React.createElement(Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(Flex, null, renderTextInput()),
+        React.createElement(Flex, { width: props.viewType === 'ToolPanel' ? '100%' : 'auto' }, renderTextInput()),
         React.createElement(Flex, null, renderButtons())));
 };
 export const GridFilterPanelControl = QueryViewPanelComponent;

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

@@ -2,16 +2,25 @@ import * as React from 'react';
 import { BoxProps } from 'rebass';
 import { HTMLProps } from 'react';
 export declare const baseClassName = "ab-Textarea";
+/**
+ * Autoheight strategy:
+ * - save initial height
+ * - when focused, expand to fit content - max x px
+ * - when blurred, shrink to initial height
+ * - when typing, expand to fit content - max x px
+ */
 export type TextareaProps = Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> & {
     placehoder?: string;
     type?: string;
     disabled?: boolean;
     value?: string;
+    autoResizeOnFocus?: boolean;
 } & Omit<BoxProps, 'ref'>;
 declare const Textarea: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLTextAreaElement>, "ref"> & {
     placehoder?: string;
     type?: string;
     disabled?: boolean;
     value?: string;
+    autoResizeOnFocus?: boolean;
 } & Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLInputElement | HTMLTextAreaElement>>;
 export default Textarea;

package/src/components/Textarea/index.js

@@ -4,7 +4,9 @@ import { Box } from 'rebass';
 import join from '../utils/join';
 export const baseClassName = 'ab-Textarea';
 const Textarea = React.forwardRef((props, ref) => {
-    let { disabled, className } = props, textareaProps = __rest(props, ["disabled", "className"]);
+    const internalRef = React.useRef(null);
+    let { disabled, autoResizeOnFocus, className } = props, textareaProps = __rest(props, ["disabled", "autoResizeOnFocus", "className"]);
+    const initialHeight = React.useRef(null);
     let type = 'text';
     if (textareaProps && textareaProps.type) {
         type = textareaProps.type;
@@ -12,6 +14,52 @@ const Textarea = React.forwardRef((props, ref) => {
     if (type === 'string') {
         type = 'text';
     }
-    return (React.createElement(Box, Object.assign({ ref: ref, as: "textarea" }, textareaProps, { type: type, disabled: disabled, className: join(className, baseClassName, disabled ? `${baseClassName}--disabled` : '') })));
+    const expandToFitContent = () => {
+        if (autoResizeOnFocus && initialHeight.current !== null && internalRef.current) {
+            internalRef.current.style.height = `0px`; // makes sure it shrinks when needed
+            const height = internalRef.current.scrollHeight;
+            internalRef.current.style.height = `${height}px`;
+        }
+    };
+    const shrinkToInitialHeight = () => {
+        if (autoResizeOnFocus) {
+            internalRef.current.style.height = `${initialHeight.current}px`;
+        }
+    };
+    return (React.createElement(Box, Object.assign({}, textareaProps, { onFocus: (e) => {
+            var _a;
+            expandToFitContent();
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            if (internalRef.current && initialHeight.current === null) {
+                const height = internalRef.current.getBoundingClientRect().height;
+                initialHeight.current = height;
+            }
+        }, onBlur: (e) => {
+            var _a;
+            shrinkToInitialHeight();
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, ref: (elRef) => {
+            // SAVE INITIAL HEIGHT
+            // if (elRef && initialHeight.current === null) {
+            //   const height = elRef.getBoundingClientRect().height;
+            //   initialHeight.current = isNaN(height) ? 'auto' : height;
+            // }
+            // SAVE REF
+            if (internalRef) {
+                internalRef.current = elRef;
+            }
+            // CALL EXTERNAL REF
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(elRef);
+                }
+                else {
+                    ref.current = elRef;
+                }
+            }
+        }, onChange: (e) => {
+            expandToFitContent();
+            props.onChange && props.onChange(e);
+        }, as: "textarea", type: type, disabled: disabled, className: join(className, baseClassName, disabled ? `${baseClassName}--disabled` : ''), spellCheck: false })));
 });
 export default Textarea;

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1707834216788 || Date.now(),
-    VERSION: "18.0.0-canary.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1707925044939 || Date.now(),
+    VERSION: "18.0.0-canary.2" || '--current-version--',
 };

package/src/metamodel/adaptable.metamodel.js

@@ -3513,6 +3513,11 @@ export const ADAPTABLE_METAMODEL = {
                 "name": "defaultAgGridMenuItems",
                 "kind": "a",
                 "desc": "Default AG Grid Menu Items"
+            },
+            {
+                "name": "structuredAdaptableMenuItems",
+                "kind": "a",
+                "desc": "All Adaptable Menu Items sorted and grouped"
             }
         ]
     },
@@ -3535,6 +3540,11 @@ export const ADAPTABLE_METAMODEL = {
                 "name": "defaultAgGridMenuItems",
                 "kind": "a",
                 "desc": "Default AG Grid Menu Items"
+            },
+            {
+                "name": "structuredAdaptableMenuItems",
+                "kind": "a",
+                "desc": "All Adaptable Menu Items sorted and grouped"
             }
         ]
     },