From aab4acd59874d3cbce514c4e2307daa4c92f01cb Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 15 Nov 2024 13:12:58 +0100 Subject: [PATCH 1/6] fix(cli): improve description for events & outline experimental components --- .../src/scripts/create-wrappers/ComponentRenderer.ts | 11 ++++++++++- .../src/scripts/create-wrappers/PropTypesRenderer.ts | 6 ++++++ packages/cli/src/scripts/create-wrappers/main.ts | 1 + packages/main/src/webComponents/Form/Form.mdx | 8 +++++--- packages/main/src/webComponents/Form/Form.stories.tsx | 2 +- .../main/src/webComponents/Table/Table.stories.tsx | 2 +- .../src/webComponents/Tokenizer/Tokenizer.stories.tsx | 2 +- 7 files changed, 25 insertions(+), 7 deletions(-) diff --git a/packages/cli/src/scripts/create-wrappers/ComponentRenderer.ts b/packages/cli/src/scripts/create-wrappers/ComponentRenderer.ts index 4583f9582b2..28bb13b27ac 100644 --- a/packages/cli/src/scripts/create-wrappers/ComponentRenderer.ts +++ b/packages/cli/src/scripts/create-wrappers/ComponentRenderer.ts @@ -14,6 +14,7 @@ export class ComponentRenderer extends AbstractRenderer { private note: string = ''; private isAbstract: boolean = false; private since: string | undefined; + private isExperimental: boolean | string | undefined = false; setAttributes(attrs: CEM.ClassField[]) { this.attributes.push(...attrs); @@ -50,6 +51,11 @@ export class ComponentRenderer extends AbstractRenderer { return this; } + setIsExperimental(value?: boolean | string) { + this.isExperimental = value; + return this; + } + prepare(context: WebComponentWrapper) { context.exportSet.add(context.componentName); } @@ -64,10 +70,13 @@ export class ComponentRenderer extends AbstractRenderer { comment += ` *\n`; comment += ` * @since [${this.since}](https://github.com/SAP/ui5-webcomponents/releases/tag/v${this.since}) of __${context.packageName}__.\n`; } - if (this.isAbstract) { comment += ' * @abstract\n'; } + if (this.isExperimental) { + comment += ` * @experimental${typeof this.isExperimental === 'string' ? ` ${this.isExperimental}` : ''}\n`; + } + comment += '*/'; const component = dedent` diff --git a/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts b/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts index 224c2d1836e..05bcc755805 100644 --- a/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts +++ b/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts @@ -114,6 +114,12 @@ export class PropTypesRenderer extends AbstractRenderer { descriptionParts.push(` * @deprecated`); } } + if (event._ui5Bubbles || event._ui5Cancelable) { + descriptionParts.push(` *`); + descriptionParts.push(`* | cancelable | bubbles |`); + descriptionParts.push(`* | :--------: | :-----: |`); + descriptionParts.push(`* | ${event._ui5Cancelable ? '✅' : '❌'}|${event._ui5Bubbles ? '✅' : '❌'}|`); + } const domRef = `${context.componentName}DomRef`; let eventType = '(event: unknown) => void;'; diff --git a/packages/cli/src/scripts/create-wrappers/main.ts b/packages/cli/src/scripts/create-wrappers/main.ts index 0b217f702a6..fbe8ab1ef8f 100644 --- a/packages/cli/src/scripts/create-wrappers/main.ts +++ b/packages/cli/src/scripts/create-wrappers/main.ts @@ -66,6 +66,7 @@ export default async function createWrappers(packageName: string, outDir: string .setNote(options.additionalComponentNote ?? '') .setIsAbstract(declaration._ui5abstract ?? false) .setSince(declaration._ui5since) + .setIsExperimental(declaration._ui5experimental) ); wrapper.addRenderer(new ExportsRenderer()); diff --git a/packages/main/src/webComponents/Form/Form.mdx b/packages/main/src/webComponents/Form/Form.mdx index c26310a0f97..86ce740ece9 100644 --- a/packages/main/src/webComponents/Form/Form.mdx +++ b/packages/main/src/webComponents/Form/Form.mdx @@ -7,9 +7,7 @@ import * as ComponentStories from './Form.stories'; - - -**Note:** For more detailed examples of how the form can be used or integrated with other external libraries such as "React Hook Form", you can visit our [knowledge base](?path=/docs/knowledge-base-form-handling--docs). +
@@ -33,6 +31,10 @@ import * as ComponentStories from './Form.stories'; Show Code + | cancelable | bubbles | + |:----------:|:-------:| + |  ✅   |   ❌   | + ```jsx const StandardField = ({ editMode, value, inputType = InputType.Text, onInput, ...rest }) => { if (editMode) { diff --git a/packages/main/src/webComponents/Form/Form.stories.tsx b/packages/main/src/webComponents/Form/Form.stories.tsx index d0722c162f6..143672723c1 100644 --- a/packages/main/src/webComponents/Form/Form.stories.tsx +++ b/packages/main/src/webComponents/Form/Form.stories.tsx @@ -7,7 +7,7 @@ import { FormItem } from '../FormItem/index.js'; import { Form } from './index.js'; const meta = { - title: 'Layouts & Floorplans / Form', + title: 'Layouts & Floorplans / Form (experimental)', component: Form, argTypes: { children: { control: { disable: true } } diff --git a/packages/main/src/webComponents/Table/Table.stories.tsx b/packages/main/src/webComponents/Table/Table.stories.tsx index 1053c58871f..5ca467d9d38 100644 --- a/packages/main/src/webComponents/Table/Table.stories.tsx +++ b/packages/main/src/webComponents/Table/Table.stories.tsx @@ -12,7 +12,7 @@ import { TableSelection } from '../TableSelection/index.js'; import { Table } from './index.js'; const meta = { - title: 'Data Display / Table', + title: 'Data Display / Table (experimental)', component: Table, argTypes: { headerRow: { control: { disable: true } }, diff --git a/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx b/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx index 81ece0264e5..c2b9ea8bf93 100644 --- a/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx +++ b/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx @@ -7,7 +7,7 @@ import type { TokenizerPropTypes } from './index.js'; import { Tokenizer } from './index.js'; const meta = { - title: 'Inputs / Tokenizer', + title: 'Inputs / Tokenizer (experimental)', component: Tokenizer, args: { style: { width: '250px' } }, tags: ['package:@ui5/webcomponents'] From c99c3e4f2f2a146ccd1f099f6b05861bc49688d9 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 15 Nov 2024 14:22:44 +0100 Subject: [PATCH 2/6] run wrapper script, adjust storybook styles --- .storybook/preview-head.html | 21 ++++++++++ .../src/webComponents/AvatarGroup/index.tsx | 8 ++++ .../BarcodeScannerDialog/index.tsx | 12 ++++++ .../src/webComponents/Breadcrumbs/index.tsx | 4 ++ .../main/src/webComponents/Button/index.tsx | 4 ++ .../main/src/webComponents/Calendar/index.tsx | 4 ++ .../src/webComponents/CardHeader/index.tsx | 4 ++ .../main/src/webComponents/Carousel/index.tsx | 4 ++ .../main/src/webComponents/CheckBox/index.tsx | 4 ++ .../src/webComponents/ColorPalette/index.tsx | 4 ++ .../ColorPalettePopover/index.tsx | 8 ++++ .../src/webComponents/ColorPicker/index.tsx | 4 ++ .../main/src/webComponents/ComboBox/index.tsx | 12 ++++++ .../src/webComponents/DatePicker/index.tsx | 20 ++++++++++ .../webComponents/DateRangePicker/index.tsx | 20 ++++++++++ .../webComponents/DateTimePicker/index.tsx | 20 ++++++++++ .../main/src/webComponents/Dialog/index.tsx | 16 ++++++++ .../src/webComponents/DynamicPage/index.tsx | 8 ++++ .../DynamicSideContent/index.tsx | 4 ++ .../src/webComponents/FileUploader/index.tsx | 8 ++++ .../FlexibleColumnLayout/index.tsx | 4 ++ .../main/src/webComponents/Form/index.tsx | 1 + .../src/webComponents/FormGroup/index.tsx | 1 + .../main/src/webComponents/FormItem/index.tsx | 1 + .../main/src/webComponents/Input/index.tsx | 24 ++++++++++++ .../main/src/webComponents/Link/index.tsx | 4 ++ .../main/src/webComponents/List/index.tsx | 32 ++++++++++++++++ .../webComponents/ListItemCustom/index.tsx | 4 ++ .../src/webComponents/ListItemGroup/index.tsx | 8 ++++ .../webComponents/ListItemStandard/index.tsx | 4 ++ .../src/webComponents/MediaGallery/index.tsx | 12 ++++++ .../main/src/webComponents/Menu/index.tsx | 20 ++++++++++ .../main/src/webComponents/MenuItem/index.tsx | 4 ++ .../src/webComponents/MessageStrip/index.tsx | 4 ++ .../src/webComponents/MultiComboBox/index.tsx | 20 ++++++++++ .../src/webComponents/MultiInput/index.tsx | 32 ++++++++++++++++ .../webComponents/NotificationList/index.tsx | 12 ++++++ .../NotificationListGroupItem/index.tsx | 8 ++++ .../NotificationListItem/index.tsx | 4 ++ .../main/src/webComponents/Panel/index.tsx | 4 ++ .../main/src/webComponents/Popover/index.tsx | 16 ++++++++ .../webComponents/ProductSwitchItem/index.tsx | 4 ++ .../src/webComponents/RadioButton/index.tsx | 4 ++ .../src/webComponents/RangeSlider/index.tsx | 8 ++++ .../webComponents/RatingIndicator/index.tsx | 4 ++ .../webComponents/ResponsivePopover/index.tsx | 16 ++++++++ .../webComponents/SegmentedButton/index.tsx | 4 ++ .../main/src/webComponents/Select/index.tsx | 16 ++++++++ .../main/src/webComponents/ShellBar/index.tsx | 24 ++++++++++++ .../src/webComponents/ShellBarItem/index.tsx | 4 ++ .../webComponents/SideNavigation/index.tsx | 4 ++ .../SideNavigationItem/index.tsx | 4 ++ .../SideNavigationSubItem/index.tsx | 4 ++ .../main/src/webComponents/Slider/index.tsx | 8 ++++ .../src/webComponents/SplitButton/index.tsx | 8 ++++ .../src/webComponents/StepInput/index.tsx | 8 ++++ .../SuggestionItemGroup/index.tsx | 8 ++++ .../main/src/webComponents/Switch/index.tsx | 4 ++ .../src/webComponents/TabContainer/index.tsx | 12 ++++++ .../main/src/webComponents/Table/index.tsx | 38 ++++++++++++------- .../src/webComponents/TableCell/index.tsx | 1 + .../src/webComponents/TableGrowing/index.tsx | 5 +++ .../webComponents/TableHeaderCell/index.tsx | 1 + .../webComponents/TableHeaderRow/index.tsx | 1 + .../main/src/webComponents/TableRow/index.tsx | 1 + .../webComponents/TableSelection/index.tsx | 5 +++ packages/main/src/webComponents/Tag/index.tsx | 4 ++ .../main/src/webComponents/TextArea/index.tsx | 16 ++++++++ .../src/webComponents/TimePicker/index.tsx | 16 ++++++++ .../webComponents/TimelineGroupItem/index.tsx | 4 ++ .../src/webComponents/TimelineItem/index.tsx | 4 ++ .../main/src/webComponents/Toast/index.tsx | 4 ++ .../src/webComponents/ToggleButton/index.tsx | 4 ++ .../src/webComponents/Tokenizer/index.tsx | 9 +++++ .../src/webComponents/ToolbarButton/index.tsx | 4 ++ .../src/webComponents/ToolbarSelect/index.tsx | 12 ++++++ .../main/src/webComponents/Tree/index.tsx | 24 ++++++++++++ .../main/src/webComponents/TreeItem/index.tsx | 4 ++ .../webComponents/TreeItemCustom/index.tsx | 4 ++ .../webComponents/UploadCollection/index.tsx | 12 ++++++ .../UploadCollectionItem/index.tsx | 20 ++++++++++ .../ViewSettingsDialog/index.tsx | 20 ++++++++++ .../main/src/webComponents/Wizard/index.tsx | 4 ++ 83 files changed, 755 insertions(+), 14 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index d5432875bff..a2856304c46 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -83,6 +83,27 @@ position: static; } + /* table in props description (table in ArgsTable) */ + .docblock-argstable-body table { + max-width: 10rem; + table-layout: fixed; + border-collapse: collapse; + border-spacing: 1px; + text-align: center; + } + .docblock-argstable-body table th { + background-color: #eceff1; + color: #2e3438 !important; + border: 1px solid #dededf !important; + padding: 0px !important; + padding-block: 0.125rem !important; + } + .docblock-argstable-body table td { + border: 1px solid #dededf !important; + padding: 0px !important; + padding-block: 0.125rem !important; + } + /* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */ .docs-story > div > div[scale] { min-height: 20px; diff --git a/packages/main/src/webComponents/AvatarGroup/index.tsx b/packages/main/src/webComponents/AvatarGroup/index.tsx index 62f0714daa6..3a1ecb732d1 100644 --- a/packages/main/src/webComponents/AvatarGroup/index.tsx +++ b/packages/main/src/webComponents/AvatarGroup/index.tsx @@ -74,12 +74,20 @@ interface AvatarGroupPropTypes /** * Fired when the component is activated either with a * click/tap or by using the Enter or Space key. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClick?: (event: Ui5CustomEvent) => void; /** * Fired when the count of visible `Avatar` elements in the * component has changed + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOverflow?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx b/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx index 57823af170b..0b36f019161 100644 --- a/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx +++ b/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx @@ -65,16 +65,28 @@ interface BarcodeScannerDialogPropTypes * Fired when the user closes the component. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-fiori**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; /** * Fires when the scan fails with error. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onScanError?: (event: Ui5CustomEvent) => void; /** * Fires when the scan is completed successfuuly. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onScanSuccess?: ( event: Ui5CustomEvent diff --git a/packages/main/src/webComponents/Breadcrumbs/index.tsx b/packages/main/src/webComponents/Breadcrumbs/index.tsx index 213124ae764..4f753b877e4 100644 --- a/packages/main/src/webComponents/Breadcrumbs/index.tsx +++ b/packages/main/src/webComponents/Breadcrumbs/index.tsx @@ -43,6 +43,10 @@ interface BreadcrumbsPropTypes * **Note:** You can prevent browser location change by calling `event.preventDefault()`. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onItemClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx index 633b7ff00a8..11ab6f0c0ce 100644 --- a/packages/main/src/webComponents/Button/index.tsx +++ b/packages/main/src/webComponents/Button/index.tsx @@ -136,6 +136,10 @@ interface ButtonPropTypes extends ButtonAttributes, Omit; } diff --git a/packages/main/src/webComponents/Calendar/index.tsx b/packages/main/src/webComponents/Calendar/index.tsx index 561e9370aa2..33132f0500c 100644 --- a/packages/main/src/webComponents/Calendar/index.tsx +++ b/packages/main/src/webComponents/Calendar/index.tsx @@ -118,6 +118,10 @@ interface CalendarPropTypes * create instances of `CalendarDate` for the newly selected dates. In that case you should do this manually. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/CardHeader/index.tsx b/packages/main/src/webComponents/CardHeader/index.tsx index 92083eedaa7..bfa7592f360 100644 --- a/packages/main/src/webComponents/CardHeader/index.tsx +++ b/packages/main/src/webComponents/CardHeader/index.tsx @@ -61,6 +61,10 @@ interface CardHeaderPropTypes * Fired when the component is activated by mouse/tap or by using the Enter or Space key. * * **Note:** The event would be fired only if the `interactive` property is set to true. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Carousel/index.tsx b/packages/main/src/webComponents/Carousel/index.tsx index ed5f675a498..44491a5c384 100644 --- a/packages/main/src/webComponents/Carousel/index.tsx +++ b/packages/main/src/webComponents/Carousel/index.tsx @@ -135,6 +135,10 @@ interface CarouselPropTypes * Fired whenever the page changes due to user interaction, * when the user clicks on the navigation arrows or while resizing, * based on the `items-per-page` property. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onNavigate?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/CheckBox/index.tsx b/packages/main/src/webComponents/CheckBox/index.tsx index 8518a596914..789323043c8 100644 --- a/packages/main/src/webComponents/CheckBox/index.tsx +++ b/packages/main/src/webComponents/CheckBox/index.tsx @@ -122,6 +122,10 @@ interface CheckBoxPropTypes extends CheckBoxAttributes, Omit) => void; } diff --git a/packages/main/src/webComponents/ColorPalette/index.tsx b/packages/main/src/webComponents/ColorPalette/index.tsx index cf02dc17015..73c32e9b8f3 100644 --- a/packages/main/src/webComponents/ColorPalette/index.tsx +++ b/packages/main/src/webComponents/ColorPalette/index.tsx @@ -17,6 +17,10 @@ interface ColorPalettePropTypes extends ColorPaletteAttributes, Omit) => void; } diff --git a/packages/main/src/webComponents/ColorPalettePopover/index.tsx b/packages/main/src/webComponents/ColorPalettePopover/index.tsx index 154c44fc0b2..f5f77a6a971 100644 --- a/packages/main/src/webComponents/ColorPalettePopover/index.tsx +++ b/packages/main/src/webComponents/ColorPalettePopover/index.tsx @@ -67,11 +67,19 @@ interface ColorPalettePopoverPropTypes * Fired when the `ColorPalettePopover` is closed due to user interaction. * * **Note:** Available since [v1.21.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.21.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; /** * Fired when the user selects a color. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onItemClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ColorPicker/index.tsx b/packages/main/src/webComponents/ColorPicker/index.tsx index 87e0b317af3..0cb4eb4daf1 100644 --- a/packages/main/src/webComponents/ColorPicker/index.tsx +++ b/packages/main/src/webComponents/ColorPicker/index.tsx @@ -31,6 +31,10 @@ interface ColorPickerPropTypes Omit { /** * Fired when the the selected color is changed + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ComboBox/index.tsx b/packages/main/src/webComponents/ComboBox/index.tsx index 2caa98bd9f9..95f5c933638 100644 --- a/packages/main/src/webComponents/ComboBox/index.tsx +++ b/packages/main/src/webComponents/ComboBox/index.tsx @@ -149,6 +149,10 @@ interface ComboBoxPropTypes valueStateMessage?: UI5WCSlotsNode; /** * Fired when the input operation has finished by pressing Enter, focusout or an item is selected. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; @@ -156,11 +160,19 @@ interface ComboBoxPropTypes * Fired when typing in input or clear icon is pressed. * * **Note:** filterValue property is updated, input is changed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onInput?: (event: Ui5CustomEvent) => void; /** * Fired when selection is changed by user interaction + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/DatePicker/index.tsx b/packages/main/src/webComponents/DatePicker/index.tsx index d720ce56298..860dff789e8 100644 --- a/packages/main/src/webComponents/DatePicker/index.tsx +++ b/packages/main/src/webComponents/DatePicker/index.tsx @@ -193,6 +193,10 @@ interface DatePickerPropTypes * Fired when the input operation has finished by pressing Enter or on focusout. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onChange?: (event: Ui5CustomEvent) => void; @@ -200,6 +204,10 @@ interface DatePickerPropTypes * Fired after the value-help dialog of the component is closed. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; @@ -207,6 +215,10 @@ interface DatePickerPropTypes * Fired when the value of the component is changed at each key stroke. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onInput?: (event: Ui5CustomEvent) => void; @@ -214,6 +226,10 @@ interface DatePickerPropTypes * Fired after the value-help dialog of the component is opened. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; @@ -223,6 +239,10 @@ interface DatePickerPropTypes * prevented, the component will not update the value state. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onValueStateChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/DateRangePicker/index.tsx b/packages/main/src/webComponents/DateRangePicker/index.tsx index 09718f37082..40162fd755c 100644 --- a/packages/main/src/webComponents/DateRangePicker/index.tsx +++ b/packages/main/src/webComponents/DateRangePicker/index.tsx @@ -215,6 +215,10 @@ interface DateRangePickerPropTypes * Fired when the input operation has finished by pressing Enter or on focusout. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onChange?: (event: Ui5CustomEvent) => void; @@ -222,6 +226,10 @@ interface DateRangePickerPropTypes * Fired after the value-help dialog of the component is closed. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; @@ -229,6 +237,10 @@ interface DateRangePickerPropTypes * Fired when the value of the component is changed at each key stroke. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onInput?: (event: Ui5CustomEvent) => void; @@ -236,6 +248,10 @@ interface DateRangePickerPropTypes * Fired after the value-help dialog of the component is opened. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; @@ -245,6 +261,10 @@ interface DateRangePickerPropTypes * prevented, the component will not update the value state. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onValueStateChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/DateTimePicker/index.tsx b/packages/main/src/webComponents/DateTimePicker/index.tsx index f527f110e4d..b79eb1dca12 100644 --- a/packages/main/src/webComponents/DateTimePicker/index.tsx +++ b/packages/main/src/webComponents/DateTimePicker/index.tsx @@ -193,6 +193,10 @@ interface DateTimePickerPropTypes * Fired when the input operation has finished by pressing Enter or on focusout. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onChange?: (event: Ui5CustomEvent) => void; @@ -200,6 +204,10 @@ interface DateTimePickerPropTypes * Fired after the value-help dialog of the component is closed. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; @@ -207,6 +215,10 @@ interface DateTimePickerPropTypes * Fired when the value of the component is changed at each key stroke. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onInput?: (event: Ui5CustomEvent) => void; @@ -214,6 +226,10 @@ interface DateTimePickerPropTypes * Fired after the value-help dialog of the component is opened. * * **Note:** Available since [v2.4.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; @@ -223,6 +239,10 @@ interface DateTimePickerPropTypes * prevented, the component will not update the value state. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onValueStateChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx index 3e9a808a492..6b97f3863d6 100644 --- a/packages/main/src/webComponents/Dialog/index.tsx +++ b/packages/main/src/webComponents/Dialog/index.tsx @@ -174,6 +174,10 @@ interface DialogPropTypes * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onBeforeClose?: (event: Ui5CustomEvent) => void; @@ -181,16 +185,28 @@ interface DialogPropTypes * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onBeforeOpen?: (event: Ui5CustomEvent) => void; /** * Fired after the component is closed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; /** * Fired after the component is opened. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/DynamicPage/index.tsx b/packages/main/src/webComponents/DynamicPage/index.tsx index 72953146a81..263337e5a89 100644 --- a/packages/main/src/webComponents/DynamicPage/index.tsx +++ b/packages/main/src/webComponents/DynamicPage/index.tsx @@ -84,11 +84,19 @@ interface DynamicPagePropTypes titleArea?: UI5WCSlotsNode; /** * Fired when the pin header button is toggled. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onPinButtonToggle?: (event: Ui5CustomEvent) => void; /** * Fired when the expand/collapse area of the title is toggled. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onTitleToggle?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/DynamicSideContent/index.tsx b/packages/main/src/webComponents/DynamicSideContent/index.tsx index 04ae841dbbc..6cc6cb76e1c 100644 --- a/packages/main/src/webComponents/DynamicSideContent/index.tsx +++ b/packages/main/src/webComponents/DynamicSideContent/index.tsx @@ -79,6 +79,10 @@ interface DynamicSideContentPropTypes sideContent?: UI5WCSlotsNode; /** * Fires when the current breakpoint has been changed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onLayoutChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/FileUploader/index.tsx b/packages/main/src/webComponents/FileUploader/index.tsx index 5360c43eb83..242cef5b160 100644 --- a/packages/main/src/webComponents/FileUploader/index.tsx +++ b/packages/main/src/webComponents/FileUploader/index.tsx @@ -113,6 +113,10 @@ interface FileUploaderPropTypes * Event is fired when the value of the file path has been changed. * * **Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; @@ -120,6 +124,10 @@ interface FileUploaderPropTypes * Event is fired when the size of a file is above the `maxFileSize` property value. * * **Note:** Available since [v2.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.2.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onFileSizeExceed?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx index 5b2be0be33f..a47b5a62764 100644 --- a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx +++ b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx @@ -128,6 +128,10 @@ interface FlexibleColumnLayoutPropTypes /** * Fired when the layout changes via user interaction by dragging the separators * or by changing the component size due to resizing. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onLayoutChange?: ( event: Ui5CustomEvent diff --git a/packages/main/src/webComponents/Form/index.tsx b/packages/main/src/webComponents/Form/index.tsx index acacdb5323c..f481289812c 100644 --- a/packages/main/src/webComponents/Form/index.tsx +++ b/packages/main/src/webComponents/Form/index.tsx @@ -156,6 +156,7 @@ interface FormPropTypes extends FormAttributes, Omit( 'ui5-form', diff --git a/packages/main/src/webComponents/FormGroup/index.tsx b/packages/main/src/webComponents/FormGroup/index.tsx index 1954e3492a4..7dd9441ca02 100644 --- a/packages/main/src/webComponents/FormGroup/index.tsx +++ b/packages/main/src/webComponents/FormGroup/index.tsx @@ -49,6 +49,7 @@ interface FormGroupPropTypes extends FormGroupAttributes, Omit( 'ui5-form-group', diff --git a/packages/main/src/webComponents/FormItem/index.tsx b/packages/main/src/webComponents/FormItem/index.tsx index ff9d1c5c5be..a0030cc569d 100644 --- a/packages/main/src/webComponents/FormItem/index.tsx +++ b/packages/main/src/webComponents/FormItem/index.tsx @@ -56,6 +56,7 @@ interface FormItemPropTypes * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) * * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__. + * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change. */ const FormItem = withWebComponent( 'ui5-form-item', diff --git a/packages/main/src/webComponents/Input/index.tsx b/packages/main/src/webComponents/Input/index.tsx index 4b26def56ae..c9268ce1904 100644 --- a/packages/main/src/webComponents/Input/index.tsx +++ b/packages/main/src/webComponents/Input/index.tsx @@ -194,6 +194,10 @@ interface InputPropTypes valueStateMessage?: UI5WCSlotsNode; /** * Fired when the input operation has finished by pressing Enter or on focusout. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; @@ -201,6 +205,10 @@ interface InputPropTypes * Fired when the suggestions picker is closed. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; @@ -209,6 +217,10 @@ interface InputPropTypes * and when a suggestion item has been selected. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onInput?: (event: Ui5CustomEvent) => void; @@ -216,6 +228,10 @@ interface InputPropTypes * Fired when the suggestions picker is open. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; @@ -223,6 +239,10 @@ interface InputPropTypes * Fired when some text has been selected. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelect?: (event: Ui5CustomEvent) => void; @@ -231,6 +251,10 @@ interface InputPropTypes * as a preview, before the final selection. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Link/index.tsx b/packages/main/src/webComponents/Link/index.tsx index 33785576907..9e7a83d4398 100644 --- a/packages/main/src/webComponents/Link/index.tsx +++ b/packages/main/src/webComponents/Link/index.tsx @@ -150,6 +150,10 @@ interface LinkPropTypes extends LinkAttributes, Omit) => void; } diff --git a/packages/main/src/webComponents/List/index.tsx b/packages/main/src/webComponents/List/index.tsx index 76eaec23558..f9a12f51c91 100644 --- a/packages/main/src/webComponents/List/index.tsx +++ b/packages/main/src/webComponents/List/index.tsx @@ -160,6 +160,10 @@ interface ListPropTypes * is set to `Inactive`. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onItemClick?: (event: Ui5CustomEvent) => void; @@ -168,6 +172,10 @@ interface ListPropTypes * * **Note:** This event is only applicable to list items that can be closed (such as notification list items), * not to be confused with `item-delete`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onItemClose?: (event: Ui5CustomEvent) => void; @@ -176,6 +184,10 @@ interface ListPropTypes * * **Note:** A Delete button is displayed on each item, * when the component `selectionMode` property is set to `Delete`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onItemDelete?: (event: Ui5CustomEvent) => void; @@ -183,6 +195,10 @@ interface ListPropTypes * Fired when the `Toggle` button of any item is clicked. * * **Note:** This event is only applicable to list items that can be toggled (such as notification group list items). + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onItemToggle?: (event: Ui5CustomEvent) => void; @@ -190,6 +206,10 @@ interface ListPropTypes * Fired when the user scrolls to the bottom of the list. * * **Note:** The event is fired when the `growing='Scroll'` property is enabled. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onLoadMore?: (event: Ui5CustomEvent) => void; @@ -197,6 +217,10 @@ interface ListPropTypes * Fired when a movable list item is dropped onto a drop target. * * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onMove?: (event: Ui5CustomEvent) => void; @@ -208,6 +232,10 @@ interface ListPropTypes * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onMoveOver?: (event: Ui5CustomEvent) => void; @@ -216,6 +244,10 @@ interface ListPropTypes * in `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ListItemCustom/index.tsx b/packages/main/src/webComponents/ListItemCustom/index.tsx index 29089d0761e..e2b8bd259fa 100644 --- a/packages/main/src/webComponents/ListItemCustom/index.tsx +++ b/packages/main/src/webComponents/ListItemCustom/index.tsx @@ -110,6 +110,10 @@ interface ListItemCustomPropTypes deleteButton?: UI5WCSlotsNode; /** * Fired when the user clicks on the detail button when type is `Detail`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onDetailClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ListItemGroup/index.tsx b/packages/main/src/webComponents/ListItemGroup/index.tsx index 6b0fe18e4fa..1ea32b62442 100644 --- a/packages/main/src/webComponents/ListItemGroup/index.tsx +++ b/packages/main/src/webComponents/ListItemGroup/index.tsx @@ -48,6 +48,10 @@ interface ListItemGroupPropTypes * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action. * * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onMove?: (event: Ui5CustomEvent) => void; @@ -59,6 +63,10 @@ interface ListItemGroupPropTypes * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onMoveOver?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ListItemStandard/index.tsx b/packages/main/src/webComponents/ListItemStandard/index.tsx index 8d7b9a0a89c..1de27c055a6 100644 --- a/packages/main/src/webComponents/ListItemStandard/index.tsx +++ b/packages/main/src/webComponents/ListItemStandard/index.tsx @@ -165,6 +165,10 @@ interface ListItemStandardPropTypes image?: UI5WCSlotsNode; /** * Fired when the user clicks on the detail button when type is `Detail`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onDetailClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/MediaGallery/index.tsx b/packages/main/src/webComponents/MediaGallery/index.tsx index 2dce042c173..ca732a564e2 100644 --- a/packages/main/src/webComponents/MediaGallery/index.tsx +++ b/packages/main/src/webComponents/MediaGallery/index.tsx @@ -69,16 +69,28 @@ interface MediaGalleryPropTypes * Fired when the display area is clicked. * The display area is the central area that contains * the enlarged content of the currently selected item. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onDisplayAreaClick?: (event: Ui5CustomEvent) => void; /** * Fired when the thumbnails overflow button is clicked. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOverflowClick?: (event: Ui5CustomEvent) => void; /** * Fired when selection is changed by user interaction. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Menu/index.tsx b/packages/main/src/webComponents/Menu/index.tsx index c4419a771e2..7ff11c081a9 100644 --- a/packages/main/src/webComponents/Menu/index.tsx +++ b/packages/main/src/webComponents/Menu/index.tsx @@ -70,6 +70,10 @@ interface MenuPropTypes * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.** * * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onBeforeClose?: (event: Ui5CustomEvent) => void; @@ -79,6 +83,10 @@ interface MenuPropTypes * **Note:** Since 1.14.0 the event is also fired before a sub-menu opens. * * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onBeforeOpen?: (event: Ui5CustomEvent) => void; @@ -86,6 +94,10 @@ interface MenuPropTypes * Fired after the menu is closed. **This event does not bubble.** * * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; @@ -93,6 +105,10 @@ interface MenuPropTypes * Fired when an item is being clicked. * * **Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onItemClick?: (event: Ui5CustomEvent) => void; @@ -100,6 +116,10 @@ interface MenuPropTypes * Fired after the menu is opened. **This event does not bubble.** * * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/MenuItem/index.tsx b/packages/main/src/webComponents/MenuItem/index.tsx index 5b62bd705ce..855894bd8f3 100644 --- a/packages/main/src/webComponents/MenuItem/index.tsx +++ b/packages/main/src/webComponents/MenuItem/index.tsx @@ -187,6 +187,10 @@ interface MenuItemPropTypes endContent?: UI5WCSlotsNode; /** * Fired when the user clicks on the detail button when type is `Detail`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onDetailClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/MessageStrip/index.tsx b/packages/main/src/webComponents/MessageStrip/index.tsx index 7da751813cc..f0dc0f873f6 100644 --- a/packages/main/src/webComponents/MessageStrip/index.tsx +++ b/packages/main/src/webComponents/MessageStrip/index.tsx @@ -69,6 +69,10 @@ interface MessageStripPropTypes /** * Fired when the close button is pressed either with a * click/tap or by using the Enter or Space key. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/MultiComboBox/index.tsx b/packages/main/src/webComponents/MultiComboBox/index.tsx index 66b4942e91e..4e23880bdea 100644 --- a/packages/main/src/webComponents/MultiComboBox/index.tsx +++ b/packages/main/src/webComponents/MultiComboBox/index.tsx @@ -170,6 +170,10 @@ interface MultiComboBoxPropTypes valueStateMessage?: UI5WCSlotsNode; /** * Fired when the input operation has finished by pressing Enter or on focusout. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; @@ -177,11 +181,19 @@ interface MultiComboBoxPropTypes * Fired when the dropdown is closed. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; /** * Fired when the value of the component changes at each keystroke or clear icon is pressed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onInput?: (event: Ui5CustomEvent) => void; @@ -189,6 +201,10 @@ interface MultiComboBoxPropTypes * Fired when the dropdown is opened. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; @@ -196,6 +212,10 @@ interface MultiComboBoxPropTypes * Fired when selection is changed by user interaction. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/MultiInput/index.tsx b/packages/main/src/webComponents/MultiInput/index.tsx index 13d2af65633..6c41c9b71e7 100644 --- a/packages/main/src/webComponents/MultiInput/index.tsx +++ b/packages/main/src/webComponents/MultiInput/index.tsx @@ -218,6 +218,10 @@ interface MultiInputPropTypes valueStateMessage?: UI5WCSlotsNode; /** * Fired when the input operation has finished by pressing Enter or on focusout. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; @@ -225,6 +229,10 @@ interface MultiInputPropTypes * Fired when the suggestions picker is closed. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; @@ -233,6 +241,10 @@ interface MultiInputPropTypes * and when a suggestion item has been selected. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onInput?: (event: Ui5CustomEvent) => void; @@ -240,6 +252,10 @@ interface MultiInputPropTypes * Fired when the suggestions picker is open. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; @@ -247,6 +263,10 @@ interface MultiInputPropTypes * Fired when some text has been selected. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelect?: (event: Ui5CustomEvent) => void; @@ -255,17 +275,29 @@ interface MultiInputPropTypes * as a preview, before the final selection. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; /** * Fired when tokens are being deleted. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onTokenDelete?: (event: Ui5CustomEvent) => void; /** * Fired when the value help icon is pressed * and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onValueHelpTrigger?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/NotificationList/index.tsx b/packages/main/src/webComponents/NotificationList/index.tsx index 303c3b86e9b..ae4810151d9 100644 --- a/packages/main/src/webComponents/NotificationList/index.tsx +++ b/packages/main/src/webComponents/NotificationList/index.tsx @@ -31,6 +31,10 @@ interface NotificationListPropTypes * Fired when an item is clicked. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onItemClick?: (event: Ui5CustomEvent) => void; @@ -38,6 +42,10 @@ interface NotificationListPropTypes * Fired when the `Close` button of any item is clicked. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onItemClose?: (event: Ui5CustomEvent) => void; @@ -45,6 +53,10 @@ interface NotificationListPropTypes * Fired when an item is toggled. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onItemToggle?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/NotificationListGroupItem/index.tsx b/packages/main/src/webComponents/NotificationListGroupItem/index.tsx index 9961f823fd5..a53e542be29 100644 --- a/packages/main/src/webComponents/NotificationListGroupItem/index.tsx +++ b/packages/main/src/webComponents/NotificationListGroupItem/index.tsx @@ -64,11 +64,19 @@ interface NotificationListGroupItemPropTypes * Fired when additional items are requested. * * **Note:** Available since [v2.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.2.0) of **@ui5/webcomponents-fiori**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onLoadMore?: (event: Ui5CustomEvent) => void; /** * Fired when the `NotificationListGroupItem` is expanded/collapsed by user interaction. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onToggle?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/NotificationListItem/index.tsx b/packages/main/src/webComponents/NotificationListItem/index.tsx index 8dd96466bb0..59c268a2e20 100644 --- a/packages/main/src/webComponents/NotificationListItem/index.tsx +++ b/packages/main/src/webComponents/NotificationListItem/index.tsx @@ -123,6 +123,10 @@ interface NotificationListItemPropTypes menu?: UI5WCSlotsNode; /** * Fired when the `Close` button is pressed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Panel/index.tsx b/packages/main/src/webComponents/Panel/index.tsx index 6d575faf9d1..fb8aa911511 100644 --- a/packages/main/src/webComponents/Panel/index.tsx +++ b/packages/main/src/webComponents/Panel/index.tsx @@ -91,6 +91,10 @@ interface PanelPropTypes header?: UI5WCSlotsNode; /** * Fired when the component is expanded/collapsed by user interaction. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onToggle?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx index 4cf56d71335..a2ff7ee770f 100644 --- a/packages/main/src/webComponents/Popover/index.tsx +++ b/packages/main/src/webComponents/Popover/index.tsx @@ -175,6 +175,10 @@ interface PopoverPropTypes * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onBeforeClose?: (event: Ui5CustomEvent) => void; @@ -182,16 +186,28 @@ interface PopoverPropTypes * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onBeforeOpen?: (event: Ui5CustomEvent) => void; /** * Fired after the component is closed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; /** * Fired after the component is opened. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ProductSwitchItem/index.tsx b/packages/main/src/webComponents/ProductSwitchItem/index.tsx index 5fec409b8ac..6a96e1246cd 100644 --- a/packages/main/src/webComponents/ProductSwitchItem/index.tsx +++ b/packages/main/src/webComponents/ProductSwitchItem/index.tsx @@ -60,6 +60,10 @@ interface ProductSwitchItemPropTypes /** * Fired when the `ProductSwitchItem` is activated either with a * click/tap or by using the Enter or Space key. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/RadioButton/index.tsx b/packages/main/src/webComponents/RadioButton/index.tsx index 9f31e7b9826..a71843632fc 100644 --- a/packages/main/src/webComponents/RadioButton/index.tsx +++ b/packages/main/src/webComponents/RadioButton/index.tsx @@ -107,6 +107,10 @@ interface RadioButtonPropTypes Omit { /** * Fired when the component checked state changes. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/RangeSlider/index.tsx b/packages/main/src/webComponents/RangeSlider/index.tsx index 20fed2abab7..cb962dbca5c 100644 --- a/packages/main/src/webComponents/RangeSlider/index.tsx +++ b/packages/main/src/webComponents/RangeSlider/index.tsx @@ -103,11 +103,19 @@ interface RangeSliderPropTypes Omit { /** * Fired when the value changes and the user has finished interacting with the slider. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; /** * Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onInput?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/RatingIndicator/index.tsx b/packages/main/src/webComponents/RatingIndicator/index.tsx index 835edf25289..a93e6efe994 100644 --- a/packages/main/src/webComponents/RatingIndicator/index.tsx +++ b/packages/main/src/webComponents/RatingIndicator/index.tsx @@ -78,6 +78,10 @@ interface RatingIndicatorPropTypes Omit { /** * The event is fired when the value changes. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ResponsivePopover/index.tsx b/packages/main/src/webComponents/ResponsivePopover/index.tsx index 06f6db80a31..d0392e4cebf 100644 --- a/packages/main/src/webComponents/ResponsivePopover/index.tsx +++ b/packages/main/src/webComponents/ResponsivePopover/index.tsx @@ -175,6 +175,10 @@ interface ResponsivePopoverPropTypes * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onBeforeClose?: (event: Ui5CustomEvent) => void; @@ -182,16 +186,28 @@ interface ResponsivePopoverPropTypes * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onBeforeOpen?: (event: Ui5CustomEvent) => void; /** * Fired after the component is closed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; /** * Fired after the component is opened. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/SegmentedButton/index.tsx b/packages/main/src/webComponents/SegmentedButton/index.tsx index c3d6c88241d..2a778e95663 100644 --- a/packages/main/src/webComponents/SegmentedButton/index.tsx +++ b/packages/main/src/webComponents/SegmentedButton/index.tsx @@ -50,6 +50,10 @@ interface SegmentedButtonPropTypes children?: ReactNode | ReactNode[]; /** * Fired when the selected item changes. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Select/index.tsx b/packages/main/src/webComponents/Select/index.tsx index c806f10e0df..72885bc6dc0 100644 --- a/packages/main/src/webComponents/Select/index.tsx +++ b/packages/main/src/webComponents/Select/index.tsx @@ -146,11 +146,19 @@ interface SelectPropTypes * Fired when the selected option changes. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onChange?: (event: Ui5CustomEvent) => void; /** * Fired after the component's dropdown menu closes. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; @@ -159,11 +167,19 @@ interface SelectPropTypes * or when pressing the ESC key to revert the current selection. * * **Note:** Available since [v1.17.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.17.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onLiveChange?: (event: Ui5CustomEvent) => void; /** * Fired after the component's dropdown menu opens. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ShellBar/index.tsx b/packages/main/src/webComponents/ShellBar/index.tsx index 757a65d20ec..306ea97dc70 100644 --- a/packages/main/src/webComponents/ShellBar/index.tsx +++ b/packages/main/src/webComponents/ShellBar/index.tsx @@ -232,6 +232,10 @@ interface ShellBarPropTypes startButton?: UI5WCSlotsNode; /** * Fired, when the logo is activated. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onLogoClick?: (event: Ui5CustomEvent) => void; @@ -241,6 +245,10 @@ interface ShellBarPropTypes * **Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onMenuItemClick?: (event: Ui5CustomEvent) => void; @@ -248,6 +256,10 @@ interface ShellBarPropTypes * Fired, when the notification icon is activated. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onNotificationsClick?: (event: Ui5CustomEvent) => void; @@ -257,11 +269,19 @@ interface ShellBarPropTypes * **Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onProductSwitchClick?: (event: Ui5CustomEvent) => void; /** * Fired, when the profile slot is present. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onProfileClick?: (event: Ui5CustomEvent) => void; @@ -271,6 +291,10 @@ interface ShellBarPropTypes * **Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onSearchButtonClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ShellBarItem/index.tsx b/packages/main/src/webComponents/ShellBarItem/index.tsx index 805fd850843..55445c34ddd 100644 --- a/packages/main/src/webComponents/ShellBarItem/index.tsx +++ b/packages/main/src/webComponents/ShellBarItem/index.tsx @@ -36,6 +36,10 @@ interface ShellBarItemPropTypes * Fired, when the item is pressed. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/SideNavigation/index.tsx b/packages/main/src/webComponents/SideNavigation/index.tsx index 14a630bd46f..9fc5e30e947 100644 --- a/packages/main/src/webComponents/SideNavigation/index.tsx +++ b/packages/main/src/webComponents/SideNavigation/index.tsx @@ -56,6 +56,10 @@ interface SideNavigationPropTypes * Fired when the selection has changed via user interaction * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/SideNavigationItem/index.tsx b/packages/main/src/webComponents/SideNavigationItem/index.tsx index 1eefda53dad..36a9405d6df 100644 --- a/packages/main/src/webComponents/SideNavigationItem/index.tsx +++ b/packages/main/src/webComponents/SideNavigationItem/index.tsx @@ -96,6 +96,10 @@ interface SideNavigationItemPropTypes /** * Fired when the component is activated either with a * click/tap or by using the [Enter] or [Space] keys. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx index 9b46eef8fcb..f35a7b566f9 100644 --- a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx +++ b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx @@ -85,6 +85,10 @@ interface SideNavigationSubItemPropTypes /** * Fired when the component is activated either with a * click/tap or by using the [Enter] or [Space] keys. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Slider/index.tsx b/packages/main/src/webComponents/Slider/index.tsx index 59833ee42bf..104f3f74d45 100644 --- a/packages/main/src/webComponents/Slider/index.tsx +++ b/packages/main/src/webComponents/Slider/index.tsx @@ -95,11 +95,19 @@ interface SliderDomRef extends Required, Ui5DomRef {} interface SliderPropTypes extends SliderAttributes, Omit { /** * Fired when the value changes and the user has finished interacting with the slider. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; /** * Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onInput?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/SplitButton/index.tsx b/packages/main/src/webComponents/SplitButton/index.tsx index beb8f94bee0..31a8abdc505 100644 --- a/packages/main/src/webComponents/SplitButton/index.tsx +++ b/packages/main/src/webComponents/SplitButton/index.tsx @@ -60,11 +60,19 @@ interface SplitButtonPropTypes children?: ReactNode | ReactNode[]; /** * Fired when the user clicks on the arrow action. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onArrowClick?: (event: Ui5CustomEvent) => void; /** * Fired when the user clicks on the default action. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/StepInput/index.tsx b/packages/main/src/webComponents/StepInput/index.tsx index 38fb1d65049..8cd0bf6cacf 100644 --- a/packages/main/src/webComponents/StepInput/index.tsx +++ b/packages/main/src/webComponents/StepInput/index.tsx @@ -114,6 +114,10 @@ interface StepInputPropTypes valueStateMessage?: UI5WCSlotsNode; /** * Fired when the input operation has finished by pressing Enter or on focusout. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; @@ -125,6 +129,10 @@ interface StepInputPropTypes * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * **Note:** Available since [v1.23.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.23.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onValueStateChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/SuggestionItemGroup/index.tsx b/packages/main/src/webComponents/SuggestionItemGroup/index.tsx index 838e63b05aa..3c396f8c8b5 100644 --- a/packages/main/src/webComponents/SuggestionItemGroup/index.tsx +++ b/packages/main/src/webComponents/SuggestionItemGroup/index.tsx @@ -48,6 +48,10 @@ interface SuggestionItemGroupPropTypes * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action. * * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onMove?: (event: Ui5CustomEvent) => void; @@ -59,6 +63,10 @@ interface SuggestionItemGroupPropTypes * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * **Note:** Available since [v2.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.1.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onMoveOver?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Switch/index.tsx b/packages/main/src/webComponents/Switch/index.tsx index d5bc372d01a..cfc12a4ca40 100644 --- a/packages/main/src/webComponents/Switch/index.tsx +++ b/packages/main/src/webComponents/Switch/index.tsx @@ -106,6 +106,10 @@ interface SwitchPropTypes extends SwitchAttributes, Omit) => void; } diff --git a/packages/main/src/webComponents/TabContainer/index.tsx b/packages/main/src/webComponents/TabContainer/index.tsx index 5f715fe3904..b2b6ab50055 100644 --- a/packages/main/src/webComponents/TabContainer/index.tsx +++ b/packages/main/src/webComponents/TabContainer/index.tsx @@ -116,6 +116,10 @@ interface TabContainerPropTypes * Fired when element is moved to the tab container. * * **Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onMove?: (event: Ui5CustomEvent) => void; @@ -127,6 +131,10 @@ interface TabContainerPropTypes * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onMoveOver?: (event: Ui5CustomEvent) => void; @@ -136,6 +144,10 @@ interface TabContainerPropTypes * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onTabSelect?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Table/index.tsx b/packages/main/src/webComponents/Table/index.tsx index 7c296f92a4b..f480e15fa3f 100644 --- a/packages/main/src/webComponents/Table/index.tsx +++ b/packages/main/src/webComponents/Table/index.tsx @@ -101,6 +101,10 @@ interface TablePropTypes nodata?: UI5WCSlotsNode; /** * Fired when an interactive row is clicked. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onRowClick?: (event: Ui5CustomEvent) => void; } @@ -108,26 +112,26 @@ interface TablePropTypes /** * The `Table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner. * To render the `Table`, you need to define the columns and rows. You can use the provided `TableHeaderRow` and `TableRow` components for this purpose. - * + * * ### Features - * + * * The `Table` can be enhanced in its functionalities by applying different features. * Features can be slotted into the `features` slot, to enable them in the component. * Features need to be imported separately, as they are not enabled by default. - * + * * The following features are currently available: - * + * * * [TableSelection](../TableSelection) - adds selection capabilities to the table * * [TableGrowing](../TableGrowing) - provides growing capabilities to load more data - * + * * ### Keyboard Handling - * + * * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up]. * In order to use this functionality, you need to import the following module: * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"` - * + * * Furthermore, you can interact with `Table` via the following keys: - * + * * If the focus is on a row, the following keyboard shortcuts are available: * * Down - Navigates down * * Up - Navigates up @@ -141,8 +145,8 @@ interface TablePropTypes * * F2 - Focuses the first tabbable element in the row * * F7 - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row * * [Shift]Tab - Move focus to the element in the tab chain outside the table - * - * + * + * * If the focus is on a cell, the following keyboard shortcuts are available: * * Down - Navigates down * * Up - Navigates up @@ -156,13 +160,13 @@ interface TablePropTypes * * Enter - Focuses the first tabbable cell content * * F7 - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row * * [Shift]Tab - Move focus to the element in the tab chain outside the table - * - * + * + * * If the focus is on an interactive cell content, the following keyboard shortcuts are available: * * Down - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default * * Up - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default * * [Shift]Tab - Move the focus to the element in the tab chain - * + * * \ * `import "@ui5/webcomponents/dist/TableRow.js";` (`TableRow`)\ * `import "@ui5/webcomponents/dist/TableCell.js";` (`TableCell`)\ @@ -172,7 +176,13 @@ interface TablePropTypes * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) * * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__. - */ + * @experimental This Table web component is available since 2.0 and has been newly implemented to provide better screen reader and keyboard handling support. +Currently, it's considered experimental as its API is subject to change. +This Table replaces the previous Table web component, that has been part of **@ui5/webcomponents** version 1.x. +For compatibility reasons, we moved the previous Table implementation to the **@ui5/webcomponents-compat** package +and will be maintained until the new Table is experimental. +Keep in mind that you can use either the compat/Table, or the main/Table - you can't use them both as they both define the `ui5-table` tag name. +*/ const Table = withWebComponent( 'ui5-table', ['accessibleName', 'accessibleNameRef', 'loadingDelay', 'noDataText', 'overflowMode'], diff --git a/packages/main/src/webComponents/TableCell/index.tsx b/packages/main/src/webComponents/TableCell/index.tsx index 44c3fda0fb4..8414f13eabd 100644 --- a/packages/main/src/webComponents/TableCell/index.tsx +++ b/packages/main/src/webComponents/TableCell/index.tsx @@ -33,6 +33,7 @@ interface TableCellPropTypes extends TableCellAttributes, Omit( 'ui5-table-cell', diff --git a/packages/main/src/webComponents/TableGrowing/index.tsx b/packages/main/src/webComponents/TableGrowing/index.tsx index 2f5da70a24a..32d42ec36dd 100644 --- a/packages/main/src/webComponents/TableGrowing/index.tsx +++ b/packages/main/src/webComponents/TableGrowing/index.tsx @@ -43,6 +43,10 @@ interface TableGrowingPropTypes Omit { /** * Fired when the growing button is pressed or the user scrolls to the end of the table. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onLoadMore?: (event: Ui5CustomEvent) => void; } @@ -72,6 +76,7 @@ interface TableGrowingPropTypes * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) * * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__. + * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change. */ const TableGrowing = withWebComponent( 'ui5-table-growing', diff --git a/packages/main/src/webComponents/TableHeaderCell/index.tsx b/packages/main/src/webComponents/TableHeaderCell/index.tsx index 7bf2c7f0168..000ee21a203 100644 --- a/packages/main/src/webComponents/TableHeaderCell/index.tsx +++ b/packages/main/src/webComponents/TableHeaderCell/index.tsx @@ -68,6 +68,7 @@ interface TableHeaderCellPropTypes * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) * * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__. + * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change. */ const TableHeaderCell = withWebComponent( 'ui5-table-header-cell', diff --git a/packages/main/src/webComponents/TableHeaderRow/index.tsx b/packages/main/src/webComponents/TableHeaderRow/index.tsx index e083cccabc6..55482cf0eaa 100644 --- a/packages/main/src/webComponents/TableHeaderRow/index.tsx +++ b/packages/main/src/webComponents/TableHeaderRow/index.tsx @@ -39,6 +39,7 @@ interface TableHeaderRowPropTypes * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) * * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__. + * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change. */ const TableHeaderRow = withWebComponent( 'ui5-table-header-row', diff --git a/packages/main/src/webComponents/TableRow/index.tsx b/packages/main/src/webComponents/TableRow/index.tsx index 5565efc84ca..f52f6534382 100644 --- a/packages/main/src/webComponents/TableRow/index.tsx +++ b/packages/main/src/webComponents/TableRow/index.tsx @@ -43,6 +43,7 @@ interface TableRowPropTypes extends TableRowAttributes, Omit( 'ui5-table-row', diff --git a/packages/main/src/webComponents/TableSelection/index.tsx b/packages/main/src/webComponents/TableSelection/index.tsx index c8c81aedd65..a2aa03c3c1b 100644 --- a/packages/main/src/webComponents/TableSelection/index.tsx +++ b/packages/main/src/webComponents/TableSelection/index.tsx @@ -25,6 +25,10 @@ interface TableSelectionPropTypes Omit { /** * Fired when selection is changed by user interaction. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; } @@ -56,6 +60,7 @@ interface TableSelectionPropTypes * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) * * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__. + * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change. */ const TableSelection = withWebComponent( 'ui5-table-selection', diff --git a/packages/main/src/webComponents/Tag/index.tsx b/packages/main/src/webComponents/Tag/index.tsx index 893a08c0435..e2e8633152f 100644 --- a/packages/main/src/webComponents/Tag/index.tsx +++ b/packages/main/src/webComponents/Tag/index.tsx @@ -87,6 +87,10 @@ interface TagPropTypes extends TagAttributes, Omit) => void; } diff --git a/packages/main/src/webComponents/TextArea/index.tsx b/packages/main/src/webComponents/TextArea/index.tsx index 1866cda28d0..ecc97c51676 100644 --- a/packages/main/src/webComponents/TextArea/index.tsx +++ b/packages/main/src/webComponents/TextArea/index.tsx @@ -139,12 +139,20 @@ interface TextAreaPropTypes valueStateMessage?: UI5WCSlotsNode; /** * Fired when the text has changed and the focus leaves the component. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; /** * Fired when the value of the component changes at each keystroke or when * something is pasted. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onInput?: (event: Ui5CustomEvent) => void; @@ -152,6 +160,10 @@ interface TextAreaPropTypes * Fired when textarea is scrolled. * * **Note:** Available since [v1.23.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.23.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onScroll?: (event: Ui5CustomEvent) => void; @@ -159,6 +171,10 @@ interface TextAreaPropTypes * Fired when some text has been selected. * * **Note:** Available since [v1.23.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.23.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelect?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/TimePicker/index.tsx b/packages/main/src/webComponents/TimePicker/index.tsx index 89d835b7cb5..115184ac0cd 100644 --- a/packages/main/src/webComponents/TimePicker/index.tsx +++ b/packages/main/src/webComponents/TimePicker/index.tsx @@ -142,6 +142,10 @@ interface TimePickerPropTypes /** * Fired when the input operation has finished by clicking the "OK" button or * when the text in the input field has changed and the focus leaves the input field. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onChange?: (event: Ui5CustomEvent) => void; @@ -149,11 +153,19 @@ interface TimePickerPropTypes * Fired after the value-help dialog of the component is closed. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; /** * Fired when the value of the `TimePicker` is changed at each key stroke. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onInput?: (event: Ui5CustomEvent) => void; @@ -161,6 +173,10 @@ interface TimePickerPropTypes * Fired after the value-help dialog of the component is opened. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/TimelineGroupItem/index.tsx b/packages/main/src/webComponents/TimelineGroupItem/index.tsx index 37929804f54..ad0cfc796df 100644 --- a/packages/main/src/webComponents/TimelineGroupItem/index.tsx +++ b/packages/main/src/webComponents/TimelineGroupItem/index.tsx @@ -30,6 +30,10 @@ interface TimelineGroupItemPropTypes children?: ReactNode | ReactNode[]; /** * Fired when the group item is expanded or collapsed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onToggle?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/TimelineItem/index.tsx b/packages/main/src/webComponents/TimelineItem/index.tsx index 847319bf36b..c71e9708742 100644 --- a/packages/main/src/webComponents/TimelineItem/index.tsx +++ b/packages/main/src/webComponents/TimelineItem/index.tsx @@ -55,6 +55,10 @@ interface TimelineItemPropTypes * * **Note:** The event will not be fired if the `name-clickable` * attribute is not set. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onNameClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Toast/index.tsx b/packages/main/src/webComponents/Toast/index.tsx index c3c60db358a..6db0e447b33 100644 --- a/packages/main/src/webComponents/Toast/index.tsx +++ b/packages/main/src/webComponents/Toast/index.tsx @@ -45,6 +45,10 @@ interface ToastPropTypes extends ToastAttributes, Omit) => void; } diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx index 289b88c7dc5..a23cf27de77 100644 --- a/packages/main/src/webComponents/ToggleButton/index.tsx +++ b/packages/main/src/webComponents/ToggleButton/index.tsx @@ -144,6 +144,10 @@ interface ToggleButtonPropTypes * * **Note:** The event will not be fired if the `disabled` * property is set to `true`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClick?: MouseEventHandler; } diff --git a/packages/main/src/webComponents/Tokenizer/index.tsx b/packages/main/src/webComponents/Tokenizer/index.tsx index 9ae85ed7425..00064ddcf73 100644 --- a/packages/main/src/webComponents/Tokenizer/index.tsx +++ b/packages/main/src/webComponents/Tokenizer/index.tsx @@ -46,11 +46,19 @@ interface TokenizerPropTypes Omit { /** * Fired when token selection is changed by user interaction + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; /** * Fired when tokens are being deleted (delete icon, delete or backspace is pressed) + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onTokenDelete?: (event: Ui5CustomEvent) => void; } @@ -84,6 +92,7 @@ interface TokenizerPropTypes * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) * * @since [2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents__. + * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change. */ const Tokenizer = withWebComponent( 'ui5-tokenizer', diff --git a/packages/main/src/webComponents/ToolbarButton/index.tsx b/packages/main/src/webComponents/ToolbarButton/index.tsx index 204736486e0..60748836c70 100644 --- a/packages/main/src/webComponents/ToolbarButton/index.tsx +++ b/packages/main/src/webComponents/ToolbarButton/index.tsx @@ -122,6 +122,10 @@ interface ToolbarButtonPropTypes * * **Note:** The event will not be fired if the `disabled` * property is set to `true`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ToolbarSelect/index.tsx b/packages/main/src/webComponents/ToolbarSelect/index.tsx index bad3350afb8..3f1700cabdb 100644 --- a/packages/main/src/webComponents/ToolbarSelect/index.tsx +++ b/packages/main/src/webComponents/ToolbarSelect/index.tsx @@ -76,16 +76,28 @@ interface ToolbarSelectPropTypes * Fired when the selected option changes. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onChange?: (event: Ui5CustomEvent) => void; /** * Fired after the component's dropdown menu closes. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; /** * Fired after the component's dropdown menu opens. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Tree/index.tsx b/packages/main/src/webComponents/Tree/index.tsx index d2252b69c06..d5f861cd028 100644 --- a/packages/main/src/webComponents/Tree/index.tsx +++ b/packages/main/src/webComponents/Tree/index.tsx @@ -107,6 +107,10 @@ interface TreePropTypes * Fired when a tree item is activated. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onItemClick?: (event: Ui5CustomEvent) => void; @@ -115,16 +119,28 @@ interface TreePropTypes * * **Note:** A Delete button is displayed on each item, * when the component `selectionMode` property is set to `Delete`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onItemDelete?: (event: Ui5CustomEvent) => void; /** * Fired when the mouse cursor leaves the tree item borders. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onItemMouseout?: (event: Ui5CustomEvent) => void; /** * Fired when the mouse cursor enters the tree item borders. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onItemMouseover?: (event: Ui5CustomEvent) => void; @@ -136,12 +152,20 @@ interface TreePropTypes * Even if you prevented the event's default behavior, you can always manually call `toggle()` on a tree item. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onItemToggle?: (event: Ui5CustomEvent) => void; /** * Fired when selection is changed by user interaction * in `Single`, `SingleStart`, `SingleEnd` and `Multiple` modes. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/TreeItem/index.tsx b/packages/main/src/webComponents/TreeItem/index.tsx index 9220da551ad..68b3f7478c3 100644 --- a/packages/main/src/webComponents/TreeItem/index.tsx +++ b/packages/main/src/webComponents/TreeItem/index.tsx @@ -179,6 +179,10 @@ interface TreeItemPropTypes deleteButton?: UI5WCSlotsNode; /** * Fired when the user clicks on the detail button when type is `Detail`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onDetailClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/TreeItemCustom/index.tsx b/packages/main/src/webComponents/TreeItemCustom/index.tsx index e1dc795b7e3..958d9868ba3 100644 --- a/packages/main/src/webComponents/TreeItemCustom/index.tsx +++ b/packages/main/src/webComponents/TreeItemCustom/index.tsx @@ -184,6 +184,10 @@ interface TreeItemCustomPropTypes deleteButton?: UI5WCSlotsNode; /** * Fired when the user clicks on the detail button when type is `Detail`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onDetailClick?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/UploadCollection/index.tsx b/packages/main/src/webComponents/UploadCollection/index.tsx index 727221e071c..a710a6894a8 100644 --- a/packages/main/src/webComponents/UploadCollection/index.tsx +++ b/packages/main/src/webComponents/UploadCollection/index.tsx @@ -79,17 +79,29 @@ interface UploadCollectionPropTypes * Fired when an element is dropped inside the drag and drop overlay. * * **Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `UploadCollection`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onDrop?: DragEventHandler; /** * Fired when the delete button of any item is pressed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onItemDelete?: (event: Ui5CustomEvent) => void; /** * Fired when selection is changed by user interaction * in `Single` and `Multiple` modes. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelectionChange?: ( event: Ui5CustomEvent diff --git a/packages/main/src/webComponents/UploadCollectionItem/index.tsx b/packages/main/src/webComponents/UploadCollectionItem/index.tsx index 08e2acda515..418410e66a7 100644 --- a/packages/main/src/webComponents/UploadCollectionItem/index.tsx +++ b/packages/main/src/webComponents/UploadCollectionItem/index.tsx @@ -181,6 +181,10 @@ interface UploadCollectionItemPropTypes thumbnail?: UI5WCSlotsNode; /** * Fired when the user clicks on the detail button when type is `Detail`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onDetailClick?: (event: Ui5CustomEvent) => void; @@ -188,6 +192,10 @@ interface UploadCollectionItemPropTypes * Fired when the file name is clicked. * * **Note:** This event is only available when `fileNameClickable` property is `true`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onFileNameClick?: (event: Ui5CustomEvent) => void; @@ -196,6 +204,10 @@ interface UploadCollectionItemPropTypes * * **Note:** An edit button is displayed on each item, * when the `UploadCollectionItem` `type` property is set to `Detail`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onRename?: (event: Ui5CustomEvent) => void; @@ -203,6 +215,10 @@ interface UploadCollectionItemPropTypes * Fired when the retry button is pressed. * * **Note:** Retry button is displayed when `uploadState` property is set to `Error`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onRetry?: (event: Ui5CustomEvent) => void; @@ -210,6 +226,10 @@ interface UploadCollectionItemPropTypes * Fired when the terminate button is pressed. * * **Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onTerminate?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx index f20486ef03b..9c133dfdd97 100644 --- a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx +++ b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx @@ -81,11 +81,19 @@ interface ViewSettingsDialogPropTypes * Fired before the component is opened. * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ✅|✅| */ onBeforeOpen?: (event: Ui5CustomEvent) => void; /** * Fired when cancel button is activated. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onCancel?: (event: Ui5CustomEvent) => void; @@ -93,11 +101,19 @@ interface ViewSettingsDialogPropTypes * Fired after the dialog is closed. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-fiori**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onClose?: (event: Ui5CustomEvent) => void; /** * Fired when confirmation button is activated. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onConfirm?: (event: Ui5CustomEvent) => void; @@ -105,6 +121,10 @@ interface ViewSettingsDialogPropTypes * Fired after the dialog is opened. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-fiori**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onOpen?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Wizard/index.tsx b/packages/main/src/webComponents/Wizard/index.tsx index 3861ddd0367..7cb7e333ac0 100644 --- a/packages/main/src/webComponents/Wizard/index.tsx +++ b/packages/main/src/webComponents/Wizard/index.tsx @@ -31,6 +31,10 @@ interface WizardPropTypes /** * Fired when the step is changed by user interaction - either with scrolling, * or by clicking on the steps within the component header. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onStepChange?: (event: Ui5CustomEvent) => void; } From a4bbee59c16fd3ededf62815d1b45ab026433b47 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 15 Nov 2024 14:29:13 +0100 Subject: [PATCH 3/6] cleanup --- packages/main/src/webComponents/Form/Form.mdx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/main/src/webComponents/Form/Form.mdx b/packages/main/src/webComponents/Form/Form.mdx index 86ce740ece9..0f40889da96 100644 --- a/packages/main/src/webComponents/Form/Form.mdx +++ b/packages/main/src/webComponents/Form/Form.mdx @@ -31,10 +31,6 @@ import * as ComponentStories from './Form.stories'; Show Code - | cancelable | bubbles | - |:----------:|:-------:| - |  ✅   |   ❌   | - ```jsx const StandardField = ({ editMode, value, inputType = InputType.Text, onInput, ...rest }) => { if (editMode) { From 5ffada10f1836804918bc6802db1f14604dda664 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 15 Nov 2024 14:38:53 +0100 Subject: [PATCH 4/6] Update PropTypesRenderer.ts --- .../cli/src/scripts/create-wrappers/PropTypesRenderer.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts b/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts index 05bcc755805..f9ea057f278 100644 --- a/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts +++ b/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts @@ -114,7 +114,10 @@ export class PropTypesRenderer extends AbstractRenderer { descriptionParts.push(` * @deprecated`); } } - if (event._ui5Bubbles || event._ui5Cancelable) { + if ( + Object.prototype.hasOwnProperty.call(event, '_ui5Bubbles') || + Object.prototype.hasOwnProperty.call(event, '_ui5Cancelable') + ) { descriptionParts.push(` *`); descriptionParts.push(`* | cancelable | bubbles |`); descriptionParts.push(`* | :--------: | :-----: |`); From e547f1ad53a600818cd64b3e3c6e36f02097528f Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 15 Nov 2024 14:41:03 +0100 Subject: [PATCH 5/6] run wrapper script for compat package --- packages/compat/src/components/Table/index.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/compat/src/components/Table/index.tsx b/packages/compat/src/components/Table/index.tsx index 2ba24d4c3ea..bc965645c5a 100644 --- a/packages/compat/src/components/Table/index.tsx +++ b/packages/compat/src/components/Table/index.tsx @@ -175,6 +175,10 @@ interface TablePropTypes * **Note:** The event will be fired if `growing` is set to `Button` or `Scroll`. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-compat**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onLoadMore?: (event: Ui5CustomEvent) => void; @@ -182,11 +186,19 @@ interface TablePropTypes * Fired when `TableColumn` is shown as a pop-in instead of hiding it. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-compat**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onPopinChange?: (event: Ui5CustomEvent) => void; /** * Fired when a row in `Active` mode is clicked or `Enter` key is pressed. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onRowClick?: (event: Ui5CustomEvent) => void; @@ -195,6 +207,10 @@ interface TablePropTypes * in `SingleSelect` and `MultiSelect` modes. * * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-compat**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| */ onSelectionChange?: (event: Ui5CustomEvent) => void; } From e7fae821ccc74dd090e6fd43a8ede797441bdd1f Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Fri, 15 Nov 2024 16:33:39 +0100 Subject: [PATCH 6/6] experimental --- .storybook/components/DocsHeader.module.css | 14 ++++++++++++++ .storybook/components/DocsHeader.tsx | 6 ++++-- .storybook/manager-head.html | 9 +++++++++ .../src/components/TimelineChart/TimeLineChart.mdx | 2 +- .../TimelineChart/TimeLineChart.stories.tsx | 2 +- packages/main/src/webComponents/Form/Form.mdx | 2 +- .../main/src/webComponents/Form/Form.stories.tsx | 2 +- packages/main/src/webComponents/Table/Table.mdx | 2 +- .../main/src/webComponents/Table/Table.stories.tsx | 2 +- .../main/src/webComponents/Tokenizer/Tokenizer.mdx | 2 +- .../webComponents/Tokenizer/Tokenizer.stories.tsx | 2 +- 11 files changed, 35 insertions(+), 10 deletions(-) diff --git a/.storybook/components/DocsHeader.module.css b/.storybook/components/DocsHeader.module.css index f781d4c30cb..3dd32d6d8d5 100644 --- a/.storybook/components/DocsHeader.module.css +++ b/.storybook/components/DocsHeader.module.css @@ -35,3 +35,17 @@ .infoTable td[data-import-cell='true'] { padding-inline-end: 2.5rem; } + +.titleRow { + padding-block-end: 0.5rem; +} + +.titleRow :global(.sbdocs-title) { + margin-bottom: 0; +} + +.experimentalLabel { + font-size: var(--sapObjectHeader_Title_SnappedFontSize); + margin-inline-start: 0.25rem; + align-self: flex-end; +} diff --git a/.storybook/components/DocsHeader.tsx b/.storybook/components/DocsHeader.tsx index 9e43c399507..bcd79c65737 100644 --- a/.storybook/components/DocsHeader.tsx +++ b/.storybook/components/DocsHeader.tsx @@ -49,6 +49,7 @@ interface InfoTableProps { subComponents?: string[]; mergeSubComponents?: boolean; isChart?: boolean; + experimental?: boolean; } export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTableProps) => { @@ -128,11 +129,12 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl ); }; -export const DocsHeader = ({ since, subComponents, mergeSubComponents, isChart }: InfoTableProps) => { +export const DocsHeader = ({ since, subComponents, mergeSubComponents, isChart, experimental }: InfoTableProps) => { return ( - + + {experimental && <Label className={classes.experimentalLabel}>experimental</Label>} <span style={{ flexGrow: 1 }} /> <Links /> </FlexBox> diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index a5f398522c0..0c809ddda23 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -50,6 +50,15 @@ input:not(:checked) ~ span:first-of-type { background-color: transparent !important; } + + /*experimental components */ + #data-display-table::after, + #inputs-tokenizer::after, + #layouts-floorplans-form::after, + #charts-timelinechart::after { + content: '(experimental)'; + overflow: hidden; + } </style> <script data-ui5-config type="application/json"> diff --git a/packages/charts/src/components/TimelineChart/TimeLineChart.mdx b/packages/charts/src/components/TimelineChart/TimeLineChart.mdx index eec955d02d6..1a35babfa23 100644 --- a/packages/charts/src/components/TimelineChart/TimeLineChart.mdx +++ b/packages/charts/src/components/TimelineChart/TimeLineChart.mdx @@ -6,7 +6,7 @@ import { TimelineChartAnnotation } from './TimelineChartAnnotation'; <Meta of={ComponentStories} /> -<DocsHeader isChart since="1.10.0" /> +<DocsHeader isChart since="1.10.0" experimental /> <Canvas of={ComponentStories.Default} /> diff --git a/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx b/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx index 01df003343f..9cb6ad73e12 100644 --- a/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx +++ b/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx @@ -6,7 +6,7 @@ import { TimelineChart } from './TimelineChart.js'; import { TimelineChartAnnotation } from './TimelineChartAnnotation.js'; const meta = { - title: 'TimelineChart (experimental)', + title: 'TimelineChart', component: TimelineChart, argTypes: { dataset: { diff --git a/packages/main/src/webComponents/Form/Form.mdx b/packages/main/src/webComponents/Form/Form.mdx index 0f40889da96..d20acdbcdce 100644 --- a/packages/main/src/webComponents/Form/Form.mdx +++ b/packages/main/src/webComponents/Form/Form.mdx @@ -7,7 +7,7 @@ import * as ComponentStories from './Form.stories'; <Meta of={ComponentStories} /> -<DocsHeader subComponents={['FormGroup', 'FormItem']} /> +<DocsHeader subComponents={['FormGroup', 'FormItem']} experimental /> <br /> diff --git a/packages/main/src/webComponents/Form/Form.stories.tsx b/packages/main/src/webComponents/Form/Form.stories.tsx index 143672723c1..d0722c162f6 100644 --- a/packages/main/src/webComponents/Form/Form.stories.tsx +++ b/packages/main/src/webComponents/Form/Form.stories.tsx @@ -7,7 +7,7 @@ import { FormItem } from '../FormItem/index.js'; import { Form } from './index.js'; const meta = { - title: 'Layouts & Floorplans / Form (experimental)', + title: 'Layouts & Floorplans / Form', component: Form, argTypes: { children: { control: { disable: true } } diff --git a/packages/main/src/webComponents/Table/Table.mdx b/packages/main/src/webComponents/Table/Table.mdx index 25c3d485178..4686e14eeb7 100644 --- a/packages/main/src/webComponents/Table/Table.mdx +++ b/packages/main/src/webComponents/Table/Table.mdx @@ -11,7 +11,7 @@ import * as ComponentStories from './Table.stories'; <Meta of={ComponentStories} /> -<DocsHeader /> +<DocsHeader experimental /> <br /> diff --git a/packages/main/src/webComponents/Table/Table.stories.tsx b/packages/main/src/webComponents/Table/Table.stories.tsx index 5ca467d9d38..1053c58871f 100644 --- a/packages/main/src/webComponents/Table/Table.stories.tsx +++ b/packages/main/src/webComponents/Table/Table.stories.tsx @@ -12,7 +12,7 @@ import { TableSelection } from '../TableSelection/index.js'; import { Table } from './index.js'; const meta = { - title: 'Data Display / Table (experimental)', + title: 'Data Display / Table', component: Table, argTypes: { headerRow: { control: { disable: true } }, diff --git a/packages/main/src/webComponents/Tokenizer/Tokenizer.mdx b/packages/main/src/webComponents/Tokenizer/Tokenizer.mdx index 64a0d115f0f..bc6df9b7ace 100644 --- a/packages/main/src/webComponents/Tokenizer/Tokenizer.mdx +++ b/packages/main/src/webComponents/Tokenizer/Tokenizer.mdx @@ -8,7 +8,7 @@ import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw'; [//]: # 'todo: check why subcomponents are not displayed via CEM' -<DocsHeader subComponents={['Token']} /> +<DocsHeader subComponents={['Token']} experimental /> <br /> diff --git a/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx b/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx index c2b9ea8bf93..81ece0264e5 100644 --- a/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx +++ b/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx @@ -7,7 +7,7 @@ import type { TokenizerPropTypes } from './index.js'; import { Tokenizer } from './index.js'; const meta = { - title: 'Inputs / Tokenizer (experimental)', + title: 'Inputs / Tokenizer', component: Tokenizer, args: { style: { width: '250px' } }, tags: ['package:@ui5/webcomponents']