Skip to content

refactor(website): rename createComponent to createReactComponent and add React 19 variant #13205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ilhan007 merged 44 commits into from
Mar 6, 2026
Merged

refactor(website): rename createComponent to createReactComponent and add React 19 variant #13205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
6598483
docs: add react editor
ilhan007 Mar 2, 2026
a43be18
chore: update deps
ilhan007 Mar 2, 2026
6022542
chore: update
ilhan007 Mar 2, 2026
8745b20
chore: lint
ilhan007 Mar 2, 2026
3db9756
Merge branch 'main' into docs-rect-editor
ilhan007 Mar 2, 2026
1f6255d
Merge branch 'main' into docs-rect-editor
ilhan007 Mar 2, 2026
5c11379
fix(website): fix all React sample files to compile and work correctly
ilhan007 Mar 4, 2026
1b6f24f
fix(website): remove createReactComponent from base barrel export
ilhan007 Mar 4, 2026
e1730d5
chore: fix lint indentation in base index.ts
ilhan007 Mar 4, 2026
d1fe226
fix(website): restore createReactComponent barrel export, fix react r…
ilhan007 Mar 4, 2026
e624068
fix(website): apply theme changes to React playground preview
ilhan007 Mar 4, 2026
639161e
fix(website): register theme asset loaders for React playground
ilhan007 Mar 4, 2026
a26432c
fix(website): add missing component imports to React playground
ilhan007 Mar 4, 2026
2b4400d
fix(website): convert remaining raw ui5 tags to React components
ilhan007 Mar 4, 2026
fadd27d
fix(website): add DynamicDateRange option imports for React playground
ilhan007 Mar 4, 2026
ed5a052
fix(website): define createReactComponent locally in ReactPlayground
ilhan007 Mar 4, 2026
3bbef25
fix(website): match React preview font rendering with HTML preview
ilhan007 Mar 4, 2026
4e8239b
chore(website): remove generate-react-samples script
ilhan007 Mar 4, 2026
a6d33aa
fix(ui5-webcomponents-base): remove createReactComponent from barrel …
ilhan007 Mar 4, 2026
ccacce2
fix(ui5-webcomponents-base): fix lint errors in base package
ilhan007 Mar 4, 2026
2bde49d
fix(ui5-webcomponents-base): restore createReactComponent in barrel e…
ilhan007 Mar 4, 2026
37361b2
fix(ui5-webcomponents-base): move createReactComponent to direct path…
ilhan007 Mar 4, 2026
1e9cc06
chore: remove .claude/settings.json from tracking
ilhan007 Mar 4, 2026
269e020
fix(website): fix missing events in Monaco types and replace startsSe…
ilhan007 Mar 4, 2026
91a9707
fix(website): suppress webpack error overlay and Algolia search in ed…
ilhan007 Mar 4, 2026
9aa8fab
docs(website): add React version label to editor tab bar
ilhan007 Mar 4, 2026
6536e5b
refactor(ui5-webcomponents-base): rename createReactComponent to crea…
ilhan007 Mar 4, 2026
695a175
feat(website): add copy button for React code samples
ilhan007 Mar 4, 2026
d27ef1e
Merge branch 'main' into docs-rect-editor
ilhan007 Mar 4, 2026
85e5e28
fix(website): type event currentTarget with component props in Monaco
ilhan007 Mar 4, 2026
8b3a334
chore(website): remove sap-icon:// prefix from React samples
ilhan007 Mar 4, 2026
0f07e83
feat(website): type event handlers with UI5CustomEvent and add sample…
ilhan007 Mar 5, 2026
3ccc76a
fix(website): add curly braces to satisfy lint rules in createComponent
ilhan007 Mar 5, 2026
01602eb
fix(website): add class prop support, fix font override, wire up unus…
ilhan007 Mar 5, 2026
ed55ce8
fix(website): fix boolean prop and typed event access in React samples
ilhan007 Mar 5, 2026
118fea5
Merge branch 'main' into docs-rect-editor
ilhan007 Mar 5, 2026
ee94caa
feat(website): add React samples for ShellBar Overflow and MultiCombo…
ilhan007 Mar 5, 2026
f405ca8
refactor(website): use declarative open/opener props and fix inherite…
ilhan007 Mar 5, 2026
b646acd
Merge branch 'main' into docs-rect-editor
ilhan007 Mar 5, 2026
04f4cda
refactor(website): rename createComponent to createReactComponent and…
ilhan007 Mar 6, 2026
d406e31
chore: update DP sample
ilhan007 Mar 6, 2026
35d6d4b
chore: update
ilhan007 Mar 6, 2026
98b66e1
fix(ui5-base): fix lint errors in createReactComponent.ts
ilhan007 Mar 6, 2026
67f3b06
Merge branch 'main' into docs-rect-editor
ilhan007 Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
55 changes: 55 additions & 0 deletions packages/base/src/createReactComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
/**
* React wrapper factory for UI5 Web Components.
*
* This lightweight factory creates typed React components that wrap UI5 Web Components.
* It handles:
* - Event prop conversion (onXxx → ui5-xxx event listeners)
* - Ref forwarding
* - Children handling
*
* Note: Supports React >=19.
*
* Note: This is for documentation samples only - for production React apps,
* use the official @ui5/webcomponents-react library.
*/

import { createElement } from "react";
import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";

/**
* Creates a React component wrapper for a UI5 Web Component.
*
* @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
* @returns A React component that renders the custom element with proper TypeScript types
* @since 2.21.0
* @example
* import Button from "@ui5/webcomponents/dist/Button.js";
* const ReactButton = createReactComponent(Button);
*/
export default function createReactComponent<T extends typeof UI5Element>(klass: T) {
const tag = klass.getMetadata().getTag();

return function Component(props: InstanceType<T>["_jsxProps"]) {
const patchedProps: Record<string, unknown> = {};

Object.entries(props as Record<string, unknown>).forEach(([key, value]) => {
if (key.startsWith("on") && typeof value === "function") {
// React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent,
Copy link
Copy Markdown
Contributor

@pskelin pskelin Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when playing around, I found that if you attach the event with lower case like onchange, react will attach it to the dom element directly and the detail will be directly on the event object. This is only necessary for events that match native events, instead of all events like here, because events that don't match native events are also directly attached to the dom and have the detail directly.

// hiding CustomEvent.detail under nativeEvent.detail.
// Patch all event handlers to restore detail from nativeEvent.
const originalHandler = value;
patchedProps[key] = (e: Event) => {
const nativeDetail = (e as unknown as { nativeEvent?: { detail: unknown } }).nativeEvent?.detail;
if (nativeDetail !== undefined) {
(e as unknown as { detail: unknown }).detail = nativeDetail;
}
originalHandler(e);
};
} else {
patchedProps[key] = value;
}
});

return createElement(tag, patchedProps);
};
}
11 changes: 6 additions & 5 deletions packages/base/src/createComponent.tsx → ...base/src/react18/createReactComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
* - Ref forwarding
* - Children handling
*
* Note: The function supports react >= 18.
* Note: This is for documentation samples only - for production React apps,
* use the official @ui5/webcomponents-react library.
*/
Expand All @@ -18,7 +19,7 @@ import {
useEffect,
forwardRef,
} from "react";
import type UI5Element from "./UI5Element.js";
import type UI5Element from "../UI5Element.js";

type EventHandler<E = Event> = (event: E) => void;

Expand Down Expand Up @@ -51,13 +52,13 @@ const createEventCleanup = (element: UI5Element, eventName: string, handler: Eve
*
* @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
* @returns A React component that renders the custom element with proper TypeScript types
*
* @since 2.21.0
* @example
* import Button from "@ui5/webcomponents/dist/Button.js";
* const ReactButton = createComponent(Button);
* const ReactButton = createReactComponent(Button);
* // ReactButton props are typed based on Button's _jsxProps
*/
export function createComponent<T extends UI5Element>(
function createReactComponent<T extends UI5Element>(
ComponentClass: UI5ComponentClass<T>,
): React.ForwardRefExoticComponent<
React.PropsWithoutRef<T["_jsxProps"] & { children?: ReactNode }> & React.RefAttributes<T>
Expand Down Expand Up @@ -136,4 +137,4 @@ export function createComponent<T extends UI5Element>(
return Component;
}

export default createComponent;
export default createReactComponent;
12 changes: 6 additions & 6 deletions packages/website/docs/_samples/ai/Button/ButtonMenu/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, useRef, useCallback, useEffect } from "react";
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
import AIButtonClass from "@ui5/webcomponents-ai/dist/Button.js";
import AIButtonStateClass from "@ui5/webcomponents-ai/dist/ButtonState.js";
Expand All @@ -10,11 +10,11 @@ import "@ui5/webcomponents-icons/dist/ai.js";
import "@ui5/webcomponents-icons/dist/stop.js";
import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";

const AIButton = createComponent(AIButtonClass);
const AIButtonState = createComponent(AIButtonStateClass);
const Menu = createComponent(MenuClass);
const MenuItem = createComponent(MenuItemClass);
const MenuSeparator = createComponent(MenuSeparatorClass);
const AIButton = createReactComponent(AIButtonClass);
const AIButtonState = createReactComponent(AIButtonStateClass);
const Menu = createReactComponent(MenuClass);
const MenuItem = createReactComponent(MenuItemClass);
const MenuSeparator = createReactComponent(MenuSeparatorClass);

function App() {
const [buttonState, setButtonState] = useState("generate");
Expand Down
10 changes: 5 additions & 5 deletions packages/website/docs/_samples/ai/Button/ButtonSplitMenu/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, useRef, useCallback, useEffect } from "react";
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import AIButtonClass from "@ui5/webcomponents-ai/dist/Button.js";
import AIButtonStateClass from "@ui5/webcomponents-ai/dist/ButtonState.js";
import MenuClass from "@ui5/webcomponents/dist/Menu.js";
Expand All @@ -8,10 +8,10 @@ import "@ui5/webcomponents-icons/dist/ai.js";
import "@ui5/webcomponents-icons/dist/stop.js";
import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";

const AIButton = createComponent(AIButtonClass);
const AIButtonState = createComponent(AIButtonStateClass);
const Menu = createComponent(MenuClass);
const MenuItem = createComponent(MenuItemClass);
const AIButton = createReactComponent(AIButtonClass);
const AIButtonState = createReactComponent(AIButtonStateClass);
const Menu = createReactComponent(MenuClass);
const MenuItem = createReactComponent(MenuItemClass);

function App() {
const [buttonState, setButtonState] = useState("generate");
Expand Down
12 changes: 6 additions & 6 deletions packages/website/docs/_samples/ai/Button/IconOnlyButton/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, useRef, useCallback, useEffect } from "react";
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
import AIButtonClass from "@ui5/webcomponents-ai/dist/Button.js";
import AIButtonStateClass from "@ui5/webcomponents-ai/dist/ButtonState.js";
Expand All @@ -10,11 +10,11 @@ import "@ui5/webcomponents-icons/dist/ai.js";
import "@ui5/webcomponents-icons/dist/stop.js";
import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";

const AIButton = createComponent(AIButtonClass);
const AIButtonState = createComponent(AIButtonStateClass);
const Menu = createComponent(MenuClass);
const MenuItem = createComponent(MenuItemClass);
const MenuSeparator = createComponent(MenuSeparatorClass);
const AIButton = createReactComponent(AIButtonClass);
const AIButtonState = createReactComponent(AIButtonStateClass);
const Menu = createReactComponent(MenuClass);
const MenuItem = createReactComponent(MenuItemClass);
const MenuSeparator = createReactComponent(MenuSeparatorClass);

function App() {
const [buttonState, setButtonState] = useState("generate");
Expand Down
8 changes: 4 additions & 4 deletions packages/website/docs/_samples/ai/Input/Basic/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { useState, useRef, useCallback, useEffect } from "react";
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
import AIInputClass from "@ui5/webcomponents-ai/dist/Input.js";
import MenuItemClass from "@ui5/webcomponents/dist/MenuItem.js";
import MenuSeparatorClass from "@ui5/webcomponents/dist/MenuSeparator.js";
import "@ui5/webcomponents-icons/dist/ai.js";
import "@ui5/webcomponents-icons/dist/stop.js";

const AIInput = createComponent(AIInputClass);
const MenuItem = createComponent(MenuItemClass);
const MenuSeparator = createComponent(MenuSeparatorClass);
const AIInput = createReactComponent(AIInputClass);
const MenuItem = createReactComponent(MenuItemClass);
const MenuSeparator = createReactComponent(MenuSeparatorClass);

const SAMPLE_TEXTS: Record<string, string> = {
en: "Innovation managers lead with creativity.",
Expand Down
9 changes: 5 additions & 4 deletions packages/website/docs/_samples/ai/PromptInput/Basic/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { useState, useRef, useCallback } from "react";
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
import AIPromptInputClass from "@ui5/webcomponents-ai/dist/PromptInput.js";
import SuggestionItemClass from "@ui5/webcomponents/dist/SuggestionItem.js";
import "@ui5/webcomponents/dist/features/InputSuggestions.js";

const AIPromptInput = createComponent(AIPromptInputClass);
const SuggestionItem = createComponent(SuggestionItemClass);
const AIPromptInput = createReactComponent(AIPromptInputClass);
const SuggestionItem = createReactComponent(SuggestionItemClass);

const countries = [
"Brazil",
Expand All @@ -22,7 +23,7 @@ const countries = [
];

function App() {
const [valueState, setValueState] = useState("None");
const [valueState, setValueState] = useState<`${ValueState}`>("None");
const [suggestions, setSuggestions] = useState<string[]>([]);

const handleInput = useCallback(
Expand Down
8 changes: 4 additions & 4 deletions packages/website/docs/_samples/ai/TextArea/Basic/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { useState, useRef, useCallback, useEffect } from "react";
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
import AITextAreaClass from "@ui5/webcomponents-ai/dist/TextArea.js";
import MenuClass from "@ui5/webcomponents/dist/Menu.js";
import MenuItemClass from "@ui5/webcomponents/dist/MenuItem.js";

const AITextArea = createComponent(AITextAreaClass);
const Menu = createComponent(MenuClass);
const MenuItem = createComponent(MenuItemClass);
const AITextArea = createReactComponent(AITextAreaClass);
const Menu = createReactComponent(MenuClass);
const MenuItem = createReactComponent(MenuItemClass);

const SAMPLE_TEXT =
"Innovation managers operate with both creativity and business acumen, driving initiatives that cultivate an innovation-friendly culture, streamline the execution of new ideas, and ultimately unlock value for the organization and its customers.";
Expand Down
10 changes: 5 additions & 5 deletions packages/website/docs/_samples/ai/TextArea/Extended/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { useState, useRef, useCallback, useEffect } from "react";
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
import AITextAreaClass from "@ui5/webcomponents-ai/dist/TextArea.js";
import MenuClass from "@ui5/webcomponents/dist/Menu.js";
import MenuItemClass from "@ui5/webcomponents/dist/MenuItem.js";
import MenuSeparatorClass from "@ui5/webcomponents/dist/MenuSeparator.js";

const AITextArea = createComponent(AITextAreaClass);
const Menu = createComponent(MenuClass);
const MenuItem = createComponent(MenuItemClass);
const MenuSeparator = createComponent(MenuSeparatorClass);
const AITextArea = createReactComponent(AITextAreaClass);
const Menu = createReactComponent(MenuClass);
const MenuItem = createReactComponent(MenuItemClass);
const MenuSeparator = createReactComponent(MenuSeparatorClass);

const SAMPLE_TEXTS: Record<string, string> = {
en: "Innovation managers operate with both creativity and business acumen, driving initiatives that cultivate an innovation-friendly culture, streamline the execution of new ideas, and ultimately unlock value for the organization and its customers.",
Expand Down
12 changes: 6 additions & 6 deletions packages/website/docs/_samples/compat/Table/ActiveRows/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import CompatTableClass from "@ui5/webcomponents-compat/dist/Table.js";
import CompatTableRowClass from "@ui5/webcomponents-compat/dist/TableRow.js";
import TableColumnClass from "@ui5/webcomponents-compat/dist/TableColumn.js";
import CompatTableCellClass from "@ui5/webcomponents-compat/dist/TableCell.js";
import TextClass from "@ui5/webcomponents/dist/Text.js";

const CompatTable = createComponent(CompatTableClass);
const CompatTableRow = createComponent(CompatTableRowClass);
const CompatTableColumn = createComponent(TableColumnClass);
const CompatTableCell = createComponent(CompatTableCellClass);
const Text = createComponent(TextClass);
const CompatTable = createReactComponent(CompatTableClass);
const CompatTableRow = createReactComponent(CompatTableRowClass);
const CompatTableColumn = createReactComponent(TableColumnClass);
const CompatTableCell = createReactComponent(CompatTableCellClass);
const Text = createReactComponent(TextClass);

function App() {
return (
Expand Down
12 changes: 6 additions & 6 deletions packages/website/docs/_samples/compat/Table/Basic/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import CompatTableClass from "@ui5/webcomponents-compat/dist/Table.js";
import CompatTableRowClass from "@ui5/webcomponents-compat/dist/TableRow.js";
import TableColumnClass from "@ui5/webcomponents-compat/dist/TableColumn.js";
import CompatTableCellClass from "@ui5/webcomponents-compat/dist/TableCell.js";
import TextClass from "@ui5/webcomponents/dist/Text.js";

const CompatTable = createComponent(CompatTableClass);
const CompatTableRow = createComponent(CompatTableRowClass);
const TableColumn = createComponent(TableColumnClass);
const CompatTableCell = createComponent(CompatTableCellClass);
const Text = createComponent(TextClass);
const CompatTable = createReactComponent(CompatTableClass);
const CompatTableRow = createReactComponent(CompatTableRowClass);
const TableColumn = createReactComponent(TableColumnClass);
const CompatTableCell = createReactComponent(CompatTableCellClass);
const Text = createReactComponent(TextClass);

function App() {
return (
Expand Down
16 changes: 8 additions & 8 deletions packages/website/docs/_samples/compat/Table/Grouping/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import CompatTableClass from "@ui5/webcomponents-compat/dist/Table.js";
import CompatTableRowClass from "@ui5/webcomponents-compat/dist/TableRow.js";
import TableColumnClass from "@ui5/webcomponents-compat/dist/TableColumn.js";
Expand All @@ -7,13 +7,13 @@ import TableGroupRowClass from "@ui5/webcomponents-compat/dist/TableGroupRow.js"
import TextClass from "@ui5/webcomponents/dist/Text.js";
import LabelClass from "@ui5/webcomponents/dist/Label.js";

const CompatTable = createComponent(CompatTableClass);
const CompatTableRow = createComponent(CompatTableRowClass);
const CompatTableColumn = createComponent(TableColumnClass);
const CompatTableCell = createComponent(CompatTableCellClass);
const TableGroupRow = createComponent(TableGroupRowClass);
const Text = createComponent(TextClass);
const Label = createComponent(LabelClass);
const CompatTable = createReactComponent(CompatTableClass);
const CompatTableRow = createReactComponent(CompatTableRowClass);
const CompatTableColumn = createReactComponent(TableColumnClass);
const CompatTableCell = createReactComponent(CompatTableCellClass);
const TableGroupRow = createReactComponent(TableGroupRowClass);
const Text = createReactComponent(TextClass);
const Label = createReactComponent(LabelClass);

function App() {
return (
Expand Down
12 changes: 6 additions & 6 deletions packages/website/docs/_samples/compat/Table/GrowingOnButtonPress/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { useState, useCallback } from "react";
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import CompatTableClass from "@ui5/webcomponents-compat/dist/Table.js";
import CompatTableRowClass from "@ui5/webcomponents-compat/dist/TableRow.js";
import TableColumnClass from "@ui5/webcomponents-compat/dist/TableColumn.js";
import CompatTableCellClass from "@ui5/webcomponents-compat/dist/TableCell.js";
import TextClass from "@ui5/webcomponents/dist/Text.js";

const CompatTable = createComponent(CompatTableClass);
const CompatTableRow = createComponent(CompatTableRowClass);
const CompatTableColumn = createComponent(TableColumnClass);
const CompatTableCell = createComponent(CompatTableCellClass);
const Text = createComponent(TextClass);
const CompatTable = createReactComponent(CompatTableClass);
const CompatTableRow = createReactComponent(CompatTableRowClass);
const CompatTableColumn = createReactComponent(TableColumnClass);
const CompatTableCell = createReactComponent(CompatTableCellClass);
const Text = createReactComponent(TextClass);

const products = [
{
Expand Down
12 changes: 6 additions & 6 deletions packages/website/docs/_samples/compat/Table/GrowingOnScroll/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { useState, useCallback } from "react";
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import CompatTableClass from "@ui5/webcomponents-compat/dist/Table.js";
import CompatTableRowClass from "@ui5/webcomponents-compat/dist/TableRow.js";
import TableColumnClass from "@ui5/webcomponents-compat/dist/TableColumn.js";
import CompatTableCellClass from "@ui5/webcomponents-compat/dist/TableCell.js";
import TextClass from "@ui5/webcomponents/dist/Text.js";

const CompatTable = createComponent(CompatTableClass);
const CompatTableRow = createComponent(CompatTableRowClass);
const CompatTableColumn = createComponent(TableColumnClass);
const CompatTableCell = createComponent(CompatTableCellClass);
const Text = createComponent(TextClass);
const CompatTable = createReactComponent(CompatTableClass);
const CompatTableRow = createReactComponent(CompatTableRowClass);
const CompatTableColumn = createReactComponent(TableColumnClass);
const CompatTableCell = createReactComponent(CompatTableCellClass);
const Text = createReactComponent(TextClass);

const products = [
{
Expand Down
12 changes: 6 additions & 6 deletions packages/website/docs/_samples/compat/Table/MultipleSelection/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { createComponent } from "@ui5/webcomponents-base/dist/createComponent.js";
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import CompatTableClass from "@ui5/webcomponents-compat/dist/Table.js";
import CompatTableRowClass from "@ui5/webcomponents-compat/dist/TableRow.js";
import TableColumnClass from "@ui5/webcomponents-compat/dist/TableColumn.js";
import CompatTableCellClass from "@ui5/webcomponents-compat/dist/TableCell.js";
import TextClass from "@ui5/webcomponents/dist/Text.js";

const CompatTable = createComponent(CompatTableClass);
const CompatTableRow = createComponent(CompatTableRowClass);
const CompatTableColumn = createComponent(TableColumnClass);
const CompatTableCell = createComponent(CompatTableCellClass);
const Text = createComponent(TextClass);
const CompatTable = createReactComponent(CompatTableClass);
const CompatTableRow = createReactComponent(CompatTableRowClass);
const CompatTableColumn = createReactComponent(TableColumnClass);
const CompatTableCell = createReactComponent(CompatTableCellClass);
const Text = createReactComponent(TextClass);

function App() {
return (
Expand Down
Loading
Loading