@singularsystems/neo-react 1.0.0-beta.0 → 1.0.0-beta.1

package/CHANGELOG.md

@@ -2,7 +2,11 @@
 
 Version 1 of neo-react upgrades react to version 18, and mobX to version 6. Both of these are major updates and will require you to make code changes to your project.
 
-The changes required are detailed below:
+## Testing
+
+In addition to requiring code / syntax changes, both React 18, and Mobx 6 behave differently enough to their previous versions that runtime bugs may be introduced into your project. You should only update to this version when you and the client have enough time to test the project thoroughly. If you find any issues, please report them so this document can be updated.
+
+The project changes required are detailed below:
 
 ## Package changes:
 
@@ -85,14 +89,10 @@ makeObservable(this);
 
 ### Decorators on neo models
 
-If you try use mobx decorators on any models that extend `ModelBase` or `ViewModelBase`, you will receive this error:
+If you try use mobx decorators on any models that extend `ModelBase`, `ValueObject` or `ViewModelBase`, you will receive this error:
 
 > [MobX] makeObservable second arg must be nullish when using decorators. Mixing @decorator syntax with annotations is not supported.
 
 This is most likely because you have used an `@action` decorator on a method. Neo now marks all methods as actions, so you can remove the `@action` decorator.
 
-* Search for `@action` in your project. Remove the decorator **only** if the class extends `ModelBase` or `ViewModelBase`.
-
-## Testing
-
-Both React 18, and Mobx 6 behave differently enough to their previous versions that new bugs are almost guaranteed. You should only update to this version when you and the client have enough time to test the project thoroughly. If you find any issues, please report them so this document can be updated.
+* Search for `@action` in your project. Remove the decorator **only** if the class extends `ModelBase` (and its decendents e.g. `ValueObject`) or `ViewModelBase`.

package/dist/ReactComponents/Button.js

@@ -50,11 +50,12 @@ var Button = /** @class */ (function (_super) {
     };
     Button.prototype.render = function () {
         var _this = this;
-        var _a = this.props, isSubmit = _a.isSubmit, variant = _a.variant, size = _a.size, isOutline = _a.isOutline, icon = _a.icon, iconAlignment = _a.iconAlignment, text = _a.text, menuItems = _a.menuItems, splitMenu = _a.splitMenu, menuAlignment = _a.menuAlignment, buttonGroupClassName = _a.buttonGroupClassName, tooltip = _a.tooltip, task = _a.task, isBusy = _a.isBusy, pulse = _a.pulse, native = __rest(_a, ["isSubmit", "variant", "size", "isOutline", "icon", "iconAlignment", "text", "menuItems", "splitMenu", "menuAlignment", "buttonGroupClassName", "tooltip", "task", "isBusy", "pulse"]);
+        var _a;
+        var _b = this.props, isSubmit = _b.isSubmit, variant = _b.variant, size = _b.size, isOutline = _b.isOutline, icon = _b.icon, iconAlignment = _b.iconAlignment, text = _b.text, menuItems = _b.menuItems, splitMenu = _b.splitMenu, menuAlignment = _b.menuAlignment, buttonGroupClassName = _b.buttonGroupClassName, tooltip = _b.tooltip, task = _b.task, isBusy = _b.isBusy, pulse = _b.pulse, customVariant = _b.customVariant, native = __rest(_b, ["isSubmit", "variant", "size", "isOutline", "icon", "iconAlignment", "text", "menuItems", "splitMenu", "menuAlignment", "buttonGroupClassName", "tooltip", "task", "isBusy", "pulse", "customVariant"]);
         native.type = isSubmit ? "submit" : "button";
-        variant = variant !== null && variant !== void 0 ? variant : "primary";
+        var variantClassName = ((_a = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _a !== void 0 ? _a : "primary");
         var isDropDown = menuItems && menuItems.length;
-        var buttonClasses = "btn btn-" + (isOutline ? "outline-" : "") + variant;
+        var buttonClasses = "btn btn-" + (isOutline ? "outline-" : "") + variantClassName;
         if (size)
             buttonClasses += " btn-" + size;
         if (isDropDown && !splitMenu) {
@@ -72,7 +73,7 @@ var Button = /** @class */ (function (_super) {
             native.disabled = true;
         }
         if (pulse) {
-            buttonClasses += " ".concat(variant, "-color-pulse");
+            buttonClasses += " ".concat(variantClassName, "-color-pulse");
         }
         native.className = (native.className || "") + " " + buttonClasses;
         // Button text

package/dist/ReactComponents/Card.js

@@ -19,7 +19,7 @@ var Card = /** @class */ (function (_super) {
         var isCollapsible = collapsible || isExpanded !== undefined || initiallyCollapsed !== undefined;
         var expandState = isExpanded !== null && isExpanded !== void 0 ? isExpanded : this.expandState;
         if (isCollapsible) {
-            var expandIndicator = React.createElement("i", { onClick: function () { return expandState.value = !expandState.value; }, className: "card-expand-indicator fa fa-fw fa-angle-".concat(expandState.value ? "up" : "down") });
+            var expandIndicator = React.createElement("i", { onClick: function (e) { return expandState.value = !expandState.value; }, className: "card-expand-indicator fa fa-fw fa-angle-".concat(expandState.value ? "up" : "down") });
             if (headerElements) {
                 headerElements = React.createElement(React.Fragment, null,
                     headerElements,
@@ -31,6 +31,7 @@ var Card = /** @class */ (function (_super) {
             if (!expandState.value) {
                 className += " collapsed";
             }
+            className += " card-collapsible";
         }
         var body = React.createElement("div", { className: "card-body" },
             useCustomScrollbar && React.createElement(Scrollbar, null, children),
@@ -41,11 +42,11 @@ var Card = /** @class */ (function (_super) {
         }
         return (React.createElement("div", __assign({}, domProps, { className: className }),
             (icon || title) &&
-                React.createElement("div", { className: "card-header" },
+                React.createElement("div", { className: "card-header", onClick: function (e) { return expandState.value = !expandState.value; } },
                     React.createElement("div", { className: "card-header-title" },
                         this.iconFactory.getIconComponent(icon),
                         React.createElement("span", null, title)),
-                    headerElements && React.createElement("div", { className: "card-header-right-section" }, headerElements)),
+                    headerElements && React.createElement("div", { className: "card-header-right-section", onClick: function (e) { return e.stopPropagation(); } }, headerElements)),
             body));
     };
     Card = __decorate([

package/dist/ReactComponents/DatePicker.d.ts

@@ -12,6 +12,7 @@ export default class DatePicker extends ComponentBase<INeoDatePickerProps> {
     private container;
     private datePicker?;
     private isReadOnly;
+    private inputRef;
     constructor(props: INeoDatePickerProps);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/dist/ReactComponents/DatePicker.js

@@ -11,6 +11,7 @@ var DatePicker = /** @class */ (function (_super) {
     function DatePicker(props) {
         var _this = _super.call(this, props) || this;
         _this.isReadOnly = false;
+        _this.inputRef = React.createRef();
         _this.container = React.createRef();
         return _this;
     }
@@ -33,6 +34,9 @@ var DatePicker = /** @class */ (function (_super) {
         this.isReadOnly = !!domProps.readOnly;
         var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(domProps, !splitProps.inGroup);
+        if (splitProps.editor.inputElement) {
+            this.inputRef = splitProps.editor.inputElement;
+        }
         if (this.datePicker) {
             this.datePicker.update(splitProps.dateProps, this.props.bind, this.isReadOnly);
         }
@@ -40,8 +44,8 @@ var DatePicker = /** @class */ (function (_super) {
             // Create dependency on bound value on initial render.
             void this.props.bind.value;
         }
-        return (React.createElement("div", { className: "neo-datepicker-container", ref: this.container }, !(splitProps.dateProps && splitProps.dateProps.alwaysShow) &&
-            InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({ type: "text" }, domProps, { ref: splitProps.editor.inputElement })), splitProps.editor)));
+        return (React.createElement("div", { className: "neo-datepicker-container", ref: this.container }, Components.DatePicker.mustShowInput(splitProps.dateProps) &&
+            InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({ type: "text" }, domProps, { ref: this.inputRef })), splitProps.editor, this.inputRef)));
     };
     DatePicker.contextType = FormContext;
     DatePicker = __decorate([

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.d.ts

@@ -21,6 +21,10 @@ interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption,
     items?: ItemSource<T>;
     valueMember?: keyof T;
     displayMember?: keyof T;
+    /**
+     * Function used to filter items out of the datasource.
+     * **Note:** this will only apply to the `items` prop. */
+    filterPredicate?: (item: T) => boolean;
     /**
      * Property of an item to use as the description.
      *

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -137,6 +137,9 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         var defaultItems = undefined;
         if (this.props.items) {
             var items_1 = this.getItems(this.props.items);
+            if (this.props.filterPredicate !== undefined) {
+                items_1 = items_1.filter(this.props.filterPredicate);
+            }
             defaultItems = this.mapTArrayToOptions(items_1);
             if (descriptionMember === undefined && items_1.length > 0) {
                 if (EnumHelper.isEnumItem(items_1[0])) {
@@ -188,7 +191,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         if (nativeProps.isClearable === undefined) {
             nativeProps.isClearable = true;
         }
-        if (splitProps.editor.isDisabled || splitProps.editor.isReadOnly) {
+        if (BindPropsHelper.isReadOnly(splitProps.editor, this.context) || BindPropsHelper.isDisabled(splitProps.editor, this.context)) {
             nativeProps.isDisabled = true;
         }
         nativeProps.className = Utils.joinWithSpaces("react-select-bs", nativeProps.className);

package/dist/ReactComponents/Grid/ButtonColumn.d.ts

@@ -13,7 +13,7 @@ interface IDeleteButtonOptions extends IButtonOptions {
      */
     onDeleteExisting?: (item: any) => Promise<boolean>;
 }
-export interface IButtonColumnProps extends INeoCommonColumnProps, React.HTMLProps<HTMLTableCellElement> {
+export interface IButtonColumnProps extends INeoCommonColumnProps, Omit<React.HTMLProps<HTMLTableCellElement>, "children"> {
     /** Item to pass to edit and delete callbacks. Defaults to the current rows item */
     item?: any;
     /** Text to show in the header. */
@@ -32,6 +32,7 @@ export interface IButtonColumnProps extends INeoCommonColumnProps, React.HTMLPro
     viewButton?: IButtonOptions;
     /** Where should extra content be placed relative to the pre-defined buttons? */
     childAlignment?: "left" | "right";
+    children?: React.ReactNode | (() => React.ReactNode);
 }
 export declare class ButtonColumn extends ComponentBase<IButtonColumnProps> {
     static isColumnComponent: boolean;

package/dist/ReactComponents/Grid/ButtonColumn.js

@@ -72,7 +72,7 @@ export var ButtonColumn = /** @class */ (function (_super) {
             React.createElement("th", __assign({}, domProps), this.section === "header" && label) :
             React.createElement("td", __assign({}, domProps),
                 childAlignment === "right" ? buttons : undefined,
-                this.props.children,
+                this.props.children instanceof Function ? this.props.children() : this.props.children,
                 childAlignment !== "right" ? buttons : undefined));
     };
     ButtonColumn.isColumnComponent = true;

package/dist/ReactComponents/Grid/Grid.d.ts

@@ -17,7 +17,7 @@ export declare class GridContextParams<T> {
     get inBody(): boolean;
 }
 export declare const GridContext: React.Context<GridContextParams<unknown>>;
-interface IGridProps<T> extends Omit<React.HTMLProps<HTMLTableElement>, "children"> {
+export interface IGridProps<T> extends Omit<React.HTMLProps<HTMLTableElement>, "children"> {
     /**
      * Datasource of the Grid. Usually a neo List, but can be a js array. This is not required if the grid is nested in
      * a DataViewProvider like a Pager or DataScroller
@@ -51,6 +51,7 @@ interface IGridProps<T> extends Omit<React.HTMLProps<HTMLTableElement>, "childre
      */
     initialSort?: keyof T | (keyof T)[];
     initialSortAscending?: boolean | boolean[];
+    children: ItemCallback<T>;
     /**
      * When specified, the default bootstrap table borders (sides and cells) will be added.
      * This is the default unless overridden in Misc.Settings.grid
@@ -72,7 +73,11 @@ interface IGridProps<T> extends Omit<React.HTMLProps<HTMLTableElement>, "childre
      * Set `showAddButton = false` if you don't want the default button.
      */
     footerButtons?: () => React.ReactNode;
-    children: ItemCallback<T>;
+    /**
+     * Will cause the header to stick to the top of the screen / scroll element when scrolling.
+     * Note: if your app has a fixed header, you need to specify this in the global neo settings.
+     */
+    stickyHeader?: boolean;
 }
 export default class Grid<T> extends React.Component<IGridProps<T>> {
     static contextType: React.Context<import("../../React/DataView").DataViewContextParams<unknown>>;
@@ -80,8 +85,11 @@ export default class Grid<T> extends React.Component<IGridProps<T>> {
     private gridContext;
     private prevItems?;
     private headerItem;
+    private domRef;
+    private stickyHeaderHelper?;
     constructor(props: IGridProps<T>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
     private setInitialSort;
 }
-export {};

package/dist/ReactComponents/Grid/Grid.js

@@ -4,6 +4,7 @@ import { Data, Utils, Misc } from '@singularsystems/neo-core';
 import { observer, Observer } from 'mobx-react';
 import NeoButton from '../Button';
 import { DataViewContext } from '../../React/DataView';
+import { StickyTableHeader } from './StickyTableHeader';
 // Grid context
 var GridContextParams = /** @class */ (function () {
     function GridContextParams() {
@@ -27,12 +28,24 @@ var Grid = /** @class */ (function (_super) {
     function Grid(props) {
         var _this = _super.call(this, props) || this;
         _this.gridContext = new GridContextParams();
+        _this.domRef = React.createRef();
         _this.gridContext.section = "header";
         return _this;
     }
+    Grid.prototype.componentDidMount = function () {
+        var _a, _b;
+        if (this.domRef.current && ((_a = this.props.stickyHeader) !== null && _a !== void 0 ? _a : Misc.Settings.grid.useStickyHeaders)) {
+            this.stickyHeaderHelper = new StickyTableHeader(this.domRef.current, (_b = Misc.Settings.fixedAppHeaderElement) === null || _b === void 0 ? void 0 : _b.call(undefined));
+        }
+    };
+    Grid.prototype.componentWillUnmount = function () {
+        if (this.stickyHeaderHelper) {
+            this.stickyHeaderHelper.dispose();
+        }
+    };
     Grid.prototype.render = function () {
         var _this = this;
-        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons"]);
+        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, stickyHeader = _a.stickyHeader, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader"]);
         if (expandAll === true) {
             this.gridContext.expandAll = true;
         }
@@ -86,16 +99,18 @@ var Grid = /** @class */ (function (_super) {
             }
             this.headerItem = this.gridContext.dataView.getMetaItem();
         }
-        return (React.createElement("table", __assign({}, domProps, { className: className }),
+        return (React.createElement("table", __assign({}, domProps, { className: className, ref: this.domRef }),
             React.createElement(GridContext.Provider, { value: this.gridContext },
                 React.createElement(TableSection, { type: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta)),
                 React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item) { return (React.createElement(ItemGroup, { item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: _this.props.children })); })),
-                React.createElement(Observer, null, function () { return (showAddButton || addButton || footerButtons || _this.gridContext.hasSummaries || footerContent !== undefined) ?
-                    React.createElement(TableSection, { type: "footer" },
-                        _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta),
-                        footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
-                        (showAddButton || addButton || footerButtons) &&
-                            React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })) : null; }))));
+                React.createElement(Observer, null, function () {
+                    return React.createElement(React.Fragment, null, (showAddButton || addButton || footerButtons || _this.gridContext.hasSummaries || footerContent !== undefined) &&
+                        React.createElement(TableSection, { type: "footer" },
+                            _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta),
+                            footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
+                            (showAddButton || addButton || footerButtons) &&
+                                React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })));
+                }))));
     };
     Grid.prototype.setInitialSort = function (initialSort, initialSortAscending) {
         var _a;

package/dist/ReactComponents/Grid/StickyTableHeader.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Watches for when a table header scrolls out of view.
+ * When it does, adds a cloned header that is fixed at the top of the scrolling element.
+ */
+export declare class StickyTableHeader {
+    private table;
+    private fixedElement?;
+    /**
+     * Creates the instance, and begins listening for scroll events.
+     * @param table The table to add sticky headers to.
+     * @param fixedElement A fixed element at the top of the screen to use as an anchor, rather than the top of the screen itself.
+     */
+    constructor(table: HTMLTableElement, fixedElement?: HTMLElement | undefined);
+    private scrollParent?;
+    private header;
+    private headerCopy?;
+    private headerHeight;
+    private handleScroll;
+    private removeCopy;
+    private onPossibleContentChange;
+    private setColumnWidths;
+    dispose(): void;
+    /**
+     * Returns the first parent element that has a scrollbar.
+     */
+    private static getParentScrollElement;
+}

package/dist/ReactComponents/Grid/StickyTableHeader.js

@@ -0,0 +1,107 @@
+/**
+ * Watches for when a table header scrolls out of view.
+ * When it does, adds a cloned header that is fixed at the top of the scrolling element.
+ */
+var StickyTableHeader = /** @class */ (function () {
+    /**
+     * Creates the instance, and begins listening for scroll events.
+     * @param table The table to add sticky headers to.
+     * @param fixedElement A fixed element at the top of the screen to use as an anchor, rather than the top of the screen itself.
+     */
+    function StickyTableHeader(table, fixedElement) {
+        this.table = table;
+        this.fixedElement = fixedElement;
+        this.headerHeight = 0;
+        if (!table.tHead) {
+            throw Error("Table must have a header section.");
+        }
+        this.header = table.tHead;
+        this.scrollParent = StickyTableHeader.getParentScrollElement(table);
+        this.handleScroll = this.handleScroll.bind(this);
+        this.onPossibleContentChange = this.onPossibleContentChange.bind(this);
+        document.addEventListener("scroll", this.handleScroll);
+        if (this.scrollParent) {
+            this.scrollParent.addEventListener("scroll", this.handleScroll);
+        }
+        table.addEventListener("keydown", this.onPossibleContentChange);
+        table.addEventListener("mouseup", this.onPossibleContentChange);
+    }
+    StickyTableHeader.prototype.handleScroll = function () {
+        // If the grid is in an element with a scrollbar, then the header should stick to the top of that element,
+        //  otherwise if there is a fixed (non scrolling) element at the top of the page, then the headers must appear below that.
+        //  otherwise the headers will stick to the top of the screen.
+        var fixedElement = null;
+        if (!this.scrollParent && this.fixedElement && getComputedStyle(this.fixedElement).position === "fixed") {
+            fixedElement = this.fixedElement;
+        }
+        var topBoundary = this.scrollParent ? this.scrollParent.getBoundingClientRect().top : (fixedElement ? fixedElement.getBoundingClientRect().bottom : 0);
+        var tableBounds = this.table.getBoundingClientRect();
+        var tbodyBounds = this.table.tBodies[this.table.tBodies.length - 1].getBoundingClientRect();
+        if (tableBounds.top < topBoundary && tbodyBounds.bottom - this.headerHeight > topBoundary) {
+            if (!this.headerCopy) {
+                // Clone the header, and re-insert it into the table. The table will then have 2 headers.
+                // The original headers position is set to "fixed" which makes it float.
+                // The column widths of the floating header then need to be synchronised with the header that is still inside the table layout.
+                this.headerHeight = this.header.getBoundingClientRect().height;
+                this.headerCopy = this.header.cloneNode(true);
+                this.table.insertBefore(this.headerCopy, this.header);
+                this.header.classList.add("neo-grid-fixed-header");
+                this.setColumnWidths();
+            }
+            this.header.style.left = tableBounds.left + "px";
+            this.header.style.top = topBoundary + "px";
+        }
+        else {
+            this.setColumnWidths(true);
+            this.removeCopy();
+        }
+    };
+    StickyTableHeader.prototype.removeCopy = function () {
+        if (this.headerCopy) {
+            this.header.classList.remove("neo-grid-fixed-header");
+            this.table.removeChild(this.headerCopy);
+            this.headerCopy = undefined;
+        }
+    };
+    StickyTableHeader.prototype.onPossibleContentChange = function () {
+        var _this = this;
+        setTimeout(function () { return _this.setColumnWidths(); }, 0);
+    };
+    StickyTableHeader.prototype.setColumnWidths = function (isRemoving) {
+        if (isRemoving === void 0) { isRemoving = false; }
+        if (this.headerCopy) {
+            for (var i = 0; i < this.header.rows.length; i++) {
+                var originalRow = this.header.rows[i], copyRow = this.headerCopy.rows[i];
+                for (var j = 0; j < originalRow.cells.length; j++) {
+                    var originalCell = originalRow.cells[j], copyCell = copyRow.cells[j];
+                    originalCell.style.width = isRemoving ? copyCell.style.width : window.getComputedStyle(copyCell).width;
+                }
+            }
+        }
+    };
+    StickyTableHeader.prototype.dispose = function () {
+        document.removeEventListener("scroll", this.handleScroll);
+        if (this.scrollParent) {
+            this.scrollParent.removeEventListener("scroll", this.handleScroll);
+        }
+        this.table.removeEventListener("keydown", this.onPossibleContentChange);
+        this.table.removeEventListener("mouseup", this.onPossibleContentChange);
+        this.removeCopy();
+    };
+    /**
+     * Returns the first parent element that has a scrollbar.
+     */
+    StickyTableHeader.getParentScrollElement = function (element) {
+        var current = element;
+        while (current) {
+            if ((current.style.height || current.style.maxHeight) &&
+                (current.style.overflow === "scroll" || current.style.overflow === "auto" || current.style.overflowY === "scroll" || current.style.overflowY === "auto")) {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return undefined;
+    };
+    return StickyTableHeader;
+}());
+export { StickyTableHeader };

package/dist/ReactComponents/Input.js

@@ -107,7 +107,7 @@ var Input = /** @class */ (function (_super) {
             splitProps.editor.append = this.props.bind.value ?
                 React.createElement(Button, __assign({ size: "sm" }, buttonOptions, { icon: !this.showPassword ? "far-eye fa-fw" : "far-eye-slash fa-fw", onClick: function () { return _this.showPassword = !_this.showPassword; } })) : null;
         }
-        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor));
+        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor, this.domRef));
     };
     Input.contextType = FormContext;
     __decorate([

package/dist/ReactComponents/InputHelpers.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { ICommonEditorProps } from './PropTypes';
 export declare class InputHelpers {
     private static iconFactory?;
-    static surroundWithInputGroup<T extends React.ReactNode>(element: T, props: ICommonEditorProps): JSX.Element | T;
+    static surroundWithInputGroup<T extends React.ReactNode>(element: T, props: ICommonEditorProps, inputRef?: React.RefObject<HTMLElement>): JSX.Element | T;
 }

package/dist/ReactComponents/InputHelpers.js

@@ -4,7 +4,7 @@ import { NeoReactTypes } from '../Modules/Types';
 var InputHelpers = /** @class */ (function () {
     function InputHelpers() {
     }
-    InputHelpers.surroundWithInputGroup = function (element, props) {
+    InputHelpers.surroundWithInputGroup = function (element, props, inputRef) {
         if (!this.iconFactory) {
             this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         }
@@ -13,12 +13,12 @@ var InputHelpers = /** @class */ (function () {
                 (props.prependText || props.prepend) &&
                     React.createElement("div", { className: "input-group-prepend" },
                         props.prepend && (props.prepend instanceof Function ? props.prepend() : props.prepend),
-                        props.prependText && React.createElement("span", { className: "input-group-text" }, this.iconFactory.textOrIcon(props.prependText))),
+                        props.prependText && React.createElement("span", { className: "input-group-text", onClick: function () { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.iconFactory.textOrIcon(props.prependText))),
                 element,
                 (props.appendText || props.append) &&
                     React.createElement("div", { className: "input-group-append" },
                         props.append && (props.append instanceof Function ? props.append() : props.append),
-                        props.appendText && React.createElement("span", { className: "input-group-text" }, this.iconFactory.textOrIcon(props.appendText)))));
+                        props.appendText && React.createElement("span", { className: "input-group-text", onClick: function () { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.iconFactory.textOrIcon(props.appendText)))));
         }
         else {
             return element;

package/dist/ReactComponents/Modal/Modal.js

@@ -70,6 +70,10 @@ var Modal = /** @class */ (function (_super) {
                             _this.visible = false;
                             _this.forceUpdate();
                         }
+                        if (_this.props.afterClose) {
+                            _this.props.afterClose();
+                        }
+                        ;
                         _this.closeTimer = null;
                     }, Misc.Settings.modalAnimationTimeMs);
                 }

package/dist/ReactComponents/NumberInput.js

@@ -96,8 +96,15 @@ var NumberInput = /** @class */ (function (_super) {
     }
     NumberInput.prototype.onChanged = function (e) {
         var newValue;
-        if (e.target.value !== "") {
-            var testValue = e.target.value;
+        var stringValue = e.target.value;
+        if (stringValue !== "") {
+            if (NumberUtils.allowAsDecimalSeparator) {
+                var firstIndex = stringValue.indexOf(NumberUtils.allowAsDecimalSeparator), lastIndex = stringValue.lastIndexOf(NumberUtils.allowAsDecimalSeparator);
+                if (firstIndex >= 0 && firstIndex === lastIndex) {
+                    stringValue = stringValue.replace(NumberUtils.allowAsDecimalSeparator, ".");
+                }
+            }
+            var testValue = stringValue;
             if (testValue[0] === "-") {
                 testValue = testValue.substring(1);
             }
@@ -105,18 +112,18 @@ var NumberInput = /** @class */ (function (_super) {
                 return;
             }
         }
-        if (e.target.value == "") {
+        if (stringValue == "") {
             newValue = this.props.bind.propertyInfo.allowNulls ? null : new Decimal(0);
         }
         else if (this.formatState.isPercent && NumberUtils.transformPercent) {
-            newValue = new Decimal(e.target.value).dividedBy(100);
+            newValue = new Decimal(stringValue).dividedBy(100);
         }
         else if (this.numericType === Misc.DataType.Float || this.numericType === Misc.DataType.Decimal) {
-            newValue = new Decimal(e.target.value);
+            newValue = new Decimal(stringValue);
         }
         else {
             // Rounds to zero.
-            newValue = new Decimal(e.target.value).toDecimalPlaces(0, Decimal.ROUND_DOWN);
+            newValue = new Decimal(stringValue).toDecimalPlaces(0, Decimal.ROUND_DOWN);
         }
         if (newValue === null) {
             this.props.bind.value = newValue;
@@ -248,7 +255,7 @@ var NumberInput = /** @class */ (function (_super) {
             var decimals = NumberUtils.getDecimalPlaces(this.formatState.formatString);
             domProps.step = decimals === 0 ? "1" : "0.".concat("0".repeat(decimals - 1), "1");
         }
-        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps));
+        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps, this.inputElement));
     };
     NumberInput.contextType = FormContext;
     NumberInput = __decorate([

package/dist/ReactComponents/PropTypes.d.ts

@@ -135,22 +135,15 @@ export declare class BindPropsHelper {
      */
     static getBindProperty<T>(allProps: IEditorContainerProps<T, any>): Model.IPropertyInstance;
     static splitCommonEditorProps<T extends ICommonEditorProps>(props: T): {
-        editor: {
-            isReadOnly: boolean | undefined;
-            isDisabled: boolean | undefined;
-            prependText: string | undefined;
-            prepend: JSX.Element | (() => JSX.Element) | null | undefined;
-            appendText: string | undefined;
-            append: JSX.Element | (() => JSX.Element) | null | undefined;
-            inputElement: React.RefObject<HTMLElement> | undefined;
-            requiresGroup: boolean;
-        };
+        editor: ICommonEditorProps;
         rest: Omit<T, "disabled" | "readOnly" | "isReadOnly" | "isDisabled" | "prependText" | "appendText" | "prepend" | "append" | "inputElement">;
     };
     static normaliseContainerProps<T, TContainerDom = React.HTMLProps<T>, TData = any>(component: IComponentBase, props: IEditorContainerProps<T, TData>, inGroup: boolean, isBootstrap?: boolean): IEditorContainerNormalisedProps<TContainerDom, TData>;
     static normaliseEditorProps<T, TDom = React.HTMLProps<T>>(component: IComponentBase, props: (IEditorAndSelectorProps<T, any> & TDom) | IEditorNormalisedProps<TDom, any>): IEditorNormalisedProps<TDom, any>;
     static getPlaceholderText(placeholder: string | boolean | undefined, property: PropertyInfo): string | undefined;
     static autoSetDomProperties<TDom extends React.HTMLProps<HTMLElement>>(props: IEditorNormalisedProps<TDom, any>, formContext: FormContextParams, componentBlurFn?: (e: React.FocusEvent<HTMLElement>) => void, componentFocusFn?: (e: React.FocusEvent<HTMLElement>) => void): TDom;
+    static isReadOnly(editorProps: ICommonEditorProps, formContext: FormContextParams): boolean;
+    static isDisabled(editorProps: ICommonEditorProps, formContext: FormContextParams): boolean;
     /**
      * Intercept the user specified blur event, and run the validation onBlur logic first.
      * @param props Props specified on component.

package/dist/ReactComponents/PropTypes.js

@@ -209,12 +209,12 @@ export var BindPropsHelper = /** @class */ (function () {
         if (this.config.isTestOrDevelopment) {
             domProps[BindPropsHelper.DataFieldName] = props.bind.propertyInfo.propertyName;
         }
-        if (props.editor.isReadOnly || (formContext.allReadOnly && props.editor.isReadOnly === undefined)) {
+        if (this.isReadOnly(props.editor, formContext)) {
             domProps.readOnly = true;
             if (!domProps.tabIndex)
                 domProps.tabIndex = -1;
         }
-        if (props.editor.isDisabled || (formContext.allDisabled && props.editor.isDisabled === undefined)) {
+        if (this.isDisabled(props.editor, formContext)) {
             domProps.disabled = true;
         }
         if (props.editor.placeholder) {
@@ -231,6 +231,16 @@ export var BindPropsHelper = /** @class */ (function () {
         domProps.onBlur = BindPropsHelper.blurIntercept(props.editor, domProps.onBlur, componentBlurFn);
         return domProps;
     };
+    BindPropsHelper.isReadOnly = function (editorProps, formContext) {
+        var _a;
+        var propsReadOnly = (_a = editorProps.isReadOnly) !== null && _a !== void 0 ? _a : editorProps.readOnly;
+        return propsReadOnly || (formContext.allReadOnly && propsReadOnly === undefined);
+    };
+    BindPropsHelper.isDisabled = function (editorProps, formContext) {
+        var _a;
+        var propsDisabled = (_a = editorProps.isDisabled) !== null && _a !== void 0 ? _a : editorProps.disabled;
+        return propsDisabled || (formContext.allDisabled && propsDisabled === undefined);
+    };
     /**
      * Intercept the user specified blur event, and run the validation onBlur logic first.
      * @param props Props specified on component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,7 +29,7 @@
     "typescript": "5.0.4"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "^1.0.0-alpha.4",
+    "@singularsystems/neo-core": "1.0.0-beta.1",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.4.0",

package/styles/Card.scss

@@ -14,11 +14,18 @@
             margin: -10px 0;
 
             .card-expand-indicator {
-                cursor: pointer;
                 margin-left: 0.5rem;
                 padding-top: 0.5rem;
                 padding-bottom: 0.5rem;
             }
         }
     }
+
+    &.card-collapsible {
+        .card-header {
+            &:hover {       
+                cursor: pointer;
+            }
+        }
+    }
 }

package/styles/DatePicker.scss

@@ -3,6 +3,17 @@
     position: relative;
     width: 100%;
     color: initial;
+
+    &.neo-datepicker-always-show {
+      width: max-content;
+
+      input {
+        text-align: center;
+        padding: 0.125rem 0;
+        height: auto;
+        margin-bottom: 0.25rem;
+      }
+    }
   }
   
   .neo-datepicker-popup {

package/styles/Grid.scss

@@ -1,4 +1,9 @@
 table.neo-grid {
+    .neo-grid-fixed-header {
+        position: fixed;
+        z-index: 3;
+    }
+
     th {
         position: relative;