diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index 9c25c5a9b06d..b5671edcb4d8 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -871,6 +871,7 @@ class ShellBar extends UI5Element {
/**
* Returns the logo
DOM ref.
* @public
+ * @default null
* @since 1.0.0-rc.16
*/
get logoDomRef(): HTMLElement | null {
@@ -880,6 +881,7 @@ class ShellBar extends UI5Element {
/**
* Returns the copilot
DOM ref.
* @public
+ * @default null
* @since 1.0.0-rc.16
*/
get copilotDomRef(): HTMLElement | null {
@@ -889,6 +891,7 @@ class ShellBar extends UI5Element {
/**
* Returns the notifications
icon DOM ref.
* @public
+ * @default null
* @since 1.0.0-rc.16
*/
get notificationsDomRef(): HTMLElement | null {
@@ -898,6 +901,7 @@ class ShellBar extends UI5Element {
/**
* Returns the overflow
icon DOM ref.
* @public
+ * @default null
* @since 1.0.0-rc.16
*/
get overflowDomRef(): HTMLElement | null {
@@ -907,6 +911,7 @@ class ShellBar extends UI5Element {
/**
* Returns the profile
icon DOM ref.
* @public
+ * @default null
* @since 1.0.0-rc.16
*/
get profileDomRef(): HTMLElement | null {
@@ -916,6 +921,7 @@ class ShellBar extends UI5Element {
/**
* Returns the product-switch
icon DOM ref.
* @public
+ * @default null
* @since 1.0.0-rc.16
*/
get productSwitchDomRef(): HTMLElement | null {
diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
index 81cd6e12c57c..d03f9ad078d9 100644
--- a/packages/main/src/TextArea.ts
+++ b/packages/main/src/TextArea.ts
@@ -190,7 +190,7 @@ class TextArea extends UI5Element implements IFormElement {
* @public
*/
@property({ validator: Integer, defaultValue: null })
- maxlength?: number;
+ maxlength?: number | null;
/**
* Determines whether the characters exceeding the maximum allowed character count are visible
diff --git a/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx b/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx
index 4ab4bcbf8521..fae8deca2032 100644
--- a/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx
+++ b/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx
@@ -8,7 +8,7 @@ export class EventDescriptionRenderer implements IDescriptionRenderer {
{p.name}
- type: {p.type.text}
- - description: {p.description}
+ {p.description && - description: {p.description}
}
));
diff --git a/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx b/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx
index 1a9b50c7a1fb..e63ac22979ec 100644
--- a/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx
+++ b/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx
@@ -9,7 +9,7 @@ export class MethodDescriptionRenderer implements IDescriptionRenderer {
{p.name}
- type: {p.type.text}
- - description: {p.description}
+ {p.description && - description: {p.description}
}
));
@@ -32,7 +32,7 @@ export class MethodDescriptionRenderer implements IDescriptionRenderer {
Return Value:
- type: {returnValue?.type?.text}
- - description: {returnValue?.description}
+ {returnValue?.description && - description: {returnValue?.description}
}
>
);
diff --git a/packages/playground/build-scripts-storybook/parse-manifest.js b/packages/playground/build-scripts-storybook/parse-manifest.js
index 9e35df3a8aea..4e7233f5a588 100644
--- a/packages/playground/build-scripts-storybook/parse-manifest.js
+++ b/packages/playground/build-scripts-storybook/parse-manifest.js
@@ -6,6 +6,8 @@ const path = require("path");
// The following properties are excluded from the members array as they are not truly public.
const EXCLUDE_LIST = [
+ "detachComponentStateFinalized",
+ "attachComponentStateFinalized",
"effectiveDir",
"isUI5Element",
"attachInvalidate",
@@ -34,18 +36,30 @@ const loadManifest = () => {
try {
customElementsMain = require("@ui5/webcomponents/custom-elements.json");
+
+ customElementsMain.modules.forEach(module => {
+ applyPackageToDeclarations(module, "@ui5/webcomponents")
+ })
} catch (error) {
console.error("Did you run `yarn build` for packages/main?")
}
try {
customElementsFiori = require("@ui5/webcomponents-fiori/custom-elements.json");
+
+ customElementsFiori.modules.forEach(module => {
+ applyPackageToDeclarations(module, "@ui5/webcomponents-fiori")
+ })
} catch (error) {
console.error("Did you run `yarn build` for packages/main?")
}
try {
customElementsBase = require("@ui5/webcomponents-base/custom-elements.json");
+
+ customElementsBase.modules.forEach(module => {
+ applyPackageToDeclarations(module, "@ui5/webcomponents-base")
+ })
} catch (error) {
console.error("Did you run `yarn build` for packages/main?")
}
@@ -57,6 +71,10 @@ const loadManifest = () => {
};
};
+const applyPackageToDeclarations = (module, package) => {
+ module?.declarations?.forEach(declaration => (declaration._ui5package = package));
+}
+
const parseMembers = (members) => {
const parsed = [];
members.forEach((member) => {
@@ -83,7 +101,7 @@ const parseModule = (module) => {
// It can't happen to slots and properties since you can't have duplicate accessors.
if (declaration.cssParts) {
declaration.cssParts.forEach(part => {
- if (!part.name.startsWith("_ui5") ) {
+ if (!part.name.startsWith("_ui5")) {
part.name = `_ui5${part.name}`;
}
});
@@ -110,10 +128,10 @@ const flattenAPIsHierarchicalStructure = module => {
const declarations = module.declarations;
declarations.forEach(declaration => {
- let superclassDeclaration = processedDeclarations.get(declaration.superclass?.name);
+ let superclassDeclaration = processedDeclarations.get(`${declaration.superclass?.package}/${declaration.superclass?.name}`);
if (!superclassDeclaration) {
- superclassDeclaration = customElements.modules.find(_m => _m.declarations.find(_d => _d.name === declaration.superclass?.name ));
+ superclassDeclaration = customElements.modules.find(_m => _m.declarations.find(_d => _d.name === declaration.superclass?.name && _d._ui5package === declaration.superclass?.package));
if (superclassDeclaration) {
flattenAPIsHierarchicalStructure(superclassDeclaration);
@@ -121,9 +139,9 @@ const flattenAPIsHierarchicalStructure = module => {
}
if (superclassDeclaration) {
- processedDeclarations.set(declaration.name, mergeClassMembers(declaration, processedDeclarations.get(declaration.superclass?.name)));
+ processedDeclarations.set(`${declaration._ui5package}/${declaration.name}`, mergeClassMembers(declaration, processedDeclarations.get(`${declaration.superclass?.package}/${declaration.superclass?.name}`)));
} else {
- processedDeclarations.set(declaration.name, declaration);
+ processedDeclarations.set(`${declaration._ui5package}/${declaration.name}`, declaration);
}
})
}
@@ -152,7 +170,7 @@ const mergeArraysWithoutDuplicates = (currentValues, newValue) => {
const { customElementsMain, customElementsFiori, customElementsBase } = loadManifest();
-let customElements = mergeManifests(mergeManifests(customElementsMain, customElementsFiori), customElementsBase );
+let customElements = mergeManifests(mergeManifests(customElementsMain, customElementsFiori), customElementsBase);
const processedDeclarations = new Map();
customElements.modules?.forEach(flattenAPIsHierarchicalStructure);
diff --git a/packages/playground/build-scripts-storybook/samples-prepare.ts b/packages/playground/build-scripts-storybook/samples-prepare.ts
index 47ead0ffa790..06cb1c644d4b 100644
--- a/packages/playground/build-scripts-storybook/samples-prepare.ts
+++ b/packages/playground/build-scripts-storybook/samples-prepare.ts
@@ -3,7 +3,7 @@ import path from "path";
import type {
ClassDeclaration,
CustomElementDeclaration,
- MySchema,
+ Package,
Parameter,
Type,
ClassField,
@@ -14,7 +14,7 @@ import type {
CustomElementMixinDeclaration,
MixinDeclaration,
VariableDeclaration
-} from "@ui5/webcomponents-tools/lib/cem/types.js";
+} from "@ui5/webcomponents-tools/lib/cem/types-internal";
const STORIES_ROOT_FOLDER_NAME = '../_stories';
@@ -59,7 +59,7 @@ type APIData = {
// run the script to generate the argTypes for the stories available in the _stories folder
const main = async () => {
- const api: MySchema = JSON.parse((await fs.readFile(`./.storybook/custom-elements.json`)).toString());
+ const api: Package = JSON.parse((await fs.readFile(`./.storybook/custom-elements.json`)).toString());
// read all directories inside _stories folder and create a list of components
const packages = await fs.readdir(path.join(__dirname, STORIES_ROOT_FOLDER_NAME));
@@ -81,7 +81,7 @@ const main = async () => {
}
};
-const generateStoryDoc = async (componentPath: string, component: string, api: MySchema, componentPackage: string) => {
+const generateStoryDoc = async (componentPath: string, component: string, api: Package, componentPackage: string) => {
console.log(`Generating argTypes for story ${component}`);
const apiData = getAPIData(api, component, componentPackage);
@@ -98,9 +98,9 @@ export type StoryArgsSlots = {
}`);
};
-const getAPIData = (api: MySchema, module: string, componentPackage: string): APIData | undefined => {
- const moduleAPI = api.modules?.find(currModule => currModule.declarations?.find(s => s._ui5reference?.name === module && s._ui5reference?.package === `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`));
- const declaration = moduleAPI?.declarations?.find(s => s._ui5reference?.name === module && s._ui5reference?.package === `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`);
+const getAPIData = (api: Package, module: string, componentPackage: string): APIData | undefined => {
+ const moduleAPI = api.modules?.find(currModule => currModule.declarations?.find(s => s.name === module && s._ui5package === `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`));
+ const declaration = moduleAPI?.declarations?.find(s => s.name === module && s._ui5package === `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`);
if (!declaration) {
return;
@@ -111,14 +111,14 @@ const getAPIData = (api: MySchema, module: string, componentPackage: string): AP
return {
info: {
package: `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`,
- since: declaration?._ui5since
+ since: (declaration as CustomElementDeclaration)?._ui5since
},
slotNames: data.slotNames,
storyArgsTypes: JSON.stringify(data.args, null, "\t")
};
};
-const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | ClassDeclaration) => {
+const getArgsTypes = (api: Package, moduleAPI: CustomElementDeclaration | ClassDeclaration) => {
let args: ArgsTypes = {};
let slotNames: string[] = [];
@@ -134,7 +134,7 @@ const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | Class
}
for (const s of currModule.declarations) {
- if (s?._ui5reference?.name === prop.type?.references[0].name && s._ui5reference?.package === prop.type?.references[0].package && s.kind === "enum") {
+ if (s.name === prop.type?.references[0].name && s._ui5package === prop.type?.references[0].package && s.kind === "enum") {
typeEnum = s;
break;
}
@@ -161,6 +161,11 @@ const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | Class
args[prop.name] = {
control: {
type: "text"
+ },
+ table: {
+ type: {
+ summary: prop._ui5type?.text
+ }
}
};
slotNames.push(prop.name);
@@ -190,14 +195,17 @@ const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | Class
// events also have custom descriptions with parameters of their detail objec
if (isCustomElementDeclaration(moduleAPI)) {
moduleAPI.events?.forEach((prop) => {
- if (prop.privacy === "public" && prop.params?.length) {
+ if (prop._ui5privacy === "public" && prop._ui5parameters?.length) {
args[prop.name] = {
description: prop.description,
+ control: {
+ type: false
+ },
table: {
category: "events",
},
UI5CustomData: {
- parameters: prop.params,
+ parameters: prop._ui5parameters,
},
};
}
@@ -219,7 +227,7 @@ const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | Class
}
}
- const referencePackage = moduleAPIBeingExtended?._ui5reference?.package;
+ const referencePackage = moduleAPIBeingExtended?._ui5package;
if (moduleAPIBeingExtended && referencePackage && packages.includes(referencePackage)) {
const { args: nextArgs, slotNames: nextSlotNames } = getArgsTypes(api, moduleAPIBeingExtended as ClassDeclaration);
@@ -234,7 +242,7 @@ const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | Class
};
const findReference = (something: Array, componentName: string, componentPackage: string): Declaration | undefined => {
- return something.find(s => s._ui5reference?.name === componentName && s._ui5reference?.package === componentPackage)
+ return something.find(s => s.name === componentName && s._ui5package === componentPackage)
}
main();