run wrapper script (main)

Author: Lukas742

.storybook/custom-element-manifests/fiori.json

@@ -25,6 +25,24 @@ interface AvatarGroupAttributes {
    */
   accessibilityAttributes?: AvatarGroupAccessibilityAttributes;
 
+  /**
+   * Defines the accessible name of the AvatarGroup.
+   * When provided, this will override the default aria-label text.
+   *
+   * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleName?: string | undefined;
+
+  /**
+   * Receives id(s) of the elements that describe the AvatarGroup.
+   * When provided, this will be used as aria-labelledby instead of aria-label.
+   *
+   * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleNameRef?: string | undefined;
+
   /**
    * Defines the mode of the `AvatarGroup`.
    * @default "Group"
@@ -149,7 +167,7 @@ interface AvatarGroupPropTypes
  */
 const AvatarGroup = withWebComponent<AvatarGroupPropTypes, AvatarGroupDomRef>(
   'ui5-avatar-group',
-  ['accessibilityAttributes', 'type'],
+  ['accessibilityAttributes', 'accessibleName', 'accessibleNameRef', 'type'],
   [],
   ['overflowButton'],
   ['click', 'overflow'],

.storybook/custom-element-manifests/main.json

@@ -102,6 +102,18 @@ interface CheckBoxAttributes {
    */
   text?: string | undefined;
 
+  /**
+   * Defines the form value of the component that is submitted when the checkbox is checked.
+   *
+   * When a form containing `CheckBox` elements is submitted, only the values of the
+   * **checked** checkboxes are included in the form data sent to the server. Unchecked
+   * checkboxes do not contribute any data to the form submission.
+   *
+   * This property is particularly useful for **checkbox groups**, where multiple checkboxes with the same `name` but different `value` properties can be used to represent a set of related options.
+   * @default "on"
+   */
+  value?: string;
+
   /**
    * Defines the value state of the component.
    * @default "None"
@@ -167,7 +179,7 @@ interface CheckBoxPropTypes extends CheckBoxAttributes, Omit<CommonProps, keyof
  */
 const CheckBox = withWebComponent<CheckBoxPropTypes, CheckBoxDomRef>(
   'ui5-checkbox',
-  ['accessibleName', 'accessibleNameRef', 'name', 'text', 'valueState', 'wrappingType'],
+  ['accessibleName', 'accessibleNameRef', 'name', 'text', 'value', 'valueState', 'wrappingType'],
   ['checked', 'disabled', 'displayOnly', 'indeterminate', 'readonly', 'required'],
   [],
   ['change'],

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

@@ -9,6 +9,22 @@ import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui
 import type { ReactNode } from 'react';
 
 interface DialogAttributes {
+  /**
+   * Defines the accessible description of the component.
+   *
+   * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleDescription?: string | undefined;
+
+  /**
+   * Receives id(or many ids) of the elements that describe the component.
+   *
+   * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleDescriptionRef?: string | undefined;
+
   /**
    * Defines the accessible name of the component.
    * @default undefined
@@ -259,7 +275,16 @@ interface DialogPropTypes
  */
 const Dialog = withWebComponent<DialogPropTypes, DialogDomRef>(
   'ui5-dialog',
-  ['accessibleName', 'accessibleNameRef', 'accessibleRole', 'headerText', 'initialFocus', 'state'],
+  [
+    'accessibleDescription',
+    'accessibleDescriptionRef',
+    'accessibleName',
+    'accessibleNameRef',
+    'accessibleRole',
+    'headerText',
+    'initialFocus',
+    'state',
+  ],
   ['draggable', 'open', 'preventFocusRestore', 'preventInitialFocus', 'resizable', 'stretch'],
   ['footer', 'header'],
   ['before-close', 'before-open', 'close', 'open'],

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

@@ -1,10 +1,7 @@
 'use client';
 
 import '@ui5/webcomponents/dist/DynamicDateRange.js';
-import type {
-  DynamicDateRangeChangeEventDetail,
-  DynamicDateRangeValue,
-} from '@ui5/webcomponents/dist/DynamicDateRange.js';
+import type { DynamicDateRangeValue } from '@ui5/webcomponents/dist/DynamicDateRange.js';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base';
 
@@ -22,7 +19,14 @@ interface DynamicDateRangeAttributes {
   value?: DynamicDateRangeValue | undefined;
 }
 
-interface DynamicDateRangeDomRef extends Required<DynamicDateRangeAttributes>, Ui5DomRef {}
+interface DynamicDateRangeDomRef extends Required<DynamicDateRangeAttributes>, Ui5DomRef {
+  /**
+   * Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.
+   * @param {DynamicDateRangeValue} value - The option to convert into an array of date ranges
+   * @returns {Array<Date>} - An array of two `Date` objects representing the start and end dates.
+   */
+  toDates: (value: DynamicDateRangeValue) => Array<Date>;
+}
 
 interface DynamicDateRangePropTypes
   extends DynamicDateRangeAttributes,
@@ -36,7 +40,7 @@ interface DynamicDateRangePropTypes
    * | :--------: | :-----: |
    * | ✅|✅|
    */
-  onChange?: (event: Ui5CustomEvent<DynamicDateRangeDomRef, DynamicDateRangeChangeEventDetail>) => void;
+  onChange?: (event: Ui5CustomEvent<DynamicDateRangeDomRef>) => void;
 }
 
 /**
@@ -63,6 +67,8 @@ interface DynamicDateRangePropTypes
  *
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+ *
+ * @since [2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of __@ui5/webcomponents__.
  */
 const DynamicDateRange = withWebComponent<DynamicDateRangePropTypes, DynamicDateRangeDomRef>(
   'ui5-dynamic-date-range',

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

@@ -163,7 +163,11 @@ interface MenuPropTypes
  * - `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself
  * - `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items
  *
- * Note: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.
+ * **Note:** If the text direction is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.
+ *
+ * Application developers are responsible for ensuring that interactive elements placed in the `endContent` slot
+ * have the correct accessibility behaviour, including their enabled or disabled states.
+ * The menu does not manage these aspects when the menu item state changes.
  *
  *
  *

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

@@ -49,9 +49,22 @@ interface MenuItemAttributes {
   additionalText?: string | undefined;
 
   /**
-   * Defines whether `MenuItem` is in disabled state.
+   * Defines whether menu item is in checked state.
    *
-   * **Note:** A disabled `MenuItem` is noninteractive.
+   * **Note:** checked state is only taken into account when menu item is added to menu item group
+   * with `checkMode` other than `None`.
+   *
+   * **Note:** A checked menu item has a checkmark displayed at its end.
+   *
+   * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**.
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Defines whether menu item is in disabled state.
+   *
+   * **Note:** A disabled menu item is noninteractive.
    * @default false
    */
   disabled?: boolean;
@@ -77,17 +90,17 @@ interface MenuItemAttributes {
   icon?: string | undefined;
 
   /**
-   * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.
+   * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.
    *
-   * **Note:** If set to `true` a `BusyIndicator` component will be displayed into the related one to the current `MenuItem` sub-menu popover.
+   * **Note:** If set to `true` a busy indicator component will be displayed into the related one to the current menu item sub-menu popover.
    *
    * **Note:** Available since [v1.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.13.0) of **@ui5/webcomponents**.
    * @default false
    */
   loading?: boolean;
 
   /**
-   * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.
+   * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding menu popover.
    *
    * **Note:** Available since [v1.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.13.0) of **@ui5/webcomponents**.
    * @default 1000
@@ -146,14 +159,15 @@ interface MenuItemPropTypes
       | 'endContent'
       | 'onBeforeClose'
       | 'onBeforeOpen'
+      | 'onCheck'
       | 'onClose'
       | 'onDetailClick'
       | 'onOpen'
     > {
   /**
    * Defines the items of this component.
    *
-   * **Note:** The slot can hold `MenuItem` and `MenuSeparator` items.
+   * **Note:** The slot can hold menu item and menu separator items.
    *
    * If there are items added to this slot, an arrow will be displayed at the end
    * of the item in order to indicate that there are items added. In that case components added
@@ -191,6 +205,10 @@ interface MenuItemPropTypes
    * The priority of what will be displayed at the end of the menu item is as follows:
    * sub-menu arrow (if there are items added in `items` slot) -> components added in `endContent` -> text set to `additionalText`.
    *
+   * Application developers are responsible for ensuring that interactive elements placed in the `endContent` slot
+   * have the correct accessibility behaviour, including their enabled or disabled states.
+   * The menu does not manage these aspects when the menu item state changes.
+   *
    * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="endContent"`).
    * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
    *
@@ -228,6 +246,17 @@ interface MenuItemPropTypes
    */
   onBeforeOpen?: (event: Ui5CustomEvent<MenuItemDomRef, MenuBeforeOpenEventDetail>) => void;
 
+  /**
+   * Fired when an item is checked or unchecked.
+   *
+   * **Note:** Available since [v2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of **@ui5/webcomponents**.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
+   */
+  onCheck?: (event: Ui5CustomEvent<MenuItemDomRef>) => void;
+
   /**
    * Fired after the menu is closed.
    *
@@ -287,9 +316,9 @@ const MenuItem = withWebComponent<MenuItemPropTypes, MenuItemDomRef>(
     'tooltip',
     'type',
   ],
-  ['disabled', 'loading', 'navigated', 'selected'],
+  ['checked', 'disabled', 'loading', 'navigated', 'selected'],
   ['deleteButton', 'endContent'],
-  ['before-close', 'before-open', 'close', 'detail-click', 'open'],
+  ['before-close', 'before-open', 'check', 'close', 'detail-click', 'open'],
 );
 
 MenuItem.displayName = 'MenuItem';

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

@@ -0,0 +1,63 @@
+'use client';
+
+import '@ui5/webcomponents/dist/MenuItemGroup.js';
+import type MenuItemGroupCheckMode from '@ui5/webcomponents/dist/types/MenuItemGroupCheckMode.js';
+import { withWebComponent } from '@ui5/webcomponents-react-base';
+import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base';
+import type { ReactNode } from 'react';
+
+interface MenuItemGroupAttributes {
+  /**
+   * Defines the component's check mode.
+   * @default "None"
+   */
+  checkMode?: MenuItemGroupCheckMode | keyof typeof MenuItemGroupCheckMode;
+}
+
+interface MenuItemGroupDomRef extends Required<MenuItemGroupAttributes>, Ui5DomRef {}
+
+interface MenuItemGroupPropTypes
+  extends MenuItemGroupAttributes,
+    Omit<CommonProps, keyof MenuItemGroupAttributes | 'children'> {
+  /**
+   * Defines the items of this component.
+   * **Note:** The slot can hold any combination of components of type `MenuItem` or `MenuSeparator` or both.
+   */
+  children?: ReactNode | ReactNode[];
+}
+
+/**
+ * The `MenuItemGroup` component represents a group of items designed for use inside a `Menu`.
+ * Items belonging to the same group should be wrapped by a `MenuItemGroup`.
+ * Each group can have an `checkMode` property, which defines the check mode for the items within the group.
+ * The possible values for `checkMode` are:
+ * - 'None' (default) - no items can be checked
+ * - 'Single' - Only one item can be checked at a time
+ * - 'Multiple' - Multiple items can be checked simultaneously
+ *
+ * **Note:** If the `checkMode` property is set to 'Single', only one item can remain checked at any given time.
+ * If multiple items are marked as checked, the last checked item will take precedence.
+ *
+ * ### Usage
+ *
+ * `MenuItemGroup` represents a collection of `MenuItem` components that can have the same check mode.
+ * The items are addeed to the group's `items` slot.
+ *
+ *
+ *
+ * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+ *
+ * @since [2.12.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.12.0) of __@ui5/webcomponents__.
+ */
+const MenuItemGroup = withWebComponent<MenuItemGroupPropTypes, MenuItemGroupDomRef>(
+  'ui5-menu-item-group',
+  ['checkMode'],
+  [],
+  [],
+  [],
+);
+
+MenuItemGroup.displayName = 'MenuItemGroup';
+
+export { MenuItemGroup };
+export type { MenuItemGroupDomRef, MenuItemGroupPropTypes };

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

@@ -11,6 +11,22 @@ import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { ReactNode } from 'react';
 
 interface PopoverAttributes {
+  /**
+   * Defines the accessible description of the component.
+   *
+   * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleDescription?: string | undefined;
+
+  /**
+   * Receives id(or many ids) of the elements that describe the component.
+   *
+   * **Note:** Available since [v2.11.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.11.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleDescriptionRef?: string | undefined;
+
   /**
    * Defines the accessible name of the component.
    * @default undefined
@@ -238,6 +254,8 @@ interface PopoverPropTypes
 const Popover = withWebComponent<PopoverPropTypes, PopoverDomRef>(
   'ui5-popover',
   [
+    'accessibleDescription',
+    'accessibleDescriptionRef',
     'accessibleName',
     'accessibleNameRef',
     'accessibleRole',