@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/SplitButton.d.ts

@@ -6,51 +6,44 @@ import Button from "./Button.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * <code>ui5-split-button</code> enables users to trigger actions. It is constructed of two separate actions -
+ * `ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -
  * default action and arrow action that can be activated by clicking or tapping, or by
- * pressing certain keyboard keys - <code>Space</code> or <code>Enter</code> for default action,
- * and <code>Arrow Down</code> or <code>Arrow Up</code> for arrow action.
+ * pressing certain keyboard keys - `Space` or `Enter` for default action,
+ * and `Arrow Down` or `Arrow Up` for arrow action.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * <code>ui5-split-button</code> consists two separate buttons:
- * <ul>
- * <li>for the first one (default action) you can define some <code>text</code> or an <code>icon</code>, or both.
- * Also, it is possible to define different icon for active state of this button - <code>activeIcon</code>.</li>
- * <li>the second one (arrow action) contains only <code>slim-arrow-down</code> icon.</li>
- * </ul>
- * You can choose a <code>design</code> from a set of predefined types (the same as for ui5-button) that offer
+ * `ui5-split-button` consists two separate buttons:
+ *
+ * - for the first one (default action) you can define some `text` or an `icon`, or both.
+ * - the second one (arrow action) contains only `slim-arrow-down` icon.
+ *
+ * You can choose a `design` from a set of predefined types (the same as for ui5-button) that offer
  * different styling to correspond to the triggered action. Both text and arrow actions have the same design.
- * <br><br>
- * You can set the <code>ui5-split-button</code> as enabled or disabled. Both parts of an enabled
- * <code>ui5-split-button</code> can be pressed by clicking or tapping it, or by certain keys, which changes
+ *
+ * You can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled
+ * `ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes
  * the style to provide visual feedback to the user that it is pressed or hovered over with
- * the mouse cursor. A disabled <code>ui5-split-button</code> appears inactive and any of the two buttons
+ * the mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons
  * cannot be pressed.
  *
- * <h3>Keyboard Handling</h3>
- * <ul>
- * <li><code>Space</code> or <code>Enter</code> - triggers the default action</li>
- * <li><code>Shift</code> or <code>Escape</code> - if <code>Space</code> is pressed, releases the default action button without triggering the click event.</li>
- * <li><code>Arrow Down</code>, <code>Arrow Up</code>, <code>Alt</code>+<code>Arrow Down</code>, <code>Alt</code>+<code>Arrow Up</code>, or <code>F4</code> - triggers the arrow action</li>
- * There are separate events that are fired on activating of <code>ui5-split-button</code> parts:
- * <ul>
- * <li><code>click</code> for the first button (default action)</li>
- * <li><code>arrow-click</code> for the second button (arrow action)</li>
- * </ul>
- * </ul>
+ * ### Keyboard Handling
+ *
+ * - `Space` or `Enter` - triggers the default action
+ * - `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.
+ * - `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action
+ * There are separate events that are fired on activating of `ui5-split-button` parts:
  *
- * <h3>ES6 Module Import</h3>
+ * - `click` for the first button (default action)
+ * - `arrow-click` for the second button (arrow action)
  *
- * <code>import "@ui5/webcomponents/dist/SplitButton.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/SplitButton.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.SplitButton
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-split-button
+ * @extends UI5Element
  * @public
  * @since 1.1.0
  */
@@ -58,42 +51,24 @@ declare class SplitButton extends UI5Element {
     /**
      * Defines the icon to be displayed as graphical element within the component.
      * The SAP-icons font provides numerous options.
-     * <br><br>
-     * Example:
      *
-     * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+     * Example:
      *
-     * @type {string}
-     * @name sap.ui.webc.main.SplitButton.prototype.icon
-     * @defaultvalue ""
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default ""
      * @public
      */
     icon: string;
-    /**
-     * Defines the icon to be displayed in active state as graphical element within the component.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.SplitButton.prototype.activeIcon
-     * @defaultvalue ""
-     * @public
-     */
-    activeIcon: string;
     /**
      * Defines whether the arrow button should have the active state styles or not.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.SplitButton.prototype.activeArrowButton
-     * @defaultvalue false
+     * @default false
      * @public
      * @since 1.21.0
      */
     activeArrowButton: boolean;
     /**
      * Defines the component design.
-     *
-     * @type {sap.ui.webc.main.types.ButtonDesign}
-     * @name sap.ui.webc.main.SplitButton.prototype.design
-     * @defaultvalue "Default"
+     * @default "Default"
      * @public
      */
     design: `${ButtonDesign}`;
@@ -101,92 +76,55 @@ declare class SplitButton extends UI5Element {
      * Defines whether the component is disabled.
      * A disabled component can't be pressed or
      * focused, and it is not in the tab chain.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.SplitButton.prototype.disabled
-     * @defaultvalue false
+     * @default false
      * @public
      */
     disabled: boolean;
     /**
      * Defines the accessible ARIA name of the component.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.SplitButton.prototype.accessibleName
-     * @defaultvalue: ""
+     * @default undefined
      * @public
      */
     accessibleName?: string;
-    /**
-     * Indicates if the elements is on focus
-     * @type {boolean}
-     * @defaultvalue false
-     * @private
-     */
-    focused: boolean;
-    /**
-     * Accessibility-related properties for inner elements of the Split Button
-     *
-     * @type {object}
-     * @private
-     */
-    _splitButtonAccInfo: Record<string, boolean>;
     /**
      * Defines the tabIndex of the component.
-     * @type {string}
-     * @defaultvalue ""
+     * @default "0"
      * @private
      */
     _tabIndex: string;
     /**
      * Indicates if there is Space key pressed
-     * @type {boolean}
-     * @defaultvalue false
+     * @default false
      * @private
      */
     _spacePressed: boolean;
     /**
      * Indicates if there is SHIFT or ESCAPE key pressed
-     * @type {boolean}
-     * @defaultvalue false
+     * @default false
      * @private
      */
     _shiftOrEscapePressed: boolean;
     /**
      * Defines the active state of the text button
-     * @type {boolean}
-     * @defaultvalue false
+     * @default false
      * @private
      */
     _textButtonActive: boolean;
-    /**
-     * Defines the icon of the text button
-     * @type {string}
-     * @defaultvalue ""
-     * @private
-     */
-    _textButtonIcon: string;
     /**
      * Defines the state of the internal Button used for the Arrow button of the SplitButton.
-     *
-     * @type {boolean}
-     * @defaultvalue false
+     * @default false
      * @private
      */
     _activeArrowButton: boolean;
     /**
      * Defines the text of the component.
-     * <br><br>
-     * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
      *
-     * @type {Node[]}
-     * @name sap.ui.webc.main.SplitButton.prototype.default
-     * @slot
+     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
      * @public
      */
     text: Array<Node>;
     _textButtonPress: {
-        handleEvent: () => void;
+        handleEvent: (e: MouseEvent) => void;
         passive: boolean;
     };
     _isDefaultActionPressed: boolean;
@@ -194,16 +132,11 @@ declare class SplitButton extends UI5Element {
     static i18nBundle: I18nBundle;
     static onDefine(): Promise<void>;
     constructor();
-    /**
-     * Function that makes sure the focus is properly managed.
-     * @private
-     */
-    _manageFocus(button?: Button | SplitButton): void;
     onBeforeRendering(): void;
     _handleMouseClick(e: MouseEvent): void;
     _onFocusOut(e: FocusEvent): void;
     _onFocusIn(e: FocusEvent): void;
-    _textButtonFocusIn(e?: FocusEvent): void;
+    _onInnerButtonFocusIn(e: FocusEvent): void;
     _onKeyDown(e: KeyboardEvent): void;
     _onKeyUp(e: KeyboardEvent): void;
     _fireClick(e?: Event): void;
@@ -211,41 +144,35 @@ declare class SplitButton extends UI5Element {
     _textButtonRelease(): void;
     _arrowButtonPress(e: MouseEvent): void;
     _arrowButtonRelease(e: MouseEvent): void;
-    _setTabIndexValue(): void;
+    _setTabIndexValue(innerButtonPressed?: boolean): void;
     _onArrowButtonActiveStateChange(e: CustomEvent): void;
     /**
      * Checks if the pressed key is an arrow key.
-     *
-     * @param {KeyboardEvent} e - keyboard event
-     * @returns {boolean}
+     * @param e - keyboard event
      * @private
      */
     _isArrowKeyAction(e: KeyboardEvent): boolean;
     /**
      * Checks if the pressed key is a default action key (Space or Enter).
-     *
-     * @param {KeyboardEvent} e - keyboard event
-     * @returns {boolean}
+     * @param e - keyboard event
      * @private
      */
     _isDefaultAction(e: KeyboardEvent): boolean;
     /**
      * Checks if the pressed key is an escape key or shift key.
-     *
-     * @param {KeyboardEvent} e - keyboard event
-     * @returns {boolean}
+     * @param e - keyboard event
      * @private
      */
     _isShiftOrEscape(e: KeyboardEvent): boolean;
     /**
      * Handles the click event and the focus on the arrow button.
-     * @param {KeyboardEvent} e - keyboard event
+     * @param e - keyboard event
      * @private
      */
     _handleArrowButtonAction(e: KeyboardEvent | MouseEvent): void;
     /**
      * Handles the default action and the active state of the respective button.
-     * @param {KeyboardEvent} e - keyboard event
+     * @param e - keyboard event
      * @private
      */
     _handleDefaultAction(e: KeyboardEvent): void;
@@ -256,8 +183,6 @@ declare class SplitButton extends UI5Element {
     get textButton(): Button | null | undefined;
     get arrowButton(): Button | null | undefined;
     get accessibilityInfo(): {
-        ariaExpanded: boolean;
-        ariaHaspopup: boolean;
         description: string;
         keyboardHint: string;
     };

package/dist/SplitButton.js

@@ -25,51 +25,44 @@ import SplitButtonCss from "./generated/themes/SplitButton.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * <code>ui5-split-button</code> enables users to trigger actions. It is constructed of two separate actions -
+ * `ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -
  * default action and arrow action that can be activated by clicking or tapping, or by
- * pressing certain keyboard keys - <code>Space</code> or <code>Enter</code> for default action,
- * and <code>Arrow Down</code> or <code>Arrow Up</code> for arrow action.
+ * pressing certain keyboard keys - `Space` or `Enter` for default action,
+ * and `Arrow Down` or `Arrow Up` for arrow action.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
- * <code>ui5-split-button</code> consists two separate buttons:
- * <ul>
- * <li>for the first one (default action) you can define some <code>text</code> or an <code>icon</code>, or both.
- * Also, it is possible to define different icon for active state of this button - <code>activeIcon</code>.</li>
- * <li>the second one (arrow action) contains only <code>slim-arrow-down</code> icon.</li>
- * </ul>
- * You can choose a <code>design</code> from a set of predefined types (the same as for ui5-button) that offer
+ * `ui5-split-button` consists two separate buttons:
+ *
+ * - for the first one (default action) you can define some `text` or an `icon`, or both.
+ * - the second one (arrow action) contains only `slim-arrow-down` icon.
+ *
+ * You can choose a `design` from a set of predefined types (the same as for ui5-button) that offer
  * different styling to correspond to the triggered action. Both text and arrow actions have the same design.
- * <br><br>
- * You can set the <code>ui5-split-button</code> as enabled or disabled. Both parts of an enabled
- * <code>ui5-split-button</code> can be pressed by clicking or tapping it, or by certain keys, which changes
+ *
+ * You can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled
+ * `ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes
  * the style to provide visual feedback to the user that it is pressed or hovered over with
- * the mouse cursor. A disabled <code>ui5-split-button</code> appears inactive and any of the two buttons
+ * the mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons
  * cannot be pressed.
  *
- * <h3>Keyboard Handling</h3>
- * <ul>
- * <li><code>Space</code> or <code>Enter</code> - triggers the default action</li>
- * <li><code>Shift</code> or <code>Escape</code> - if <code>Space</code> is pressed, releases the default action button without triggering the click event.</li>
- * <li><code>Arrow Down</code>, <code>Arrow Up</code>, <code>Alt</code>+<code>Arrow Down</code>, <code>Alt</code>+<code>Arrow Up</code>, or <code>F4</code> - triggers the arrow action</li>
- * There are separate events that are fired on activating of <code>ui5-split-button</code> parts:
- * <ul>
- * <li><code>click</code> for the first button (default action)</li>
- * <li><code>arrow-click</code> for the second button (arrow action)</li>
- * </ul>
- * </ul>
+ * ### Keyboard Handling
+ *
+ * - `Space` or `Enter` - triggers the default action
+ * - `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.
+ * - `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action
+ * There are separate events that are fired on activating of `ui5-split-button` parts:
  *
- * <h3>ES6 Module Import</h3>
+ * - `click` for the first button (default action)
+ * - `arrow-click` for the second button (arrow action)
  *
- * <code>import "@ui5/webcomponents/dist/SplitButton.js";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/SplitButton.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.SplitButton
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-split-button
+ * @extends UI5Element
  * @public
  * @since 1.1.0
  */
@@ -81,9 +74,9 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
         super();
         this._isDefaultActionPressed = false;
         this._isKeyDownOperation = false;
-        const handleTouchStartEvent = () => {
+        const handleTouchStartEvent = (e) => {
+            e.stopPropagation();
             this._textButtonActive = true;
-            this.focused = false;
             this._tabIndex = "-1";
         };
         this._textButtonPress = {
@@ -91,25 +84,12 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
             passive: true,
         };
     }
-    /**
-     * Function that makes sure the focus is properly managed.
-     * @private
-     */
-    _manageFocus(button) {
-        const buttons = [this.textButton, this.arrowButton, this];
-        buttons.forEach(btn => {
-            btn.focused = btn === button;
-        });
-    }
     onBeforeRendering() {
-        this._textButtonIcon = this.textButton && this.activeIcon !== "" && (this._textButtonActive) && !this._shiftOrEscapePressed ? this.activeIcon : this.icon;
         if (this.disabled) {
             this._tabIndex = "-1";
         }
     }
     _handleMouseClick(e) {
-        const target = e.target;
-        this._manageFocus(target);
         this._fireClick(e);
     }
     _onFocusOut(e) {
@@ -118,19 +98,18 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
         }
         this._shiftOrEscapePressed = false;
         this._setTabIndexValue();
-        this._manageFocus();
     }
     _onFocusIn(e) {
         if (this.disabled || getEventMark(e)) {
             return;
         }
         this._shiftOrEscapePressed = false;
-        this._manageFocus(this);
     }
-    _textButtonFocusIn(e) {
-        e?.stopPropagation();
-        this._manageFocus(this.textButton);
-        this._setTabIndexValue();
+    _onInnerButtonFocusIn(e) {
+        e.stopPropagation();
+        this._setTabIndexValue(true);
+        const target = e.target;
+        target.focus();
     }
     _onKeyDown(e) {
         this._isKeyDownOperation = true;
@@ -188,21 +167,19 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
     }
     _textButtonRelease() {
         this._textButtonActive = false;
-        this._textButtonIcon = this.textButton && this.activeIcon !== "" && (this._textButtonActive) && !this._shiftOrEscapePressed ? this.activeIcon : this.icon;
         this._tabIndex = "-1";
     }
     _arrowButtonPress(e) {
-        e.preventDefault();
-        this.arrowButton.focus();
+        e.stopPropagation();
         this._tabIndex = "-1";
     }
     _arrowButtonRelease(e) {
         e.preventDefault();
         this._tabIndex = "-1";
     }
-    _setTabIndexValue() {
+    _setTabIndexValue(innerButtonPressed) {
         this._tabIndex = this.disabled ? "-1" : "0";
-        if (this._tabIndex === "-1" && (this.textButton?.focused || this.arrowButton?.focused)) {
+        if (this._tabIndex === "-1" && innerButtonPressed) {
             this._tabIndex = "0";
         }
     }
@@ -213,9 +190,7 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
     }
     /**
      * Checks if the pressed key is an arrow key.
-     *
-     * @param {KeyboardEvent} e - keyboard event
-     * @returns {boolean}
+     * @param e - keyboard event
      * @private
      */
     _isArrowKeyAction(e) {
@@ -223,9 +198,7 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
     }
     /**
      * Checks if the pressed key is a default action key (Space or Enter).
-     *
-     * @param {KeyboardEvent} e - keyboard event
-     * @returns {boolean}
+     * @param e - keyboard event
      * @private
      */
     _isDefaultAction(e) {
@@ -233,9 +206,7 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
     }
     /**
      * Checks if the pressed key is an escape key or shift key.
-     *
-     * @param {KeyboardEvent} e - keyboard event
-     * @returns {boolean}
+     * @param e - keyboard event
      * @private
      */
     _isShiftOrEscape(e) {
@@ -243,7 +214,7 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
     }
     /**
      * Handles the click event and the focus on the arrow button.
-     * @param {KeyboardEvent} e - keyboard event
+     * @param e - keyboard event
      * @private
      */
     _handleArrowButtonAction(e) {
@@ -255,25 +226,26 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
     }
     /**
      * Handles the default action and the active state of the respective button.
-     * @param {KeyboardEvent} e - keyboard event
+     * @param e - keyboard event
      * @private
      */
     _handleDefaultAction(e) {
         e.preventDefault();
         const wasSpacePressed = isSpace(e);
-        if (this.focused || this.textButton?.focused) {
-            this._textButtonActive = true;
-            this._fireClick();
+        const target = e.target;
+        if (this.arrowButton && target === this.arrowButton) {
+            this._activeArrowButton = true;
+            this._fireArrowClick();
             if (wasSpacePressed) {
                 this._spacePressed = true;
+                this._textButtonActive = false;
             }
         }
-        else if (this.arrowButton && this.arrowButton.focused) {
-            this._activeArrowButton = true;
-            this._fireArrowClick();
+        else {
+            this._textButtonActive = true;
+            this._fireClick();
             if (wasSpacePressed) {
                 this._spacePressed = true;
-                this._textButtonActive = false;
             }
         }
     }
@@ -299,9 +271,6 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
     }
     get accessibilityInfo() {
         return {
-            // affects arrow button
-            ariaExpanded: this._splitButtonAccInfo && this._splitButtonAccInfo.ariaExpanded,
-            ariaHaspopup: this._splitButtonAccInfo && this._splitButtonAccInfo.ariaHaspopup,
             // affects root element
             description: SplitButton_1.i18nBundle.getText(SPLIT_BUTTON_DESCRIPTION),
             keyboardHint: SplitButton_1.i18nBundle.getText(SPLIT_BUTTON_KEYBOARD_HINT),
@@ -314,9 +283,6 @@ let SplitButton = SplitButton_1 = class SplitButton extends UI5Element {
 __decorate([
     property()
 ], SplitButton.prototype, "icon", void 0);
-__decorate([
-    property()
-], SplitButton.prototype, "activeIcon", void 0);
 __decorate([
     property({ type: Boolean })
 ], SplitButton.prototype, "activeArrowButton", void 0);
@@ -329,12 +295,6 @@ __decorate([
 __decorate([
     property({ defaultValue: undefined })
 ], SplitButton.prototype, "accessibleName", void 0);
-__decorate([
-    property({ type: Boolean })
-], SplitButton.prototype, "focused", void 0);
-__decorate([
-    property({ type: Object })
-], SplitButton.prototype, "_splitButtonAccInfo", void 0);
 __decorate([
     property({ defaultValue: "0", noAttribute: true })
 ], SplitButton.prototype, "_tabIndex", void 0);
@@ -347,9 +307,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], SplitButton.prototype, "_textButtonActive", void 0);
-__decorate([
-    property({ noAttribute: true })
-], SplitButton.prototype, "_textButtonIcon", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], SplitButton.prototype, "_activeArrowButton", void 0);
@@ -366,14 +323,12 @@ SplitButton = SplitButton_1 = __decorate([
     })
     /**
      * Fired when the user clicks on the default action.
-     * @event sap.ui.webc.main.SplitButton#click
      * @public
      */
     ,
     event("click")
     /**
      * Fired when the user clicks on the arrow action.
-     * @event sap.ui.webc.main.SplitButton#arrow-click
      * @public
      */
     ,