@bryntum/gantt-react 7.2.0 → 7.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bryntum/gantt-react",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "description": "React wrappers for Bryntum Gantt JavaScript component",
   "keywords": [
     "bryntum",

package/src/BryntumGantt.tsx

@@ -1059,7 +1059,7 @@ export type BryntumGanttProps = {
      * @param {string,Record<string, string>} detail.renderData.style Inline styles for the task bar DOM element. Use either 'border: 1px solid black' or { border: '1px solid black' }
      * @param {Core.helper.util.DomClassList,string} detail.renderData.wrapperCls An object whose property names represent the CSS class names to be added to the event wrapper element. Set a property's value to truthy or falsy to add or remove the class name based on the property name. Using this technique, you do not have to know whether the class is already there, or deal with concatenation.
      * @param {Core.helper.util.DomClassList,string} detail.renderData.iconCls An object whose property names represent the CSS class names to be added to a task icon element.
-     * @param {Scheduler.model.TimeSpan[],TimeSpanConfig[]} indicators An array that can be populated with TimeSpan records or their config objects to have them rendered in the task row
+     * @param {Scheduler.model.TimeSpan[],TimeSpanConfig[]} indicators An array that can be populated with TimeSpan records or their config objects to have them rendered in the task row <h3>Using JSX (React)</h3> When using the Bryntum React wrapper, the task renderer can return JSX elements: ```javascript taskRenderer({ taskRecord, renderData }) {     return &lt;MyTaskComponent task={taskRecord} />; } ``` *Using JSX in the task renderer creates a React portal for each rendered task. For Gantt charts with many visible tasks or frequently re-rendered views, this may impact scrolling performance compared to returning plain strings or [DomConfig](https://bryntum.com/products/gantt/docs/api/Core/helper/DomHelper#typedef-DomConfig) objects. Consider using JSX primarily for tasks that require complex interactive React components.*
      * @returns {string,DomConfig,DomConfig[]} A simple string, or a DomConfig object defining the actual HTML
      */
     taskRenderer? : (detail: { taskRecord: TaskModel, renderData: { cls: DomClassList|string, style: string|Record<string, string>, wrapperCls: DomClassList|string, iconCls: DomClassList|string } }, indicators: TimeSpan[]|TimeSpanConfig[]) => string|DomConfig|DomConfig[]

package/src/BryntumGanttBase.tsx

@@ -1059,7 +1059,7 @@ export type BryntumGanttBaseProps = {
      * @param {string,Record<string, string>} detail.renderData.style Inline styles for the task bar DOM element. Use either 'border: 1px solid black' or { border: '1px solid black' }
      * @param {Core.helper.util.DomClassList,string} detail.renderData.wrapperCls An object whose property names represent the CSS class names to be added to the event wrapper element. Set a property's value to truthy or falsy to add or remove the class name based on the property name. Using this technique, you do not have to know whether the class is already there, or deal with concatenation.
      * @param {Core.helper.util.DomClassList,string} detail.renderData.iconCls An object whose property names represent the CSS class names to be added to a task icon element.
-     * @param {Scheduler.model.TimeSpan[],TimeSpanConfig[]} indicators An array that can be populated with TimeSpan records or their config objects to have them rendered in the task row
+     * @param {Scheduler.model.TimeSpan[],TimeSpanConfig[]} indicators An array that can be populated with TimeSpan records or their config objects to have them rendered in the task row <h3>Using JSX (React)</h3> When using the Bryntum React wrapper, the task renderer can return JSX elements: ```javascript taskRenderer({ taskRecord, renderData }) {     return &lt;MyTaskComponent task={taskRecord} />; } ``` *Using JSX in the task renderer creates a React portal for each rendered task. For Gantt charts with many visible tasks or frequently re-rendered views, this may impact scrolling performance compared to returning plain strings or [DomConfig](https://bryntum.com/products/gantt/docs/api/Core/helper/DomHelper#typedef-DomConfig) objects. Consider using JSX primarily for tasks that require complex interactive React components.*
      * @returns {string,DomConfig,DomConfig[]} A simple string, or a DomConfig object defining the actual HTML
      */
     taskRenderer? : (detail: { taskRecord: TaskModel, renderData: { cls: DomClassList|string, style: string|Record<string, string>, wrapperCls: DomClassList|string, iconCls: DomClassList|string } }, indicators: TimeSpan[]|TimeSpanConfig[]) => string|DomConfig|DomConfig[]

package/src/BryntumScheduler.tsx

@@ -520,8 +520,8 @@ export type BryntumSchedulerProps = {
      * @param {'tonal','filled','bordered','traced','outlined','indented','line','dashed','minimal','rounded','calendar','interday','gantt',null} detail.renderData.eventStyle The `eventStyle` of the event. Use this to apply custom styles to the event DOM element
      * @param {string} detail.renderData.eventColor The `eventColor` of the event. Use this to set a custom color for the rendered event
      * @param {string} detail.renderData.ariaLabel A description of the event details used for screen readers
-     * @param {DomConfig[]} detail.renderData.children An array of DOM configs used as children to the `b-sch-event` element. Can be populated with additional DOM configs to have more control over contents.
-     * @returns {string,DomConfig,DomConfig[]} A simple string, or a DomConfig (or array thereof)
+     * @param {DomConfig[]} detail.renderData.children An array of DOM configs used as children to the `b-sch-event` element. Can be populated with additional DOM configs to have more control over contents. <h3>Using JSX (React)</h3> When using the Bryntum React wrapper, the event renderer can return JSX elements: ```javascript eventRenderer({ eventRecord, resourceRecord, renderData }) {     return &lt;MyEventComponent event={eventRecord} resource={resourceRecord} />; } ``` *Using JSX in the event renderer creates a React portal for each rendered event. For schedulers with many visible events or frequently re-rendered views, this may impact scrolling performance compared to returning plain strings or [DomConfig](https://bryntum.com/products/gantt/docs/api/Core/helper/DomHelper#typedef-DomConfig) objects. Consider using JSX primarily for events that require complex interactive React components.*
+     * @returns {string,DomConfig,DomConfig[]} A simple string, a DomConfig (or array thereof), or a JSX element when using React
      */
     eventRenderer? : (detail: { eventRecord: SchedulerEventModel, resourceRecord: SchedulerResourceModel, assignmentRecord: SchedulerAssignmentModel, scheduler: Scheduler, renderData: { event: SchedulerEventModel, cls: DomClassList|string, wrapperCls: DomClassList|string, iconCls: DomClassList|string, left: number, width: number, height: number, style: string|Record<string, string>, wrapperStyle: string|Record<string, string>, eventStyle: 'tonal'|'filled'|'bordered'|'traced'|'outlined'|'indented'|'line'|'dashed'|'minimal'|'rounded'|'calendar'|'interday'|'gantt'|null, eventColor: string, ariaLabel: string, children: DomConfig[] } }) => string|DomConfig|DomConfig[]
     /**

package/src/BryntumSchedulerBase.tsx

@@ -520,8 +520,8 @@ export type BryntumSchedulerBaseProps = {
      * @param {'tonal','filled','bordered','traced','outlined','indented','line','dashed','minimal','rounded','calendar','interday','gantt',null} detail.renderData.eventStyle The `eventStyle` of the event. Use this to apply custom styles to the event DOM element
      * @param {string} detail.renderData.eventColor The `eventColor` of the event. Use this to set a custom color for the rendered event
      * @param {string} detail.renderData.ariaLabel A description of the event details used for screen readers
-     * @param {DomConfig[]} detail.renderData.children An array of DOM configs used as children to the `b-sch-event` element. Can be populated with additional DOM configs to have more control over contents.
-     * @returns {string,DomConfig,DomConfig[]} A simple string, or a DomConfig (or array thereof)
+     * @param {DomConfig[]} detail.renderData.children An array of DOM configs used as children to the `b-sch-event` element. Can be populated with additional DOM configs to have more control over contents. <h3>Using JSX (React)</h3> When using the Bryntum React wrapper, the event renderer can return JSX elements: ```javascript eventRenderer({ eventRecord, resourceRecord, renderData }) {     return &lt;MyEventComponent event={eventRecord} resource={resourceRecord} />; } ``` *Using JSX in the event renderer creates a React portal for each rendered event. For schedulers with many visible events or frequently re-rendered views, this may impact scrolling performance compared to returning plain strings or [DomConfig](https://bryntum.com/products/gantt/docs/api/Core/helper/DomHelper#typedef-DomConfig) objects. Consider using JSX primarily for events that require complex interactive React components.*
+     * @returns {string,DomConfig,DomConfig[]} A simple string, a DomConfig (or array thereof), or a JSX element when using React
      */
     eventRenderer? : (detail: { eventRecord: SchedulerEventModel, resourceRecord: SchedulerResourceModel, assignmentRecord: SchedulerAssignmentModel, scheduler: Scheduler, renderData: { event: SchedulerEventModel, cls: DomClassList|string, wrapperCls: DomClassList|string, iconCls: DomClassList|string, left: number, width: number, height: number, style: string|Record<string, string>, wrapperStyle: string|Record<string, string>, eventStyle: 'tonal'|'filled'|'bordered'|'traced'|'outlined'|'indented'|'line'|'dashed'|'minimal'|'rounded'|'calendar'|'interday'|'gantt'|null, eventColor: string, ariaLabel: string, children: DomConfig[] } }) => string|DomConfig|DomConfig[]
     /**

package/src/BryntumSchedulerPro.tsx

@@ -539,8 +539,8 @@ export type BryntumSchedulerProProps = {
      * @param {'tonal','filled','bordered','traced','outlined','indented','line','dashed','minimal','rounded','calendar','interday','gantt',null} detail.renderData.eventStyle The `eventStyle` of the event. Use this to apply custom styles to the event DOM element
      * @param {string} detail.renderData.eventColor The `eventColor` of the event. Use this to set a custom color for the rendered event
      * @param {string} detail.renderData.ariaLabel A description of the event details used for screen readers
-     * @param {DomConfig[]} detail.renderData.children An array of DOM configs used as children to the `b-sch-event` element. Can be populated with additional DOM configs to have more control over contents.
-     * @returns {string,DomConfig,DomConfig[]} A simple string, or a DomConfig (or array thereof)
+     * @param {DomConfig[]} detail.renderData.children An array of DOM configs used as children to the `b-sch-event` element. Can be populated with additional DOM configs to have more control over contents. <h3>Using JSX (React)</h3> When using the Bryntum React wrapper, the event renderer can return JSX elements: ```javascript eventRenderer({ eventRecord, resourceRecord, renderData }) {     return &lt;MyEventComponent event={eventRecord} resource={resourceRecord} />; } ``` *Using JSX in the event renderer creates a React portal for each rendered event. For schedulers with many visible events or frequently re-rendered views, this may impact scrolling performance compared to returning plain strings or [DomConfig](https://bryntum.com/products/gantt/docs/api/Core/helper/DomHelper#typedef-DomConfig) objects. Consider using JSX primarily for events that require complex interactive React components.*
+     * @returns {string,DomConfig,DomConfig[]} A simple string, a DomConfig (or array thereof), or a JSX element when using React
      */
     eventRenderer? : (detail: { eventRecord: SchedulerEventModel, resourceRecord: SchedulerResourceModel, assignmentRecord: SchedulerAssignmentModel, scheduler: Scheduler, renderData: { event: SchedulerEventModel, cls: DomClassList|string, wrapperCls: DomClassList|string, iconCls: DomClassList|string, left: number, width: number, height: number, style: string|Record<string, string>, wrapperStyle: string|Record<string, string>, eventStyle: 'tonal'|'filled'|'bordered'|'traced'|'outlined'|'indented'|'line'|'dashed'|'minimal'|'rounded'|'calendar'|'interday'|'gantt'|null, eventColor: string, ariaLabel: string, children: DomConfig[] } }) => string|DomConfig|DomConfig[]
     /**

package/src/BryntumSchedulerProBase.tsx

@@ -539,8 +539,8 @@ export type BryntumSchedulerProBaseProps = {
      * @param {'tonal','filled','bordered','traced','outlined','indented','line','dashed','minimal','rounded','calendar','interday','gantt',null} detail.renderData.eventStyle The `eventStyle` of the event. Use this to apply custom styles to the event DOM element
      * @param {string} detail.renderData.eventColor The `eventColor` of the event. Use this to set a custom color for the rendered event
      * @param {string} detail.renderData.ariaLabel A description of the event details used for screen readers
-     * @param {DomConfig[]} detail.renderData.children An array of DOM configs used as children to the `b-sch-event` element. Can be populated with additional DOM configs to have more control over contents.
-     * @returns {string,DomConfig,DomConfig[]} A simple string, or a DomConfig (or array thereof)
+     * @param {DomConfig[]} detail.renderData.children An array of DOM configs used as children to the `b-sch-event` element. Can be populated with additional DOM configs to have more control over contents. <h3>Using JSX (React)</h3> When using the Bryntum React wrapper, the event renderer can return JSX elements: ```javascript eventRenderer({ eventRecord, resourceRecord, renderData }) {     return &lt;MyEventComponent event={eventRecord} resource={resourceRecord} />; } ``` *Using JSX in the event renderer creates a React portal for each rendered event. For schedulers with many visible events or frequently re-rendered views, this may impact scrolling performance compared to returning plain strings or [DomConfig](https://bryntum.com/products/gantt/docs/api/Core/helper/DomHelper#typedef-DomConfig) objects. Consider using JSX primarily for events that require complex interactive React components.*
+     * @returns {string,DomConfig,DomConfig[]} A simple string, a DomConfig (or array thereof), or a JSX element when using React
      */
     eventRenderer? : (detail: { eventRecord: SchedulerEventModel, resourceRecord: SchedulerResourceModel, assignmentRecord: SchedulerAssignmentModel, scheduler: Scheduler, renderData: { event: SchedulerEventModel, cls: DomClassList|string, wrapperCls: DomClassList|string, iconCls: DomClassList|string, left: number, width: number, height: number, style: string|Record<string, string>, wrapperStyle: string|Record<string, string>, eventStyle: 'tonal'|'filled'|'bordered'|'traced'|'outlined'|'indented'|'line'|'dashed'|'minimal'|'rounded'|'calendar'|'interday'|'gantt'|null, eventColor: string, ariaLabel: string, children: DomConfig[] } }) => string|DomConfig|DomConfig[]
     /**

package/src/BryntumTimeline.tsx

@@ -520,8 +520,8 @@ export type BryntumTimelineProps = {
      * @param {'tonal','filled','bordered','traced','outlined','indented','line','dashed','minimal','rounded','calendar','interday','gantt',null} detail.renderData.eventStyle The `eventStyle` of the event. Use this to apply custom styles to the event DOM element
      * @param {string} detail.renderData.eventColor The `eventColor` of the event. Use this to set a custom color for the rendered event
      * @param {string} detail.renderData.ariaLabel A description of the event details used for screen readers
-     * @param {DomConfig[]} detail.renderData.children An array of DOM configs used as children to the `b-sch-event` element. Can be populated with additional DOM configs to have more control over contents.
-     * @returns {string,DomConfig,DomConfig[]} A simple string, or a DomConfig (or array thereof)
+     * @param {DomConfig[]} detail.renderData.children An array of DOM configs used as children to the `b-sch-event` element. Can be populated with additional DOM configs to have more control over contents. <h3>Using JSX (React)</h3> When using the Bryntum React wrapper, the event renderer can return JSX elements: ```javascript eventRenderer({ eventRecord, resourceRecord, renderData }) {     return &lt;MyEventComponent event={eventRecord} resource={resourceRecord} />; } ``` *Using JSX in the event renderer creates a React portal for each rendered event. For schedulers with many visible events or frequently re-rendered views, this may impact scrolling performance compared to returning plain strings or [DomConfig](https://bryntum.com/products/gantt/docs/api/Core/helper/DomHelper#typedef-DomConfig) objects. Consider using JSX primarily for events that require complex interactive React components.*
+     * @returns {string,DomConfig,DomConfig[]} A simple string, a DomConfig (or array thereof), or a JSX element when using React
      */
     eventRenderer? : (detail: { eventRecord: SchedulerEventModel, resourceRecord: SchedulerResourceModel, assignmentRecord: SchedulerAssignmentModel, scheduler: Scheduler, renderData: { event: SchedulerEventModel, cls: DomClassList|string, wrapperCls: DomClassList|string, iconCls: DomClassList|string, left: number, width: number, height: number, style: string|Record<string, string>, wrapperStyle: string|Record<string, string>, eventStyle: 'tonal'|'filled'|'bordered'|'traced'|'outlined'|'indented'|'line'|'dashed'|'minimal'|'rounded'|'calendar'|'interday'|'gantt'|null, eventColor: string, ariaLabel: string, children: DomConfig[] } }) => string|DomConfig|DomConfig[]
     /**