Merge branch 'main' into select-popover-fix

SAP · Jan 23, 2025 · 9f30e73 · 9f30e73
2 parents be20791 + 4b2ab63
commit 9f30e73
Show file tree

Hide file tree

Showing 130 changed files with 625 additions and 224 deletions.
diff --git a/docs/2-advanced/05-using-features.md b/docs/2-advanced/05-using-features.md
@@ -20,30 +20,22 @@ You can import the feature file from the respective NPM package:
 
 `import "@ui5/<PACKAGE-NAME>/dist/features/<FEATURE-NAME>.js`
 
+As of `2.7.0` some component features are automatically loaded on demand, but can still be pre-loaded to skip the dynamic import, if that's what you prefer. Refer to the table below for details:
+
 ## Component Features
 
 Currently, only a few components offer additional features:
 
 | Package        | Affected Components                                | Feature Import                                                       | Description                                                                                             |
 |----------------|---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `main`         | `ui5-color-palette`                               | `@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js`         | Adds support for a "more colors" dialog in the color palette component allowing users to choose specific colors not present in the predefined range.                                   |
-| `main`         | `ui5-input`                                       | `@ui5/webcomponents/dist/features/InputSuggestions.js`               | Adds support for input suggestions while typing                                                                  |
+| `main`         | `ui5-color-palette`                               | dynamically loaded if `showMoreColors` is set to `true` (to pre-load: `import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"` )        | Adds support for a "more colors" dialog in the color palette component allowing users to choose specific colors not present in the predefined range.                                   |
+| `main`         | `ui5-input`                                       | dynamically loaded if `showSuggestions` is set to `true`(to pre-load: `import "@ui5/webcomponents/dist/features/InputSuggestions.js"` )              | Adds support for input suggestions while typing                                                                  |
 | `main`         | Multiple (e.g., `ui5-input`, `ui5-date-picker`)   | `@ui5/webcomponents/dist/features/InputElementsFormSupport.js`       | Adds support for the use of input components within forms                                                          |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js` | Adds support for the Buddhist calendars                                                                   |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Islamic.js`  | Adds support for the Islamic calendars                                                                    |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Japanese.js` | Adds support for the Japanese calendars                                                                   |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Persian.js`  | Adds support for the Persian calendars                                                                    |
 
-**Note:** Features must be imported before all component modules to ensure the feature is enabled before to the components' definition. For example:
-
-```js
-import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js;";
-
-import "@ui5/webcomponents/dist/Button.js";
-import "@ui5/webcomponents/dist/Link.js";
-import "@ui5/webcomponents/dist/Input.js";
-```
-
 ## Framework Features
 
 | Package        | Affects                                           | Feature Import                                                       | Description                                                                                             |

diff --git a/packages/ai/src/PromptInput.ts b/packages/ai/src/PromptInput.ts
@@ -183,8 +183,6 @@ class PromptInput extends UI5Element {
 	/**
 	 * Defines whether the component should show suggestions, if such are present.
 	 *
-	 * **Note:** You need to import the `InputSuggestions` module
-	 * from `"@ui5/webcomponents/dist/features/InputSuggestions.js"` to enable this functionality.
 	 * @default false
 	 * @public
 	 */
@@ -199,11 +197,6 @@ class PromptInput extends UI5Element {
 	 *
 	 * **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
 	 *
-	 * **Note:** Importing the Input Suggestions Support feature:
-	 *
-	 * `import "@ui5/webcomponents/dist/features/InputSuggestions.js";`
-	 *
-	 * automatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.
 	 * @public
 	 */
 		@slot({ type: HTMLElement, "default": true })

diff --git a/packages/base/src/FeaturesRegistry.ts b/packages/base/src/FeaturesRegistry.ts
@@ -1,28 +1,4 @@
-import EventProvider from "./EventProvider.js";
-import type UI5Element from "./UI5Element.js";
-
-abstract class ComponentFeature {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-empty-function
-	constructor(...args: any[]) {}
-
-	/**
-	 * @deprecated assign the feature's "i18nBundle" static member directly from the component that uses the feature
-	 */
-	static define?: () => Promise<void>;
-	/**
-	 * @deprecated no longer necessary for jsxRenderer-enabled components
-	 */
-	static dependencies?: Array<typeof UI5Element>
-}
-
 const features = new Map<string, any>();
-const componentFeatures = new Map<string, ComponentFeature>();
-const subscribers = new Map<typeof UI5Element, Array<string>>();
-
-const EVENT_NAME = "componentFeatureLoad";
-const eventProvider = new EventProvider<undefined, void>();
-
-const featureLoadEventName = (name: string) => `${EVENT_NAME}_${name}`;
 
 const registerFeature = (name: string, feature: object) => {
 	features.set(name, feature);
@@ -32,44 +8,7 @@ const getFeature = <T>(name: string): T => {
 	return features.get(name) as T;
 };
 
-const registerComponentFeature = async (name: string, feature: typeof ComponentFeature) => {
-	await Promise.all(feature.dependencies?.map(dep => dep.define()) || []);
-	await feature.define?.();
-
-	componentFeatures.set(name, feature);
-	notifyForFeatureLoad(name);
-};
-
-const getComponentFeature = <T>(name: string): T | undefined => {
-	return componentFeatures.get(name) as T;
-};
-
-const subscribeForFeatureLoad = (name: string, klass: typeof UI5Element, callback: () => void) => {
-	const subscriber = subscribers.get(klass);
-	const isSubscribed = subscriber?.includes(name);
-
-	if (isSubscribed) {
-		return;
-	}
-
-	if (!subscriber) {
-		subscribers.set(klass, [name]);
-	} else {
-		subscriber.push(name);
-	}
-
-	eventProvider.attachEvent(featureLoadEventName(name), callback);
-};
-
-const notifyForFeatureLoad = (name: string) => {
-	eventProvider.fireEvent(featureLoadEventName(name), undefined);
-};
-
 export {
 	registerFeature,
 	getFeature,
-	registerComponentFeature,
-	getComponentFeature,
-	subscribeForFeatureLoad,
-	ComponentFeature,
 };
diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
@@ -39,7 +39,6 @@ import type {
 } from "./types.js";
 import { updateFormValue, setFormValue } from "./features/InputElementsFormSupport.js";
 import type { IFormInputElement } from "./features/InputElementsFormSupport.js";
-import { getComponentFeature, subscribeForFeatureLoad } from "./FeaturesRegistry.js";
 import { getI18nBundle } from "./i18nBundle.js";
 import type I18nBundle from "./i18nBundle.js";
 import { fetchCldr } from "./asset-registries/LocaleData.js";
@@ -1322,16 +1321,6 @@ abstract class UI5Element extends HTMLElement {
 
 		const tag = this.getMetadata().getTag();
 
-		const features = this.getMetadata().getFeatures();
-
-		features.forEach(feature => {
-			if (getComponentFeature(feature)) {
-				this.cacheUniqueDependencies();
-			}
-
-			subscribeForFeatureLoad(feature, this, this.cacheUniqueDependencies.bind(this));
-		});
-
 		const definedLocally = isTagRegistered(tag);
 		const definedGlobally = customElements.get(tag);
 

diff --git a/packages/base/src/UI5ElementMetadata.ts b/packages/base/src/UI5ElementMetadata.ts
@@ -107,14 +107,6 @@ class UI5ElementMetadata {
 		return this.metadata.tag || "";
 	}
 
-	/**
-	 * Returns the tag of the UI5 Element without the scope
-	 * @private
-	 */
-	getFeatures(): Array<string> {
-		return this.metadata.features || [];
-	}
-
 	/**
 	 * Returns the tag of the UI5 Element
 	 * @public

diff --git a/packages/base/src/decorators/customElement.ts b/packages/base/src/decorators/customElement.ts
@@ -57,6 +57,7 @@ const customElement = (tagNameOrComponentSettings: string | {
 	shadowRootOptions?: Partial<ShadowRootInit>,
 	/**
 	 * A list of all features, supported by the custom element.
+	 * @deprecated no longer necessary for jsxRenderer-enabled components
 	 */
 	features?: Array<string>,
 } = {}): ClassDecorator => {
@@ -78,7 +79,6 @@ const customElement = (tagNameOrComponentSettings: string | {
 			fastNavigation,
 			formAssociated,
 			shadowRootOptions,
-			features,
 		 } = tagNameOrComponentSettings;
 
 		target.metadata.tag = tag;
@@ -89,10 +89,6 @@ const customElement = (tagNameOrComponentSettings: string | {
 			target.metadata.cldr = cldr;
 		}
 
-		if (features) {
-			target.metadata.features = features;
-		}
-
 		if (themeAware) {
 			target.metadata.themeAware = themeAware;
 		}

diff --git a/packages/base/src/features/F6Navigation.ts b/packages/base/src/features/F6Navigation.ts
@@ -172,8 +172,27 @@ class F6Navigation {
 	}
 
 	updateGroups() {
+		const container = this.findContainer();
+
 		this.setSelectedGroup();
-		this.groups = getFastNavigationGroups(document.body);
+		this.groups = getFastNavigationGroups(container);
+	}
+
+	findContainer() {
+		const htmlElement = window.document.querySelector("html");
+		let element = this.deepActive(window.document);
+
+		while (element && element !== htmlElement) {
+			const closestScopeEl = element.closest<HTMLElement>("[data-sap-ui-fastnavgroup-container='true']");
+
+			if (closestScopeEl) {
+				return closestScopeEl;
+			}
+
+			element = element.parentElement ? element.parentElement : (element.parentNode as ShadowRoot).host;
+		}
+
+		return document.body;
 	}
 
 	setSelectedGroup(root: DocumentOrShadowRoot = window.document) {

diff --git a/packages/base/src/util/getFastNavigationGroups.ts b/packages/base/src/util/getFastNavigationGroups.ts
@@ -48,7 +48,11 @@ const findFastNavigationGroups = (container: HTMLElement, startFromContainer?: b
 			findFastNavigationGroups(child as HTMLElement, false);
 		}
 
-		child = assignedElements && assignedElements.length ? assignedElements[++index] : originalChild.nextElementSibling;
+		if (child === container) {
+			child = assignedElements && assignedElements.length ? assignedElements[++index] : null;
+		} else {
+			child = assignedElements && assignedElements.length ? assignedElements[++index] : originalChild.nextElementSibling;
+		}
 	}
 };
 

diff --git a/packages/fiori/cypress/specs/ShellBar.cy.ts b/packages/fiori/cypress/specs/ShellBar.cy.ts
@@ -8,7 +8,6 @@ import "@ui5/webcomponents/dist/Switch.js";
 import "@ui5/webcomponents/dist/Tag.js";
 import "@ui5/webcomponents/dist/Avatar.js";
 import "@ui5/webcomponents/dist/Input.js";
-import "@ui5/webcomponents/dist/features/InputSuggestions.js";
 import "@ui5/webcomponents/dist/SuggestionItem.js";
 import "@ui5/webcomponents/dist/SuggestionItemCustom.js";
 import "@ui5/webcomponents/dist/SuggestionItemGroup.js";

diff --git a/packages/main/src/NavigationMenu.ts → packages/fiori/src/NavigationMenu.ts b/packages/main/src/NavigationMenu.ts → packages/fiori/src/NavigationMenu.ts
@@ -4,14 +4,14 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import {
 	isDesktop,
 } from "@ui5/webcomponents-base/dist/Device.js";
-import Menu from "./Menu.js";
-import type MenuItem from "./MenuItem.js";
+import Menu from "@ui5/webcomponents/dist/Menu.js";
+import type MenuItem from "@ui5/webcomponents/dist/MenuItem.js";
 import type NavigationMenuItem from "./NavigationMenuItem.js";
 import NavigationMenuTemplate from "./NavigationMenuTemplate.js";
 
 // Styles
 import navigationMenuCss from "./generated/themes/NavigationMenu.css.js";
-import menuCss from "./generated/themes/Menu.css.js";
+import menuCss from "@ui5/webcomponents/dist/generated/themes/Menu.css.js";
 
 import {
 	NAVIGATION_MENU_POPOVER_HIDDEN_TEXT,
@@ -31,7 +31,7 @@ import {
  *
  * ### ES6 Module Import
  *
- * `import "@ui5/webcomponents/dist/NavigationMenu.js";`
+ * `import "@ui5/webcomponents-fiori/dist/NavigationMenu.js";`
  * @constructor
  * @extends Menu
  * @since 1.22.0

diff --git a/packages/main/src/NavigationMenuItem.ts → packages/fiori/src/NavigationMenuItem.ts b/packages/main/src/NavigationMenuItem.ts → packages/fiori/src/NavigationMenuItem.ts
@@ -2,7 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import MenuItem from "./MenuItem.js";
+import MenuItem from "@ui5/webcomponents/dist/MenuItem.js";
 import NavigationMenu from "./NavigationMenu.js";
 import NavigationMenuItemTemplate from "./NavigationMenuItemTemplate.js";
 
@@ -29,7 +29,7 @@ import {
  *
  * ### ES6 Module Import
  *
- * `import "@ui5/webcomponents/dist/NavigationMenuItem.js";`
+ * `import "@ui5/webcomponents-fiori/dist/NavigationMenuItem.js";`
  * @constructor
  * @extends MenuItem
  * @since 1.22.0

diff --git a/...s/main/src/NavigationMenuItemTemplate.tsx → .../fiori/src/NavigationMenuItemTemplate.tsx b/...s/main/src/NavigationMenuItemTemplate.tsx → .../fiori/src/NavigationMenuItemTemplate.tsx
@@ -1,15 +1,15 @@
 import type NavigationMenuItem from "./NavigationMenuItem.js";
-import MenuItemTemplate from "./MenuItemTemplate.js";
-import type { MenuItemHooks } from "./MenuItemTemplate.js";
-import Icon from "./Icon.js";
+import MenuItemTemplate from "@ui5/webcomponents/dist/MenuItemTemplate.js";
+import type { MenuItemHooks } from "@ui5/webcomponents/dist/MenuItemTemplate.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import arrowRightIcon from "@ui5/webcomponents-icons/dist/arrow-right.js";
 import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 import navBackIcon from "@ui5/webcomponents-icons/dist/nav-back.js";
-import ResponsivePopover from "./ResponsivePopover.js";
-import Button from "./Button.js";
-import List from "./List.js";
-import BusyIndicator from "./BusyIndicator.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 
 const predefinedHooks: Partial<MenuItemHooks> = {
 	listItemContent,

diff --git a/packages/main/src/NavigationMenuTemplate.tsx → ...ages/fiori/src/NavigationMenuTemplate.tsx b/packages/main/src/NavigationMenuTemplate.tsx → ...ages/fiori/src/NavigationMenuTemplate.tsx
@@ -1,7 +1,7 @@
-import List from "./List.js";
-import Button from "./Button.js";
-import BusyIndicator from "./BusyIndicator.js";
-import ResponsivePopover from "./ResponsivePopover.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import type NavigationMenu from "./NavigationMenu.js";
 import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 

diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
@@ -4,7 +4,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
-import type NavigationMenu from "@ui5/webcomponents/dist/NavigationMenu.js";
+import type NavigationMenu from "./NavigationMenu.js";
 import type { MenuItemClickEventDetail } from "@ui5/webcomponents/dist/Menu.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";

diff --git a/packages/fiori/src/SideNavigationPopoverTemplate.tsx b/packages/fiori/src/SideNavigationPopoverTemplate.tsx
@@ -1,5 +1,5 @@
-import NavigationMenu from "@ui5/webcomponents/dist/NavigationMenu.js";
-import NavigationMenuItem from "@ui5/webcomponents/dist/NavigationMenuItem.js";
+import NavigationMenu from "./NavigationMenu.js";
+import NavigationMenuItem from "./NavigationMenuItem.js";
 import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import SideNavigation from "./SideNavigation.js";
 import SideNavigationItem from "./SideNavigationItem.js";

diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts
@@ -21,6 +21,8 @@ import FlexibleColumnLayout from "./FlexibleColumnLayout.js";
 import IllustratedMessage from "./IllustratedMessage.js";
 import MediaGallery from "./MediaGallery.js";
 import MediaGalleryItem from "./MediaGalleryItem.js";
+import NavigationMenu from "./NavigationMenu.js";
+import NavigationMenuItem from "./NavigationMenuItem.js";
 import NotificationListGroupItem from "./NotificationListGroupItem.js";
 import NotificationListItem from "./NotificationListItem.js";
 import NotificationList from "./NotificationList.js";

diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties
@@ -41,6 +41,9 @@ FCL_START_SEPARATOR_TOOLTIP=Resize between start and mid columns
 #XACT: ARIA announcement for the separator between mid and end columns
 FCL_END_SEPARATOR_TOOLTIP=Resize between mid and end columns
 
+#XTXT: Text for the Navigation Menu Popover hidden text
+NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Navigation
+
 #XTXT: Accessible name for the NotificationList
 NOTIFICATION_LIST_ACCESSIBLE_NAME=Notifications
 

diff --git a/packages/fiori/src/i18n/messagebundle_ar.properties b/packages/fiori/src/i18n/messagebundle_ar.properties
@@ -137,6 +137,12 @@ VSD_CANCEL_BUTTON=إلغاء
 
 VSD_RESET_BUTTON=إعادة تعيين
 
+VSD_RESET_BUTTON_ACTION=قامت إعادة التعيين بإرجاع جميع الإعدادات إلى الحالة الأولية
+
+VSD_SORT_TOOLTIP=ترتيب
+
+VSD_FILTER_TOOLTIP=تصفية
+
 VSD_SORT_ORDER=تسلسل الترتيب
 
 VSD_FILTER_BY=تصفية حسب

diff --git a/packages/fiori/src/i18n/messagebundle_bg.properties b/packages/fiori/src/i18n/messagebundle_bg.properties
@@ -135,7 +135,13 @@ VSD_SUBMIT_BUTTON=ОК
 
 VSD_CANCEL_BUTTON=Отмяна
 
-VSD_RESET_BUTTON=Повторно задаване
+VSD_RESET_BUTTON=Нулиране
+
+VSD_RESET_BUTTON_ACTION=Нулирането е върнало всички настройки към началното им състояние
+
+VSD_SORT_TOOLTIP=Сортиране
+
+VSD_FILTER_TOOLTIP=Филтриране
 
 VSD_SORT_ORDER=Последователност на сортиране