@bryntum/core-react-thin 7.1.2 → 7.2.0

package/src/BryntumRadioGroup.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, RadioConfig, RadioGroup, RadioGroupListeners, Rectangle, Scroller, ScrollerConfig, StateProvider, TabConfig, Tool, ToolConfig, ToolbarConfig, ToolbarItems, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, RadioConfig, RadioGroup, RadioGroupListeners, Rectangle, Scroller, ScrollerConfig, StateProvider, TabConfig, Tool, ToolConfig, ToolbarConfig, ToolbarItems, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -69,6 +69,10 @@ export type BryntumRadioGroupProps = {
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/RadioGroup#config-bodyCls)
      */
     bodyCls? : string|object
+    /**
+     * Set `true` to add a border to this container's element.
+     */
+    border? : boolean
     /**
      * An object where property names with a truthy value indicate which events should bubble up the ownership
      * hierarchy when triggered.
@@ -124,7 +128,7 @@ export type BryntumRadioGroupProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/RadioGroup#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */
@@ -905,6 +909,7 @@ export class BryntumRadioGroup extends React.Component<BryntumRadioGroupProps> {
         'autoUpdateRecord',
         'bbar',
         'bodyCls',
+        'border',
         'bubbleEvents',
         'centered',
         'clearable',

package/src/BryntumSlider.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, DomConfig, KeyMapConfig, MaskConfig, Rectangle, Scroller, ScrollerConfig, Slider, SliderListeners, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, DomConfig, KeyMapConfig, MaskConfig, Rectangle, Scroller, ScrollerConfig, Slider, SliderListeners, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -91,7 +91,7 @@ export type BryntumSliderProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/Slider#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/BryntumSplitter.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, DomConfig, KeyMapConfig, MaskConfig, Rectangle, Scroller, ScrollerConfig, Splitter, SplitterListeners, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, DomConfig, KeyMapConfig, MaskConfig, Rectangle, Scroller, ScrollerConfig, Splitter, SplitterListeners, TabConfig, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -91,7 +91,7 @@ export type BryntumSplitterProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/Splitter#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/BryntumTabPanel.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, Rectangle, Scroller, ScrollerConfig, StateProvider, TabBarConfig, TabConfig, TabPanel, TabPanelListeners, Tool, ToolConfig, ToolbarConfig, ToolbarItems, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, Rectangle, Scroller, ScrollerConfig, StateProvider, TabBarConfig, TabConfig, TabPanel, TabPanelListeners, Tool, ToolConfig, ToolbarConfig, ToolbarItems, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -81,6 +81,10 @@ export type BryntumTabPanelProps = {
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/TabPanel#config-bodyCls)
      */
     bodyCls? : string|object
+    /**
+     * Set `true` to add a border to this container's element.
+     */
+    border? : boolean
     /**
      * An object where property names with a truthy value indicate which events should bubble up the ownership
      * hierarchy when triggered.
@@ -131,7 +135,7 @@ export type BryntumTabPanelProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/TabPanel#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */
@@ -906,6 +910,7 @@ export class BryntumTabPanel extends React.Component<BryntumTabPanelProps> {
         'autoUpdateRecord',
         'bbar',
         'bodyCls',
+        'border',
         'bubbleEvents',
         'centered',
         'collapsible',

package/src/BryntumTextAreaField.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, CoreContainerItemConfig, DomConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Scroller, TabConfig, TextAreaField, TextAreaFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, CoreContainerItemConfig, DomConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Scroller, TabConfig, TextAreaField, TextAreaFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -110,7 +110,7 @@ export type BryntumTextAreaFieldProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaField#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/BryntumTextAreaPickerField.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, CoreContainerItemConfig, DomConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Scroller, TabConfig, TextAreaPickerField, TextAreaPickerFieldListeners, TooltipConfig, VueConfig, Widget, WidgetConfig } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, CoreContainerItemConfig, DomConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Scroller, TabConfig, TextAreaPickerField, TextAreaPickerFieldListeners, TooltipConfig, VueConfig, Widget, WidgetConfig } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -114,7 +114,7 @@ export type BryntumTextAreaPickerFieldProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaPickerField#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/BryntumTextField.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, CoreContainerItemConfig, DomConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Scroller, TabConfig, TextField, TextFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, CoreContainerItemConfig, DomConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Scroller, TabConfig, TextField, TextFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -110,7 +110,7 @@ export type BryntumTextFieldProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/TextField#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/BryntumTimeField.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, CoreContainerItemConfig, DomConfig, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Scroller, TabConfig, TimeField, TimeFieldListeners, TooltipConfig, VueConfig, Widget, WidgetConfig } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, CoreContainerItemConfig, DateField, DomConfig, DurationConfig, Field, FieldContainer, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, Rectangle, Scroller, TabConfig, TimeField, TimeFieldListeners, TooltipConfig, VueConfig, Widget, WidgetConfig } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -114,7 +114,7 @@ export type BryntumTimeFieldProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/TimeField#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */
@@ -477,6 +477,14 @@ export type BryntumTimeFieldProps = {
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/TimeField#config-owner)
      */
     owner? : Widget|any
+    /**
+     * A reference to a partner DateField which this TimeField should sync its value with.
+     * When the DateField's value is changed, this TimeField's value is updated to match.
+     * When this TimeField's value is changed, the DateField's value is updated to match.
+     * ...
+     * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/TimeField#config-partner)
+     */
+    partner? : string|DateField
     /**
      * Configuration object for the [picker](https://bryntum.com/products/core/docs/api/Core/widget/List) on initialization. Returns the
      * [picker](https://bryntum.com/products/core/docs/api/Core/widget/List) instance at runtime.
@@ -972,6 +980,7 @@ export class BryntumTimeField extends React.Component<BryntumTimeFieldProps> {
         'onResize',
         'onShow',
         'onTrigger',
+        'partner',
         'placeholder',
         'readOnly',
         'rendition',

package/src/BryntumTimePicker.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, Rectangle, Scroller, ScrollerConfig, TabConfig, TimePicker, TimePickerListeners, ToolbarItems, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, Rectangle, Scroller, ScrollerConfig, TabConfig, TimePicker, TimePickerListeners, ToolbarItems, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -56,6 +56,10 @@ export type BryntumTimePickerProps = {
      * Update assigned [record](https://bryntum.com/products/core/docs/api/Core/widget/Container#config-record) automatically on field changes
      */
     autoUpdateRecord? : boolean
+    /**
+     * Set `true` to add a border to this container's element.
+     */
+    border? : boolean
     /**
      * An object where property names with a truthy value indicate which events should bubble up the ownership
      * hierarchy when triggered.
@@ -95,7 +99,7 @@ export type BryntumTimePickerProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/TimePicker#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */
@@ -732,6 +736,7 @@ export class BryntumTimePicker extends React.Component<BryntumTimePickerProps> {
         'ariaDescription',
         'ariaLabel',
         'autoUpdateRecord',
+        'border',
         'bubbleEvents',
         'centered',
         'color',

package/src/BryntumToolbar.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, ClickRepeaterConfig, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, Model, Rectangle, Scroller, ScrollerConfig, TabConfig, Tool, ToolConfig, Toolbar, ToolbarItems, ToolbarListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, ClickRepeaterConfig, Color, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, Model, Rectangle, Scroller, ScrollerConfig, TabConfig, Tool, ToolConfig, Toolbar, ToolbarItems, ToolbarListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -56,6 +56,10 @@ export type BryntumToolbarProps = {
      * Update assigned [record](https://bryntum.com/products/core/docs/api/Core/widget/Container#config-record) automatically on field changes
      */
     autoUpdateRecord? : boolean
+    /**
+     * Set `true` to add a border to this container's element.
+     */
+    border? : boolean
     /**
      * An object where property names with a truthy value indicate which events should bubble up the ownership
      * hierarchy when triggered.
@@ -95,7 +99,7 @@ export type BryntumToolbarProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/Toolbar#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */
@@ -755,6 +759,7 @@ export class BryntumToolbar extends React.Component<BryntumToolbarProps> {
         'ariaDescription',
         'ariaLabel',
         'autoUpdateRecord',
+        'border',
         'bubbleEvents',
         'centered',
         'color',

package/src/BryntumWidget.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, DomConfig, KeyMapConfig, MaskConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget, WidgetListeners } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, DomConfig, KeyMapConfig, MaskConfig, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget, WidgetListeners } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -91,7 +91,7 @@ export type BryntumWidgetProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/Widget#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */

package/src/BryntumYearPicker.tsx

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React, { RefObject } from 'react';
-import { AlignSpec, Base, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, Rectangle, Scroller, ScrollerConfig, StateProvider, TabConfig, Tool, ToolConfig, ToolbarConfig, ToolbarItems, TooltipConfig, VueConfig, Widget, YearPicker, YearPickerListeners } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, Rectangle, Scroller, ScrollerConfig, StateProvider, TabConfig, Tool, ToolConfig, ToolbarConfig, ToolbarItems, TooltipConfig, VueConfig, Widget, YearPicker, YearPickerListeners } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -69,6 +69,10 @@ export type BryntumYearPickerProps = {
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/YearPicker#config-bodyCls)
      */
     bodyCls? : string|object
+    /**
+     * Set `true` to add a border to this container's element.
+     */
+    border? : boolean
     /**
      * An object where property names with a truthy value indicate which events should bubble up the ownership
      * hierarchy when triggered.
@@ -119,7 +123,7 @@ export type BryntumYearPickerProps = {
      * ...
      * [View online docs...](https://bryntum.com/products/grid/docs/api/Core/widget/YearPicker#config-color)
      */
-    color? : string
+    color? : Color
     /**
      * Programmatic control over which column to start in when used in a grid layout.
      */
@@ -888,6 +892,7 @@ export class BryntumYearPicker extends React.Component<BryntumYearPickerProps> {
         'autoUpdateRecord',
         'bbar',
         'bodyCls',
+        'border',
         'bubbleEvents',
         'centered',
         'collapsible',

package/src/WrapperHelper.tsx

@@ -20,9 +20,43 @@ declare global {
 }
 
 /**
- * Development warning. Showed when environment is set to 'development'
- * @param {String} clsName react component instance
- * @param {String} msg console message
+ * Extends the standard React.ReactPortal type to include an optional `taskGeneration` property.
+ * This property can be used to track or associate a generation number with the portal,
+ * which may be useful for managing updates or synchronization tasks in complex React applications.
+ *
+ * @property {number} [taskGeneration] Optional generation number for task tracking or synchronization.
+ */
+type ReactPortalWithTaskGeneration = React.ReactPortal & { taskGeneration?: number };
+
+/**
+ * Represents the state for a React component that manages portals and their generation.
+ *
+ * @property {Map} portals A map associating unique string keys with `ReactPortalWithTaskGeneration` instances.
+ * @property {number} generation A numeric value indicating the current generation or version of the component state.
+ */
+type ReactComponentState = {
+    portals    : Map<string, ReactPortalWithTaskGeneration>
+    generation : number
+};
+
+/**
+ * Extends the standard HTMLElement to include additional optional properties
+ * used for managing element-specific data and state within the application.
+ *
+ * @property {any} [elementData] Arbitrary data associated with the element.
+ * @property {string|null} [lastPortalId] Identifier for the last portal rendered into this element, or null if none.
+ * @property {boolean} [didSetTextContent] Indicates whether the text content of the element has been set.
+ */
+type HTMLElementWithData = HTMLElement & {
+    elementData?: any
+    lastPortalId?: string | null
+    didSetTextContent?: boolean
+};
+
+/**
+ * Development warning. Shown when environment is set to 'development'
+ * @param {string} clsName react component instance
+ * @param {string} msg console message
  */
 function devWarning(clsName: string, msg: string): void {
     // @ts-ignore
@@ -38,7 +72,7 @@ function devWarningContainer(clsName: string, containerParam: string): void {
     devWarning(
         clsName,
         `Using "${containerParam}" parameter for configuration is not recommended.\n` +
-        "Widget is placed automatically inside it's container element.\n" +
+        'Widget is placed automatically inside its container element.\n' +
         `Solution: remove "${containerParam}" parameter from configuration.`
     );
 }
@@ -62,14 +96,14 @@ function devWarningProjectProp(clsName: string): void {
 /**
  * Returns `true` if the provided element is an instance of React Element.
  * All React elements require an additional $$typeof: Symbol.for('react.element') field declared on the object for security reasons.
- * The object, which React.createElement() return has $$typeof property equals to Symbol.for('react.element')
+ * The object, which React.createElement() returns has $$typeof property equal to Symbol.for('react.element')
  *
  * Sources:
  * https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
  * https://github.com/facebook/react/pull/4832
  *
- * @param {*} element
- * @returns {Boolean}
+ * @param {*} element Element to check
+ * @returns {boolean} True if element is a React element
  * @internal
  */
 function isReactElement(element: any): boolean {
@@ -78,8 +112,8 @@ function isReactElement(element: any): boolean {
 
 /**
  * Creates bryntum component config from react component
- * @param {Object} reactInstance react component instance
- * @returns {Object} config object
+ * @param {object} reactInstance react component instance
+ * @returns {object} config object
  */
 function createConfig(reactInstance: any): object {
     const
@@ -101,6 +135,7 @@ function createConfig(reactInstance: any): object {
             processCellContent     : isView ? processCellContent : undefined,
             processCellEditor      : isView ? processCellEditor : undefined,
             processEventContent    : isView ? processEventContent : undefined,
+            processTaskContent     : isView ? processTaskContent : undefined,
             processTaskItemContent : isView ? processTaskItemContent : undefined,
             processResourceHeader  : isView ? processResourceHeader : undefined
         } as any;
@@ -178,10 +213,10 @@ function createConfig(reactInstance: any): object {
 
 /**
  * Applies property value to Bryntum config or instance.
- * @param {Object} configOrInstance target object
- * @param {String} prop property name
- * @param {Object} value value
- * @param {Boolean} isConfig config setting mode
+ * @param {object} configOrInstance target object
+ * @param {string} prop property name
+ * @param {object} value value
+ * @param {boolean} isConfig config setting mode
  */
 function applyPropValue(configOrInstance: any, prop: string, value: any, isConfig = true): void {
     // Assigning React wrapper component instance
@@ -270,9 +305,9 @@ function createWidget(component: any): any {
 
 /**
  * Calculates the portalId from passed ids
- * @param {String|Number} id
- * @param {String|Number} columnId
- * @returns {String} portalId as `portal-${id}-${columnId}`
+ * @param {string|number} id Record id
+ * @param {string|number} columnId Column id
+ * @returns {string} portalId as `portal-${id}-${columnId}`
  */
 function getPortalId(id: string | number, columnId: string | number): string {
     return `portal-${id}-${columnId}`;
@@ -281,7 +316,7 @@ function getPortalId(id: string | number, columnId: string | number): string {
 /**
  * Delete portal and its container
  * @param {*} component React Component, the wrapper itself
- * @param {String} portalId As returned from getPortalId function
+ * @param {string} portalId As returned from getPortalId function
  */
 function deletePortal(component: any, portalId: string): void {
     const portal = component.state.portals.get(portalId);
@@ -313,7 +348,7 @@ function releaseReactCell(component: any, cellElement: any): void {
 /**
  * Calls releaseReactCell that implements the cleanup
  * @param {*} component React Component, the wrapper itself
- * @param {Object} context
+ * @param {object} context Event context object
  * @param {Core.data.Model[]} context.records Array of records that are going to be removed
  */
 function beforeRemoveRecords(component: any, { records, removingAll }: { records: any[]; removingAll: boolean }): void {
@@ -361,9 +396,9 @@ function updateGeneration(component: any, thisTick = false, callback = () => {})
  * Component about to be updated, from changing a prop using state.
  * React to it depending on what changed and prevent react from re-rendering our component.
  * @param {*} component react component instance
- * @param nextProps
- * @param nextState
- * @returns {Boolean}
+ * @param {object} nextProps Next props
+ * @param {object} nextState Next state
+ * @returns {boolean}
  */
 function shouldComponentUpdate(component: any, nextProps: Readonly<any>, nextState: Readonly<any>): boolean {
     const { props, instance, propertyNames } = component;
@@ -380,10 +415,10 @@ function shouldComponentUpdate(component: any, nextProps: Readonly<any>, nextSta
 }
 
 /**
- *
- * @param { Object } context
- * @param { * } context.cellContent Content to be rendered in cell (set by renderer)
- * @returns { Boolean } `true` if there is a React Renderer in this cell, `false` otherwise
+ * Checks if the cell content is a React element
+ * @param {object} context Renderer context object
+ * @param {*} context.cellContent Content to be rendered in cell (set by renderer)
+ * @returns {boolean} `true` if there is a React Renderer in this cell, `false` otherwise
  */
 function hasFrameworkRenderer({ cellContent }: { cellContent: any }): boolean {
     // @ts-ignore
@@ -393,9 +428,9 @@ function hasFrameworkRenderer({ cellContent }: { cellContent: any }): boolean {
 /**
  * Hook called by instance when rendering cells within
  * Row::renderCell(), creates portals for JSX supplied by renderers
- * @param {Object} context
- * @param {Object} context.rendererData Data passed from renderCell
- * @param {Object} context.cellElementData Data passed from renderCell
+ * @param {object} context Renderer context object
+ * @param {object} context.rendererData Data passed from renderCell
+ * @param {object} context.cellElementData Data passed from renderCell
  */
 function processCellContent(this: { reactComponent: any; isExporting: boolean; $isCollapsing: boolean; }, { rendererData, cellElementData, rendererHtml }: {
     rendererData: any
@@ -793,10 +828,102 @@ function processCalendarEventContent(this: any, {
     return returnValue;
 }
 
+function processTaskContent(this: any, {
+    jsx, // React element to render in portal
+    action, // Rendering action
+    targetElement, // DOM element to create portal in
+    reactComponent // the React wrapper component
+}: {
+    jsx: ReactElement
+    action: string
+    targetElement: HTMLElementWithData
+    reactComponent: React.Component & { syncContent: (fn: () => unknown) => void }
+}): boolean {
+
+    const { taskResize } = this.features;
+
+    if (
+        !reactComponent ||
+        action !== 'syncFwConfig' ||
+        (taskResize?.isResizing && !taskResize.dragging.completed)
+    ) {
+        return false;
+    }
+
+    // Ensure we have the expected DOM structure and type safety
+    const wrap : HTMLElementWithData | null | undefined = targetElement.parentElement?.parentElement;
+
+    if (!wrap?.elementData) {
+        return false;
+    }
+
+    const
+        wrapData       = wrap.elementData,
+        { taskRecord } = wrapData,
+        state          = reactComponent.state as ReactComponentState,
+        { portals }    = state,
+        portalId       = `portal-task-${taskRecord.id}`;
+
+    if (taskRecord.isMilestone) {
+        deletePortal(reactComponent, portalId);
+        targetElement.innerHTML = '';
+        wrap.lastPortalId = null;
+        return false;
+    }
+
+    // Make this function available for testing. It is used for synchronizing task content, specifically
+    // for React portal rendering. It should only be called during event D&D drop operation.
+    reactComponent.syncContent = reactComponent.syncContent || function(fn: () => unknown) {
+        flushSync(fn);
+    };
+
+    const parent = wrap.querySelector('.b-gantt-task-content') as HTMLElement;
+
+    if (jsx) {
+
+        const
+            portal        = portals.get(portalId),
+            updateContent = () => {
+                // Clean-up the content element
+                parent!.innerHTML = '';
+                const
+                    jsxContainer = DomHelper.createElement({
+                        className     : 'b-jsx-container',
+                        // As stated above, we are at the wrapper, but we should render the JSX inside the content element
+                        parent,
+                        // Signal DomSync to not remove React-controlled content
+                        retainElement : true
+                    }) as Element,
+                    portal       = ReactDOM.createPortal(jsx, jsxContainer) as ReactPortalWithTaskGeneration;
+
+                // Store taskGeneration on the portal to easily determine later if it needs to be updated
+                portal.taskGeneration = wrap.elementData.taskGeneration;
+
+                // Save portalId for later use
+                wrap.lastPortalId = portalId;
+
+                // Store portal in map in state, so that React can keep track of it
+                portals.set(portalId, portal);
+                updateGeneration(reactComponent, true);
+
+                targetElement.didSetTextContent = true;
+            };
+
+        // Recreate portal only if the underlying taskRecord has changed or is different from last used
+        if (!portal || portal.taskGeneration !== wrap.elementData.taskGeneration || wrap.lastPortalId !== portalId) {
+            // Delete the old portal if one exists
+            deletePortal(reactComponent, portalId);
+            updateContent();
+        }
+    }
+
+    return true;
+}
+
 /**
  * Generate a unique portal ID for an event.
- * @param {Object} assignmentRecord The assignment record
- * @param {Object} [eventRecord] The event record
+ * @param {object} assignmentRecord The assignment record
+ * @param {object} [eventRecord] The event record
  * @param {string} [segment] Segment identifier for split events
  * @param {boolean} [isExporting] To check if exporting is in progress
  * @returns {string} The generated portal ID
@@ -811,8 +938,8 @@ function generateEventPortalId(assignmentRecord: any, eventRecord?: any, segment
  * DomSync only fires callback for it and not for children. The nested children are removed as part of
  * removing the parent, so their callbacks don't fire individually. We must explicitly clean up their portals here.
  * @param {*} component React Component, the wrapper itself
- * @param {Object} parentEventRecord The parent event record
- * @param {Object} resourceRecord The resource record (needed for assignment lookup)
+ * @param {object} parentEventRecord The parent event record
+ * @param {object} resourceRecord The resource record (needed for assignment lookup)
  * @param {boolean} isExporting Whether we're in export mode
  */
 function deleteNestedEventPortals(component: any, parentEventRecord: any, resourceRecord: any, isExporting: boolean): void {
@@ -959,7 +1086,7 @@ function processEventContent(this: any, {
             generationUpdateFlag = true;
         }
 
-        // If nestedEvents feature is enabled and this is a event with nested children, need
+        // If nestedEvents feature is enabled and this is an event with nested children, need
         // to clean up their portals. Because DomSync only fires callback for the parent when it's released,
         // nested children are removed as part of removing the parent, so their callbacks don't fire.
         if (nestedEvents?.enabled && eventRecord.children?.length) {
@@ -1097,9 +1224,9 @@ function handleReactElement(widget: Widget, element: any): void {
 /**
  * Handles the React header element by processing JSX content within the widget.
  *
- * @param {Object} column Object containing grid and id properties
+ * @param {object} column Object containing grid and id properties
  * @param {HTMLElement} headerElement The header element to be processed
- * @param {Any} html JSX content to be processed
+ * @param {any} html JSX content to be processed
  */
 function handleReactHeaderElement(column: { grid: any; id: string }, headerElement: HTMLElement, html: any): void {
     const