@singularsystems/neo-react 1.1.3 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# Version 1.2
+
+Version 1.2 upgrades React to v19. A few of the other dependencies were also updated, which will need to be updated in each project.
+
+Please take the following steps when upgrading:
+
+- Update `react`, `react-dom` and their types packages to the latest version.
+- Update `react-select` to at least 5.10.0.
+- Update `react-custom-scrollbars` and its types to the latest version.
+- If you are using `rc-slider`. 
+    - Remove the `@types/rc-slider` package, and update `rc-slider` to the latest version.
+    - In your app module, remove the `Range` import, and remove this line: `container.bind(Types.Neo.Components.Range).toConstantValue(Range);`
+- If you are using `react-color`.
+    - Update the package, and types to the latest version.
+- Under React 19, JSX is no longer a global import. You may receive errors such as "Cannot find namespace 'JSX'." 
+    - To rectify, change `JSX.Element` to `React.ReactNode`.
+    - If that doesn't work, you can import JSX from React. E.g. `import React, { JSX } from 'React';`
+- Finally, run `yarn dedupe` to make sure all old transitive packages reference the project version.
+
 # Version 1.1
 
 Version 1.1 removes the `react-router` dependency. This requires updates to your project which are explained in [this guide](./docs/RemoveReactRouter.md).

package/dist/Extensions.d.ts

@@ -0,0 +1,8 @@
+declare module "@singularsystems/neo-core/dist/Validation/DisplayHelper" {
+    interface ValidationDisplayInfo {
+        applyToDom(elementProps: React.HTMLProps<HTMLElement> & {
+            [key: string]: any;
+        }, addTooltip: boolean): void;
+    }
+}
+export {};

package/dist/Extensions.js

@@ -0,0 +1,11 @@
+import { Utils } from "@singularsystems/neo-core";
+import { ValidationDisplayInfo } from "@singularsystems/neo-core/dist/Validation/DisplayHelper";
+ValidationDisplayInfo.prototype.applyToDom = function (elementProps, addTooltip) {
+    if (this.severity) {
+        elementProps.className = Utils.joinWithSpaces(elementProps.className, this.editorClassName);
+        if (addTooltip) {
+            elementProps["data-tip"] = this.displayText;
+            elementProps["data-tip-class"] = this.additionalClassName;
+        }
+    }
+};

package/dist/Modules/Types.d.ts

@@ -1,7 +1,6 @@
 import { AppServices } from '@singularsystems/neo-core';
 import { INavigationHelper } from '../Routing/NavigationHelper';
 import { RoutingState } from '../Routing/RoutingState';
-import Slider, { Range } from 'rc-slider';
 import { SketchPicker } from 'react-color';
 import { IColorPicker } from '../ReactComponents/IColorPicker';
 import type AsyncSelect from 'react-select/async';
@@ -12,8 +11,7 @@ import { IIconFactory } from '../ReactComponents/Icons/IIconFactory';
 import { IPageLeaveHandler } from "../Routing/PageLeaveHandler";
 declare const NeoReactTypes: {
     Components: {
-        Slider: AppServices.ServiceIdentifier<typeof Slider>;
-        Range: AppServices.ServiceIdentifier<typeof Range>;
+        Slider: AppServices.ServiceIdentifier<import("react").ForwardRefExoticComponent<import("rc-slider").SliderProps<number | number[]> & import("react").RefAttributes<import("rc-slider").SliderRef>>>;
         /**
          * Sketchpicker (from 'react-color' package) component used by the color picker.
          * It is recommended to use the `ColorPicker` type and bind to HexColorPicker from the 'react-colorful' package.

package/dist/Modules/Types.js

@@ -2,7 +2,6 @@ import { __assign } from "tslib";
 import { AppServices } from '@singularsystems/neo-core';
 var NeoReactTypes = __assign(__assign({}, AppServices.NeoTypes), { Components: {
         Slider: new AppServices.ServiceIdentifier("NeoReact.Slider"),
-        Range: new AppServices.ServiceIdentifier("NeoReact.Range"),
         /**
          * Sketchpicker (from 'react-color' package) component used by the color picker.
          * It is recommended to use the `ColorPicker` type and bind to HexColorPicker from the 'react-colorful' package.

package/dist/ReactComponents/BootstrapUtils.d.ts

@@ -3,6 +3,8 @@ declare class BootstrapUtils {
     constructor();
     /** Bootstrap version is before v5 */
     get isPre5(): boolean;
+    /** Class prefix (without -) for start margin / left margin. */
+    get marginS(): "ml" | "ms";
     /** Class prefix (without -) for end margin / right margin. */
     get marginE(): "mr" | "me";
     /**

package/dist/ReactComponents/BootstrapUtils.js

@@ -11,6 +11,14 @@ var BootstrapUtils = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(BootstrapUtils.prototype, "marginS", {
+        /** Class prefix (without -) for start margin / left margin. */
+        get: function () {
+            return this.isPre5 ? "ml" : "ms";
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(BootstrapUtils.prototype, "marginE", {
         /** Class prefix (without -) for end margin / right margin. */
         get: function () {

package/dist/ReactComponents/Button.d.ts

@@ -9,8 +9,8 @@ export default class Button extends ComponentBase<IButtonProps, IButtonState> {
     state: {
         isExpanded: boolean;
     };
-    btnGroupDom: React.RefObject<HTMLDivElement>;
-    menuDom: React.RefObject<HTMLDivElement>;
+    btnGroupDom: React.RefObject<HTMLDivElement | null>;
+    menuDom: React.RefObject<HTMLDivElement | null>;
     private iconFactory;
     private windowClickHandler;
     private positionHelper?;
@@ -21,6 +21,7 @@ export default class Button extends ComponentBase<IButtonProps, IButtonState> {
     private windowClicked;
     afterRender(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    protected suppressIcon(icon: any): boolean;
 }
 export {};

package/dist/ReactComponents/Button.js

@@ -61,14 +61,18 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _this = this;
         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"]);
+        var _b = this.props, isSubmit = _b.isSubmit, variant = _b.variant, size = _b.size, isOutline = _b.isOutline, isFlat = _b.isFlat, 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", "isFlat", "icon", "iconAlignment", "text", "menuItems", "splitMenu", "menuAlignment", "buttonGroupClassName", "tooltip", "task", "isBusy", "pulse", "customVariant"]);
         native.type = isSubmit ? "submit" : "button";
         var variantClassName = ((_a = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _a !== void 0 ? _a : "primary");
         var isLoading = isBusy || (task === null || task === void 0 ? void 0 : task.isBusy);
         var isDropDown = menuItems && menuItems.length;
-        var buttonClasses = "btn btn-" + (isOutline ? "outline-" : "") + variantClassName;
+        var buttonClasses = "btn btn-" + ((isFlat || isOutline) ? "outline-" : "") + variantClassName;
         if (size)
             buttonClasses += " btn-" + size;
+        if (isFlat)
+            buttonClasses += " btn-flat";
+        if (isFlat && isOutline)
+            buttonClasses += " btn-outline";
         if (isDropDown && !splitMenu) {
             buttonClasses += " dropdown-toggle";
             native.onClick = this.showMenu;
@@ -93,7 +97,7 @@ var Button = /** @class */ (function (_super) {
             innerText = text;
         var iconSpace = icon && innerText ? " " : "";
         // Icon
-        var iconElement = (isLoading || !innerText || !Misc.Settings.buttons.suppressIcons) ? this.iconFactory.getIconComponent(icon, iconStyle) : undefined;
+        var iconElement = (isLoading || !innerText || !this.suppressIcon(icon)) ? this.iconFactory.getIconComponent(icon, iconStyle) : undefined;
         // Tooltip
         if (tooltip) {
             Tooltip.setDomProperties(native, tooltip);
@@ -136,6 +140,9 @@ var Button = /** @class */ (function (_super) {
         }
         return root;
     };
+    Button.prototype.suppressIcon = function (icon) {
+        return Misc.Settings.buttons.suppressIcons || Misc.Settings.icons.shouldSuppress({ icon: icon, component: "button", props: this.props });
+    };
     Button = __decorate([
         observer,
         __metadata("design:paramtypes", [Object])

package/dist/ReactComponents/Card.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { Model } from '@singularsystems/neo-core';
 interface ICardProps {
     /** Icon to show next to title in header. */
@@ -21,6 +21,6 @@ interface ICardProps {
 export default class Card extends React.Component<ICardProps & React.HTMLProps<HTMLDivElement>> {
     private iconFactory;
     private expandState;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export {};

package/dist/ReactComponents/Card.js

@@ -39,6 +39,9 @@ var Card = /** @class */ (function (_super) {
             }
             className += " card-collapsible";
         }
+        if (icon && Misc.Settings.icons.shouldSuppress({ icon: icon, component: "card", props: this.props })) {
+            icon = undefined;
+        }
         var body = React.createElement("div", { className: "card-body" },
             useCustomScrollbar && React.createElement(Scrollbar, null, children),
             !useCustomScrollbar && children);

package/dist/ReactComponents/Collapsable.d.ts

@@ -14,7 +14,7 @@ interface ICollapsableProps extends React.HTMLProps<HTMLDivElement> {
  * Uses the collapsable and collapsed css classes.
  */
 export default class Collapsable extends ComponentBase<ICollapsableProps> {
-    protected containerRef: React.RefObject<HTMLDivElement>;
+    protected containerRef: React.RefObject<HTMLDivElement | null>;
     protected animationHelper?: Components.CollapseAnimationHelper;
     render(): React.JSX.Element;
     afterRender(isInitial: boolean): void;

package/dist/ReactComponents/CollapsableBase.d.ts

@@ -3,7 +3,7 @@ import { Components } from '@singularsystems/neo-core';
 import ComponentBase from './ComponentBase';
 export default class CollapsableBase<TProps extends Components.ICollapsableOptions> extends ComponentBase<TProps> {
     private timer;
-    protected containerRef: React.RefObject<HTMLDivElement>;
+    protected containerRef: React.RefObject<HTMLDivElement | null>;
     protected shouldShow: boolean;
     protected animationHelper?: Components.CollapseAnimationHelper;
     constructor(props: TProps);

package/dist/ReactComponents/ColorPicker.d.ts

@@ -23,6 +23,6 @@ export default class ColorPicker extends React.Component<IColorPickerProps, ICol
     accept: () => void;
     render(): React.JSX.Element;
     /** Renders the inner color picker components without the modal */
-    static render(color: string, onChange: (value: string) => void): JSX.Element;
+    static render(color: string, onChange: (value: string) => void): React.ReactNode;
 }
 export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { Model } from '@singularsystems/neo-core';
 import { AxiosPromise } from 'axios';
 import { DropDownBase, ItemSource } from './DropDownBase';
@@ -99,7 +99,7 @@ export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoComple
     private setBindProperty;
     private mapTArrayToOptions;
     private onItemSelected;
-    render(): React.JSX.Element;
+    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;
 }
 export {};

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

@@ -43,5 +43,5 @@ export default class DropDown<T> extends DropDownBase<T, IDropDownProps<T>> {
     private createLookupIndex;
     private getSelectedOption;
     private onItemSelected;
-    render(): React.JSX.Element | JSX.Element;
+    render(): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.JSX.Element;
 }

package/dist/ReactComponents/FileManager/FileBasicInput.d.ts

@@ -4,7 +4,7 @@ import { FileContext } from './FileContext';
 interface IFileInputProps extends React.HTMLProps<HTMLInputElement> {
     fileManager?: Components.IFileManager;
     isHidden?: boolean;
-    inputRef?: React.RefObject<HTMLInputElement>;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
 }
 /**
  * Renders an input[type=file] input bound to a file manager.

package/dist/ReactComponents/FormGroup/FormGroup.d.ts

@@ -14,11 +14,11 @@ export interface IFormGroupProps<TData> extends IEditorContainerProps<HTMLDivEle
     /**
      * Text to show beneath the editor. This will be hidden when validation text is shown.
      */
-    footerText?: string | JSX.Element;
+    footerText?: string | React.ReactNode;
     /**
      * Text / element to show to the right of the label.
      */
-    rightLabel?: string | JSX.Element;
+    rightLabel?: string | React.ReactNode;
 }
 export interface IFormGroupClasses {
     container: string;

package/dist/ReactComponents/FormGroup/FormGroupFloating.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormContext } from '../FormContext';
-import { IEditorContainerProps } from '../PropTypes';
+import type { IEditorContainerProps } from '../PropTypes';
 import ComponentBase from '../ComponentBase';
 export default class FloatingFormGroup<TData> extends ComponentBase<IEditorContainerProps<HTMLDivElement, TData>> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;

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

@@ -18,7 +18,7 @@ export interface IButtonColumnProps extends INeoCommonColumnProps, Omit<React.HT
     item?: any;
     /** Text to show in the header. */
     label?: string;
-    /** Show text on buttons? */
+    /** Show text on built in buttons (view / edit / delete). By default text is suppressed. */
     showDefaultButtonText?: boolean;
     /** Size of edit and delete button */
     buttonSize?: ("sm" | "lg");

package/dist/ReactComponents/Grid/ButtonColumn.js

@@ -45,9 +45,10 @@ var ButtonColumn = /** @class */ (function (_super) {
         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, domProps = __rest(_a, ["item", "label", "showDefaultButtonText", "buttonSize", "showDelete", "editButton", "deleteButton", "viewButton", "childAlignment", "hideBelow", "hideAbove", "alignment"]);
         domProps.className = Utils.joinWithSpaces("neo-grid-button-column", domProps.className);
         domProps.className = ColumnHelper.addCommonClasses(domProps.className, this.props);
-        var editButtonDefaults = __assign({}, Misc.Settings.grid.editButton);
-        var deleteButtonDefaults = __assign({}, Misc.Settings.grid.deleteButton);
-        var viewButtonDefaults = __assign({}, Misc.Settings.grid.viewButton);
+        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) {
             editButtonDefaults.text = "";
             deleteButtonDefaults.text = "";
@@ -68,11 +69,12 @@ 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,
-                this.props.children instanceof Function ? this.props.children() : this.props.children,
+                React.Children.map(children, function (c) { return setButtonProps(c); }),
                 childAlignment !== "right" ? buttons : undefined));
     };
     ButtonColumn.isColumnComponent = true;
@@ -80,3 +82,9 @@ var ButtonColumn = /** @class */ (function (_super) {
     return ButtonColumn;
 }(ComponentBase));
 export { ButtonColumn };
+function setButtonProps(button) {
+    if (button.type === NeoButton) {
+        return React.cloneElement(button, __assign(__assign({}, Misc.Settings.grid.buttonColumnButtons), button.props));
+    }
+    return button;
+}

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

@@ -4,6 +4,7 @@ import { DataViewContext } from '../../React/DataView';
 import { IButtonOptions } from '@singularsystems/neo-core/dist/Components/ButtonOptions';
 import { ItemCallback } from '../PropTypes';
 export type GridSection = "header" | "body" | "footer";
+export type BorderType = "standard" | "borderless" | "bordered";
 export declare class GridContextParams<T> {
     currentItem: T;
     section: GridSection;
@@ -53,18 +54,22 @@ export interface IGridProps<T> extends Omit<React.HTMLProps<HTMLTableElement>, "
     initialSort?: keyof T | (keyof T)[];
     initialSortAscending?: boolean | boolean[];
     children: ItemCallback<T>;
+    /** @deprecated Use `borderType` instead. */
+    isBordered?: boolean;
+    /** @deprecated Use `borderType` instead. */
+    isBorderless?: boolean;
     /**
-     * When specified, the default bootstrap table borders (sides and cells) will be added.
-     * This is the default unless overridden in Misc.Settings.grid
+     * Specifies the bootstrap border type. This can also be specified globally in Misc.Settings.grid.borderType.
+     * - Standard = Only horizontal borders.
+     * - Bordered = All borders.
+     * - Borderless = No borders.
      */
-    isBordered?: boolean;
+    borderType?: BorderType;
     /**
      * When specified, every alternating row will receive a slightly darker background color.
      * Note, this will not work correctly if your grid has child rows. See the neo react demo pages for a solution.
      */
     isStriped?: boolean;
-    /** When specified, the table will have no cell borders, and the table will have no main border. */
-    isBorderless?: boolean;
     /** When specified, a background color will be applied on a row if it is being hovered over. */
     showHover?: boolean;
     /** When specified, the table size will be reduced (by reducing the padding sizes in each cell by half). */

package/dist/ReactComponents/Grid/Grid.js

@@ -45,7 +45,7 @@ var Grid = /** @class */ (function (_super) {
     };
     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, stickyHeader = _a.stickyHeader, enableRowIndexes = _a.enableRowIndexes, children = _a.children, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader", "enableRowIndexes", "children"]);
+        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, isBorderless = _a.isBorderless, isStriped = _a.isStriped, borderType = _a.borderType, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, stickyHeader = _a.stickyHeader, enableRowIndexes = _a.enableRowIndexes, children = _a.children, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isBorderless", "isStriped", "borderType", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader", "enableRowIndexes", "children"]);
         if (expandAll === true) {
             this.gridContext.expandAll = true;
         }
@@ -56,17 +56,28 @@ var Grid = /** @class */ (function (_super) {
             this.gridContext.expandAll = undefined;
         }
         var className = Utils.joinWithSpaces(domProps.className, "table neo-grid");
-        // apply bordered styling
-        if (isBordered !== null && isBordered !== void 0 ? isBordered : Misc.Settings.grid.isBordered) {
+        borderType !== null && borderType !== void 0 ? borderType : (borderType = Misc.Settings.grid.borderType);
+        if (borderType === undefined) {
+            var noBorders = isBorderless !== null && isBorderless !== void 0 ? isBorderless : Misc.Settings.grid.isBorderless;
+            if (noBorders) {
+                borderType = "borderless";
+            }
+            else if (isBordered !== null && isBordered !== void 0 ? isBordered : Misc.Settings.grid.isBordered) {
+                borderType = "bordered";
+            }
+        }
+        if (borderType === "bordered") {
             className += " table-bordered";
         }
+        else if (borderType === "borderless") {
+            className += " table-borderless";
+        }
         // apply striped styling
         if (isStriped !== null && isStriped !== void 0 ? isStriped : Misc.Settings.grid.isStriped) {
             className += " table-striped";
         }
         // apply borderless styling
         if (isBorderless !== null && isBorderless !== void 0 ? isBorderless : Misc.Settings.grid.isBorderless) {
-            className += " table-borderless";
         }
         // apply hover styling
         if (showHover !== null && showHover !== void 0 ? showHover : Misc.Settings.grid.showHover) {

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

@@ -60,7 +60,7 @@ export declare class ChildRow extends ComponentBase<INeoChildRowProps> {
     expandProperty?: Model.IPropertyInstance;
     inBody?: boolean;
     margin: number;
-    containerDiv: React.RefObject<HTMLDivElement>;
+    containerDiv: React.RefObject<HTMLDivElement | null>;
     private get isExpanded();
     protected onFirstRender(): void;
     protected afterRender(isInitial: boolean): void;

package/dist/ReactComponents/IColorPicker.d.ts

@@ -2,5 +2,5 @@ interface ColorPickerProps {
     color: string;
     onChange: (newColor: string) => void;
 }
-export type IColorPicker = (props: ColorPickerProps) => JSX.Element;
+export type IColorPicker = (props: ColorPickerProps) => React.ReactNode;
 export {};

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

@@ -9,7 +9,7 @@ interface FontAwesomeIconComponentProps {
     fixedWidth?: boolean;
     spin?: boolean;
 }
-type FontAwesomeComponent = (props: FontAwesomeIconComponentProps) => JSX.Element;
+type FontAwesomeComponent = (props: FontAwesomeIconComponentProps) => React.ReactNode;
 /** Icon factory supporting font-awesome string, as well as the font-awesome icon definition and component. */
 export declare class FontAwesomeIconFactory extends IconFactory {
     private fontAwesomeComponentType;
@@ -18,6 +18,6 @@ export declare class FontAwesomeIconFactory extends IconFactory {
      * @param fontAwesomeComponentType import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
      */
     constructor(fontAwesomeComponentType: FontAwesomeComponent);
-    protected createIconComponent(iconComponent: IconDefinition | JSX.Element, iconStyle?: IconStyle): React.ReactNode;
+    protected createIconComponent(iconComponent: IconDefinition | React.ReactNode, iconStyle?: IconStyle): React.ReactNode;
 }
 export {};

package/dist/ReactComponents/Input.d.ts

@@ -10,14 +10,14 @@ export interface IInputSpecificProps {
     /** Converts input into a textarea if the no of rows is above 1. */
     rows?: number;
     /** Label for checkbox. */
-    label?: string | JSX.Element;
+    label?: string | React.ReactNode;
     /**
      * Shows a button which allows the user to view the password characters.
      * Automatically sets type to 'password'.
      */
     showPasswordButton?: boolean | Components.IButtonOptions;
     /** Alternate label, currently only used to provide a left label for the switch component. */
-    altLabel?: string | JSX.Element;
+    altLabel?: string | React.ReactNode;
 }
 export interface IInputProps extends IBindableEditorProps<HTMLInputElement> {
     input?: IInputSpecificProps;

package/dist/ReactComponents/InputHelpers.d.ts

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

package/dist/ReactComponents/InputHelpers.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Misc } from '@singularsystems/neo-core';
 import { NeoReactTypes } from '../Modules/Types';
 var InputHelpers = /** @class */ (function () {

package/dist/ReactComponents/Loader.d.ts

@@ -9,7 +9,7 @@ interface ILoaderProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTML
     size?: "small";
 }
 export default class Loader extends ComponentBase<ILoaderProps> {
-    overlayRef: React.RefObject<HTMLDivElement>;
+    overlayRef: React.RefObject<HTMLDivElement | null>;
     isShowing: boolean;
     hasAnimated: boolean;
     render(): React.JSX.Element;

package/dist/ReactComponents/Notifications/Toast.d.ts

@@ -3,7 +3,7 @@ import CollapsableBase from '../CollapsableBase';
 import { Components } from '@singularsystems/neo-core';
 export default class Toast extends CollapsableBase<Components.INotificationOptions & React.HTMLProps<HTMLDivElement>> {
     private iconFactory;
-    countDownRef: React.RefObject<HTMLDivElement>;
+    countDownRef: React.RefObject<HTMLDivElement | null>;
     afterRender(isInitial: boolean): void;
     render(): React.JSX.Element;
 }

package/dist/ReactComponents/NumberInput.js

@@ -174,35 +174,36 @@ var NumberInput = /** @class */ (function (_super) {
         }
     };
     NumberInput.prototype.onKeyDown = function (e) {
+        var decimal = NumberUtils.decimalService;
         var element = this.inputElement.current;
         if (!this.isReadOnly && element && (e.keyCode === 38 || e.keyCode === 40)) {
-            var value = this.getBindValueAsNumber();
+            var value = decimal.createDecimal(this.props.bind.value);
             if (value !== null) {
                 var selectionIndex = element.selectionEnd;
-                var deltaValue = 1;
+                var deltaValue = decimal.createDecimal(1);
                 var decimalIndex = element.value.indexOf(".");
                 if (decimalIndex < 0) {
                     decimalIndex = element.value.indexOf(",");
                 }
                 if (decimalIndex > 0 && selectionIndex && selectionIndex > decimalIndex) {
-                    deltaValue = 0.01;
+                    deltaValue = decimal.createDecimal("0.01");
                 }
                 if (this.formatState.isPercent && NumberUtils.transformPercent) {
-                    deltaValue /= 100;
+                    deltaValue = decimal.divideBy(deltaValue, 100);
                 }
                 if (e.keyCode === 38) {
                     // Up
-                    value += deltaValue;
+                    value = NumberUtils.decimalService.add(value, deltaValue);
                 }
                 else if (e.keyCode === 40) {
                     // Down
-                    value -= deltaValue;
+                    value = NumberUtils.decimalService.subtract(value, deltaValue);
                 }
                 if (this.numericType === Misc.DataType.Decimal) {
-                    this.props.bind.value = NumberUtils.decimalService.createDecimal(value);
+                    this.props.bind.value = value;
                 }
                 else {
-                    this.props.bind.value = value;
+                    this.props.bind.value = decimal.toNumber(value);
                 }
                 this.setFocusedText(element);
                 if (selectionIndex !== null) {

package/dist/ReactComponents/Paging/BasicPagerControls.d.ts

@@ -18,7 +18,7 @@ export interface IPagerControlsProps extends React.HTMLProps<HTMLUListElement> {
     /** Hides the pager if there is only one page. True by default. */
     autoHide?: boolean;
     /** Causes the page size control to show, with this label. */
-    pageSizeLabel?: string | JSX.Element;
+    pageSizeLabel?: string | React.ReactNode;
 }
 export default class SimplePagerControls extends React.Component<IPagerControlsProps> {
     private iconFactory;

package/dist/ReactComponents/Paging/PageSizeControl.d.ts

@@ -3,7 +3,7 @@ import { Data, Model } from "@singularsystems/neo-core";
 export interface IPageSizeControlProps {
     /** Page manager to control. */
     pageManager: Data.IPageManager;
-    label?: string | JSX.Element;
+    label?: string | React.ReactNode;
 }
 export default class PageSizeControl extends React.Component<IPageSizeControlProps> {
     pageSize: Model.PropertyAccessor;

package/dist/ReactComponents/ProgressBar.d.ts

@@ -13,7 +13,7 @@ export interface IProgressBarProps {
     reverse?: boolean;
 }
 export default class ProgressBar extends React.Component<IProgressBarProps & React.HTMLProps<HTMLDivElement>> {
-    innerRef: React.RefObject<HTMLDivElement>;
+    innerRef: React.RefObject<HTMLDivElement | null>;
     componentDidMount(): void;
     render(): React.JSX.Element;
 }

package/dist/ReactComponents/PropTypes.d.ts

@@ -39,9 +39,9 @@ export interface ICommonEditorProps {
     /** Will show this text in a block after the input */
     appendText?: string;
     /** Additional element to include before the input element */
-    prepend?: (() => JSX.Element) | JSX.Element | null;
+    prepend?: (() => React.ReactNode) | React.ReactNode | null;
     /** Additional element to include after the input element */
-    append?: (() => JSX.Element) | JSX.Element | null;
+    append?: (() => React.ReactNode) | React.ReactNode | null;
     /** Icon name or component */
     prependIcon?: any;
     /** Icon name or component */
@@ -49,7 +49,7 @@ export interface ICommonEditorProps {
     /** True if append / prepend is set, which means this must be an editor as part of a bs editor group. */
     requiresGroup?: boolean;
     /** Reference to the input dom element */
-    inputElement?: React.RefObject<HTMLElement>;
+    inputElement?: React.RefObject<HTMLElement | null>;
 }
 export interface IBindableEditorPropsNoBase extends ICommonEditorProps {
     bind: Model.IPropertyInstance;
@@ -79,7 +79,7 @@ interface IEditorSelectorProps<T> {
 }
 interface ICommonContainerOwnProps {
     /** Label / header text */
-    label?: string | JSX.Element;
+    label?: string | React.ReactNode;
     /** True if the editor / display value should be suppressed. Children will still be rendered. */
     suppressDefaultContent?: boolean;
     /**
@@ -141,7 +141,7 @@ export declare class BindPropsHelper {
     static getBindProperty<T>(allProps: IEditorContainerProps<T, any>): Model.IPropertyInstance;
     static splitCommonEditorProps<T extends ICommonEditorProps>(props: T): {
         editor: ICommonEditorProps;
-        rest: Omit<T, "append" | "prepend" | "disabled" | "readOnly" | "isDisabled" | "isReadOnly" | "prependText" | "appendText" | "prependIcon" | "appendIcon" | "inputElement">;
+        rest: Omit<T, "disabled" | "readOnly" | "isReadOnly" | "isDisabled" | "prependText" | "appendText" | "prepend" | "append" | "prependIcon" | "appendIcon" | "inputElement">;
     };
     static normaliseContainerProps<T, TContainerDom = React.HTMLProps<T>, TData = any>(component: IComponentBase, props: IEditorContainerProps<T, TData>, inGroup: boolean, isBootstrap?: boolean): IEditorContainerNormalisedProps<TContainerDom, TData>;
     static normaliseEditorProps<T, TDom = React.HTMLProps<T>>(component: IComponentBase, props: (IEditorAndSelectorProps<T, any> & TDom) | IEditorNormalisedProps<TDom, any>): IEditorNormalisedProps<TDom, any>;

package/dist/ReactComponents/Slider.d.ts

@@ -4,19 +4,18 @@
  */
 import React from 'react';
 import { Model } from '@singularsystems/neo-core';
-import { SliderProps as ISliderLibProps, RangeProps as IRangeLibProps } from 'rc-slider';
+import type { SliderProps as ISliderLibProps } from 'rc-slider';
 interface ICommonSliderProps {
     bind: Model.IPropertyInstance;
     onChangeEvent?: () => void;
 }
 interface ISliderSpecificProps extends ISliderLibProps, ICommonSliderProps {
 }
-interface IRangeSpecificProps extends IRangeLibProps, ICommonSliderProps {
+interface IRangeSpecificProps extends ISliderLibProps, ICommonSliderProps {
     bindEnd: Model.IPropertyInstance;
 }
 export default class Slider extends React.Component<ISliderSpecificProps | IRangeSpecificProps> {
     private sliderImplementation;
-    private rangeImplementation;
     private get isRange();
     private get rangeProps();
     private get sliderProps();

package/dist/ReactComponents/Slider.js

@@ -12,7 +12,6 @@ var Slider = /** @class */ (function (_super) {
     function Slider() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.sliderImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.Slider);
-        _this.rangeImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.Range);
         _this.onChangeHandler = function (value) {
             if (!(value instanceof Array)) {
                 // This is a <Slider/>
@@ -61,7 +60,8 @@ var Slider = /** @class */ (function (_super) {
         var _a = this.rangeProps, bind = _a.bind, bindEnd = _a.bindEnd, onChangeEvent = _a.onChangeEvent, other = __rest(_a, ["bind", "bindEnd", "onChangeEvent"]);
         other.defaultValue = [bind.value, bindEnd.value];
         other.value = [bind.value, bindEnd.value];
-        return React.createElement(this.rangeImplementation, __assign({}, other, { onChange: this.onChangeHandler }));
+        other.range = true;
+        return React.createElement(this.sliderImplementation, __assign({}, other, { onChange: this.onChangeHandler }));
     };
     Slider.prototype.render = function () {
         return (React.createElement("div", { className: "Slider" },

package/dist/ReactComponents/Tabs/Tab.d.ts

@@ -3,7 +3,7 @@ import { TabContext } from "./TabContainer";
 import { ICancellableEvent } from "../Misc";
 interface ITabProps {
     /** Name to show in the tab header. */
-    header: string | JSX.Element;
+    header: string | React.ReactNode;
     /** Name used for binding to selected tab. */
     id?: string;
     /** Name used for binding to selected tab. (Same as id property) */

package/dist/ReactComponents/Tabs/Tab.js

@@ -48,6 +48,9 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.renderHeader = function (isSelected) {
         var hasIcon = this.props.icon !== undefined;
+        if (hasIcon && Misc.Settings.icons.shouldSuppress({ icon: this.props.icon, component: "tab", props: this.props })) {
+            hasIcon = false;
+        }
         return (React.createElement("li", { className: "nav-item" },
             React.createElement("a", { className: "nav-link" + (isSelected ? " active" : "") + (this.props.disabled ? " disabled" : ""), href: "#", onClick: this.onClick },
                 hasIcon && this.iconFactory.getIconComponent(this.props.icon),

package/dist/ReactComponents/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import { Components } from '@singularsystems/neo-core';
 import React, { HTMLAttributes } from 'react';
-export interface ITooltipProps extends Components.Tooltip.ITooltipOptions<string | JSX.Element> {
+export interface ITooltipProps extends Components.Tooltip.ITooltipOptions<string | React.ReactNode> {
     /**
      * True if the div wrapping the content must display inline.
      */
@@ -15,10 +15,13 @@ export default class Tooltip extends React.Component<ITooltipProps> {
     private onMouseEnter;
     private onMouseLeave;
     render(): React.JSX.Element;
-    static fromDataAttributes(element: JSX.Element, attributes: {
+    static fromDataAttributes(element: React.ReactNode, attributes: {
         [key: string]: any;
-    }): React.JSX.Element;
+    }): 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> | React.JSX.Element | null | undefined;
     static setDomProperties(dom: HTMLAttributes<HTMLElement> & {
         [key: string]: any;
     }, tooltipOptions: string | Components.Tooltip.ITooltipOptions): void;
+    static hasTooltip(dom: HTMLAttributes<HTMLElement> & {
+        [key: string]: any;
+    }): boolean;
 }

package/dist/ReactComponents/Tooltip.js

@@ -46,6 +46,9 @@ var Tooltip = /** @class */ (function (_super) {
             dom["data-tip-pos"] = tooltipOptions.position;
         }
     };
+    Tooltip.hasTooltip = function (dom) {
+        return dom["data-tip"] !== undefined;
+    };
     return Tooltip;
 }(React.Component));
 export default Tooltip;

package/dist/Routing/RouteView.d.ts

@@ -5,21 +5,20 @@ export default abstract class RouteView extends React.Component<unknown> {
     private routeProvider;
     private hasMounted;
     protected _routes: RouteProvider;
-    protected getForbiddenComponent: (route: Routing.IRoute) => JSX.Element;
-    protected getSigningInComponent: (route: Routing.IRoute) => JSX.Element;
+    protected getForbiddenComponent: (route: Routing.IRoute) => React.ReactNode;
+    protected getSigningInComponent: (route: Routing.IRoute) => React.ReactNode;
     protected securityService: import("@singularsystems/neo-core/dist/Security/ISecurityService").default;
     protected routeSecurityService: Routing.IRouteSecurityService;
     protected routingState: import("./RoutingState").RoutingState;
     constructor(props: unknown, routeProvider: RouteProvider);
     componentDidMount(): void;
-    render(): JSX.Element | null;
+    render(): React.ReactNode;
     private getRouteComponent;
     /**
      * Creates the routes component after authentication and authorisation checks have been done.
      * This can be used to override all routes to display pages like terms and conditions.
-     * To redirect to a route, return a react router <Redirect to= /> component.
      */
-    protected getAuthorisedComponent(route: Routing.IRoute, path: string): JSX.Element;
+    protected getAuthorisedComponent(route: Routing.IRoute, path: string): React.ReactNode;
     /**
      * Checks if the user is authorised to access this route.
      * Component from getForbiddenComponent() is returned if not.

package/dist/Routing/RouteView.js

@@ -52,7 +52,6 @@ var RouteView = /** @class */ (function (_super) {
     /**
      * Creates the routes component after authentication and authorisation checks have been done.
      * This can be used to override all routes to display pages like terms and conditions.
-     * To redirect to a route, return a react router <Redirect to= /> component.
      */
     RouteView.prototype.getAuthorisedComponent = function (route, path) {
         return React.createElement(route.component, null);

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import './Extensions';
 import NeoReactModule from './Modules/NeoReactModule';
 import { NeoReactTypes } from './Modules/Types';
 import * as Neo from './ReactComponents/_Exports';
@@ -10,4 +11,4 @@ import { TooltipHelper } from './ReactComponents/TooltipHelper';
 export { Icons, Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views, TooltipHelper };
 export { Transition } from './ReactComponents/Transitions/Transition';
 export { TransitionController } from './ReactComponents/Transitions/TransitionController';
-export { ICancellableEvent } from './ReactComponents/Misc';
+export type { ICancellableEvent } from './ReactComponents/Misc';

package/dist/index.js

@@ -1,3 +1,4 @@
+import './Extensions';
 import NeoReactModule from './Modules/NeoReactModule';
 import { NeoReactTypes } from './Modules/Types';
 import * as Neo from './ReactComponents/_Exports';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,34 +17,34 @@
   "license": "ISC",
   "devDependencies": {
     "@testing-library/dom": "10.4.0",
-    "@testing-library/react": "16.0.1",
-    "@types/jest": "29.5.13",
+    "@testing-library/react": "16.2.0",
+    "@types/jest": "29.5.14",
     "@types/memoize-one": "5.1.2",
-    "@types/node": "22.7.4",
-    "@types/react": "18.3.11",
-    "@types/react-custom-scrollbars": "^4.0.6",
-    "@types/react-dom": "18.3.0",
+    "@types/node": "22.13.4",
+    "@types/react": "19.0.10",
+    "@types/react-custom-scrollbars": "4.0.13",
+    "@types/react-dom": "19.0.4",
     "decimal.js-light": "2.5.1",
     "react-scripts": "5.0.1",
-    "typescript": "5.5.2"
+    "typescript": "5.7.3"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.1.1",
-    "@types/rc-slider": "^8.6.5",
-    "@types/react-color": "^3.0.1",
-    "axios": "1.7.7",
+    "@singularsystems/neo-core": "1.2.0",
+    "@types/react-color": "3.0.13",
+    "axios": "1.7.9",
     "inversify": "6.0.2",
     "memoize-one": "6.0.0",
-    "mobx": "6.13.3",
-    "mobx-react": "9.1.1",
-    "react": "18.3.1",
+    "mobx": "6.13.6",
+    "mobx-react": "9.2.0",
+    "rc-slider": "11.1.8",
+    "react": "19.0.0",
     "react-custom-scrollbars": "4.2.1",
-    "react-dom": "18.3.1",
-    "react-select": "5.8.1",
-    "tslib": "2.7.0"
+    "react-dom": "19.0.0",
+    "react-select": "5.10.0",
+    "tslib": "2.8.1"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.1.1",
+    "@singularsystems/neo-core": ">=1.2.0",
     "axios": ">=1.6.2",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",
@@ -52,7 +52,7 @@
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
   },
-  "packageManager": "yarn@4.5.0",
+  "packageManager": "yarn@4.6.0",
   "resolutions": {
     "@singularsystems/neo-core": "portal:../core"
   }