import { ${name} } from '@ui5/webcomponents-react/lib/${name}';
+ * import { BusyIndicator } from '@ui5/webcomponents-react/lib/${componentName}';\n`,
- UI5_PLAYGROUND_WHITELIST.includes(componentName) ? ` * import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';
- */
-const Avatar: FCCarousel 1
-Carousel 2
-Carousel 3
-Carousel 4
-Carousel 5
-Carousel 6
-Carousel 7
-Carousel 1
-Carousel 2
-Carousel 3
-Carousel 4
-Carousel 5
-Carousel 6
-Carousel 7
-Carousel 8
-Carousel 9
-Carousel 10
-Carousel 1
-- Carousel 1 -
-- Carousel 2 -
-- Carousel 3 -
-- Carousel 4 -
-- Carousel 5 -
-- Carousel 6 -
-- Carousel 7 -
-- Carousel 1 -
-- Carousel 2 -
-- Carousel 3 -
-- Carousel 4 -
-- Carousel 5 -
-- Carousel 6 -
-- Carousel 7 -
-- Carousel 1 -
-- Carousel 2 -
-- Carousel 3 -
-- Carousel 4 -
-- Carousel 5 -
-- Carousel 6 -
-- Carousel 7 -
-- Carousel 1 -
-- Carousel 2 -
-- Carousel 3 -
-- Carousel 4 -
-- Carousel 5 -
-- Carousel 6 -
-- Carousel 7 -
-- Carousel 1 -
-- Carousel 2 -
-- Carousel 3 -
-- Carousel 4 -
-- Carousel 5 -
-- Carousel 6 -
-- Carousel 7 -
-- Carousel 1 -
-- Carousel 2 -
-- Carousel 3 -
-- Carousel 4 -
-- Carousel 5 -
-- Carousel 6 -
-- Carousel 7 -
-- Carousel 8 -
-- Carousel 9 -
-- Carousel 10 -
-- Carousel 1 -
-- Carousel 2 -
-- Carousel 3 -
-- Carousel 4 -
-- Carousel 5 -
-- Carousel 6 -
-- Carousel 7 -
-This is a larger content
-This is a larger content
-import { Carousel } from '@ui5/webcomponents-react/lib/Carousel';
- */
-const Carousel: FCimport { SegmentedButton } from '@ui5/webcomponents-react/lib/SegmentedButton';
- */
-const SegmentedButton: FCimport { SegmentedButtonItem } from '@ui5/webcomponents-react/lib/SegmentedButtonItem';
- */
-const SegmentedButtonItem: FCimport { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
*/
const ThemeProvider: FCui5-popover can be placed over the target.
+ */
+ allowTargetOverlap?: boolean;
+ /**
+ * Defines the header text. header slot is provided, the headerText is ignored.
+ */
+ headerText?: string;
+ /**
+ * Determines the horizontal alignment of the ui5-popover. CenterLeftRightStretchui5-popover should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.
+ */
+ modal?: boolean;
+ /**
+ * Determines whether the ui5-popover arrow is hidden.
+ */
+ noArrow?: boolean;
+ /**
+ * Determines on which side the ui5-popover is placed at. LeftRightTopBottomui5-popover. CenterTopBottomStretchui5-product-switch.
+ */
+ children?: ReactNode | ReactNode[];
}
/**
@@ -16,4 +19,6 @@ const ProductSwitch: FCui5-product-switch-item.
+ */
+ heading?: string;
+ /**
+ * Defines the icon to be displayed as a graphical element within the ui5-product-switch-item. ui5-product-switch-item icon="palette"+ +See all the available icons in the
ui5-product-switch-item.
+ */
+ subtitle?: string;
+ /**
+ * Defines a target where the targetSrc content must be open. _self_top_blank_parent_searchui5-product-switch-item target URI. Supports standard hyperlink behavior.
+ */
+ targetSrc?: string;
+ /**
+ * Fired when the ui5-product-switch-item is activated either with a click/tap or by using the Enter or Space key.
+ */
+ onClick?: (event: CustomEvent<{}>) => void;
}
/**
* import { ProductSwitchItem } from '@ui5/webcomponents-react/lib/ProductSwitchItem';
+ * ui5-radiobutton is disabled. ui5-radiobutton is completely noninteractive.
+ */
+ disabled?: boolean;
+ /**
+ * Defines the name of the ui5-radiobutton. Radio buttons with the same name will form a radio button group.
+ * ARROW_UP/DOWN and ARROW_LEFT/RIGHT keys between radio buttons in same group.
+ * name property to have effect when submitting forms, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
+ * input HTML element will be created inside the ui5-radiobutton so that it can be submitted as part of an HTML form.
+ */
+ name?: string;
+ /**
+ * Determines whether the ui5-radiobutton is read-only. ui5-radiobutton is not editable, but still provides visual feedback upon user interaction.
+ */
+ readonly?: boolean;
+ /**
+ * Determines whether the ui5-radiobutton is selected or not. ui5-radiobutton, or by using the Space or Enter key.
+ */
+ selected?: boolean;
+ /**
+ * Defines the text of the ui5-radiobutton.
+ */
+ text?: string;
+ /**
+ * Defines the form value of the ui5-radiobutton. When a form with a radio button group is submitted, the group's value will be the value of the currently selected radio button. value property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
+ */
+ value?: string;
+ /**
+ * Defines the value state of the ui5-radiobutton. NoneErrorWarningui5-radiobutton text wraps when there is not enough space. ui5-radiobutton selected state changes.
+ */
+ onSelect?: (event: CustomEvent<{}>) => void;
}
/**
@@ -26,7 +57,13 @@ const RadioButton: FCui5-popover can be placed over the target.
+ */
+ allowTargetOverlap?: boolean;
+ /**
+ * Defines the header text. header slot is provided, the headerText is ignored.
+ */
+ headerText?: string;
+ /**
+ * Determines the horizontal alignment of the ui5-popover. CenterLeftRightStretchui5-popover should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.
+ */
+ modal?: boolean;
+ /**
+ * Determines whether the ui5-popover arrow is hidden.
+ */
+ noArrow?: boolean;
+ /**
+ * Determines on which side the ui5-popover is placed at. LeftRightTopBottomui5-popover. CenterTopBottomStretchimport { ResponsivePopover } from '@ui5/webcomponents-react/lib/ResponsivePopover';
+ * ui5-segmentedbutton. ui5-togglebutton for the intended design.
+ */
+ children?: ReactNode | ReactNode[];
+ /**
+ * Fired when the selected button changes.
+ */
+ onSelectionChange?: (event: CustomEvent<{ selectedButton: ReactNode }>) => void;
+}
+
+/**
+ * import { SegmentedButton } from '@ui5/webcomponents-react/lib/SegmentedButton';
+ * ui5-select is in disabled state. ui5-select is noninteractive.
+ */
+ disabled?: boolean;
+ /**
+ * Determines the name with which the ui5-select will be submitted in an HTML form. The value of the ui5-select will be the value of the currently selected ui5-option.
+ * name property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
+ * input HTML element will be created inside the ui5-select so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
+ */
+ name?: string;
+ /**
+ * Defines the value state of the ui5-select. NoneErrorWarningSuccessInformationui5-select options.
+ * ui5-option component to define the desired options.
+ */
+ children?: ReactNode | ReactNode[];
+ /**
+ * Fired when the selected option changes.
+ */
+ onChange?: (event: CustomEvent<{ selectedOption: ReactNode }>) => void;
}
/**
@@ -22,7 +41,9 @@ const Select: FClogo source URI.
+ */
+ logo?: string;
+ /**
+ * Defines the notificationCount, displayed in the notification icon top-right corner.
+ */
+ notificationCount?: string;
+ /**
+ * Defines the primaryTitle. primaryTitle would be hidden on S screen size (less than approx. 700px).
+ */
+ primaryTitle?: string;
+ /**
+ * Defines the secondaryTitle. secondaryTitle would be hidden on S and M screen sizes (less than approx. 1300px).
+ */
+ secondaryTitle?: string;
+ /**
+ * Defines, if the product CoPilot icon would be displayed. "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js" module as add-on feature.
+ */
+ showCoPilot?: boolean;
+ /**
+ * Defines, if the notification icon would be displayed.
+ */
+ showNotifications?: boolean;
+ /**
+ * Defines, if the product switch icon would be displayed.
+ */
+ showProductSwitch?: boolean;
+ /**
+ * Defines the ui5-shellbar aditional items. ui5-avatar to set the profile image/icon. If no profile slot is set - profile will be excluded from actions.
+ */
+ profile?: ReactNode;
+ /**
+ * Defines the ui5-input, that will be used as a search field.
+ */
+ searchField?: ReactNode | ReactNode[];
+ /**
+ * Defines a ui5-button in the bar that will be placed in the beginning. We encourage this slot to be used for a back or home button. It gets overstyled to match ShellBar's styling.
+ */
+ startButton?: ReactNode | ReactNode[];
+ /**
+ * Fired, when the co pilot is activated.
+ */
+ onCoPilotClick?: (event: CustomEvent<{ targetRef: ReactNode }>) => void;
+ /**
+ * Fired, when the logo is activated.
+ */
+ onLogoClick?: (event: CustomEvent<{ targetRef: ReactNode }>) => void;
+ /**
+ * Fired, when a menu item is activated Note: You can prevent closing of oveflow popover by calling event.preventDefault().
+ */
+ onMenuItemClick?: (event: CustomEvent<{ item: ReactNode }>) => void;
+ /**
+ * Fired, when the notification icon is activated.
+ */
+ onNotificationsClick?: (event: CustomEvent<{ targetRef: ReactNode }>) => void;
+ /**
+ * Fired, when the product switch icon is activated. Note: You can prevent closing of oveflow popover by calling event.preventDefault().
+ */
+ onProductSwitchClick?: (event: CustomEvent<{ targetRef: ReactNode }>) => void;
+ /**
+ * Fired, when the profile slot is present.
+ */
+ onProfileClick?: (event: CustomEvent<{ targetRef: ReactNode }>) => void;
}
/**
@@ -34,4 +87,14 @@ const ShellBar: FCimport { ShellBarItem } from '@ui5/webcomponents-react/lib/ShellBarItem';
+ * icon source URI. icon should be displayed in the beginning of the list item or in the end. image is set, the icon would be displayed after the image.
+ */
+ iconEnd?: boolean;
+ /**
+ * Defines the image source URI. image would be displayed in the beginning of the list item.
+ */
+ image?: string;
+ /**
+ * Defines the info, displayed in the end of the list item.
+ */
+ info?: string;
+ /**
+ * Defines the state of the info. "None" (by default), "Success", "Warning" and "Erorr".
+ */
+ infoState?: ValueState;
+ /**
+ * Defines the text of the ui5-li. Active (by default), Inactive and Detail.
+ * Active, the item will provide visual response upon press and hover,
+ * while with type Inactive and Detail - will not.
+ */
+ type?: ListItemTypes;
+ /**
+ * Defines the selected state of the ListItem.
+ */
+ selected?: boolean;
}
/**
* import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
+ * image, icon, description, etc. will be omitted and only the text will be displayed.
+ */
+ group?: string;
+ /**
+ * Defines the icon source URI. icon should be displayed in the beginning of the item or in the end. image is set, the icon would be displayed after the image.
+ */
+ iconEnd?: boolean;
+ /**
+ * Defines the image source URI. image would be displayed in the beginning of the item.
+ */
+ image?: string;
+ /**
+ * Defines the info, displayed in the end of the item.
+ */
+ info?: string;
+ /**
+ * Defines the state of the info. "None" (by default), "Success", "Warning" and "Erorr".
+ */
+ infoState?: ValueState;
+ /**
+ * Defines the text of the ui5-suggestion-item.
+ */
+ text?: string;
+}
+
+/**
+ * import { SuggestionItem } from '@ui5/webcomponents-react/lib/SuggestionItem';
+ * ui5-switch is checked. ui5-switch, or by pressing the Enter or Space key.
+ */
+ checked?: boolean;
+ /**
+ * Defines whether the ui5-switch is disabled. ui5-switch is noninteractive.
+ */
+ disabled?: boolean;
+ /**
+ * Defines the ui5-switch type. graphical type is set, positive and negative icons will replace the textOn and textOff.
+ */
+ graphical?: boolean;
+ /**
+ * Defines the text of the ui5-switch when switched off. ui5-switch when switched on.
+ *
+ * ui5-switch checked state changes.
+ */
+ onChange?: (event: CustomEvent<{}>) => void;
}
/**
@@ -22,4 +41,12 @@ const Switch: FCui5-tab. The SAP-icons font provides numerous built-in icons. See all the available icons in the ui5-tab is selected.
+ */
+ selected?: boolean;
+ /**
+ * Defines the ui5-tab semantic color. ui5-tab icontext when ui5-tab overflows"Default", "Neutral", "Positive", "Critical" and "Negative".
+ * import { Tab } from '@ui5/webcomponents-react/lib/Tab';
+ * main text and the additionalText of a tab.
+
+main text and the additionalText would be displayed vertically by defualt, but when set to Inline, they would be displayed horizontally.
+
+StandardInlineui5-tab and ui5-tab-separator for the intended design.
+ */
children?: ReactNode | ReactNode[];
+ /**
+ * Fired when a tab is selected.
+ */
+ onTabSelect?: (event: CustomEvent<{ tab: ReactNode; tabIndex: undefined }>) => void;
}
/**
@@ -21,4 +44,11 @@ const TabContainer: FCimport { TabSeparator } from '@ui5/webcomponents-react/lib/TabSeparator';
+ * showNoData is present.
+ */
+ noDataText?: string;
+ /**
+ * Defines if the value of noDataText will be diplayed when there is no rows present in the table.
+ */
+ showNoData?: boolean;
+ /**
+ * Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport. overflow: hidden or overflow: auto style definition, this can prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.ui5-table. ui5-table-column for the intended design.
+ */
columns?: ReactNode | ReactNode[];
+ /**
+ * Defines the ui5-table rows. ui5-table-row for the intended design.
+ */
+ children?: ReactNode | ReactNode[];
+ /**
+ * Fired when the ui5-table-column is shown as a pop-in instead of hiding it.
+ */
+ onPopinChange?: (event: CustomEvent<{ poppedColumns: unknown[] }>) => void;
+ /**
+ * Fired when a row is clicked.
+ */
+ onRowClick?: (event: CustomEvent<{ row: ReactNode }>) => void;
}
/**
@@ -20,4 +43,10 @@ const Table: FCui5-table-cell.
+ */
+ children?: ReactNode | ReactNode[];
}
/**
* import { TableCell } from '@ui5/webcomponents-react/lib/TableCell';
+ * minWidth settings, the ui5-table-column can be hidden in different screen sizes. true, shows this column as pop-in instead of hiding it.
+ */
+ demandPopin?: boolean;
+ /**
+ * Defines the minimum table width required to display this column. By default it is always displayed. ui5-table is determined by this property. As an example, by setting minWidth property to 40em shows this column on tablet (and desktop) but hides it on mobile. demandPopin property.
+ */
+ minWidth?: number;
+ /**
+ * The text for the column when it pops in.
+ */
+ popinText?: string;
+ /**
+ * Defines the content of the column header.
+ */
+ children?: ReactNode | ReactNode[];
}
/**
* import { TableColumn } from '@ui5/webcomponents-react/lib/TableColumn';
+ * ui5-table-row. ui5-table-cell for the intended design.
+ */
children?: ReactNode | ReactNode[];
}
/**
* import { TableRow } from '@ui5/webcomponents-react/lib/TableRow';
+ * ui5-textarea to automatically grow and shrink dynamically with its content. true, the CSS height property is ignored.
+ */
+ growing?: boolean;
+ /**
+ * Defines the maximum number of lines that the Web Component can grow.
+ */
+ growingMaxLines?: number;
+ /**
+ * Defines the maximum number of characters that the value can have.
+ */
+ maxlength?: number;
+ /**
+ * Determines the name with which the ui5-textarea will be submitted in an HTML form.
+
+name property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
+
+input HTML element will be created inside the ui5-textarea so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
+ */
+ name?: string;
+ /**
+ * Defines a short hint intended to aid the user with data entry when the component has no value.
+ */
+ placeholder?: string;
+ /**
+ * Defines whether the ui5-textarea is read-only. ui5-textarea is not editable, but still provides visual feedback upon user interaction.
+ */
+ readonly?: boolean;
+ /**
+ * Defines whether the ui5-textarea is required.
+ */
+ required?: boolean;
+ /**
+ * Defines the number of visible text lines for the component. growing property is enabled, this property defines the minimum rows to be displayed in the textarea.height property wins over the rows property, if both are set.ui5-textarea. false, the user is not allowed to enter more characters than what is set in the maxlength property. If set to true the characters exceeding the maxlength value are selected on paste and the counter below the ui5-textarea displays their number.
+ */
+ showExceededText?: boolean;
+ /**
+ * Defines the value of the Web Component.
+ */
+ value?: string;
+ /**
+ * Fired when the text has changed and the focus leaves the ui5-textarea.
+ */
+ onChange?: (event: CustomEvent<{}>) => void;
+ /**
+ * Fired when the value of the ui5-textarea changes at each keystroke or when something is pasted.
+ */
+ onInput?: (event: CustomEvent<{}>) => void;
}
/**
@@ -28,9 +72,16 @@ const TextArea: FCui5-timepicker is displayed as disabled.
+ */
+ disabled?: boolean;
+ /**
+ * Determines the format, displayed in the input field.
+ * Example: HH:mm:ss -> 11:42:35 hh:mm:ss a -> 2:23:15 PM mm:ss -> 12:04 (only minutes and seconds)
+ */
+ formatPattern?: string;
+ /**
+ * Defines a short hint, intended to aid the user with data entry when the ui5-timepicker has no value.
+ * ui5-timepicker appear empty - without placeholder or format pattern.
+ */
+ placeholder?: string;
+ /**
+ * Determines whether the ui5-timepicker is displayed as readonly.
+ */
+ readonly?: boolean;
+ /**
+ * Defines a formatted time value.
+ */
+ value?: string;
+ /**
+ * Defines the value state of the ui5-timepicker. NoneErrorWarningSuccessInformationui5-timepicker is changed at each key stroke.
+ */
+ onInput?: (event: CustomEvent<{}>) => void;
+}
+
+/**
+ * import { TimePicker } from '@ui5/webcomponents-react/lib/TimePicker';
+ * ui5-timeline.
+ */
children?: ReactNode | ReactNode[];
}
@@ -16,4 +19,6 @@ const Timeline: FCui5-timeline-item. SAP-icons font provides numerous options. itemName is clickable.
+ */
+ itemNameClickable?: boolean;
+ /**
+ * Defines the subtitle text of the component.
+ */
+ subtitleText?: string;
+ /**
+ * Defines the title text of the component.
+ */
+ titleText?: string;
+ /**
+ * Determines the description of the ui5-timeline-item.
+ */
+ children?: ReactNode | ReactNode[];
+ /**
+ * Fired when the item name is pressed either with a click/tap or by using the Enter or Space key. item-name-clickable attribute is not set.
+ */
+ onItemNameClick?: (event: CustomEvent<{}>) => void;
}
/**
* import { TimelineItem } from '@ui5/webcomponents-react/lib/TimelineItem';
+ * ui5-title level. Available options are: "H6" to "H1".
+ */
+ level?: TitleLevel;
+ /**
+ * Defines whether the ui5-title would wrap.
+ */
+ wrap?: boolean;
+ /**
+ * Defines the text of the ui5-title. ui5-toast remains on the screen before it's automatically closed. 500 ms and even if a lower value is set, the duration would remain 500 ms.
+ */
+ duration?: number;
+ /**
+ * Defines the placement of the ui5-toast web component. TopStartTopCenterTopEndMiddleStartMiddleCenterMiddleEndBottomStartBottomCenterBottomEndui5-toast web component. import { Toast } from '@ui5/webcomponents-react/lib/Toast';
+ * ui5-togglebutton is displayed as pressed.
+ */
+ pressed?: boolean;
+ /**
+ * Defines the ui5-button design. ui5-button is disabled (default is set to false). A disabled ui5-button can't be pressed or focused, and it is not in the tab chain.
+ */
+ disabled?: boolean;
+ /**
+ * Defines the icon to be displayed as graphical element within the ui5-button. The SAP-icons font provides numerous options. ui5-button icon="palette"+ +See all the available icons in the
ui5-button text.
+ */
+ iconEnd?: boolean;
+ /**
+ * When set to true, the ui5-button will automatically submit the nearest form element upon press. submits property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
+ */
+ submits?: boolean;
+ /**
+ * Defines the text of the ui5-button. ui5-button is activated either with a mouse/tap or by using the Enter or Space key. disabled property is set to true.
+ */
+ onClick?: (event: CustomEvent<{}>) => void;
}
/**
@@ -26,7 +51,12 @@ const ToggleButton: FC