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

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/React/Decorators.js

@@ -1,5 +1,4 @@
 import { createObservableList } from './Utils';
-// TODO : remove this
 /**
  * Makes a list observable. Use this only when the property is not part of a NeoModel. E.g. it is defined directly on a component.
  */

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/Icons/IIconFactory.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
 export interface IconStyle {
+    /** True if the icon should be fixed width */
     fixedWidth?: boolean;
+    /** True if the icon should have a spin animation applied. E.g. loading spinner. */
     spin?: boolean;
+    /** True if the icon should have a solid or filled in style. Set to false for font-awesome regular style. */
+    solid?: boolean;
+    /** How thin / thick the icon lines are. Only supported by material symbols. */
+    weight?: number;
 }
 export interface IIconFactory {
     /**

package/dist/ReactComponents/Icons/Icon.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { IconStyle, IIconFactory } from ".";
+export interface IIconProps extends IconStyle {
+    name: string;
+    /** Optional icon factory if this icon uses a different icon set to the project default. */
+    factory?: IIconFactory;
+}
+/** Renders an icon using the icon factory specified at startup. */
+export default class Icon extends React.Component<IIconProps> {
+    private static _iconFactory;
+    private get iconFactory();
+    render(): React.ReactNode;
+}

package/dist/ReactComponents/Icons/Icon.js

@@ -0,0 +1,27 @@
+import { __extends, __rest } from "tslib";
+import { Misc } from "@singularsystems/neo-core";
+import React from "react";
+import { NeoReactTypes } from "../..";
+/** Renders an icon using the icon factory specified at startup. */
+var Icon = /** @class */ (function (_super) {
+    __extends(Icon, _super);
+    function Icon() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(Icon.prototype, "iconFactory", {
+        get: function () {
+            if (!Icon._iconFactory) {
+                Icon._iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
+            }
+            return Icon._iconFactory;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Icon.prototype.render = function () {
+        var _a = this.props, name = _a.name, factory = _a.factory, iconStyle = __rest(_a, ["name", "factory"]);
+        return (factory !== null && factory !== void 0 ? factory : this.iconFactory).getIconComponent(name, iconStyle);
+    };
+    return Icon;
+}(React.Component));
+export default Icon;

package/dist/ReactComponents/Icons/IconFactory.js

@@ -18,7 +18,7 @@ export var IconFactory = /** @class */ (function () {
         return undefined;
     };
     IconFactory.prototype.textOrIcon = function (textOrIcon, style) {
-        if (textOrIcon.indexOf("fa-") === 0 || textOrIcon.indexOf("far-") === 0) {
+        if (textOrIcon.indexOf("fa-") === 0 || textOrIcon.indexOf("far-") === 0 || textOrIcon.indexOf("fas-") === 0) {
             return this.getIconComponent(textOrIcon, style);
         }
         else {
@@ -27,6 +27,12 @@ export var IconFactory = /** @class */ (function () {
     };
     IconFactory.prototype.mapStringToIcon = function (iconName, style) {
         var className = Utils.getFontAwesomeClass(iconName);
+        if ((style === null || style === void 0 ? void 0 : style.solid) === false) {
+            className = className.replace("fa ", "far ");
+        }
+        if ((style === null || style === void 0 ? void 0 : style.solid) === true) {
+            className = className.replace("fa ", "fas ");
+        }
         if (style === null || style === void 0 ? void 0 : style.fixedWidth) {
             className += " fa-fw";
         }

package/dist/ReactComponents/Icons/MaterialSymbolsFontFactory.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { IconFactory, IconStyle } from ".";
+interface IMaterialSymbolsOptions {
+    /** Set to true if icon names with unspecified fill should be made solid/filled. */
+    fillDefault?: boolean;
+    /** Additional mappings between font-awesome, and material symbols. */
+    fontAwesomeMappings?: [string, string][];
+    /** Set to true if the provided mappings should completely replace the built in neo mappings. */
+    replaceNeoMappings?: boolean;
+}
+/**
+ * Font factory that renders google material symbols icons.
+ */
+export declare class MaterialSymbolsFontFactory extends IconFactory {
+    constructor(options?: IMaterialSymbolsOptions);
+    private filledByDefault;
+    private fontAwesomeMap;
+    protected mapStringToIcon(iconName: string, style?: IconStyle | undefined): React.ReactNode;
+    protected mapFontAwesomeToMaterial(faName: string): string | undefined;
+}
+export {};