@singularsystems/neo-react 1.6.2 → 1.6.4

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 This file details all new features and changes to functionality. If you only need to see changes that require updates to your project, see the [breaking changes](./Breaking.md) readme.
 
+## Version 1.6.4 (20 July 2026)
+
+- Neo.Card
+    - Added `description` prop to neo card.
+    - Additional root classes will be rendered when description, or headerElements is specified for more styling options.
+- Drop down
+    - Added parent value to `onItemSelected`.
+    - Added `nullValue` to better control when a blank item renders.
+        - With this change, the basic `Neo.DropDown` component is more explicit with how it decides whether or not to show a blank item. 
+    Previously if the items list contained an item with any falsy value, then a blank item would not be shown, and the item with the falsy value would be shown if the bound value was null. 
+    This has changed so that only items with a value of `null` are considered blank items. 
+    If you need a different value to be considered null, then set the `nullValue` prop.
+- Grid
+    - Added `headerProps` and `cellProps` to allow customisation at header / cell level.
+
+## Version 1.6.3 (14 July 2026)
+
+- Allow `ICardProps` to be referenced.
+
 ## Version 1.6.2 (10 July 2026)
 
 - Routing fix

package/dist/ReactComponents/Card.d.ts

@@ -1,10 +1,12 @@
 import React, { JSX } from 'react';
 import { Model } from '@singularsystems/neo-core';
-interface ICardProps {
+export interface ICardProps {
     /** Icon to show next to title in header. */
     icon?: string;
     /** Title to show in header. */
     title?: any;
+    /** Description to show below the title. */
+    description?: string;
     /** Header elements to show on right hand side of header. */
     headerElements?: JSX.Element;
     /** Footer elements to show on bottom of the card. */
@@ -24,5 +26,5 @@ export default class Card extends React.Component<ICardProps & React.HTMLProps<H
     private iconFactory;
     private expandState;
     render(): JSX.Element;
+    private renderTitle;
 }
-export {};

package/dist/ReactComponents/Card.js

@@ -15,7 +15,7 @@ var Card = /** @class */ (function (_super) {
         return _this;
     }
     Card.prototype.render = function () {
-        var _a = this.props, icon = _a.icon, title = _a.title, children = _a.children, headerElements = _a.headerElements, footerContent = _a.footerContent, useCustomScrollbar = _a.useCustomScrollbar, collapsible = _a.collapsible, initiallyCollapsed = _a.initiallyCollapsed, isExpanded = _a.isExpanded, expandIconPosition = _a.expandIconPosition, domProps = __rest(_a, ["icon", "title", "children", "headerElements", "footerContent", "useCustomScrollbar", "collapsible", "initiallyCollapsed", "isExpanded", "expandIconPosition"]);
+        var _a = this.props, icon = _a.icon, title = _a.title, description = _a.description, children = _a.children, headerElements = _a.headerElements, footerContent = _a.footerContent, useCustomScrollbar = _a.useCustomScrollbar, collapsible = _a.collapsible, initiallyCollapsed = _a.initiallyCollapsed, isExpanded = _a.isExpanded, expandIconPosition = _a.expandIconPosition, domProps = __rest(_a, ["icon", "title", "description", "children", "headerElements", "footerContent", "useCustomScrollbar", "collapsible", "initiallyCollapsed", "isExpanded", "expandIconPosition"]);
         var className = Utils.joinWithSpaces("neo-card card", domProps.className);
         expandIconPosition !== null && expandIconPosition !== void 0 ? expandIconPosition : (expandIconPosition = "right");
         var isCollapsible = collapsible || isExpanded !== undefined || initiallyCollapsed !== undefined;
@@ -39,6 +39,12 @@ var Card = /** @class */ (function (_super) {
             }
             className += " card-collapsible";
         }
+        if (headerElements) {
+            className += " card--with-header-elements";
+        }
+        if (description) {
+            className += " card--with-description";
+        }
         if (icon && Misc.Settings.icons.shouldSuppress({ icon: icon, component: "card", props: this.props })) {
             icon = undefined;
         }
@@ -59,10 +65,20 @@ var Card = /** @class */ (function (_super) {
                     React.createElement("div", { className: "card-header-title" },
                         expandIconPosition === "left" && expandIndicator,
                         this.iconFactory.getIconComponent(icon),
-                        React.createElement("span", null, title)),
+                        this.renderTitle(title, description)),
                     headerElements && React.createElement("div", { className: "card-header-right-section", onClick: function (e) { return e.stopPropagation(); } }, headerElements)),
             content));
     };
+    Card.prototype.renderTitle = function (title, description) {
+        if (description) {
+            return (React.createElement("div", { className: "card-title-section" },
+                React.createElement("div", { className: "card-title-text" }, title),
+                React.createElement("div", { className: "card-title-description" }, description)));
+        }
+        else {
+            return typeof title === "string" ? React.createElement("span", null, title) : title;
+        }
+    };
     Card = __decorate([
         observer
     ], Card);

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

@@ -1,18 +1,11 @@
 import React, { JSX } from 'react';
 import { Model } from '@singularsystems/neo-core';
 import { AxiosPromise } from 'axios';
-import { DropDownBase, ItemSource } from './DropDownBase';
+import { DropDownBase, ICommonDropDownProps, IOption, ItemSource } from './DropDownBase';
 import type { Props, SelectInstance } from 'react-select';
 import { ICommonEditorProps } from '../PropTypes';
 import { FormContext } from '../FormContext';
-interface IOption<T = any> {
-    value: string | number;
-    label: string;
-    item?: T;
-    itemParent?: any;
-    options?: IOption[];
-}
-interface IAutoCompleteCommonProps<T, TChild = T> extends ICommonEditorProps<SelectInstance>, Props<IOption, true> {
+interface IAutoCompleteCommonProps<T, TChild = T> extends ICommonEditorProps<SelectInstance>, Props<IOption, true>, ICommonDropDownProps<T, TChild> {
     /**
      * Callback for loading data.
      */
@@ -56,7 +49,7 @@ interface IAutoCompleteCommonProps<T, TChild = T> extends ICommonEditorProps<Sel
      * The removedItem parameter will be provided when removing an item from a multi select drop down.
      * The addedItem parameter will be provided when an item is selected in a multi select drop down. This is the item stored in the bindItems list.
      */
-    onItemSelected?: (item?: TChild, removedItem?: Model.ISelectedItem, addedItem?: Model.ISelectedItem) => void;
+    onItemSelected?: (item?: TChild, removedItem?: Model.ISelectedItem, addedItem?: Model.ISelectedItem, parent?: T) => void;
     /**
      * Millisecond delay from the last typed character, to when the itemSource function is called.
      * Default is 500ms.
@@ -67,20 +60,12 @@ interface IAutoCompleteCommonProps<T, TChild = T> extends ICommonEditorProps<Sel
      * Default is 1.
      */
     minCharacters?: number;
-    /**
-     * The group member to use as the display for grouped items.
-     */
-    groupDisplayMember?: NoInfer<keyof T>;
-    /**
-     * Name of the property on the parent which contains a child list.
-     */
-    childListMember?: NoInfer<keyof T>;
 }
-export interface IAutoCompleteProps {
+export interface IAutoCompleteProps<T, TChild> extends IAutoCompleteCommonProps<T, TChild> {
     bind: Model.IPropertyInstance;
     bindDisplay?: Model.IPropertyInstance;
 }
-export interface IAutoCompleteMultiSelectProps {
+export interface IAutoCompleteMultiSelectProps<T, TChild = T> extends IAutoCompleteCommonProps<T, TChild> {
     /**
      * A list of ids and labels to use as the selected list.
      */
@@ -95,31 +80,20 @@ export interface IAutoCompleteMultiSelectProps {
      */
     fieldInfoLimit?: number;
 }
-export default class AutoCompleteDropDown<T, TChild = T> extends DropDownBase<T, IAutoCompleteCommonProps<T, TChild> & (IAutoCompleteProps | IAutoCompleteMultiSelectProps), TChild> {
+export default class AutoCompleteDropDown<T, TChild = T> extends DropDownBase<T, TChild, IAutoCompleteProps<T, TChild> | IAutoCompleteMultiSelectProps<T, TChild>> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;
     context: React.ContextType<typeof FormContext>;
     private asyncSelectImplementation;
     private selectImplementation;
-    constructor(props: IAutoCompleteCommonProps<T, TChild> & (IAutoCompleteProps | IAutoCompleteMultiSelectProps));
+    constructor(props: IAutoCompleteProps<T, TChild> | IAutoCompleteMultiSelectProps<T, TChild>);
     private bindProperty;
     private bindIdsList?;
     private bindIdsProperty?;
-    static getBindProp<TChild>(props: IAutoCompleteProps | IAutoCompleteMultiSelectProps): Model.IPropertyInstance<any>;
+    static getBindProp<T, TChild>(props: IAutoCompleteProps<T, TChild> | IAutoCompleteMultiSelectProps<T, TChild>): Model.IPropertyInstance<any>;
+    protected get commonProps(): ICommonDropDownProps<T, TChild>;
     private onKeyPress;
     private setBindProperty;
-    private mapTArrayToOptions;
-    private mapChildItemsToOptions;
-    private getGroupedOptionsFromItems;
-    /**
-     * Finds an option in the items list by value.
-     * Handles both flat lists and grouped (nested) items.
-     * @param items The items array to search in
-     * @param value The value to search for
-     * @returns The matching IOption or undefined if not found
-     */
-    private findOptionByValue;
     private onItemSelected;
-    private get isGrouped();
     render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | JSX.Element | null | undefined;
     private getOption;
 }

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -22,6 +22,13 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         var _a;
         return (_a = props.bind) !== null && _a !== void 0 ? _a : props.bindItems;
     };
+    Object.defineProperty(AutoCompleteDropDown.prototype, "commonProps", {
+        get: function () {
+            return this.props;
+        },
+        enumerable: false,
+        configurable: true
+    });
     AutoCompleteDropDown.prototype.onKeyPress = function (searchValue, dataReceived) {
         var _this = this;
         var _a, _b;
@@ -35,7 +42,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                     else {
                         items = list;
                     }
-                    dataReceived(_this.mapTArrayToOptions((items).slice()));
+                    dataReceived(_this.mapItemsToOptions((items).slice()));
                 });
             }, (_b = this.props.delayMs) !== null && _b !== void 0 ? _b : 500);
         }
@@ -67,73 +74,9 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             }
         }
     };
-    AutoCompleteDropDown.prototype.mapTArrayToOptions = function (items) {
-        if (this.isGrouped) {
-            var firstChildItem = this.getFirstChildItem(items, this.props.childListMember);
-            if (firstChildItem) {
-                this.findMembers(firstChildItem);
-            }
-            return this.getGroupedOptionsFromItems(items);
-        }
-        if (items.length) {
-            this.findMembers(items[0]);
-        }
-        return this.mapChildItemsToOptions(items);
-    };
-    AutoCompleteDropDown.prototype.mapChildItemsToOptions = function (childItems, parentItem) {
-        var _this = this;
-        return childItems.map(function (childItem) { return ({
-            item: childItem,
-            itemParent: parentItem,
-            value: childItem[_this.valueMember],
-            label: childItem[_this.displayMember]
-        }); });
-    };
-    AutoCompleteDropDown.prototype.getGroupedOptionsFromItems = function (groupedItems) {
-        var _this = this;
-        var groupedOptions = groupedItems.map(function (groupItem) {
-            var childOptions = _this.mapChildItemsToOptions(groupItem[_this.props.childListMember], groupItem);
-            return {
-                item: groupItem,
-                itemParent: null,
-                label: groupItem[_this.props.groupDisplayMember],
-                options: childOptions
-            };
-        });
-        return groupedOptions;
-    };
-    /**
-     * Finds an option in the items list by value.
-     * Handles both flat lists and grouped (nested) items.
-     * @param items The items array to search in
-     * @param value The value to search for
-     * @returns The matching IOption or undefined if not found
-     */
-    AutoCompleteDropDown.prototype.findOptionByValue = function (items, value) {
-        if (!items) {
-            return undefined;
-        }
-        if (this.isGrouped) {
-            // For grouped items, search within child options of each group
-            for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
-                var group = items_1[_i];
-                if (group.options) {
-                    var childMatch = group.options.find(function (option) { return option.value === value; });
-                    if (childMatch) {
-                        return childMatch;
-                    }
-                }
-            }
-            return undefined;
-        }
-        else {
-            // For flat items, search directly
-            return items.find(function (item) { return item.value === value; });
-        }
-    };
     AutoCompleteDropDown.prototype.onItemSelected = function (args, action) {
-        var _a;
-        var onItemSelected = this.props.onItemSelected, singleProps = this.props, multiProps = this.props;
+        var _a, _b;
+        var singleProps = this.props, multiProps = this.props;
         if (multiProps.bindItems) {
             var itemsProperty = multiProps.bindItems;
             // Multi select
@@ -144,8 +87,8 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                 if (this.bindIdsList) {
                     this.bindIdsList.push(action.option.value);
                 }
-                if (onItemSelected) {
-                    onItemSelected((_a = action.option) === null || _a === void 0 ? void 0 : _a.item, undefined, newItem);
+                if (multiProps.onItemSelected) {
+                    multiProps.onItemSelected((_a = action.option) === null || _a === void 0 ? void 0 : _a.item, undefined, newItem, (_b = action.option) === null || _b === void 0 ? void 0 : _b.itemParent);
                 }
             }
             else if (action.action === "remove-value") {
@@ -156,8 +99,8 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                         this.bindIdsList.remove(removeItem.id);
                     }
                 }
-                if (onItemSelected) {
-                    onItemSelected(undefined, removeItem);
+                if (multiProps.onItemSelected) {
+                    multiProps.onItemSelected(undefined, removeItem);
                 }
             }
             else if (action.action === "clear") {
@@ -165,8 +108,8 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                 if (this.bindIdsList) {
                     this.bindIdsList.length = 0;
                 }
-                if (onItemSelected) {
-                    onItemSelected(undefined);
+                if (multiProps.onItemSelected) {
+                    multiProps.onItemSelected(undefined);
                 }
             }
             itemsProperty.attachedTo.isSelfDirty = true;
@@ -177,18 +120,11 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             if (singleProps.bindDisplay) {
                 singleProps.bindDisplay.value = args ? args.label : "";
             }
-            if (onItemSelected) {
-                onItemSelected(args === null || args === void 0 ? void 0 : args.item);
+            if (singleProps.onItemSelected) {
+                singleProps.onItemSelected(args === null || args === void 0 ? void 0 : args.item, undefined, undefined, args === null || args === void 0 ? void 0 : args.itemParent);
             }
         }
     };
-    Object.defineProperty(AutoCompleteDropDown.prototype, "isGrouped", {
-        get: function () {
-            return this.props.groupDisplayMember !== undefined && this.props.childListMember !== undefined;
-        },
-        enumerable: false,
-        configurable: true
-    });
     AutoCompleteDropDown.prototype.render = function () {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -210,40 +146,20 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         }
         var defaultItems = undefined;
         if (this.props.items) {
-            var items_2 = [];
+            var items_1 = [];
             if (this.isGrouped) {
-                items_2 = this.getItems(this.props.items);
-                defaultItems = this.getGroupedOptionsFromItems(items_2);
+                items_1 = this.getItems(this.props.items);
+                defaultItems = this.mapGroupedItemsToOptions(items_1);
             }
             else {
-                items_2 = this.getItems(this.props.items);
-                defaultItems = this.mapTArrayToOptions(items_2);
+                items_1 = this.getItems(this.props.items);
+                defaultItems = this.mapItemsToOptions(items_1);
             }
             if (filterPredicate !== undefined) {
-                if (this.isGrouped) {
-                    var groupsWithFilteredChildren = defaultItems.map(function (group) { return (__assign(__assign({}, group), { options: group.options.filter(function (option) {
-                            if (bindValue) {
-                                return bindValue.value === option.value || filterPredicate(option.item, option.itemParent);
-                            }
-                            else {
-                                return filterPredicate(option.item, option.itemParent);
-                            }
-                        }) })); });
-                    // Remove groups that have no children after filtering
-                    defaultItems = groupsWithFilteredChildren.filter(function (group) { return group.options.length > 0; });
-                }
-                else {
-                    if (bindValue) {
-                        // Dont filter out the current selected item even if excluded by the filter.
-                        defaultItems = defaultItems.filter(function (option) { return bindValue.value === option.value || filterPredicate(option.item, option.itemParent); });
-                    }
-                    else {
-                        defaultItems = defaultItems.filter(function (option) { return filterPredicate(option.item, option.itemParent); });
-                    }
-                }
+                defaultItems = this.filterOptions(defaultItems, filterPredicate, bindValue);
             }
-            if (descriptionMember === undefined && items_2.length > 0) {
-                if (EnumHelper.isEnumItem(items_2[0])) {
+            if (descriptionMember === undefined && items_1.length > 0) {
+                if (EnumHelper.isEnumItem(items_1[0])) {
                     descriptionMember = "description";
                 }
             }

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

@@ -1,56 +1,53 @@
 import * as React from 'react';
 import { IBindableEditorProps } from '../PropTypes';
 import { Data } from '@singularsystems/neo-core';
-import { DropDownBase } from './DropDownBase';
+import { DropDownBase, ICommonDropDownProps } from './DropDownBase';
 import { FormContext } from '../FormContext';
-export interface IDropDownSpecificProps<T, TChild = T> {
+export interface IDropDownSpecificProps<T, TChild = T> extends ICommonDropDownProps<T, TChild> {
     items?: T[] | Promise<T[]>;
     itemSource?: Data.IAsyncDataSource<T[]> | Data.IArrayCacheEntry<T>;
     valueMember?: NoInfer<keyof TChild>;
     displayMember?: NoInfer<keyof TChild>;
     /**
-     * Set to true if your bind property is nullable, and you need to show a blank item in the list.
-     * If your property value is null, a blank item will automatically be shown.
+     * Same as `allowDefault`.
+     * Set to true if the user should be able to de-select an item, and set the bound value to the `defaultValue`. This will show a default item in the list.
      */
     allowNulls?: boolean;
+    /**
+     * Set to true if the user should be able to de-select an item, and set the bound value to the `defaultValue`. This will show a default item in the list.
+     */
+    allowDefault?: boolean;
+    /**
+     * Value considered default. E.g. if allowDefault is true, then selecting the default item will set the bound value to this value. Defaults to `null`.
+     */
+    defaultValue?: any;
     /** Function used to filter items out of the datasource. */
     filterPredicate?: (item: TChild, itemParent?: T) => boolean;
     /** Callback which fires when an item is selected. */
-    onItemSelected?: (item?: TChild) => void;
+    onItemSelected?: (item?: TChild, parent?: T) => void;
     /**
      * True if the display member of the selected item should display as plain text.
      * Use this if you need a readonly display, and don't want a form control rendered.
      */
     renderAsText?: boolean;
-    /** Text to display when the bound value is null, and there is no item with null as it's value member. */
+    /** Text to display when the bound value is the default value, and there is no item with this value. */
     nullText?: string;
-    /** Text to display as the first item in the drop down list when the user is allowed to select a blank item. */
+    /** Text to display as the first item in the drop down list when the user is allowed to select a default item. */
     deSelectText?: string;
     /** Set to true if the property should be sorted by value instead of display text. */
     sortByValue?: boolean;
-    /**
-     * The group member to use as the display for grouped items.
-     */
-    groupDisplayMember?: NoInfer<keyof T>;
-    /**
-     * The child list containing the grouped items.
-     */
-    childListMember?: NoInfer<keyof T>;
 }
 export interface IDropDownProps<T, TChild = T> extends IBindableEditorProps<HTMLSelectElement> {
     select: IDropDownSpecificProps<T, TChild>;
 }
-export default class DropDown<T, TChild = T> extends DropDownBase<T, IDropDownProps<T, TChild>, TChild> {
+export default class DropDown<T, TChild = T> extends DropDownBase<T, TChild, IDropDownProps<T, TChild>> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;
     context: React.ContextType<typeof FormContext>;
-    private selectedItem;
+    private allOptions;
+    private selectedOption;
     private sortByValue?;
-    private listIndexSymbol;
-    private get isGrouped();
     constructor(props: IDropDownProps<T, TChild>);
-    private get items();
-    private get groupedItems();
-    private createLookupIndex;
+    protected get commonProps(): ICommonDropDownProps<T, TChild>;
     private getSelectedOption;
     private onItemSelected;
     render(): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.JSX.Element;

package/dist/ReactComponents/DropDown/DropDown.js

@@ -10,130 +10,61 @@ var DropDown = /** @class */ (function (_super) {
     __extends(DropDown, _super);
     function DropDown(props) {
         var _this = _super.call(this, props) || this;
-        _this.listIndexSymbol = Symbol("ValueIndex");
+        _this.allOptions = [];
+        _this.selectedOption = null;
         _this.onItemSelected = _this.onItemSelected.bind(_this);
         _this.fieldInfoContainer = Model.ModelFieldInfo.asModelFieldInfoContainer(_this.props.bind.attachedTo);
         return _this;
     }
-    Object.defineProperty(DropDown.prototype, "isGrouped", {
+    Object.defineProperty(DropDown.prototype, "commonProps", {
         get: function () {
-            return this.props.select.groupDisplayMember !== undefined
-                && this.props.select.childListMember !== undefined;
+            return this.props.select;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DropDown.prototype, "items", {
-        get: function () {
-            var _this = this;
-            var _a, _b;
-            var items = [];
-            if (this.isGrouped) {
-                var groups = this.getItems((_a = this.props.select.items) !== null && _a !== void 0 ? _a : this.props.select.itemSource);
-                var firstChildItem = this.getFirstChildItem(groups, this.props.select.childListMember);
-                if (firstChildItem) {
-                    this.findMembers(firstChildItem);
-                }
-                items = groups.flatMap(function (group) { return group[_this.props.select.childListMember]; });
-            }
-            else {
-                items = this.getItems((_b = this.props.select.items) !== null && _b !== void 0 ? _b : this.props.select.itemSource);
-                if (items && items.length > 0) {
-                    var item = items[0];
-                    this.findMembers(item);
-                }
-            }
-            if (this.props.select.filterPredicate !== undefined) {
-                return items.filter(function (item) { return _this.props.bind.value === item[_this.valueMember] || _this.props.select.filterPredicate(item, undefined); });
-            }
-            else {
-                return items;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DropDown.prototype, "groupedItems", {
-        get: function () {
-            var _this = this;
-            var _a;
-            var groups = this.getItems((_a = this.props.select.items) !== null && _a !== void 0 ? _a : this.props.select.itemSource);
-            var firstChildItem = this.getFirstChildItem(groups, this.props.select.childListMember);
-            if (firstChildItem) {
-                this.findMembers(firstChildItem);
-            }
-            // Handle grouped filtering - filter children in each group
-            var groupsWithFilteredChildren = groups.map(function (group) {
-                var children = group[_this.props.select.childListMember];
-                if (_this.props.select.filterPredicate !== undefined) {
-                    return __assign(__assign({}, group), { options: children.filter(function (item) { return _this.props.bind.value === (item)[_this.valueMember] || _this.props.select.filterPredicate(item, group); }) });
-                }
-                else {
-                    return __assign(__assign({}, group), { options: children });
-                }
-            });
-            // Remove groups that have no children after filtering
-            return groupsWithFilteredChildren.filter(function (group) { return group.options.length > 0; });
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DropDown.prototype.createLookupIndex = function (list) {
-        var _this = this;
-        var index = {};
-        //@ts-ignore
-        list[this.listIndexSymbol] = index;
-        list.forEach(function (item) { return index[item[_this.valueMember]] = item; });
-        return index;
-    };
-    DropDown.prototype.getSelectedOption = function (value, items) {
+    DropDown.prototype.getSelectedOption = function (value) {
+        var _a, _b, _c;
         if (!this.sortByValue) {
             this.props.bind.propertyInfo.hasSortValue = true;
         }
-        if (!this.selectedItem || this.selectedItem[this.valueMember] != value) {
-            var list = items !== null && items !== void 0 ? items : this.items;
-            //@ts-ignore
-            var index = list[this.listIndexSymbol];
-            var indexJustCreated = false;
-            if (!index) {
-                index = this.createLookupIndex(list);
-                indexJustCreated = true;
-            }
-            this.selectedItem = index[value];
-            if (value && !this.selectedItem && !indexJustCreated) {
-                // Index may be out of date.
-                index = this.createLookupIndex(list);
-                this.selectedItem = index[value];
-            }
-            if (!this.selectedItem) {
-                // create default item.
-                this.selectedItem = {};
-                this.selectedItem[this.displayMember] = "";
-                this.selectedItem[this.valueMember] = null;
-            }
-            var displayValue = this.selectedItem[this.displayMember];
+        if (!this.selectedOption || this.selectedOption.value != value) {
+            this.selectedOption = (_a = this.findOptionByValue(this.allOptions, value)) !== null && _a !== void 0 ? _a : null;
+            var displayValue = (_c = (_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : "";
             this.setFieldInfo(this.props.bind, displayValue);
             this.props.bind.sortValue = this.sortByValue ? value : displayValue;
         }
-        return this.selectedItem;
+        return this.selectedOption;
     };
     DropDown.prototype.onItemSelected = function (e) {
-        this.selectedItem = null;
-        var boundItem = this.getSelectedOption(e.target.value);
-        if (boundItem && boundItem[this.valueMember] !== undefined) {
+        this.selectedOption = null;
+        var value = e.target.value;
+        var parsedValue = parseInt(e.target.value);
+        if (!isNaN(parsedValue)) {
+            value = parsedValue;
+        }
+        var selectedOption = this.getSelectedOption(value);
+        if (!selectedOption && (value === "false" || value === "true")) {
+            selectedOption = this.getSelectedOption(value === "true");
+        }
+        if (selectedOption) {
             // Use the bound item to get the correct data type of the value member;
-            this.props.bind.value = boundItem[this.valueMember];
+            this.props.bind.value = selectedOption.value;
         }
         else {
-            this.props.bind.value = e.target.value;
+            this.props.bind.value = this.defaultItemValue;
         }
         if (this.props.select.onItemSelected !== undefined) {
-            this.props.select.onItemSelected((boundItem[this.valueMember] === undefined ? undefined : boundItem));
+            if (selectedOption) {
+                this.props.select.onItemSelected(selectedOption.item, selectedOption.itemParent);
+            }
+            else {
+                this.props.select.onItemSelected(undefined, undefined);
+            }
         }
     };
     DropDown.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         var splitProps = BindPropsHelper.normaliseEditorProps(this, this.props);
         var domProps = BindPropsHelper.autoSetDomProperties(splitProps, this.context);
         domProps.className = Utils.joinWithSpaces(domProps.className, splitProps.isBootstrap ? "form-control form-select" : "neo-forms-editor");
@@ -146,51 +77,44 @@ var DropDown = /** @class */ (function (_super) {
         }
         var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(domProps, !splitProps.inGroup);
-        var items = this.items;
-        var selectedItem = this.getSelectedOption(this.props.bind.value, items); // This sets the sort value to allow sorting of drop downs in grids. 
+        this.defaultItemValue = (_c = (_b = splitProps.select) === null || _b === void 0 ? void 0 : _b.defaultValue) !== null && _c !== void 0 ? _c : null;
+        this.allOptions = this.mapItemsToOptions(this.getItems((_d = this.props.select.items) !== null && _d !== void 0 ? _d : this.props.select.itemSource));
+        var options = this.allOptions;
+        var selectedOption = this.getSelectedOption(this.props.bind.value); // This sets the sort value to allow sorting of drop downs in grids. 
         var value = this.props.bind.value;
-        var valueIsEmpty = !value;
-        var notFound = items.length > 0 && !valueIsEmpty && selectedItem[this.valueMember] !== value;
-        var addBlankItem = ((_c = (_b = splitProps.select) === null || _b === void 0 ? void 0 : _b.allowNulls) !== null && _c !== void 0 ? _c : this.props.bind.propertyInfo.allowNulls) || valueIsEmpty || notFound;
-        if (addBlankItem && items.find(function (item) { return item[_this.valueMember] === null || item[_this.valueMember] === "" || (valueIsEmpty && item[_this.valueMember] === value); })) {
-            // If there is an item with a null value, don't add a blank drop down item.
-            addBlankItem = false;
-        }
+        var valueIsEmpty = ((_e = splitProps.select) === null || _e === void 0 ? void 0 : _e.defaultValue) !== undefined ? (value === splitProps.select.defaultValue) : !value;
+        var notFound = options.length > 0 && !valueIsEmpty && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== value;
+        var allowDefault = (_j = (_g = (_f = splitProps.select) === null || _f === void 0 ? void 0 : _f.allowDefault) !== null && _g !== void 0 ? _g : (_h = splitProps.select) === null || _h === void 0 ? void 0 : _h.allowNulls) !== null && _j !== void 0 ? _j : this.props.bind.propertyInfo.allowNulls;
+        var addDefaultItem = (!this.hasDefaultItem && (allowDefault || valueIsEmpty)) || notFound;
         var control;
         if (this.isLoading) {
             control = React.createElement("div", { className: "form-control form-control-loading" },
                 React.createElement("div", { className: "spinner-border" }));
         }
-        else if ((_d = splitProps.select) === null || _d === void 0 ? void 0 : _d.renderAsText) {
-            control = React.createElement("span", null, selectedItem ? selectedItem[this.displayMember] : "");
+        else if ((_k = splitProps.select) === null || _k === void 0 ? void 0 : _k.renderAsText) {
+            control = React.createElement("span", null, selectedOption ? selectedOption.label : "");
         }
         else if (splitProps.editor.isReadOnly) {
-            control = React.createElement("input", __assign({ type: "text", value: selectedItem ? selectedItem[this.displayMember] : "", ref: splitProps.editor.inputElement }, domProps));
+            control = React.createElement("input", __assign({ type: "text", value: selectedOption ? selectedOption.label : "", ref: splitProps.editor.inputElement }, domProps));
         }
         else {
             if (domProps.readOnly) {
                 domProps.disabled = true;
             }
-            var valueIsNull = value === undefined || value === null;
-            var nullText = (valueIsNull || ((_e = splitProps.select) === null || _e === void 0 ? void 0 : _e.deSelectText) === undefined) ? (_f = splitProps.select) === null || _f === void 0 ? void 0 : _f.nullText : (_g = splitProps.select) === null || _g === void 0 ? void 0 : _g.deSelectText;
-            if (valueIsNull) {
+            var valueIsDefault = value === undefined || value === this.defaultItemValue;
+            var nullText = (valueIsDefault || ((_l = splitProps.select) === null || _l === void 0 ? void 0 : _l.deSelectText) === undefined) ? (_m = splitProps.select) === null || _m === void 0 ? void 0 : _m.nullText : (_o = splitProps.select) === null || _o === void 0 ? void 0 : _o.deSelectText;
+            if (valueIsDefault) {
                 domProps.className = Utils.joinWithSpaces(domProps.className, "select-no-value");
             }
-            var childListMember = void 0;
-            var groupDisplayMember_1;
-            if (this.isGrouped) {
-                childListMember = this.props.select.childListMember;
-                groupDisplayMember_1 = this.props.select.groupDisplayMember;
-            }
+            var filteredOptions = ((_p = splitProps.select) === null || _p === void 0 ? void 0 : _p.filterPredicate) === undefined ? options : this.filterOptions(options, splitProps.select.filterPredicate, this.props.bind);
             control =
-                React.createElement("select", __assign({ value: valueIsNull ? "" : value, onChange: this.onItemSelected, ref: splitProps.editor.inputElement }, domProps),
-                    addBlankItem && React.createElement("option", { className: "option-default" }, notFound ? "(Not found): ".concat(value) : nullText),
+                React.createElement("select", __assign({ value: value !== null && value !== void 0 ? value : "", onChange: this.onItemSelected, ref: splitProps.editor.inputElement }, domProps),
+                    addDefaultItem && React.createElement("option", { className: "option-default" }, notFound ? "(Not found): ".concat(value) : nullText),
                     !this.isGrouped &&
-                        this.items.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); }),
+                        filteredOptions.map(function (option) { return (React.createElement("option", { value: option.value, key: option.value }, option.label)); }),
                     this.isGrouped &&
-                        this.groupedItems.map(function (group) {
-                            var children = group.options;
-                            return React.createElement("optgroup", { label: group[groupDisplayMember_1], key: group[groupDisplayMember_1] }, (children.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); })));
+                        filteredOptions.map(function (group) {
+                            return React.createElement("optgroup", { label: group.label, key: group.label }, (group.options.map(function (item) { return (React.createElement("option", { value: item.value, key: item.value }, item.label)); })));
                         }));
         }
         return (InputHelpers.surroundWithInputGroup(control, splitProps.editor, domProps));

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

@@ -1,15 +1,49 @@
 import { Data, Model } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 export type ItemSource<T> = T[] | Promise<T[]> | Data.IAsyncDataSource<T[]> | Data.IArrayCacheEntry<T>;
-export declare abstract class DropDownBase<T, TProps, TChild = T> extends ComponentBase<TProps> {
+export interface IOption<T = any> {
+    value: string | number;
+    label: string;
+    item?: T;
+    itemParent?: any;
+    options?: IOption[];
+}
+export interface ICommonDropDownProps<T, TChild = T> {
+    /**
+     * The group member to use as the display for grouped items.
+     */
+    groupDisplayMember?: NoInfer<keyof T>;
+    /**
+     * Name of the property on the parent which contains a child list.
+     */
+    childListMember?: NoInfer<keyof T>;
+}
+export declare abstract class DropDownBase<T, TChild, TProps> extends ComponentBase<TProps> {
     protected valueMember: keyof TChild;
     protected displayMember: keyof TChild;
+    protected defaultItemValue: any;
+    protected hasDefaultItem: boolean;
     protected findMembers(item: any): void;
     protected isLoading: boolean;
     protected dataSource: Data.IAsyncDataSource<T[]> | null;
     protected cachedDataSource: Data.IDataCacheEntry | null;
     protected fieldInfoContainer: Model.IModelFieldInfoContainer | null;
     protected getItems(itemSource: ItemSource<T>): T[];
+    /** Returns either a flat list, or grouped options based on the provided props. */
+    protected mapItemsToOptions(items: T[]): IOption[];
+    protected mapGroupedItemsToOptions(groupedItems: T[]): IOption<any>[];
+    private mapChildItemsToOptions;
+    /**
+     * Finds an option in the items list by value.
+     * Handles both flat lists and grouped (nested) items.
+     * @param items The items array to search in
+     * @param value The value to search for
+     * @returns The matching IOption or undefined if not found
+     */
+    protected findOptionByValue(items: IOption[] | undefined, value: string | number | boolean): IOption | undefined;
+    protected filterOptions(options: IOption[], filterPredicate: (item: TChild, itemParent?: T) => boolean, bindProperty: Model.IPropertyInstance | undefined): IOption<any>[];
+    protected abstract get commonProps(): ICommonDropDownProps<T, TChild>;
+    protected get isGrouped(): boolean;
     afterRender(isInitial: boolean): Promise<void>;
     private fieldDisplayInfo;
     protected setFieldInfo(bindProperty: Model.IPropertyInstance, displayValue: string, readableName?: string): void;

package/dist/ReactComponents/DropDown/DropDownBase.js

@@ -1,4 +1,4 @@
-import { __awaiter, __extends, __generator } from "tslib";
+import { __assign, __awaiter, __extends, __generator } from "tslib";
 import { Data } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 import LookupHelper from './LookupHelper';
@@ -6,6 +6,8 @@ var DropDownBase = /** @class */ (function (_super) {
     __extends(DropDownBase, _super);
     function DropDownBase() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.defaultItemValue = null;
+        _this.hasDefaultItem = false;
         _this.isLoading = false;
         _this.dataSource = null;
         _this.cachedDataSource = null;
@@ -52,6 +54,103 @@ var DropDownBase = /** @class */ (function (_super) {
         }
         return items;
     };
+    /** Returns either a flat list, or grouped options based on the provided props. */
+    DropDownBase.prototype.mapItemsToOptions = function (items) {
+        this.hasDefaultItem = false;
+        if (this.isGrouped) {
+            var firstChildItem = this.getFirstChildItem(items, this.commonProps.childListMember);
+            if (firstChildItem) {
+                this.findMembers(firstChildItem);
+            }
+            return this.mapGroupedItemsToOptions(items);
+        }
+        if (items.length) {
+            this.findMembers(items[0]);
+        }
+        return this.mapChildItemsToOptions(items);
+    };
+    DropDownBase.prototype.mapGroupedItemsToOptions = function (groupedItems) {
+        var _this = this;
+        var groupedOptions = groupedItems.map(function (groupItem) {
+            var childOptions = _this.mapChildItemsToOptions(groupItem[_this.commonProps.childListMember], groupItem);
+            return {
+                item: groupItem,
+                itemParent: null,
+                label: groupItem[_this.commonProps.groupDisplayMember],
+                options: childOptions
+            };
+        });
+        return groupedOptions;
+    };
+    DropDownBase.prototype.mapChildItemsToOptions = function (childItems, parentItem) {
+        var _this = this;
+        return childItems.map(function (childItem) {
+            var value = childItem[_this.valueMember];
+            if (value === _this.defaultItemValue) {
+                _this.hasDefaultItem = true;
+            }
+            return {
+                item: childItem,
+                itemParent: parentItem,
+                value: value,
+                label: childItem[_this.displayMember]
+            };
+        });
+    };
+    /**
+     * Finds an option in the items list by value.
+     * Handles both flat lists and grouped (nested) items.
+     * @param items The items array to search in
+     * @param value The value to search for
+     * @returns The matching IOption or undefined if not found
+     */
+    DropDownBase.prototype.findOptionByValue = function (items, value) {
+        if (!items) {
+            return undefined;
+        }
+        if (this.isGrouped) {
+            // For grouped items, search within child options of each group
+            for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+                var group = items_1[_i];
+                if (group.options) {
+                    var childMatch = group.options.find(function (option) { return option.value === value; });
+                    if (childMatch) {
+                        return childMatch;
+                    }
+                }
+            }
+            return undefined;
+        }
+        else {
+            // For flat items, search directly
+            return items.find(function (item) { return item.value === value; });
+        }
+    };
+    DropDownBase.prototype.filterOptions = function (options, filterPredicate, bindProperty) {
+        var filterPredicateIncludeSelected;
+        if (bindProperty) {
+            var bindValue_1 = bindProperty.value;
+            filterPredicateIncludeSelected = function (option) { return bindValue_1 === option.value || filterPredicate(option.item, option.itemParent); };
+        }
+        else {
+            filterPredicateIncludeSelected = function (option) { return filterPredicate(option.item, option.itemParent); };
+        }
+        if (this.isGrouped) {
+            var groupsWithFilteredChildren = options.map(function (group) { return (__assign(__assign({}, group), { options: group.options.filter(filterPredicateIncludeSelected) })); });
+            // Remove groups that have no children after filtering
+            return groupsWithFilteredChildren.filter(function (group) { return group.options.length > 0; });
+        }
+        else {
+            return options.filter(filterPredicateIncludeSelected);
+        }
+    };
+    Object.defineProperty(DropDownBase.prototype, "isGrouped", {
+        get: function () {
+            return this.commonProps.groupDisplayMember !== undefined && this.commonProps.childListMember !== undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
     DropDownBase.prototype.afterRender = function (isInitial) {
         return __awaiter(this, void 0, void 0, function () {
             var _a, bindProperty, displayValue, readableName, fieldInfo;

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, Omit<React.HTMLProps<HTMLTableCellElement>, "children"> {
+export interface IButtonColumnProps extends INeoCommonColumnProps {
     /** Item to pass to edit and delete callbacks. Defaults to the current rows item */
     item?: any;
     /** Text to show in the header. */
@@ -34,16 +34,20 @@ export interface IButtonColumnProps extends INeoCommonColumnProps, Omit<React.HT
     childAlignment?: "left" | "right";
     children?: React.ReactNode | (() => React.ReactNode);
 }
-export declare class ButtonColumn extends ComponentBase<IButtonColumnProps> {
+type TableCellProps = Omit<React.HTMLProps<HTMLTableCellElement>, "children">;
+export declare class ButtonColumn extends ComponentBase<IButtonColumnProps & TableCellProps> {
     static isColumnComponent: boolean;
     static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
     context: React.ContextType<typeof GridContext>;
-    constructor(props: IButtonColumnProps);
+    constructor(props: IButtonColumnProps & TableCellProps);
     private item;
     private section;
     protected onFirstRender(): void;
     private get itemAsModel();
     onDelete(): Promise<void>;
-    render(): React.JSX.Element;
+    render(): React.JSX.Element | null;
+    private renderHeader;
+    private renderBody;
+    private renderFooter;
 }
 export {};

package/dist/ReactComponents/Grid/ButtonColumn.js

@@ -60,28 +60,41 @@ var ButtonColumn = /** @class */ (function (_super) {
         });
     };
     ButtonColumn.prototype.render = function () {
-        var _a, _b;
         this.onRender();
-        var _c = this.props, item = _c.item, label = _c.label, showDefaultButtonText = _c.showDefaultButtonText, buttonSize = _c.buttonSize, showDelete = _c.showDelete, editButton = _c.editButton, deleteButton = _c.deleteButton, viewButton = _c.viewButton, childAlignment = _c.childAlignment, hideBelow = _c.hideBelow, hideAbove = _c.hideAbove, alignment = _c.alignment, domProps = __rest(_c, ["item", "label", "showDefaultButtonText", "buttonSize", "showDelete", "editButton", "deleteButton", "viewButton", "childAlignment", "hideBelow", "hideAbove", "alignment"]);
+        var _a = this.props, item = _a.item, label = _a.label, showDefaultButtonText = _a.showDefaultButtonText, buttonSize = _a.buttonSize, showDelete = _a.showDelete, editButton = _a.editButton, deleteButton = _a.deleteButton, viewButton = _a.viewButton, childAlignment = _a.childAlignment, hideBelow = _a.hideBelow, hideAbove = _a.hideAbove, alignment = _a.alignment, headerProps = _a.headerProps, cellProps = _a.cellProps, suppressHeader = _a.suppressHeader, domProps = __rest(_a, ["item", "label", "showDefaultButtonText", "buttonSize", "showDelete", "editButton", "deleteButton", "viewButton", "childAlignment", "hideBelow", "hideAbove", "alignment", "headerProps", "cellProps", "suppressHeader"]);
         domProps.className = Utils.joinWithSpaces("neo-grid-button-column", domProps.className);
         domProps.className = ColumnHelper.addCommonClasses(domProps.className, this.props);
+        return (this.section !== "body" ?
+            (this.section === "header" ?
+                (suppressHeader ? null : this.renderHeader(label, domProps, headerProps)) :
+                (suppressHeader ? null : this.renderFooter(domProps, headerProps))) :
+            this.renderBody(this.props, domProps, cellProps));
+    };
+    ButtonColumn.prototype.renderHeader = function (label, domProps, headerProps) {
+        if (headerProps) {
+            Object.assign(domProps, headerProps);
+        }
+        return React.createElement("th", __assign({}, domProps), label);
+    };
+    ButtonColumn.prototype.renderBody = function (props, domProps, cellProps) {
+        var _a, _b;
         var buttonColumnDefaults = Misc.Settings.grid.buttonColumnButtons;
         var editButtonDefaults = __assign(__assign({}, buttonColumnDefaults), Misc.Settings.grid.editButton);
         var deleteButtonDefaults = __assign(__assign({}, buttonColumnDefaults), Misc.Settings.grid.deleteButton);
         var viewButtonDefaults = __assign(__assign({}, buttonColumnDefaults), Misc.Settings.grid.viewButton);
-        if (!showDefaultButtonText) {
+        if (!props.showDefaultButtonText) {
             editButtonDefaults.text = "";
             deleteButtonDefaults.text = "";
             viewButtonDefaults.text = "";
         }
-        if (buttonSize) {
-            editButtonDefaults.size = buttonSize;
-            deleteButtonDefaults.size = buttonSize;
-            viewButtonDefaults.size = buttonSize;
+        if (props.buttonSize) {
+            editButtonDefaults.size = props.buttonSize;
+            deleteButtonDefaults.size = props.buttonSize;
+            viewButtonDefaults.size = props.buttonSize;
         }
-        var editButtonOptions = editButton ? Utils.populatePartialWithDefaults(editButton, editButtonDefaults) : null;
-        var deleteButtonOptions = (deleteButton || showDelete) ? Utils.populatePartialWithDefaults(deleteButton, deleteButtonDefaults) : null;
-        var viewButtonOptions = viewButton ? Utils.populatePartialWithDefaults(viewButton, viewButtonDefaults) : null;
+        var editButtonOptions = props.editButton ? Utils.populatePartialWithDefaults(props.editButton, editButtonDefaults) : null;
+        var deleteButtonOptions = (props.deleteButton || props.showDelete) ? Utils.populatePartialWithDefaults(props.deleteButton, deleteButtonDefaults) : null;
+        var viewButtonOptions = props.viewButton ? Utils.populatePartialWithDefaults(props.viewButton, viewButtonDefaults) : null;
         if (deleteButtonOptions) {
             if (!deleteButtonOptions.onClick) {
                 deleteButtonOptions.onClick = this.onDelete;
@@ -95,13 +108,20 @@ var ButtonColumn = /** @class */ (function (_super) {
             viewButtonOptions && React.createElement(NeoButton, __assign({}, viewButtonOptions)),
             editButtonOptions && React.createElement(NeoButton, __assign({}, editButtonOptions)),
             deleteButtonOptions && React.createElement(NeoButton, __assign({}, deleteButtonOptions)));
-        var children = this.props.children instanceof Function ? this.props.children() : this.props.children;
-        return (this.section !== "body" ?
-            React.createElement("th", __assign({}, domProps), this.section === "header" && label) :
-            React.createElement("td", __assign({}, domProps),
-                childAlignment === "right" ? buttons : undefined,
-                React.Children.map(children, function (c) { return setButtonProps(c); }),
-                childAlignment !== "right" ? buttons : undefined));
+        var children = props.children instanceof Function ? props.children() : props.children;
+        if (cellProps) {
+            Object.assign(domProps, cellProps);
+        }
+        return (React.createElement("td", __assign({}, domProps),
+            props.childAlignment === "right" ? buttons : undefined,
+            React.Children.map(children, function (c) { return setButtonProps(c); }),
+            props.childAlignment !== "right" ? buttons : undefined));
+    };
+    ButtonColumn.prototype.renderFooter = function (domProps, headerProps) {
+        if (headerProps) {
+            Object.assign(domProps, headerProps);
+        }
+        return React.createElement("th", __assign({}, domProps));
     };
     ButtonColumn.isColumnComponent = true;
     ButtonColumn.contextType = GridContext;

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

@@ -43,7 +43,7 @@ export default class Column<TData> extends ComponentBase<INeoColumnProps<TData>>
     private headerClick;
     refreshStateObserver(props: IBindableEditorProps): void;
     componentWillUnmount(): void;
-    render(): React.JSX.Element;
+    render(): React.JSX.Element | null;
     private renderHeader;
     private renderBody;
     private renderFooter;

package/dist/ReactComponents/Grid/Column.js

@@ -91,7 +91,7 @@ var Column = /** @class */ (function (_super) {
     Column.prototype.render = function () {
         this.onRender();
         var allProps = BindPropsHelper.normaliseContainerProps(this, this.props, false);
-        var _a = allProps.containerDom, width = _a.width, hideBelow = _a.hideBelow, hideAbove = _a.hideAbove, headerTooltip = _a.headerTooltip, cellTooltip = _a.cellTooltip, alignment = _a.alignment, sort = _a.sort, sum = _a.sum, footerContent = _a.footerContent, headerClassName = _a.headerClassName, cellClassName = _a.cellClassName, onHeaderClick = _a.onHeaderClick, domProps = __rest(_a, ["width", "hideBelow", "hideAbove", "headerTooltip", "cellTooltip", "alignment", "sort", "sum", "footerContent", "headerClassName", "cellClassName", "onHeaderClick"]);
+        var _a = allProps.containerDom, width = _a.width, hideBelow = _a.hideBelow, hideAbove = _a.hideAbove, headerTooltip = _a.headerTooltip, cellTooltip = _a.cellTooltip, alignment = _a.alignment, sort = _a.sort, invertSortIcon = _a.invertSortIcon, sum = _a.sum, footerContent = _a.footerContent, headerClassName = _a.headerClassName, cellClassName = _a.cellClassName, headerProps = _a.headerProps, cellProps = _a.cellProps, suppressHeader = _a.suppressHeader, onHeaderClick = _a.onHeaderClick, domProps = __rest(_a, ["width", "hideBelow", "hideAbove", "headerTooltip", "cellTooltip", "alignment", "sort", "invertSortIcon", "sum", "footerContent", "headerClassName", "cellClassName", "headerProps", "cellProps", "suppressHeader", "onHeaderClick"]);
         if (allProps.bind !== undefined) {
             if (!this.controlType || this.isHeader) {
                 this.controlType = BindPropsHelper.getControlType(allProps);
@@ -131,14 +131,17 @@ var Column = /** @class */ (function (_super) {
             }
         }
         this.refreshStateObserver(allProps.editor);
-        return this.isHeader ? this.renderHeader(allProps, domProps, headerTooltip, headerClassName) :
-            this.isFooter ? this.renderFooter(allProps, domProps) :
-                this.renderBody(allProps, domProps, cellTooltip, cellClassName);
+        return this.isHeader ? (suppressHeader ? null : this.renderHeader(allProps, domProps, headerTooltip, headerClassName, headerProps)) :
+            this.isFooter ? (suppressHeader ? null : this.renderFooter(allProps, domProps, headerProps)) :
+                this.renderBody(allProps, domProps, cellTooltip, cellClassName, cellProps);
     };
-    Column.prototype.renderHeader = function (props, domProps, tooltip, headerClassName) {
+    Column.prototype.renderHeader = function (props, domProps, tooltip, headerClassName, headerProps) {
         var _this = this;
         var sortIcon = null;
         var sortProperty = this.getSortProperty();
+        if (headerProps) {
+            Object.assign(domProps, headerProps);
+        }
         domProps.className = Utils.joinWithSpaces(domProps.className, headerClassName);
         if (sortProperty && !this.suppressSort) {
             var sortInfo = this.context.dataView.sortInfo.find(function (c) { return c.column === sortProperty.propertyInfo; });
@@ -154,7 +157,7 @@ var Column = /** @class */ (function (_super) {
             sortIcon &&
                 React.createElement("i", { className: "column-sort-icon fa fa-" + sortIcon })));
     };
-    Column.prototype.renderBody = function (props, domProps, cellTooltip, cellClassName) {
+    Column.prototype.renderBody = function (props, domProps, cellTooltip, cellClassName, cellProps) {
         var _this = this;
         var editorProps = props.editor;
         var containerProps = props.container;
@@ -188,6 +191,9 @@ var Column = /** @class */ (function (_super) {
                 editor = BindPropsHelper.getFormControl(props);
             }
         }
+        if (cellProps) {
+            Object.assign(domProps, cellProps);
+        }
         domProps.className = Utils.joinWithSpaces(domProps.className, cellClassName);
         return (React.createElement("td", __assign({ "data-tip": cellTooltip }, domProps),
             !containerProps.suppressDefaultContent && (editor !== undefined ?
@@ -197,10 +203,13 @@ var Column = /** @class */ (function (_super) {
             containerProps.bindContext &&
                 React.createElement(FormContext.Consumer, null, function (value) { return (React.createElement(FormContext.Provider, { value: __assign(__assign({}, value), { parentType: EditorParentType.Column, bindProperty: containerProps.bindContext }) }, _this.props.children instanceof Function ? _this.props.children() : _this.props.children)); })));
     };
-    Column.prototype.renderFooter = function (props, domProps) {
+    Column.prototype.renderFooter = function (props, domProps, headerProps) {
         var _this = this;
         var colProps = props.containerDom;
         var hasSummary = (colProps.sum && !!props.bind) || colProps.footerContent;
+        if (headerProps) {
+            Object.assign(domProps, headerProps);
+        }
         return (React.createElement("th", __assign({}, domProps), hasSummary &&
             React.createElement(Observer, null, function () { return colProps.footerContent ? colProps.footerContent(_this.context.dataView.filteredItems) :
                 _this.numFormatState(props.bind.propertyInfo, props.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(_this.context.dataView.filteredItems.sum(props.bind.propertyInfo)); })));

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

@@ -6,7 +6,14 @@ export interface INeoCommonColumnProps {
     hideAbove?: Components.breakpoint;
     /** Set the alignment of the column. */
     alignment?: "left" | "center" | "right";
+    /** Props to apply to the header cell. */
+    headerProps?: TableCellSectionProps;
+    /** Props to apply to body cells. */
+    cellProps?: TableCellSectionProps;
+    /** If set, the header cell for this column will be hidden. */
+    suppressHeader?: boolean;
 }
+export type TableCellSectionProps = Omit<React.HTMLProps<HTMLTableCellElement>, "className" | "onClick">;
 export declare class ColumnHelper {
     static addCommonClasses(className: string | undefined, props: INeoCommonColumnProps): string | undefined;
 }

package/dist/ReactComponents/Grid/Row.js

@@ -21,9 +21,10 @@ var Row = /** @class */ (function (_super) {
         if (!this.context.doneStaticSetup) {
             this.context.doneStaticSetup = true;
             React.Children.forEach(this.props.children, function (child) {
+                var _a, _b, _c;
                 if (child) {
                     var childProps = child.props;
-                    _this.context.columnCount += (childProps ? childProps.colSpan || 1 : 1);
+                    _this.context.columnCount += (childProps ? ((_c = (_b = (_a = childProps.cellProps) === null || _a === void 0 ? void 0 : _a.colSpan) !== null && _b !== void 0 ? _b : childProps.colSpan) !== null && _c !== void 0 ? _c : 1) : 1);
                     if (childProps && (childProps.sum || childProps.footerContent)) {
                         _this.context.hasSummaries = true;
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
     "typescript": "5.9.3"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.6.1",
+    "@singularsystems/neo-core": "1.6.3",
     "@types/react-color": "3.0.13",
     "axios": "1.13.5",
     "inversify": "6.0.2",

package/styles/Card.scss

@@ -37,4 +37,23 @@
             border-bottom: 0;
         }
     }
+
+    &.card--with-description {
+        .card-header {
+            .card-header-title {
+                display: flex;
+                align-items: center;
+
+                .neo-icon {
+                    margin-right: 1rem;
+                }
+            }
+        }
+        
+        .card-title-description {
+            font-size: 14px;
+            line-height: 1.2;
+            color: $text-muted;
+        }
+    }
 }