@adaptabletools/adaptable-cjs 17.0.0-canary.4 → 18.0.0-canary.1

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CombinatorSelector = exports.ExpressionSelector = exports.PrimiteValueInput = exports.PrimitiveColumnSelector = void 0;
+exports.CombinatorSelector = exports.ExpressionSelector = exports.PrimitiveMultiValueInput = exports.PrimiteValueInput = exports.PrimitiveColumnSelector = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const rebass_1 = require("rebass");
@@ -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,37 +86,65 @@ 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;
+const PrimitiveMultiValueInput = (props) => {
+    return (react_1.default.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { isMulti: true, allowNewValues: true, value: props.value, columnId: props.lefthandColumnIdParam, onChange: (value) => {
+            props.onChange(value);
+        } }));
+};
+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/QueryBuilder/QueryPredicateBuilder.js

@@ -145,12 +145,24 @@ const PrimitiveFunctionEditor = (props) => {
                     }, value: props.predicate.operator })),
                 react_1.default.createElement(rebass_1.Flex, { flex: 1, ml: 2 }, restOfFunctionInputDataTypes.map((type, index) => {
                     var _a;
-                    return (react_1.default.createElement(QueryBuilderInputs_1.PrimiteValueInput, { key: type + index, inputType: type, lefthandColumnIdParam: columnId, value: (_a = restOfArgs[index]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
+                    let value = restOfArgs[index];
+                    const commonProps = {
+                        key: type + index,
+                        lefthandColumnIdParam: columnId,
+                        inputType: type,
+                    };
+                    if (type.includes('[]')) {
+                        return (react_1.default.createElement(QueryBuilderInputs_1.PrimitiveMultiValueInput, Object.assign({}, commonProps, { value: restOfArgs, onChange: (values) => {
+                                const args = [...props.predicate.args.slice(0, 1), ...values];
+                                props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
+                            } })));
+                    }
+                    return (react_1.default.createElement(QueryBuilderInputs_1.PrimiteValueInput, Object.assign({}, commonProps, { value: (_a = restOfArgs[index]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
                             const args = [...props.predicate.args];
                             // +1 because col is the first argument
                             args[index + 1] = value;
                             props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
-                        } }));
+                        } })));
                 }))),
             react_1.default.createElement(rebass_1.Box, { flex: 1 }),
             react_1.default.createElement(QueryPredicateButtons, Object.assign({}, props))));

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

@@ -14,4 +14,5 @@ exports.booleanExpressionsAvailableInQueryBuilder = [
     'ENDS_WITH',
     'IS_HOLIDAY',
     'IS_WORKDAY',
+    'IN',
 ];

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

@@ -80,7 +80,7 @@ const getFunctionsForColumnType = (dataType, availableBooleanFunctions) => {
         const functionDef = booleanExpressionFunctions_1.booleanExpressionFunctions[boolFnName];
         const inputs = functionDef.inputs;
         let matchingInputTypes = [];
-        if (Array.isArray(inputs[0])) {
+        if (inputs && Array.isArray(inputs[0])) {
             matchingInputTypes = inputs.find((input) => input[0] === columnType);
         }
         else {

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);
@@ -97,12 +98,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)',
@@ -113,7 +110,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)',
@@ -15,21 +16,40 @@ const commonStyles = ({ isFocused, isDisabled, }) => {
     };
 };
 const Select = function (props) {
-    var _a, _b, _c, _d, _e;
-    let selectedOption = (_b = ((_a = props.options) !== null && _a !== void 0 ? _a : []).find((option) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const doesOptionMatchValue = function (option) {
         if (typeof option.value === 'object' && option.value instanceof Date) {
             return (0, date_fns_1.isSameDay)(option.value, props.value);
         }
         return option.value === props.value;
-    })) !== null && _b !== void 0 ? _b : null;
-    if (!selectedOption && props.value !== undefined && props.value !== null) {
-        selectedOption = {
-            value: props.value,
-            label: props.value,
-        };
+    };
+    let selectedOption = null;
+    if (props.isMulti) {
+        selectedOption =
+            (_b = ((_a = props.value) !== null && _a !== void 0 ? _a : []).map((value) => {
+                var _a;
+                // return (props.value as any[]).includes(option.value);
+                const option = ((_a = props.options) !== null && _a !== void 0 ? _a : []).find(doesOptionMatchValue);
+                if (!option) {
+                    return {
+                        value,
+                        label: value,
+                    };
+                }
+                return option;
+            })) !== null && _b !== void 0 ? _b : null;
     }
-    let disabled = (_c = props.disabled) !== null && _c !== void 0 ? _c : false;
-    const accessLevel = (_d = props.accessLevel) !== null && _d !== void 0 ? _d : 'Full';
+    else {
+        selectedOption = (_d = ((_c = props.options) !== null && _c !== void 0 ? _c : []).find(doesOptionMatchValue)) !== null && _d !== void 0 ? _d : null;
+        if (!selectedOption && props.value !== undefined && props.value !== null) {
+            selectedOption = {
+                value: props.value,
+                label: props.value,
+            };
+        }
+    }
+    let disabled = (_e = props.disabled) !== null && _e !== void 0 ? _e : false;
+    const accessLevel = (_f = props.accessLevel) !== null && _f !== void 0 ? _f : 'Full';
     if (accessLevel === 'Hidden') {
         return null;
     }
@@ -52,7 +72,21 @@ 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: (_e = props.menuPosition) !== null && _e !== void 0 ? _e : 'fixed', isClearable: props.isClearable, onChange: (option) => {
+    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) => {
             if (props.isMulti) {
                 props.onChange(option.map((x) => x === null || x === void 0 ? void 0 : x.value));
             }
@@ -63,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.
@@ -85,25 +121,25 @@ const Select = function (props) {
             },
             // @ts-ignore
             menu: (baseStyle, state) => {
-                return Object.assign(Object.assign(Object.assign({}, baseStyle), { zIndex: 999999, boxShadow: 'var(--ab-cmp-dropdownbutton-list__box-shadow)', minWidth: 160 }), commonStyles(state));
+                return Object.assign(Object.assign(Object.assign({}, baseStyle), { zIndex: 999999, boxShadow: 'var(--ab-cmp-select-menu__box-shadow)', minWidth: 160 }), commonStyles(state));
             },
             // @ts-ignore
             option: (baseStyle, state) => {
                 const style = Object.assign(Object.assign(Object.assign({}, baseStyle), commonStyles(state)), { '&:active': {
-                        background: 'var(--ab-cmp-dropdownbutton-list-item-hover__background)',
+                        background: 'var(--ab-cmp-select-option-active__background)',
                     }, opacity: state.isDisabled ? 0.5 : 1 });
                 if (state.isSelected) {
-                    style.background = 'var(--ab-cmp-dropdownbutton-list-item-active__background)';
-                    style.color = 'var(--ab-cmp-dropdownbutton-list-item-active__color)';
+                    style.background = 'var(--ab-cmp-select-option-active__background)';
+                    style.color = 'var(--ab-cmp-select-option-active__color)';
                 }
                 if (state.isFocused) {
-                    style.background = 'var(--ab-cmp-dropdownbutton-list-item-hover__background)';
+                    style.background = 'var(--ab-cmp-select-option-focused__background)';
                 }
                 return style;
             },
             // @ts-ignore
             input: (baseStyle, state) => {
-                return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? 0 : baseStyle.padding, color: 'var(--ab-cmp-input__color)' });
+                return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? 0 : baseStyle.padding, color: 'var(--ab-cmp-select__color)' });
             },
             valueContainer: (baseStyle) => {
                 return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding });
@@ -117,10 +153,8 @@ 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-focus__box-shadow)' : 'none', outline: state.isFocused ? 'var(--ab-focus__outline)' : 'none', border: props.variant && props.variant === 'raised'
-                        ? '1px solid transparent'
-                        : 'var(--ab-cmp-input__border)', '&:hover': {
-                        border: 'var(--ab-cmp-input__border)',
+                    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)',
                     } });
             },
             // @ts-ignore
@@ -131,6 +165,12 @@ const Select = function (props) {
             clearIndicator: (baseStyle) => {
                 return Object.assign(Object.assign({}, baseStyle), { padding: '2px 3px' });
             },
+            multiValue: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { color: 'var(--ab-cmp-select__color)', background: 'var(--ab-cmp-select-multi-value__background)', border: 'var(--ab-cmp-select__border)' });
+            },
+            multiValueLabel: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { color: 'var(--ab-cmp-select__color)' });
+            },
         } }));
 };
 exports.Select = Select;

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

@@ -7,7 +7,9 @@ const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 exports.baseClassName = 'ab-Textarea';
 const Textarea = React.forwardRef((props, ref) => {
-    let { disabled, className } = props, textareaProps = tslib_1.__rest(props, ["disabled", "className"]);
+    const internalRef = React.useRef(null);
+    let { disabled, autoResizeOnFocus, className } = props, textareaProps = tslib_1.__rest(props, ["disabled", "autoResizeOnFocus", "className"]);
+    const initialHeight = React.useRef(null);
     let type = 'text';
     if (textareaProps && textareaProps.type) {
         type = textareaProps.type;
@@ -15,6 +17,52 @@ const Textarea = React.forwardRef((props, ref) => {
     if (type === 'string') {
         type = 'text';
     }
-    return (React.createElement(rebass_1.Box, Object.assign({ ref: ref, as: "textarea" }, textareaProps, { type: type, disabled: disabled, className: (0, join_1.default)(className, exports.baseClassName, disabled ? `${exports.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(rebass_1.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: (0, join_1.default)(className, exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : ''), spellCheck: false })));
 });
 exports.default = Textarea;

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

@@ -1,3 +1,3 @@
-export { toast, ToastContainer, Slide, Zoom, Bounce, Flip, } from '../../bundle-dependencies/bundles/react-toastify';
-import { ToastOptions } from '../../bundle-dependencies/bundles/react-toastify';
+export { toast, ToastContainer, Slide, Zoom, Bounce, Flip } from 'react-toastify';
+import { ToastOptions } from 'react-toastify';
 export type { ToastOptions };

package/src/components/Toastify/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Flip = exports.Bounce = exports.Zoom = exports.Slide = exports.ToastContainer = exports.toast = void 0;
-var react_toastify_1 = require("../../bundle-dependencies/bundles/react-toastify");
+var react_toastify_1 = require("react-toastify");
 Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return react_toastify_1.toast; } });
 Object.defineProperty(exports, "ToastContainer", { enumerable: true, get: function () { return react_toastify_1.ToastContainer; } });
 Object.defineProperty(exports, "Slide", { enumerable: true, get: function () { return react_toastify_1.Slide; } });

package/src/components/icons/comments.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/comments.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DefaultIcon_1 = tslib_1.__importDefault(require("./DefaultIcon"));
+exports.default = (props) => (React.createElement(DefaultIcon_1.default, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M280-240q-17 0-28.5-11.5T240-280v-80h520v-360h80q17 0 28.5 11.5T880-680v600L720-240H280ZM80-280v-560q0-17 11.5-28.5T120-880h520q17 0 28.5 11.5T680-840v360q0 17-11.5 28.5T640-440H240L80-280Zm520-240v-280H160v280h440Zm-440 0v-280 280Z" })));

package/src/components/icons/index.js

@@ -157,6 +157,7 @@ const money_1 = tslib_1.__importDefault(require("./money"));
 const order_1 = tslib_1.__importDefault(require("./order"));
 const contact_1 = tslib_1.__importDefault(require("./contact"));
 const note_1 = tslib_1.__importDefault(require("./note"));
+const comments_1 = tslib_1.__importDefault(require("./comments"));
 const Icon_1 = require("../Icon");
 const AdaptableLogger_1 = require("../../agGrid/AdaptableLogger");
 exports.allIcons = {
@@ -193,7 +194,7 @@ exports.allIcons = {
     'horizontal-lines': freetext_column_1.default,
     'percent-tag': percent_bar_1.default,
     'spark-line': spark_line_1.default,
-    'resume': resume_1.default,
+    resume: resume_1.default,
     'pie-chart': pie_chart_1.default,
     'add-circle': plus_minus_1.default,
     reminder: reminder_1.default,
@@ -314,6 +315,7 @@ exports.allIcons = {
     order: order_1.default,
     contact: contact_1.default,
     note: note_1.default,
+    comments: comments_1.default,
 };
 Object.keys(exports.allIcons).forEach((name) => {
     const ReactCmp = exports.allIcons[name];

package/src/env.d.ts

@@ -1,4 +1,6 @@
 declare const _default: {
-    [key: string]: string;
+    INFINITE_TABLE_LICENSE_KEY: any;
+    PUBLISH_TIMESTAMP: any;
+    VERSION: any;
 };
 export default _default;

package/src/env.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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",
+    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: 1707923772524 || Date.now(),
+    VERSION: "18.0.0-canary.1" || '--current-version--',
 };