@bryntum/core-react-thin 7.3.3 → 7.3.5

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, Color, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, ReactJSX, 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, OverflowTwinConfig, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, ReactJSX, 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';
 
@@ -439,6 +439,12 @@ export type BryntumTabPanelProps = {
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TabPanel#config-namedItems)
      */
     namedItems? : Record<string, CoreContainerItemConfig>
+    /**
+     * Customizes the config object used to create this widget's clone in a [Toolbar](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar)'s
+     * overflow menu (see [overflow](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar#config-overflow)).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TabPanel#config-overflowTwinConfig)
+     */
+    overflowTwinConfig? : OverflowTwinConfig|null
     /**
      * Set to `true` when a widget is rendered into another widget's [contentElement](https://bryntum.com/products/core/docs/api/Core/widget/Widget#property-contentElement), but must
      * not participate in the standard layout of that widget, and must be positioned relatively to that
@@ -538,7 +544,7 @@ export type BryntumTabPanelProps = {
      * (if explicitly specified) will be used as the `stateId`.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TabPanel#config-stateId)
      */
-    stateId? : string
+    stateId? : string|null
     /**
      * The `StateProvider` to use to save and restore this object's [state](https://bryntum.com/products/core/docs/api/Core/mixin/State#property-state). By default, `state`
      * will be saved using the [default state provider](https://bryntum.com/products/core/docs/api/Core/state/StateProvider#property-instance-static).
@@ -884,6 +890,7 @@ export class BryntumTabPanel extends React.Component<BryntumTabPanelProps> {
         'masked',
         'monitorResize',
         'namedItems',
+        'overflowTwinConfig',
         'positioned',
         'preventTooltipOnTouch',
         'relayStoreEvents',
@@ -895,7 +902,6 @@ export class BryntumTabPanel extends React.Component<BryntumTabPanelProps> {
         'showTooltipWhenDisabled',
         'stateful',
         'statefulEvents',
-        'stateId',
         'stateProvider',
         'strips',
         'tab',
@@ -976,6 +982,7 @@ export class BryntumTabPanel extends React.Component<BryntumTabPanelProps> {
         'rtl',
         'scrollable',
         'span',
+        'stateId',
         'strictRecordMapping',
         'title',
         'tools',

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, Color, CoreContainerItemConfig, DomConfig, Field, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, ReactJSX, Rectangle, Scroller, TabConfig, TextAreaField, TextAreaFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, CoreContainerItemConfig, DomConfig, Field, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, OverflowTwinConfig, ReactJSX, Rectangle, Scroller, TabConfig, TextAreaField, TextAreaFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -105,6 +105,7 @@ export type BryntumTextAreaFieldProps = {
      * Show a trigger to clear field, if this field is not [readOnly](https://bryntum.com/products/core/docs/api/Core/widget/Field#config-readOnly). The trigger is available
      * in the [triggers](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-triggers) object under the name `clear`. May also be an object which
      * configures the `clear` [trigger](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-triggers).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaField#config-clearable)
      */
     clearable? : boolean|FieldTriggerConfig
     /**
@@ -433,6 +434,12 @@ export type BryntumTextAreaFieldProps = {
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaField#config-name)
      */
     name? : string
+    /**
+     * Customizes the config object used to create this widget's clone in a [Toolbar](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar)'s
+     * overflow menu (see [overflow](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar#config-overflow)).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaField#config-overflowTwinConfig)
+     */
+    overflowTwinConfig? : OverflowTwinConfig|null
     /**
      * Text to display in empty field.
      */
@@ -822,6 +829,7 @@ export class BryntumTextAreaField extends React.Component<BryntumTextAreaFieldPr
         'masked',
         'monitorResize',
         'name',
+        'overflowTwinConfig',
         'positioned',
         'preventTooltipOnTouch',
         'relayStoreEvents',

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, Color, CoreContainerItemConfig, DomConfig, Field, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, ReactJSX, Rectangle, Scroller, TabConfig, TextAreaPickerField, TextAreaPickerFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, CoreContainerItemConfig, DomConfig, Field, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, OverflowTwinConfig, ReactJSX, Rectangle, Scroller, TabConfig, TextAreaPickerField, TextAreaPickerFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -103,6 +103,7 @@ export type BryntumTextAreaPickerFieldProps = {
      * Show a trigger to clear field, if this field is not [readOnly](https://bryntum.com/products/core/docs/api/Core/widget/Field#config-readOnly). The trigger is available
      * in the [triggers](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-triggers) object under the name `clear`. May also be an object which
      * configures the `clear` [trigger](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-triggers).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaPickerField#config-clearable)
      */
     clearable? : boolean|FieldTriggerConfig
     /**
@@ -432,6 +433,12 @@ export type BryntumTextAreaPickerFieldProps = {
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaPickerField#config-name)
      */
     name? : string
+    /**
+     * Customizes the config object used to create this widget's clone in a [Toolbar](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar)'s
+     * overflow menu (see [overflow](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar#config-overflow)).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextAreaPickerField#config-overflowTwinConfig)
+     */
+    overflowTwinConfig? : OverflowTwinConfig|null
     /**
      * 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.
@@ -833,6 +840,7 @@ export class BryntumTextAreaPickerField extends React.Component<BryntumTextAreaP
         'minLength',
         'monitorResize',
         'name',
+        'overflowTwinConfig',
         'picker',
         'pickerAlignElement',
         'positioned',

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, Color, CoreContainerItemConfig, DomConfig, Field, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, ReactJSX, Rectangle, Scroller, TabConfig, TextField, TextFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, CoreContainerItemConfig, DomConfig, Field, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, OverflowTwinConfig, ReactJSX, Rectangle, Scroller, TabConfig, TextField, TextFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -99,6 +99,7 @@ export type BryntumTextFieldProps = {
      * Show a trigger to clear field, if this field is not [readOnly](https://bryntum.com/products/core/docs/api/Core/widget/Field#config-readOnly). The trigger is available
      * in the [triggers](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-triggers) object under the name `clear`. May also be an object which
      * configures the `clear` [trigger](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-triggers).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextField#config-clearable)
      */
     clearable? : boolean|FieldTriggerConfig
     /**
@@ -435,6 +436,12 @@ export type BryntumTextFieldProps = {
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextField#config-name)
      */
     name? : string
+    /**
+     * Customizes the config object used to create this widget's clone in a [Toolbar](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar)'s
+     * overflow menu (see [overflow](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar#config-overflow)).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TextField#config-overflowTwinConfig)
+     */
+    overflowTwinConfig? : OverflowTwinConfig|null
     /**
      * Text to display in empty field.
      */
@@ -821,6 +828,7 @@ export class BryntumTextField extends React.Component<BryntumTextFieldProps> {
         'minLength',
         'monitorResize',
         'name',
+        'overflowTwinConfig',
         'positioned',
         'preventTooltipOnTouch',
         'relayStoreEvents',

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, Color, CoreContainerItemConfig, DateField, DomConfig, DurationConfig, Field, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, ReactJSX, Rectangle, Scroller, TabConfig, TimeField, TimeFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, CoreContainerItemConfig, DateField, DomConfig, DurationConfig, Field, FieldContainerConfig, FieldTriggerConfig, KeyMapConfig, MaskConfig, Model, OverflowTwinConfig, ReactJSX, Rectangle, Scroller, TabConfig, TimeField, TimeFieldListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -103,6 +103,7 @@ export type BryntumTimeFieldProps = {
      * Show a trigger to clear field, if this field is not [readOnly](https://bryntum.com/products/core/docs/api/Core/widget/Field#config-readOnly). The trigger is available
      * in the [triggers](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-triggers) object under the name `clear`. May also be an object which
      * configures the `clear` [trigger](https://bryntum.com/products/core/docs/api/Core/widget/Field#property-triggers).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TimeField#config-clearable)
      */
     clearable? : boolean|FieldTriggerConfig
     /**
@@ -454,6 +455,12 @@ export type BryntumTimeFieldProps = {
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TimeField#config-name)
      */
     name? : string
+    /**
+     * Customizes the config object used to create this widget's clone in a [Toolbar](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar)'s
+     * overflow menu (see [overflow](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar#config-overflow)).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TimeField#config-overflowTwinConfig)
+     */
+    overflowTwinConfig? : OverflowTwinConfig|null
     /**
      * 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.
@@ -874,6 +881,7 @@ export class BryntumTimeField extends React.Component<BryntumTimeFieldProps> {
         'minLength',
         'monitorResize',
         'name',
+        'overflowTwinConfig',
         'picker',
         'pickerAlignElement',
         'positioned',

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, Color, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, ReactJSX, 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, OverflowTwinConfig, ReactJSX, Rectangle, Scroller, ScrollerConfig, TabConfig, TimePicker, TimePickerListeners, ToolbarItems, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -389,6 +389,12 @@ export type BryntumTimePickerProps = {
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TimePicker#config-namedItems)
      */
     namedItems? : Record<string, CoreContainerItemConfig>
+    /**
+     * Customizes the config object used to create this widget's clone in a [Toolbar](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar)'s
+     * overflow menu (see [overflow](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar#config-overflow)).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/TimePicker#config-overflowTwinConfig)
+     */
+    overflowTwinConfig? : OverflowTwinConfig|null
     /**
      * Set to `true` when a widget is rendered into another widget's [contentElement](https://bryntum.com/products/core/docs/api/Core/widget/Widget#property-contentElement), but must
      * not participate in the standard layout of that widget, and must be positioned relatively to that
@@ -721,6 +727,7 @@ export class BryntumTimePicker extends React.Component<BryntumTimePickerProps> {
         'masked',
         'monitorResize',
         'namedItems',
+        'overflowTwinConfig',
         'positioned',
         'preventTooltipOnTouch',
         'relayStoreEvents',

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, Color, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, Model, ReactJSX, 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, OverflowTwinConfig, ReactJSX, Rectangle, Scroller, ScrollerConfig, TabConfig, Tool, ToolConfig, Toolbar, ToolbarItems, ToolbarListeners, TooltipConfig, VueConfig, Widget } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -386,6 +386,12 @@ export type BryntumToolbarProps = {
      * @property {Function} overflow.filter A filter function which may return a falsy value to prevent toolbar items from being cloned into the overflow menu.
      */
     overflow? : string|{ type: 'scroll'|'menu', repeat: ClickRepeaterConfig, filter: () => void }|null
+    /**
+     * Customizes the config object used to create this widget's clone in a [Toolbar](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar)'s
+     * overflow menu (see [overflow](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar#config-overflow)).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/Toolbar#config-overflowTwinConfig)
+     */
+    overflowTwinConfig? : OverflowTwinConfig|null
     /**
      * Set to `true` when a widget is rendered into another widget's [contentElement](https://bryntum.com/products/core/docs/api/Core/widget/Widget#property-contentElement), but must
      * not participate in the standard layout of that widget, and must be positioned relatively to that
@@ -744,6 +750,7 @@ export class BryntumToolbar extends React.Component<BryntumToolbarProps> {
         'monitorResize',
         'namedItems',
         'overflow',
+        'overflowTwinConfig',
         'positioned',
         'preventTooltipOnTouch',
         'relayStoreEvents',

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, Color, DomConfig, KeyMapConfig, MaskConfig, ReactJSX, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget, WidgetListeners } from '@bryntum/core-thin';
+import { AlignSpec, Base, Color, DomConfig, KeyMapConfig, MaskConfig, OverflowTwinConfig, ReactJSX, Rectangle, Scroller, ScrollerConfig, TabConfig, TooltipConfig, VueConfig, Widget, WidgetListeners } from '@bryntum/core-thin';
 
 import { createWidget, shouldComponentUpdate, processWidgetContent } from './WrapperHelper.js';
 
@@ -298,6 +298,12 @@ export type BryntumWidgetProps = {
      * @property {boolean} immediate Set to `true` to receive resize notifications immediately.
      */
     monitorResize? : boolean|object
+    /**
+     * Customizes the config object used to create this widget's clone in a [Toolbar](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar)'s
+     * overflow menu (see [overflow](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar#config-overflow)).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/Widget#config-overflowTwinConfig)
+     */
+    overflowTwinConfig? : OverflowTwinConfig|null
     /**
      * Set to `true` when a widget is rendered into another widget's [contentElement](https://bryntum.com/products/core/docs/api/Core/widget/Widget#property-contentElement), but must
      * not participate in the standard layout of that widget, and must be positioned relatively to that
@@ -568,6 +574,7 @@ export class BryntumWidget extends React.Component<BryntumWidgetProps> {
         'maskDefaults',
         'masked',
         'monitorResize',
+        'overflowTwinConfig',
         'positioned',
         'preventTooltipOnTouch',
         'relayStoreEvents',

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, Color, Container, CoreContainerItemConfig, CoreContainerLayoutConfig, DomConfig, KeyMapConfig, Layout, MaskConfig, MenuItemConfig, MenuItemEntry, Model, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, ReactJSX, 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, OverflowTwinConfig, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, ReactJSX, 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';
 
@@ -435,6 +435,12 @@ export type BryntumYearPickerProps = {
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/YearPicker#config-namedItems)
      */
     namedItems? : Record<string, CoreContainerItemConfig>
+    /**
+     * Customizes the config object used to create this widget's clone in a [Toolbar](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar)'s
+     * overflow menu (see [overflow](https://bryntum.com/products/core/docs/api/Core/widget/Toolbar#config-overflow)).
+     * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/YearPicker#config-overflowTwinConfig)
+     */
+    overflowTwinConfig? : OverflowTwinConfig|null
     /**
      * Set to `true` when a widget is rendered into another widget's [contentElement](https://bryntum.com/products/core/docs/api/Core/widget/Widget#property-contentElement), but must
      * not participate in the standard layout of that widget, and must be positioned relatively to that
@@ -538,7 +544,7 @@ export type BryntumYearPickerProps = {
      * (if explicitly specified) will be used as the `stateId`.
      * [More...](https://bryntum.com/products/grid/docs/api/Core/widget/YearPicker#config-stateId)
      */
-    stateId? : string
+    stateId? : string|null
     /**
      * The `StateProvider` to use to save and restore this object's [state](https://bryntum.com/products/core/docs/api/Core/mixin/State#property-state). By default, `state`
      * will be saved using the [default state provider](https://bryntum.com/products/core/docs/api/Core/state/StateProvider#property-instance-static).
@@ -868,6 +874,7 @@ export class BryntumYearPicker extends React.Component<BryntumYearPickerProps> {
         'minYear',
         'monitorResize',
         'namedItems',
+        'overflowTwinConfig',
         'positioned',
         'preventTooltipOnTouch',
         'relayStoreEvents',
@@ -879,7 +886,6 @@ export class BryntumYearPicker extends React.Component<BryntumYearPickerProps> {
         'showTooltipWhenDisabled',
         'stateful',
         'statefulEvents',
-        'stateId',
         'stateProvider',
         'strips',
         'tab',
@@ -957,6 +963,7 @@ export class BryntumYearPicker extends React.Component<BryntumYearPickerProps> {
         'scrollable',
         'span',
         'startYear',
+        'stateId',
         'strictRecordMapping',
         'title',
         'tools',

package/src/WrapperHelper.tsx

@@ -803,7 +803,7 @@ function processCalendarEventContent(this: any, {
         refHolder    = targetElement.closest('[data-ref]') as HTMLElement,
         mode         = typeof this.mode === 'string' ? this.mode : this.mode?.type?.slice(0, 4),
         lastPortalId = wrap?.dataset.lastPortalId,
-        portalKey    = domConfig.dataset?.date || (dataHolder)?.dataset.date,
+        portalKey    = domConfig?.dataset?.date || dataHolder?.dataset.date,
         containerRef = refHolder?.dataset?.ref;
 
     reactComponent.syncContent = reactComponent.syncContent || function(fn: () => unknown) {
@@ -1142,9 +1142,16 @@ function processEventContent(this: any, {
                         }) as Element,
                         portal       = ReactDOM.createPortal(jsx, jsxContainer);
 
-                    // Store eventGeneration on the portal to easily determine later if it needs to be updated
+                    // currentData resolves renderData in vertical mode, where eventGeneration lives one level
+                    // deeper than elementData; reading elementData directly would always yield undefined.
                     // @ts-expect-error
-                    portal.eventGeneration = wrap.elementData.eventGeneration;
+                    portal.eventGeneration = currentData.eventGeneration;
+
+                    // Track the container so we can detect below when the event element is replaced while its
+                    // generation is unchanged (orientation switch, constrainDragToTimeline: false drag proxy), leaving
+                    // the portal in a detached container. https://github.com/bryntum/support/issues/13266
+                    // @ts-expect-error
+                    portal.jsxContainer = jsxContainer;
 
                     // Store the React element so that we can reuse it when reusing wrap element
                     wrap.lastJSX = jsx;
@@ -1171,8 +1178,14 @@ function processEventContent(this: any, {
 
             // Recurring events need re-creating always:
             //  - https://github.com/bryntum/support/issues/10595
-            // Re-create portal only if the underlying eventRecord changed its generation or if exporting
-            if (!portal || isRecurring || isExporting || portal.eventGeneration !== wrap.elementData.eventGeneration || this.$isExpanding) {
+            // Re-create portal only if the underlying eventRecord changed its generation or if exporting.
+            // Use currentData.eventGeneration (not wrap.elementData.eventGeneration): in vertical mode
+            // eventGeneration lives in elementData.renderData, so wrap.elementData.eventGeneration is always
+            // undefined and stale portals would never be detected.
+            // Also re-create when the container is detached: generation can be unchanged while the event element
+            // is replaced (orientation switch, constrainDragToTimeline: false drag proxy).
+            // https://github.com/bryntum/support/issues/13266
+            if (!portal || isRecurring || isExporting || portal.eventGeneration !== currentData.eventGeneration || this.$isExpanding || !parent?.contains(portal.jsxContainer)) {
                 if ((scrolling || !isDragging) && !isEditing) {
                     updateContent();
                 }