fix(ToolbarV2 subcomponents): add missing props (#5366)

Author: Lukas742

packages/main/src/webComponents/ToolbarButton/index.tsx

@@ -2,7 +2,7 @@
 
 import '@ui5/webcomponents/dist/ToolbarButton.js';
 import type { CSSProperties } from 'react';
-import { ButtonDesign } from '../../enums/index.js';
+import { ButtonDesign, ToolbarItemOverflowBehavior } from '../../enums/index.js';
 import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
 
@@ -51,6 +51,21 @@ interface ToolbarButtonAttributes {
    * **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
    */
   tooltip?: string;
+  /**
+   * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
+   * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
+   * Available options are:
+   *
+   * *`NeverOverflow`
+   * *`AlwaysOverflow`
+   * *`Default`
+   */
+  overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
+  /**
+   * Defines if the toolbar overflow popup should close upon interaction with the item.
+   * It will close by default.
+   */
+  preventOverflowClosing?: boolean;
   /**
    * Defines the width of the button.
    *
@@ -97,8 +112,8 @@ export interface ToolbarButtonPropTypes extends ToolbarButtonAttributes, Omit<Co
  */
 const ToolbarButton = withWebComponent<ToolbarButtonPropTypes, ToolbarButtonDomRef>(
   'ui5-toolbar-button',
-  ['accessibleName', 'accessibleNameRef', 'design', 'icon', 'text', 'tooltip', 'width'],
-  ['disabled', 'iconEnd'],
+  ['accessibleName', 'accessibleNameRef', 'design', 'icon', 'overflowPriority', 'text', 'tooltip', 'width'],
+  ['disabled', 'iconEnd', 'preventOverflowClosing'],
   [],
   ['click'],
   () => import('@ui5/webcomponents/dist/ToolbarButton.js')
@@ -107,7 +122,8 @@ const ToolbarButton = withWebComponent<ToolbarButtonPropTypes, ToolbarButtonDomR
 ToolbarButton.displayName = 'ToolbarButton';
 
 ToolbarButton.defaultProps = {
-  design: ButtonDesign.Default
+  design: ButtonDesign.Default,
+  overflowPriority: ToolbarItemOverflowBehavior.Default
 };
 
 export { ToolbarButton };

packages/main/src/webComponents/ToolbarSelect/index.tsx

@@ -3,7 +3,7 @@
 import '@ui5/webcomponents/dist/ToolbarSelect.js';
 import type { ToolbarSelectChangeEventDetail } from '@ui5/webcomponents/dist/ToolbarSelect.js';
 import type { CSSProperties, ReactNode } from 'react';
-import { ValueState } from '../../enums/index.js';
+import { ToolbarItemOverflowBehavior, ValueState } from '../../enums/index.js';
 import type { Ui5CustomEvent, CommonProps, Ui5DomRef } from '../../interfaces/index.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
 
@@ -22,6 +22,21 @@ interface ToolbarSelectAttributes {
    * **Note:** A disabled component is noninteractive.
    */
   disabled?: boolean;
+  /**
+   * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
+   * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
+   * Available options are:
+   *
+   * *`NeverOverflow`
+   * *`AlwaysOverflow`
+   * *`Default`
+   */
+  overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
+  /**
+   * Defines if the toolbar overflow popup should close upon interaction with the item.
+   * It will close by default.
+   */
+  preventOverflowClosing?: boolean;
   /**
    * Defines the value state of the component.
    */
@@ -70,8 +85,8 @@ export interface ToolbarSelectPropTypes extends ToolbarSelectAttributes, Omit<Co
  */
 const ToolbarSelect = withWebComponent<ToolbarSelectPropTypes, ToolbarSelectDomRef>(
   'ui5-toolbar-select',
-  ['accessibleName', 'accessibleNameRef', 'valueState', 'width'],
-  ['disabled'],
+  ['accessibleName', 'accessibleNameRef', 'overflowPriority', 'valueState', 'width'],
+  ['disabled', 'preventOverflowClosing'],
   [],
   ['change', 'close', 'open'],
   () => import('@ui5/webcomponents/dist/ToolbarSelect.js')
@@ -80,7 +95,8 @@ const ToolbarSelect = withWebComponent<ToolbarSelectPropTypes, ToolbarSelectDomR
 ToolbarSelect.displayName = 'ToolbarSelect';
 
 ToolbarSelect.defaultProps = {
-  valueState: ValueState.None
+  valueState: ValueState.None,
+  overflowPriority: ToolbarItemOverflowBehavior.Default
 };
 
 export { ToolbarSelect };

packages/main/src/webComponents/ToolbarSeparatorV2/index.tsx

@@ -1,10 +1,28 @@
 'use client';
 
 import '@ui5/webcomponents/dist/ToolbarSeparator.js';
+import { ToolbarItemOverflowBehavior } from '../../enums/index.js';
 import type { CommonProps, Ui5DomRef } from '../../interfaces/index.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
+import { ToolbarSelect } from '../ToolbarSelect/index.js';
 
-interface ToolbarSeparatorV2Attributes {}
+interface ToolbarSeparatorV2Attributes {
+  /**
+   * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
+   * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
+   * Available options are:
+   *
+   * *`NeverOverflow`
+   * *`AlwaysOverflow`
+   * *`Default`
+   */
+  overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
+  /**
+   * Defines if the toolbar overflow popup should close upon interaction with the item.
+   * It will close by default.
+   */
+  preventOverflowClosing?: boolean;
+}
 
 export interface ToolbarSeparatorV2DomRef extends ToolbarSeparatorV2Attributes, Ui5DomRef {}
 
@@ -21,13 +39,17 @@ export interface ToolbarSeparatorV2PropTypes extends ToolbarSeparatorV2Attribute
  */
 const ToolbarSeparatorV2 = withWebComponent<ToolbarSeparatorV2PropTypes, ToolbarSeparatorV2DomRef>(
   'ui5-toolbar-separator',
-  [],
-  [],
+  ['overflowPriority'],
+  ['preventOverflowClosing'],
   [],
   [],
   () => import('@ui5/webcomponents/dist/ToolbarSeparator.js')
 );
 
 ToolbarSeparatorV2.displayName = 'ToolbarSeparatorV2';
 
+ToolbarSelect.defaultProps = {
+  overflowPriority: ToolbarItemOverflowBehavior.Default
+};
+
 export { ToolbarSeparatorV2 };

packages/main/src/webComponents/ToolbarSpacerV2/index.tsx

@@ -2,10 +2,27 @@
 
 import '@ui5/webcomponents/dist/ToolbarSpacer.js';
 import type { CSSProperties } from 'react';
+import { ToolbarItemOverflowBehavior } from '../../enums/index.js';
 import type { CommonProps, Ui5DomRef } from '../../interfaces/index.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
+import { ToolbarSelect } from '../ToolbarSelect/index.js';
 
 interface ToolbarSpacerV2Attributes {
+  /**
+   * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
+   * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
+   * Available options are:
+   *
+   * *`NeverOverflow`
+   * *`AlwaysOverflow`
+   * *`Default`
+   */
+  overflowPriority?: ToolbarItemOverflowBehavior | keyof typeof ToolbarItemOverflowBehavior;
+  /**
+   * Defines if the toolbar overflow popup should close upon interaction with the item.
+   * It will close by default.
+   */
+  preventOverflowClosing?: boolean;
   /**
    * Defines the width of the spacer.
    *
@@ -29,13 +46,17 @@ export interface ToolbarSpacerV2PropTypes extends ToolbarSpacerV2Attributes, Com
  */
 const ToolbarSpacerV2 = withWebComponent<ToolbarSpacerV2PropTypes, ToolbarSpacerV2DomRef>(
   'ui5-toolbar-spacer',
-  ['width'],
-  [],
+  ['overflowPriority', 'width'],
+  ['preventOverflowClosing'],
   [],
   [],
   () => import('@ui5/webcomponents/dist/ToolbarSpacer.js')
 );
 
 ToolbarSpacerV2.displayName = 'ToolbarSpacerV2';
 
+ToolbarSelect.defaultProps = {
+  overflowPriority: ToolbarItemOverflowBehavior.Default
+};
+
 export { ToolbarSpacerV2 };