From 1b179a4e31f5f6217d321b47d35a502cb2bb3529 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 11 Feb 2025 11:42:36 +0100 Subject: [PATCH 01/16] move `withWebComponent`, types & utils to base pkg --- packages/base/src/Device/index.ts | 1 - packages/base/src/hooks/useStylesheet.ts | 2 +- packages/base/src/index.ts | 6 +- packages/base/src/stores/StyleStore.ts | 4 +- packages/base/src/types/CommonProps.ts | 14 + packages/base/src/types/Ui5CustomEvent.ts | 5 + packages/base/src/types/Ui5DomRef.ts | 151 +++++++++++ packages/base/src/types/index.ts | 18 ++ packages/base/src/utils/index.ts | 26 +- .../src/wrapper}/withWebComponent.cy.tsx | 4 +- .../base/src/wrapper/withWebComponent.tsx | 241 +++++++++++++++++ packages/base/tsconfig.json | 3 +- .../src/components/FlexBox/FlexBox.cy.tsx | 2 +- packages/main/src/internal/utils.ts | 20 -- .../main/src/internal/withWebComponent.tsx | 242 +----------------- packages/main/src/types/CommonProps.ts | 15 +- packages/main/src/types/Ui5CustomEvent.ts | 6 +- packages/main/src/types/Ui5DomRef.ts | 152 +---------- packages/main/src/types/index.ts | 27 +- 19 files changed, 479 insertions(+), 460 deletions(-) create mode 100644 packages/base/src/types/CommonProps.ts create mode 100644 packages/base/src/types/Ui5CustomEvent.ts create mode 100644 packages/base/src/types/Ui5DomRef.ts create mode 100644 packages/base/src/types/index.ts rename packages/{main/src/internal => base/src/wrapper}/withWebComponent.cy.tsx (98%) create mode 100644 packages/base/src/wrapper/withWebComponent.tsx diff --git a/packages/base/src/Device/index.ts b/packages/base/src/Device/index.ts index 7740787b415..e926d6f7488 100644 --- a/packages/base/src/Device/index.ts +++ b/packages/base/src/Device/index.ts @@ -96,7 +96,6 @@ const handleMobileTimeout = () => { const handleMobileOrientationResizeChange = (evt) => { if (evt.type === 'resize') { - // @ts-expect-error: undefined is fine here if (rInputTagRegex.test(document.activeElement?.tagName) && !bOrientationChange) { return; } diff --git a/packages/base/src/hooks/useStylesheet.ts b/packages/base/src/hooks/useStylesheet.ts index e72858a570b..1e7fa64a618 100644 --- a/packages/base/src/hooks/useStylesheet.ts +++ b/packages/base/src/hooks/useStylesheet.ts @@ -28,7 +28,7 @@ export function useStylesheet(styles: string, componentName: string, options?: U return () => { if (shouldInject) { StyleStore.unmountComponent(componentName); - const numberOfMountedComponents = componentsMap.get(componentName)!; + const numberOfMountedComponents = componentsMap.get(componentName); if (numberOfMountedComponents <= 0) { removeStyle('data-ui5wcr-component', scopedComponentName); } diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts index cb28cb169aa..6075141b651 100644 --- a/packages/base/src/index.ts +++ b/packages/base/src/index.ts @@ -4,10 +4,14 @@ import * as hooks from './hooks/index.js'; import { I18nStore } from './stores/I18nStore.js'; import { StyleStore } from './stores/StyleStore.js'; import { ThemingParameters } from './styling/ThemingParameters.js'; +import { withWebComponent } from './wrapper/withWebComponent.js'; +import type { WithWebComponentPropTypes } from './wrapper/withWebComponent.js'; export * from './styling/CssSizeVariables.js'; export * from './utils/index.js'; export * from './hooks/index.js'; +export type * from './types/index.js'; -export { I18nStore, StyleStore, ThemingParameters, Device, hooks }; +export { I18nStore, StyleStore, ThemingParameters, Device, hooks, withWebComponent }; +export type { WithWebComponentPropTypes }; export const version = VersionInfo.version; diff --git a/packages/base/src/stores/StyleStore.ts b/packages/base/src/stores/StyleStore.ts index 5490c8a4e38..8dc16ed3a8a 100644 --- a/packages/base/src/stores/StyleStore.ts +++ b/packages/base/src/stores/StyleStore.ts @@ -67,7 +67,7 @@ export const StyleStore = { mountComponent: (componentName: string) => { const { componentsMap } = getSnapshot(); if (componentsMap.has(componentName)) { - componentsMap.set(componentName, componentsMap.get(componentName)! + 1); + componentsMap.set(componentName, componentsMap.get(componentName) + 1); } else { componentsMap.set(componentName, 1); } @@ -76,7 +76,7 @@ export const StyleStore = { unmountComponent: (componentName: string) => { const { componentsMap } = getSnapshot(); if (componentsMap.has(componentName)) { - componentsMap.set(componentName, componentsMap.get(componentName)! - 1); + componentsMap.set(componentName, componentsMap.get(componentName) - 1); } emitChange(); } diff --git a/packages/base/src/types/CommonProps.ts b/packages/base/src/types/CommonProps.ts new file mode 100644 index 00000000000..605bf1b6963 --- /dev/null +++ b/packages/base/src/types/CommonProps.ts @@ -0,0 +1,14 @@ +import type { CSSProperties, HTMLAttributes } from 'react'; + +export interface CommonProps extends Omit, 'dangerouslySetInnerHTML'> { + /** + * Element style which will be appended to the most outer element of a component. + * Use this prop carefully, some css properties might break the component. + */ + style?: CSSProperties; + /** + * CSS Class Name which will be appended to the most outer element of a component. + * Use this prop carefully, overwriting CSS rules might break the component. + */ + className?: string; +} diff --git a/packages/base/src/types/Ui5CustomEvent.ts b/packages/base/src/types/Ui5CustomEvent.ts new file mode 100644 index 00000000000..c4864eedc67 --- /dev/null +++ b/packages/base/src/types/Ui5CustomEvent.ts @@ -0,0 +1,5 @@ +export interface Ui5CustomEvent + extends Omit, 'target' | 'currentTarget'> { + target: EventTarget; + currentTarget: EventTarget | null; +} diff --git a/packages/base/src/types/Ui5DomRef.ts b/packages/base/src/types/Ui5DomRef.ts new file mode 100644 index 00000000000..c7a8bea0d1d --- /dev/null +++ b/packages/base/src/types/Ui5DomRef.ts @@ -0,0 +1,151 @@ +import type { PropertyValue, SlotValue } from '@ui5/webcomponents-base/dist/UI5ElementMetadata.js'; + +type ChangeInfo = { + type: 'property' | 'slot'; + name: string; + reason?: string; + child?: SlotValue; + target?: Ui5DomRef; + newValue?: PropertyValue; + oldValue?: PropertyValue; +}; + +type InvalidationInfo = ChangeInfo & { target: Ui5DomRef }; + +export interface Ui5DomRef extends Omit { + /** + * Called every time before the component renders. + * @public + */ + onBeforeRendering(): void; + /** + * Called every time after the component renders. + * @public + */ + onAfterRendering(): void; + /** + * Called on connectedCallback - added to the DOM. + * @public + */ + onEnterDOM(): void; + /** + * Called on disconnectedCallback - removed from the DOM. + * @public + */ + onExitDOM(): void; + /** + * Attach a callback that will be executed whenever the component is invalidated + * + * @param callback + * @public + */ + attachInvalidate(callback: (param: InvalidationInfo) => void): void; + /** + * Detach the callback that is executed whenever the component is invalidated + * + * @param callback + * @public + */ + detachInvalidate(callback: (param: InvalidationInfo) => void): void; + /** + * A callback that is executed each time an already rendered component is invalidated (scheduled for re-rendering) + * + * @param changeInfo An object with information about the change that caused invalidation. + * The object can have the following properties: + * - type: (property|slot) tells what caused the invalidation + * 1) property: a property value was changed either directly or as a result of changing the corresponding attribute + * 2) slot: a slotted node(nodes) changed in one of several ways (see "reason") + * + * - name: the name of the property or slot that caused the invalidation + * + * - reason: (children|textcontent|childchange|slotchange) relevant only for type="slot" only and tells exactly what changed in the slot + * 1) children: immediate children (HTML elements or text nodes) were added, removed or reordered in the slot + * 2) textcontent: text nodes in the slot changed value (or nested text nodes were added or changed value). Can only trigger for slots of "type: Node" + * 3) slotchange: a slot element, slotted inside that slot had its "slotchange" event listener called. This practically means that transitively slotted children changed. + * Can only trigger if the child of a slot is a slot element itself. + * 4) childchange: indicates that a UI5Element child in that slot was invalidated and in turn invalidated the component. + * Can only trigger for slots with "invalidateOnChildChange" metadata descriptor + * + * - newValue: the new value of the property (for type="property" only) + * + * - oldValue: the old value of the property (for type="property" only) + * + * - child the child that was changed (for type="slot" and reason="childchange" only) + * + * @public + */ + onInvalidation(changeInfo: ChangeInfo): void; + /** + * Returns the DOM Element inside the Shadow Root that corresponds to the opening tag in the UI5 Web Component's template + * *Note:* For logical (abstract) elements (items, options, etc...), returns the part of the parent's DOM that represents this option + * Use this method instead of "this.shadowRoot" to read the Shadow DOM, if ever necessary + * + * @public + */ + getDomRef(): HTMLElement | undefined; + + /** + * Returns the DOM Element marked with "data-sap-focus-ref" inside the template. + * This is the element that will receive the focus by default. + * @public + */ + getFocusDomRef(): HTMLElement | undefined; + + /** + * Waits for dom ref and then returns the DOM Element marked with "data-sap-focus-ref" inside the template. + * This is the element that will receive the focus by default. + * @public + */ + getFocusDomRefAsync(): Promise; + /** + * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref") + * @param focusOptions additional options for the focus + * @public + */ + focus(focusOptions?: FocusOptions): Promise; + /** + * + * @public + * @param name - name of the event + * @param data - additional data for the event + * @param cancelable - true, if the user can call preventDefault on the event object + * @param bubbles - true, if the event bubbles + * @returns false, if the event was cancelled (preventDefault called), true otherwise + */ + fireEvent(name: string, data?: T, cancelable?: boolean, bubbles?: boolean): boolean; + /** + * Returns the actual children, associated with a slot. + * Useful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content. + * @public + */ + getSlottedNodes(slotName: string): Array; + /** + * Attach a callback that will be executed whenever the component's state is finalized + * + * @param callback + * @public + */ + attachComponentStateFinalized(callback: () => void): void; + /** + * Detach the callback that is executed whenever the component's state is finalized + * + * @param callback + * @public + */ + detachComponentStateFinalized(callback: () => void): void; + /** + * Determines whether the component should be rendered in RTL mode or not. + * Returns: "rtl", "ltr" or undefined + * + * @public + * @default undefined + */ + readonly effectiveDir: string | undefined; + + /** + * Used to duck-type UI5 elements without using instanceof + * @public + * @default true + */ + readonly isUI5Element: boolean; +} diff --git a/packages/base/src/types/index.ts b/packages/base/src/types/index.ts new file mode 100644 index 00000000000..15dc66f900b --- /dev/null +++ b/packages/base/src/types/index.ts @@ -0,0 +1,18 @@ +import type { ReactElement, ReactNode, ReactPortal } from 'react'; + +export type ReducedReactNode = Exclude>; +export type ReducedReactNodeWithBoolean = Exclude>; + +type InternalUI5WCSlotsNode = + | ReducedReactNode + | Iterable + | false + | ReactElement /* necessary for React v16 & v17 ReactNode type*/; + +export type UI5WCSlotsNode = InternalUI5WCSlotsNode | InternalUI5WCSlotsNode[]; + +export type Nullable = T | null; + +export type { CommonProps } from './CommonProps.js'; +export type { Ui5CustomEvent } from './Ui5CustomEvent.js'; +export type { Ui5DomRef } from './Ui5DomRef.js'; diff --git a/packages/base/src/utils/index.ts b/packages/base/src/utils/index.ts index e4200e330c5..97f9bd48afc 100644 --- a/packages/base/src/utils/index.ts +++ b/packages/base/src/utils/index.ts @@ -23,7 +23,7 @@ export const enrichEventWithDetails = < payload: Detail ): EnrichedEventType => { if (!event) { - return event; + return event as EnrichedEventType; } // Determine if we need to create a new details object @@ -41,9 +41,9 @@ export const enrichEventWithDetails = < }); if (nativeDetail) { - Object.assign(event.detail!, { nativeDetail }); + Object.assign(event.detail, { nativeDetail }); } - Object.assign(event.detail!, payload); + Object.assign(event.detail, payload); return event as EnrichedEventType; }; @@ -55,3 +55,23 @@ export function getUi5TagWithSuffix(baseTagName: string) { export { debounce } from './debounce.js'; export { throttle } from './throttle.js'; + +export const capitalizeFirstLetter = (s: string) => s.charAt(0).toUpperCase() + s.slice(1); +export const lowercaseFirstLetter = (s: string) => s.charAt(0).toLowerCase() + s.slice(1); +export const camelToKebabCase = (s: string) => s.replace(/([A-Z])/g, (a, b: string) => `-${b.toLowerCase()}`); +export const kebabToCamelCase = (str: string) => str.replace(/([-_]\w)/g, (g) => g[1].toUpperCase()); + +const SEMVER_REGEX = + /^(?0|[1-9]\d*)\.(?0|[1-9]\d*)\.(?0|[1-9]\d*)(?:-(?(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/; + +export function parseSemVer(version: string) { + const parsed = SEMVER_REGEX.exec(version).groups; + return { + version, + major: parseInt(parsed.major), + minor: parseInt(parsed.minor), + patch: parseInt(parsed.patch), + prerelease: parsed.prerelease, + buildMetadata: parsed.buildmetadata + }; +} diff --git a/packages/main/src/internal/withWebComponent.cy.tsx b/packages/base/src/wrapper/withWebComponent.cy.tsx similarity index 98% rename from packages/main/src/internal/withWebComponent.cy.tsx rename to packages/base/src/wrapper/withWebComponent.cy.tsx index 62e2e614666..34be684cfc4 100644 --- a/packages/main/src/internal/withWebComponent.cy.tsx +++ b/packages/base/src/wrapper/withWebComponent.cy.tsx @@ -2,9 +2,9 @@ import { setCustomElementsScopingRules, setCustomElementsScopingSuffix } from '@ui5/webcomponents-base/dist/CustomElementsScope.js'; +import type { ButtonDomRef } from '@ui5/webcomponents-react'; +import { Bar, Button, Popover, Switch } from '@ui5/webcomponents-react'; import { useReducer, useRef, useState } from 'react'; -import type { ButtonDomRef } from '../webComponents/index.js'; -import { Bar, Button, Popover, Switch } from '../webComponents/index.js'; describe('withWebComponent', () => { // reset scoping diff --git a/packages/base/src/wrapper/withWebComponent.tsx b/packages/base/src/wrapper/withWebComponent.tsx new file mode 100644 index 00000000000..afdcb25d9b2 --- /dev/null +++ b/packages/base/src/wrapper/withWebComponent.tsx @@ -0,0 +1,241 @@ +'use client'; + +import { getEffectiveScopingSuffixForTag } from '@ui5/webcomponents-base/dist/CustomElementsScope.js'; +import type { ComponentType, ReactElement, ReactNode, Ref } from 'react'; +import { cloneElement, forwardRef, Fragment, isValidElement, useEffect, useState, version } from 'react'; +import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js'; +import { useSyncRef } from '../hooks/useSyncRef.js'; +import type { CommonProps, Ui5DomRef } from '../types/index.js'; +import { camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase, parseSemVer } from '../utils/index.js'; + +const createEventPropName = (eventName: string) => `on${capitalizeFirstLetter(kebabToCamelCase(eventName))}`; + +const isPrimitiveAttribute = (value: unknown): boolean => { + return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean'; +}; + +type EventHandler = (event: CustomEvent) => void; + +export interface WithWebComponentPropTypes { + /** + * Defines whether the component should wait for the underlying custom element of the web component to be defined. This can be useful, for example, for using instance methods when mounting the component. + * + * __Note:__ This adds a rendering cycle to your component. + */ + waitForDefine?: boolean; +} + +const definedWebComponents = new Set([]); + +export const withWebComponent = , RefType = Ui5DomRef>( + tagName: string, + regularProperties: string[], + booleanProperties: string[], + slotProperties: string[], + eventProperties: string[] +) => { + const webComponentsSupported = parseSemVer(version).major >= 19; + // displayName will be assigned in the individual files + // eslint-disable-next-line react/display-name + return forwardRef((props, wcRef) => { + const { className, children, waitForDefine, ...rest } = props; + const [componentRef, ref] = useSyncRef(wcRef); + const tagNameSuffix: string = getEffectiveScopingSuffixForTag(tagName); + const Component = (tagNameSuffix ? `${tagName}-${tagNameSuffix}` : tagName) as unknown as ComponentType< + CommonProps & { class?: string; ref?: Ref } + >; + const [isDefined, setIsDefined] = useState(definedWebComponents.has(Component)); + // regular props (no booleans, no slots and no events) + const regularProps = regularProperties.reduce((acc, name) => { + if (Object.prototype.hasOwnProperty.call(rest, name) && isPrimitiveAttribute(rest[name])) { + return { ...acc, [camelToKebabCase(name)]: rest[name] }; + } + return acc; + }, {}); + + // boolean properties - only attach if they are truthy + const booleanProps = booleanProperties.reduce((acc, name) => { + if (webComponentsSupported) { + return { ...acc, [camelToKebabCase(name)]: rest[name] }; + } else { + if (rest[name] === true || rest[name] === 'true') { + return { ...acc, [camelToKebabCase(name)]: true }; + } + return acc; + } + }, {}); + + const slots = slotProperties.reduce((acc, name) => { + const slotValue = rest[name] as ReactElement; + + if (!slotValue) { + return acc; + } + + if (rest[name]?.$$typeof === Symbol.for('react.portal')) { + console.warn('ReactPortal is not supported for slot props.'); + return acc; + } + + const slottedChildren = []; + let index = 0; + const removeFragments = (element: ReactNode) => { + if (!isValidElement(element)) return; + if (element.type === Fragment) { + const elementChildren = (element as ReactElement<{ children?: ReactNode | ReactNode[] }>).props?.children; + if (Array.isArray(elementChildren)) { + elementChildren.forEach((item) => { + if (Array.isArray(item)) { + item.forEach(removeFragments); + } else { + removeFragments(item); + } + }); + } else { + removeFragments(elementChildren); + } + } else { + slottedChildren.push( + cloneElement>(element, { + key: element.key ?? `${name}-${index}`, + slot: name + }) + ); + index++; + } + }; + + if (Array.isArray(slotValue)) { + slotValue.forEach((item) => { + removeFragments(item); + }); + } else { + removeFragments(slotValue); + } + return [...acc, ...slottedChildren]; + }, []); + + // event binding + useIsomorphicLayoutEffect(() => { + if (webComponentsSupported) { + return () => { + // React can handle events + }; + } + const localRef = ref.current; + const eventRegistry: Record = {}; + if (!waitForDefine || isDefined) { + eventProperties.forEach((eventName) => { + const eventHandler = rest[createEventPropName(eventName)] as EventHandler; + if (typeof eventHandler === 'function') { + eventRegistry[eventName] = eventHandler; + // @ts-expect-error: all custom events can be passed here, so `keyof HTMLElementEventMap` isn't sufficient + localRef?.addEventListener(eventName, eventRegistry[eventName]); + } + }); + + return () => { + for (const eventName in eventRegistry) { + // @ts-expect-error: all custom events can be passed here, so `keyof HTMLElementEventMap` isn't sufficient + localRef?.removeEventListener(eventName, eventRegistry[eventName]); + } + }; + } + }, [...eventProperties.map((eventName) => rest[createEventPropName(eventName)]), isDefined, waitForDefine]); + + const eventHandlers = eventProperties.reduce((events, eventName) => { + const eventHandlerProp = rest[createEventPropName(eventName)]; + if (webComponentsSupported && eventHandlerProp) { + events[`on${eventName}`] = eventHandlerProp; + } + return events; + }, {}); + + // In React 19 events aren't correctly attached after hydration + const [attachEvents, setAttachEvents] = useState(!webComponentsSupported || !Object.keys(eventHandlers).length); // apply workaround only for React19 and if event props are defined + + // non web component related props, just pass them + const nonWebComponentRelatedProps = Object.entries(rest) + .filter(([key]) => !regularProperties.includes(key)) + .filter(([key]) => !slotProperties.includes(key)) + .filter(([key]) => !booleanProperties.includes(key)) + .filter(([key]) => !eventProperties.map((eventName) => createEventPropName(eventName)).includes(key)) + .reduce((acc, [key, val]) => { + if (!key.startsWith('aria-') && !key.startsWith('data-') && val === false) { + return acc; + } + acc[key] = val; + return acc; + }, {}); + + useEffect(() => { + if (waitForDefine && !isDefined) { + void customElements.whenDefined(Component as unknown as string).then(() => { + setIsDefined(true); + definedWebComponents.add(Component); + }); + } + }, [Component, waitForDefine, isDefined]); + + const propsToApply = regularProperties.map((prop) => ({ name: prop, value: props[prop] })); + useEffect(() => { + void customElements.whenDefined(Component as unknown as string).then(() => { + for (const prop of propsToApply) { + if (prop.value != null && !isPrimitiveAttribute(prop.value)) { + if (ref.current) { + ref.current[prop.name] = prop.value; + } + } + } + }); + }, [Component, ...propsToApply]); + + useEffect(() => { + setAttachEvents(true); + }, []); + + if (waitForDefine && !isDefined) { + return null; + } + + // compatibility wrapper for ExpandableText - remove in v3 + if (tagName === 'ui5-expandable-text') { + const renderWhiteSpace = nonWebComponentRelatedProps['renderWhitespace'] ? true : undefined; + // @ts-expect-error: overflowMode is available + const { ['overflow-mode']: overflowMode, text, ...restRegularProps } = regularProps; + const showOverflowInPopover = nonWebComponentRelatedProps['showOverflowInPopover']; + return ( + + {slots} + + ); + } + + return ( + + {slots} + {children} + + ); + }); +}; diff --git a/packages/base/tsconfig.json b/packages/base/tsconfig.json index 77ecddb1c36..7df636b471f 100644 --- a/packages/base/tsconfig.json +++ b/packages/base/tsconfig.json @@ -2,7 +2,8 @@ "extends": "../../tsconfig.base.json", "compilerOptions": { "strict": true, - "noImplicitAny": false + "noImplicitAny": false, + "strictNullChecks": false }, "include": ["src"] } diff --git a/packages/main/src/components/FlexBox/FlexBox.cy.tsx b/packages/main/src/components/FlexBox/FlexBox.cy.tsx index 26624191778..e0cdd95df66 100644 --- a/packages/main/src/components/FlexBox/FlexBox.cy.tsx +++ b/packages/main/src/components/FlexBox/FlexBox.cy.tsx @@ -1,5 +1,5 @@ +import { camelToKebabCase, lowercaseFirstLetter } from '@ui5/webcomponents-react-base'; import { FlexBoxJustifyContent, FlexBoxAlignItems, FlexBoxDirection, FlexBoxWrap } from '../../enums/index.js'; -import { camelToKebabCase, lowercaseFirstLetter } from '../../internal/utils.js'; import { FlexBox } from './index.js'; import type { FlexBoxPropTypes } from './index.js'; import { cypressPassThroughTestsFactory, mountWithCustomTagName } from '@/cypress/support/utils'; diff --git a/packages/main/src/internal/utils.ts b/packages/main/src/internal/utils.ts index b3cb42b9ccf..6f743c6a1f4 100644 --- a/packages/main/src/internal/utils.ts +++ b/packages/main/src/internal/utils.ts @@ -33,11 +33,6 @@ export function flattenFragments(children: T | T[], depth = 1): T return flatChildren; } -export const capitalizeFirstLetter = (s: string) => s.charAt(0).toUpperCase() + s.slice(1); -export const lowercaseFirstLetter = (s: string) => s.charAt(0).toLowerCase() + s.slice(1); -export const camelToKebabCase = (s: string) => s.replace(/([A-Z])/g, (a, b: string) => `-${b.toLowerCase()}`); -export const kebabToCamelCase = (str: string) => str.replace(/([-_]\w)/g, (g) => g[1].toUpperCase()); - export function getUi5TagWithSuffix(baseTagName) { const tagNameSuffix: string = getEffectiveScopingSuffixForTag(baseTagName); return tagNameSuffix ? `${baseTagName}-${tagNameSuffix}` : baseTagName; @@ -55,18 +50,3 @@ export function getTagNameWithoutScopingSuffix(tagName) { const tagNameSuffix = getCustomElementsScopingSuffix(); return tagNameSuffix ? tagName.replace(`-${tagNameSuffix.toUpperCase()}`, '') : tagName; } - -const SEMVER_REGEX = - /^(?0|[1-9]\d*)\.(?0|[1-9]\d*)\.(?0|[1-9]\d*)(?:-(?(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/; - -export function parseSemVer(version: string) { - const parsed = SEMVER_REGEX.exec(version).groups; - return { - version, - major: parseInt(parsed.major), - minor: parseInt(parsed.minor), - patch: parseInt(parsed.patch), - prerelease: parsed.prerelease, - buildMetadata: parsed.buildmetadata - }; -} diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index 6281b1ccbbb..9c1f4f5a53d 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -1,240 +1,2 @@ -'use client'; - -import { getEffectiveScopingSuffixForTag } from '@ui5/webcomponents-base/dist/CustomElementsScope.js'; -import { useIsomorphicLayoutEffect, useSyncRef } from '@ui5/webcomponents-react-base'; -import type { ComponentType, ReactElement, ReactNode, Ref } from 'react'; -import { cloneElement, forwardRef, Fragment, isValidElement, useEffect, useState, version } from 'react'; -import type { CommonProps, Ui5DomRef } from '../types/index.js'; -import { camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase, parseSemVer } from './utils.js'; - -const createEventPropName = (eventName: string) => `on${capitalizeFirstLetter(kebabToCamelCase(eventName))}`; - -const isPrimitiveAttribute = (value: unknown): boolean => { - return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean'; -}; - -type EventHandler = (event: CustomEvent) => void; - -export interface WithWebComponentPropTypes { - /** - * Defines whether the component should wait for the underlying custom element of the web component to be defined. This can be useful, for example, for using instance methods when mounting the component. - * - * __Note:__ This adds a rendering cycle to your component. - */ - waitForDefine?: boolean; -} - -const definedWebComponents = new Set([]); - -export const withWebComponent = , RefType = Ui5DomRef>( - tagName: string, - regularProperties: string[], - booleanProperties: string[], - slotProperties: string[], - eventProperties: string[] -) => { - const webComponentsSupported = parseSemVer(version).major >= 19; - // displayName will be assigned in the individual files - // eslint-disable-next-line react/display-name - return forwardRef((props, wcRef) => { - const { className, children, waitForDefine, ...rest } = props; - const [componentRef, ref] = useSyncRef(wcRef); - const tagNameSuffix: string = getEffectiveScopingSuffixForTag(tagName); - const Component = (tagNameSuffix ? `${tagName}-${tagNameSuffix}` : tagName) as unknown as ComponentType< - CommonProps & { class?: string; ref?: Ref } - >; - const [isDefined, setIsDefined] = useState(definedWebComponents.has(Component)); - // regular props (no booleans, no slots and no events) - const regularProps = regularProperties.reduce((acc, name) => { - if (Object.prototype.hasOwnProperty.call(rest, name) && isPrimitiveAttribute(rest[name])) { - return { ...acc, [camelToKebabCase(name)]: rest[name] }; - } - return acc; - }, {}); - - // boolean properties - only attach if they are truthy - const booleanProps = booleanProperties.reduce((acc, name) => { - if (webComponentsSupported) { - return { ...acc, [camelToKebabCase(name)]: rest[name] }; - } else { - if (rest[name] === true || rest[name] === 'true') { - return { ...acc, [camelToKebabCase(name)]: true }; - } - return acc; - } - }, {}); - - const slots = slotProperties.reduce((acc, name) => { - const slotValue = rest[name] as ReactElement; - - if (!slotValue) { - return acc; - } - - if (rest[name]?.$$typeof === Symbol.for('react.portal')) { - console.warn('ReactPortal is not supported for slot props.'); - return acc; - } - - const slottedChildren = []; - let index = 0; - const removeFragments = (element: ReactNode) => { - if (!isValidElement(element)) return; - if (element.type === Fragment) { - const elementChildren = (element as ReactElement<{ children?: ReactNode | ReactNode[] }>).props?.children; - if (Array.isArray(elementChildren)) { - elementChildren.forEach((item) => { - if (Array.isArray(item)) { - item.forEach(removeFragments); - } else { - removeFragments(item); - } - }); - } else { - removeFragments(elementChildren); - } - } else { - slottedChildren.push( - cloneElement>(element, { - key: element.key ?? `${name}-${index}`, - slot: name - }) - ); - index++; - } - }; - - if (Array.isArray(slotValue)) { - slotValue.forEach((item) => { - removeFragments(item); - }); - } else { - removeFragments(slotValue); - } - return [...acc, ...slottedChildren]; - }, []); - - // event binding - useIsomorphicLayoutEffect(() => { - if (webComponentsSupported) { - return () => { - // React can handle events - }; - } - const localRef = ref.current; - const eventRegistry: Record = {}; - if (!waitForDefine || isDefined) { - eventProperties.forEach((eventName) => { - const eventHandler = rest[createEventPropName(eventName)] as EventHandler; - if (typeof eventHandler === 'function') { - eventRegistry[eventName] = eventHandler; - // @ts-expect-error: all custom events can be passed here, so `keyof HTMLElementEventMap` isn't sufficient - localRef?.addEventListener(eventName, eventRegistry[eventName]); - } - }); - - return () => { - for (const eventName in eventRegistry) { - // @ts-expect-error: all custom events can be passed here, so `keyof HTMLElementEventMap` isn't sufficient - localRef?.removeEventListener(eventName, eventRegistry[eventName]); - } - }; - } - }, [...eventProperties.map((eventName) => rest[createEventPropName(eventName)]), isDefined, waitForDefine]); - - const eventHandlers = eventProperties.reduce((events, eventName) => { - const eventHandlerProp = rest[createEventPropName(eventName)]; - if (webComponentsSupported && eventHandlerProp) { - events[`on${eventName}`] = eventHandlerProp; - } - return events; - }, {}); - - // In React 19 events aren't correctly attached after hydration - const [attachEvents, setAttachEvents] = useState(!webComponentsSupported || !Object.keys(eventHandlers).length); // apply workaround only for React19 and if event props are defined - - // non web component related props, just pass them - const nonWebComponentRelatedProps = Object.entries(rest) - .filter(([key]) => !regularProperties.includes(key)) - .filter(([key]) => !slotProperties.includes(key)) - .filter(([key]) => !booleanProperties.includes(key)) - .filter(([key]) => !eventProperties.map((eventName) => createEventPropName(eventName)).includes(key)) - .reduce((acc, [key, val]) => { - if (!key.startsWith('aria-') && !key.startsWith('data-') && val === false) { - return acc; - } - acc[key] = val; - return acc; - }, {}); - - useEffect(() => { - if (waitForDefine && !isDefined) { - void customElements.whenDefined(Component as unknown as string).then(() => { - setIsDefined(true); - definedWebComponents.add(Component); - }); - } - }, [Component, waitForDefine, isDefined]); - - const propsToApply = regularProperties.map((prop) => ({ name: prop, value: props[prop] })); - useEffect(() => { - void customElements.whenDefined(Component as unknown as string).then(() => { - for (const prop of propsToApply) { - if (prop.value != null && !isPrimitiveAttribute(prop.value)) { - if (ref.current) { - ref.current[prop.name] = prop.value; - } - } - } - }); - }, [Component, ...propsToApply]); - - useEffect(() => { - setAttachEvents(true); - }, []); - - if (waitForDefine && !isDefined) { - return null; - } - - // compatibility wrapper for ExpandableText - remove in v3 - if (tagName === 'ui5-expandable-text') { - const renderWhiteSpace = nonWebComponentRelatedProps['renderWhitespace'] ? true : undefined; - // @ts-expect-error: overflowMode is available - const { ['overflow-mode']: overflowMode, text, ...restRegularProps } = regularProps; - const showOverflowInPopover = nonWebComponentRelatedProps['showOverflowInPopover']; - return ( - - {slots} - - ); - } - - return ( - - {slots} - {children} - - ); - }); -}; +export { withWebComponent } from '@ui5/webcomponents-react-base'; +export type { WithWebComponentPropTypes } from '@ui5/webcomponents-react-base'; diff --git a/packages/main/src/types/CommonProps.ts b/packages/main/src/types/CommonProps.ts index 605bf1b6963..774292c19e6 100644 --- a/packages/main/src/types/CommonProps.ts +++ b/packages/main/src/types/CommonProps.ts @@ -1,14 +1 @@ -import type { CSSProperties, HTMLAttributes } from 'react'; - -export interface CommonProps extends Omit, 'dangerouslySetInnerHTML'> { - /** - * Element style which will be appended to the most outer element of a component. - * Use this prop carefully, some css properties might break the component. - */ - style?: CSSProperties; - /** - * CSS Class Name which will be appended to the most outer element of a component. - * Use this prop carefully, overwriting CSS rules might break the component. - */ - className?: string; -} +export type { CommonProps } from '@ui5/webcomponents-react-base'; diff --git a/packages/main/src/types/Ui5CustomEvent.ts b/packages/main/src/types/Ui5CustomEvent.ts index c4864eedc67..12a208c9309 100644 --- a/packages/main/src/types/Ui5CustomEvent.ts +++ b/packages/main/src/types/Ui5CustomEvent.ts @@ -1,5 +1 @@ -export interface Ui5CustomEvent - extends Omit, 'target' | 'currentTarget'> { - target: EventTarget; - currentTarget: EventTarget | null; -} +export type { Ui5CustomEvent } from '@ui5/webcomponents-react-base'; diff --git a/packages/main/src/types/Ui5DomRef.ts b/packages/main/src/types/Ui5DomRef.ts index c7a8bea0d1d..59423ba08b9 100644 --- a/packages/main/src/types/Ui5DomRef.ts +++ b/packages/main/src/types/Ui5DomRef.ts @@ -1,151 +1 @@ -import type { PropertyValue, SlotValue } from '@ui5/webcomponents-base/dist/UI5ElementMetadata.js'; - -type ChangeInfo = { - type: 'property' | 'slot'; - name: string; - reason?: string; - child?: SlotValue; - target?: Ui5DomRef; - newValue?: PropertyValue; - oldValue?: PropertyValue; -}; - -type InvalidationInfo = ChangeInfo & { target: Ui5DomRef }; - -export interface Ui5DomRef extends Omit { - /** - * Called every time before the component renders. - * @public - */ - onBeforeRendering(): void; - /** - * Called every time after the component renders. - * @public - */ - onAfterRendering(): void; - /** - * Called on connectedCallback - added to the DOM. - * @public - */ - onEnterDOM(): void; - /** - * Called on disconnectedCallback - removed from the DOM. - * @public - */ - onExitDOM(): void; - /** - * Attach a callback that will be executed whenever the component is invalidated - * - * @param callback - * @public - */ - attachInvalidate(callback: (param: InvalidationInfo) => void): void; - /** - * Detach the callback that is executed whenever the component is invalidated - * - * @param callback - * @public - */ - detachInvalidate(callback: (param: InvalidationInfo) => void): void; - /** - * A callback that is executed each time an already rendered component is invalidated (scheduled for re-rendering) - * - * @param changeInfo An object with information about the change that caused invalidation. - * The object can have the following properties: - * - type: (property|slot) tells what caused the invalidation - * 1) property: a property value was changed either directly or as a result of changing the corresponding attribute - * 2) slot: a slotted node(nodes) changed in one of several ways (see "reason") - * - * - name: the name of the property or slot that caused the invalidation - * - * - reason: (children|textcontent|childchange|slotchange) relevant only for type="slot" only and tells exactly what changed in the slot - * 1) children: immediate children (HTML elements or text nodes) were added, removed or reordered in the slot - * 2) textcontent: text nodes in the slot changed value (or nested text nodes were added or changed value). Can only trigger for slots of "type: Node" - * 3) slotchange: a slot element, slotted inside that slot had its "slotchange" event listener called. This practically means that transitively slotted children changed. - * Can only trigger if the child of a slot is a slot element itself. - * 4) childchange: indicates that a UI5Element child in that slot was invalidated and in turn invalidated the component. - * Can only trigger for slots with "invalidateOnChildChange" metadata descriptor - * - * - newValue: the new value of the property (for type="property" only) - * - * - oldValue: the old value of the property (for type="property" only) - * - * - child the child that was changed (for type="slot" and reason="childchange" only) - * - * @public - */ - onInvalidation(changeInfo: ChangeInfo): void; - /** - * Returns the DOM Element inside the Shadow Root that corresponds to the opening tag in the UI5 Web Component's template - * *Note:* For logical (abstract) elements (items, options, etc...), returns the part of the parent's DOM that represents this option - * Use this method instead of "this.shadowRoot" to read the Shadow DOM, if ever necessary - * - * @public - */ - getDomRef(): HTMLElement | undefined; - - /** - * Returns the DOM Element marked with "data-sap-focus-ref" inside the template. - * This is the element that will receive the focus by default. - * @public - */ - getFocusDomRef(): HTMLElement | undefined; - - /** - * Waits for dom ref and then returns the DOM Element marked with "data-sap-focus-ref" inside the template. - * This is the element that will receive the focus by default. - * @public - */ - getFocusDomRefAsync(): Promise; - /** - * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref") - * @param focusOptions additional options for the focus - * @public - */ - focus(focusOptions?: FocusOptions): Promise; - /** - * - * @public - * @param name - name of the event - * @param data - additional data for the event - * @param cancelable - true, if the user can call preventDefault on the event object - * @param bubbles - true, if the event bubbles - * @returns false, if the event was cancelled (preventDefault called), true otherwise - */ - fireEvent(name: string, data?: T, cancelable?: boolean, bubbles?: boolean): boolean; - /** - * Returns the actual children, associated with a slot. - * Useful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content. - * @public - */ - getSlottedNodes(slotName: string): Array; - /** - * Attach a callback that will be executed whenever the component's state is finalized - * - * @param callback - * @public - */ - attachComponentStateFinalized(callback: () => void): void; - /** - * Detach the callback that is executed whenever the component's state is finalized - * - * @param callback - * @public - */ - detachComponentStateFinalized(callback: () => void): void; - /** - * Determines whether the component should be rendered in RTL mode or not. - * Returns: "rtl", "ltr" or undefined - * - * @public - * @default undefined - */ - readonly effectiveDir: string | undefined; - - /** - * Used to duck-type UI5 elements without using instanceof - * @public - * @default true - */ - readonly isUI5Element: boolean; -} +export type { Ui5DomRef } from '@ui5/webcomponents-react-base'; diff --git a/packages/main/src/types/index.ts b/packages/main/src/types/index.ts index 15dc66f900b..79974373553 100644 --- a/packages/main/src/types/index.ts +++ b/packages/main/src/types/index.ts @@ -1,18 +1,9 @@ -import type { ReactElement, ReactNode, ReactPortal } from 'react'; - -export type ReducedReactNode = Exclude>; -export type ReducedReactNodeWithBoolean = Exclude>; - -type InternalUI5WCSlotsNode = - | ReducedReactNode - | Iterable - | false - | ReactElement /* necessary for React v16 & v17 ReactNode type*/; - -export type UI5WCSlotsNode = InternalUI5WCSlotsNode | InternalUI5WCSlotsNode[]; - -export type Nullable = T | null; - -export type { CommonProps } from './CommonProps.js'; -export type { Ui5CustomEvent } from './Ui5CustomEvent.js'; -export type { Ui5DomRef } from './Ui5DomRef.js'; +export type { + ReducedReactNode, + ReducedReactNodeWithBoolean, + UI5WCSlotsNode, + Nullable, + CommonProps, + Ui5CustomEvent, + Ui5DomRef +} from '@ui5/webcomponents-react-base'; From 425116634ec6ce902661fde3e58c65b55bd03338 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 11 Feb 2025 11:47:02 +0100 Subject: [PATCH 02/16] cem: adjust withWebComponents and common interfaces import path --- package.json | 4 ++-- packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts | 2 +- packages/cli/src/scripts/create-wrappers/main.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 6d2bbd09182..45aebd1b79d 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,8 @@ "prettier:all": "prettier --write --config ./prettier.config.cjs \"packages/**/*.{js,jsx,ts,tsx,mdx,json,md}\"", "lint": "eslint packages", "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push", - "wrappers:main": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'", - "wrappers:fiori": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'", + "wrappers:main": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'", + "wrappers:fiori": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'", "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react/dist/internal/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components", "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem", "create-webcomponents-wrapper-compat": "(cd packages/cli && tsc) && yarn run wrappers:compat && yarn run sb:prepare-cem && eslint --fix ./packages/compat/src/components/*/index.tsx", diff --git a/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts b/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts index f9ea057f278..ef07ff5fc68 100644 --- a/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts +++ b/packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts @@ -153,7 +153,7 @@ export class PropTypesRenderer extends AbstractRenderer { } prepare(context: WebComponentWrapper) { - const interfacesImportPath = process.env.INTERFACES_IMPORT_PATH ?? '@ui5/webcomponents-react'; + const interfacesImportPath = process.env.INTERFACES_IMPORT_PATH ?? '@ui5/webcomponents-react-base'; context.addTypeImport(interfacesImportPath, 'CommonProps'); context.typeExportSet.add(`${context.componentName}PropTypes`); diff --git a/packages/cli/src/scripts/create-wrappers/main.ts b/packages/cli/src/scripts/create-wrappers/main.ts index fbe8ab1ef8f..99a349b9375 100644 --- a/packages/cli/src/scripts/create-wrappers/main.ts +++ b/packages/cli/src/scripts/create-wrappers/main.ts @@ -11,7 +11,7 @@ import { ImportsRenderer } from './ImportsRenderer.js'; import { PropTypesRenderer } from './PropTypesRenderer.js'; import { WebComponentWrapper } from './WebComponentWrapper.js'; -const WITH_WEB_COMPONENT_IMPORT_PATH = process.env.WITH_WEB_COMPONENT_IMPORT_PATH ?? '@ui5/webcomponents-react'; +const WITH_WEB_COMPONENT_IMPORT_PATH = process.env.WITH_WEB_COMPONENT_IMPORT_PATH ?? '@ui5/webcomponents-react-base'; function filterAttributes(member: CEM.ClassField | CEM.ClassMethod): member is CEM.ClassField { return member.kind === 'field' && member.privacy === 'public' && !member.readonly && !member.static; From f65f3791fb34c80caa2025659ae70cfd02882be7 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 11 Feb 2025 11:54:52 +0100 Subject: [PATCH 03/16] Update DomRefRenderer.ts --- packages/cli/src/scripts/create-wrappers/DomRefRenderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cli/src/scripts/create-wrappers/DomRefRenderer.ts b/packages/cli/src/scripts/create-wrappers/DomRefRenderer.ts index 8f50b264a05..8ec5ae6db52 100644 --- a/packages/cli/src/scripts/create-wrappers/DomRefRenderer.ts +++ b/packages/cli/src/scripts/create-wrappers/DomRefRenderer.ts @@ -141,7 +141,7 @@ export class DomRefRenderer extends AbstractRenderer { } prepare(context: WebComponentWrapper) { - context.addTypeImport(process.env.INTERFACES_IMPORT_PATH ?? '@ui5/webcomponents-react', 'Ui5DomRef'); + context.addTypeImport(process.env.INTERFACES_IMPORT_PATH ?? '@ui5/webcomponents-react-base', 'Ui5DomRef'); context.typeExportSet.add(`${context.componentName}DomRef`); for (const member of this._members) { From fb3abe2df2d66488a1143ab14bd64adf2d05a229 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 11 Feb 2025 12:01:00 +0100 Subject: [PATCH 04/16] run wrapper script (main) --- .../custom-element-manifests/fiori.json | 39 ++++++++++++++++- .storybook/custom-element-manifests/main.json | 12 +++--- .../main/src/webComponents/Avatar/index.tsx | 4 +- .../src/webComponents/AvatarGroup/index.tsx | 4 +- packages/main/src/webComponents/Bar/index.tsx | 4 +- .../BarcodeScannerDialog/index.tsx | 4 +- .../src/webComponents/Breadcrumbs/index.tsx | 4 +- .../webComponents/BreadcrumbsItem/index.tsx | 4 +- .../src/webComponents/BusyIndicator/index.tsx | 4 +- .../main/src/webComponents/Button/index.tsx | 4 +- .../src/webComponents/ButtonBadge/index.tsx | 13 +++--- .../main/src/webComponents/Calendar/index.tsx | 4 +- .../src/webComponents/CalendarDate/index.tsx | 4 +- .../webComponents/CalendarDateRange/index.tsx | 4 +- .../webComponents/CalendarLegend/index.tsx | 4 +- .../CalendarLegendItem/index.tsx | 4 +- .../main/src/webComponents/Card/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 +- .../webComponents/ColorPaletteItem/index.tsx | 4 +- .../ColorPalettePopover/index.tsx | 4 +- .../src/webComponents/ColorPicker/index.tsx | 4 +- .../main/src/webComponents/ComboBox/index.tsx | 4 +- .../src/webComponents/ComboBoxItem/index.tsx | 4 +- .../webComponents/ComboBoxItemGroup/index.tsx | 4 +- .../src/webComponents/DatePicker/index.tsx | 4 +- .../webComponents/DateRangePicker/index.tsx | 4 +- .../webComponents/DateTimePicker/index.tsx | 4 +- .../main/src/webComponents/Dialog/index.tsx | 4 +- .../src/webComponents/DynamicPage/index.tsx | 4 +- .../webComponents/DynamicPageHeader/index.tsx | 4 +- .../webComponents/DynamicPageTitle/index.tsx | 4 +- .../DynamicSideContent/index.tsx | 4 +- .../webComponents/ExpandableText/index.tsx | 42 ++----------------- .../src/webComponents/FileUploader/index.tsx | 4 +- .../src/webComponents/FilterItem/index.tsx | 4 +- .../webComponents/FilterItemOption/index.tsx | 4 +- .../FlexibleColumnLayout/index.tsx | 4 +- .../main/src/webComponents/Form/index.tsx | 4 +- .../src/webComponents/FormGroup/index.tsx | 4 +- .../main/src/webComponents/FormItem/index.tsx | 4 +- .../main/src/webComponents/Icon/index.tsx | 4 +- .../IllustratedMessage/index.tsx | 4 +- .../main/src/webComponents/Input/index.tsx | 4 +- .../main/src/webComponents/Label/index.tsx | 4 +- .../main/src/webComponents/Link/index.tsx | 4 +- .../main/src/webComponents/List/index.tsx | 4 +- .../webComponents/ListItemCustom/index.tsx | 4 +- .../src/webComponents/ListItemGroup/index.tsx | 4 +- .../webComponents/ListItemStandard/index.tsx | 4 +- .../src/webComponents/MediaGallery/index.tsx | 4 +- .../webComponents/MediaGalleryItem/index.tsx | 4 +- .../main/src/webComponents/Menu/index.tsx | 4 +- .../main/src/webComponents/MenuItem/index.tsx | 4 +- .../src/webComponents/MenuSeparator/index.tsx | 4 +- .../src/webComponents/MessageStrip/index.tsx | 4 +- .../src/webComponents/MultiComboBox/index.tsx | 4 +- .../webComponents/MultiComboBoxItem/index.tsx | 4 +- .../MultiComboBoxItemGroup/index.tsx | 4 +- .../src/webComponents/MultiInput/index.tsx | 4 +- .../webComponents/NavigationLayout/index.tsx | 4 +- .../webComponents/NotificationList/index.tsx | 4 +- .../NotificationListGroupItem/index.tsx | 4 +- .../NotificationListItem/index.tsx | 4 +- .../main/src/webComponents/Option/index.tsx | 4 +- .../src/webComponents/OptionCustom/index.tsx | 4 +- .../main/src/webComponents/Page/index.tsx | 4 +- .../main/src/webComponents/Panel/index.tsx | 4 +- .../main/src/webComponents/Popover/index.tsx | 4 +- .../src/webComponents/ProductSwitch/index.tsx | 4 +- .../webComponents/ProductSwitchItem/index.tsx | 4 +- .../webComponents/ProgressIndicator/index.tsx | 4 +- .../src/webComponents/RadioButton/index.tsx | 4 +- .../src/webComponents/RangeSlider/index.tsx | 4 +- .../webComponents/RatingIndicator/index.tsx | 4 +- .../webComponents/ResponsivePopover/index.tsx | 4 +- .../webComponents/SegmentedButton/index.tsx | 4 +- .../SegmentedButtonItem/index.tsx | 4 +- .../main/src/webComponents/Select/index.tsx | 4 +- .../main/src/webComponents/ShellBar/index.tsx | 4 +- .../src/webComponents/ShellBarItem/index.tsx | 4 +- .../webComponents/ShellBarSpacer/index.tsx | 4 +- .../webComponents/SideNavigation/index.tsx | 4 +- .../SideNavigationGroup/index.tsx | 4 +- .../SideNavigationItem/index.tsx | 4 +- .../SideNavigationSubItem/index.tsx | 4 +- .../main/src/webComponents/Slider/index.tsx | 4 +- .../main/src/webComponents/SortItem/index.tsx | 4 +- .../SpecialCalendarDate/index.tsx | 4 +- .../src/webComponents/SplitButton/index.tsx | 4 +- .../src/webComponents/StepInput/index.tsx | 4 +- .../webComponents/SuggestionItem/index.tsx | 4 +- .../SuggestionItemCustom/index.tsx | 4 +- .../SuggestionItemGroup/index.tsx | 4 +- .../main/src/webComponents/Switch/index.tsx | 4 +- packages/main/src/webComponents/Tab/index.tsx | 4 +- .../src/webComponents/TabContainer/index.tsx | 4 +- .../src/webComponents/TabSeparator/index.tsx | 4 +- .../main/src/webComponents/Table/index.tsx | 4 +- .../src/webComponents/TableCell/index.tsx | 4 +- .../src/webComponents/TableGrowing/index.tsx | 4 +- .../webComponents/TableHeaderCell/index.tsx | 4 +- .../webComponents/TableHeaderRow/index.tsx | 4 +- .../main/src/webComponents/TableRow/index.tsx | 4 +- .../webComponents/TableRowAction/index.tsx | 4 +- .../TableRowActionNavigation/index.tsx | 4 +- .../webComponents/TableSelection/index.tsx | 4 +- .../webComponents/TableVirtualizer/index.tsx | 4 +- packages/main/src/webComponents/Tag/index.tsx | 4 +- .../main/src/webComponents/Text/index.tsx | 4 +- .../main/src/webComponents/TextArea/index.tsx | 4 +- .../src/webComponents/TimePicker/index.tsx | 4 +- .../main/src/webComponents/Timeline/index.tsx | 4 +- .../webComponents/TimelineGroupItem/index.tsx | 4 +- .../src/webComponents/TimelineItem/index.tsx | 4 +- .../main/src/webComponents/Title/index.tsx | 4 +- .../main/src/webComponents/Toast/index.tsx | 4 +- .../src/webComponents/ToggleButton/index.tsx | 4 +- .../main/src/webComponents/Token/index.tsx | 4 +- .../src/webComponents/Tokenizer/index.tsx | 4 +- .../main/src/webComponents/Toolbar/index.tsx | 4 +- .../src/webComponents/ToolbarButton/index.tsx | 4 +- .../src/webComponents/ToolbarSelect/index.tsx | 4 +- .../ToolbarSelectOption/index.tsx | 4 +- .../webComponents/ToolbarSeparator/index.tsx | 4 +- .../src/webComponents/ToolbarSpacer/index.tsx | 4 +- .../main/src/webComponents/Tree/index.tsx | 4 +- .../main/src/webComponents/TreeItem/index.tsx | 4 +- .../webComponents/TreeItemCustom/index.tsx | 4 +- .../webComponents/UploadCollection/index.tsx | 4 +- .../UploadCollectionItem/index.tsx | 4 +- .../main/src/webComponents/UserMenu/index.tsx | 4 +- .../webComponents/UserMenuAccount/index.tsx | 4 +- .../src/webComponents/UserMenuItem/index.tsx | 4 +- .../ViewSettingsDialog/index.tsx | 4 +- .../main/src/webComponents/Wizard/index.tsx | 4 +- .../src/webComponents/WizardStep/index.tsx | 4 +- 139 files changed, 326 insertions(+), 320 deletions(-) diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index b6af1a3fd98..ac18dd094a0 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -1721,7 +1721,44 @@ { "kind": "javascript-module", "path": "dist/types/TimelineGrowingMode.js", - "declarations": [], + "declarations": [ + { + "kind": "enum", + "name": "TimelineGrowingMode", + "description": "Timeline growing modes.", + "_ui5privacy": "public", + "_ui5since": "2.7.0", + "members": [ + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Event `load-more` is fired\nupon pressing a \"More\" button at the end.", + "default": "Button", + "name": "Button", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Event `load-more` is fired upon scroll.", + "default": "Scroll", + "name": "Scroll", + "readonly": true + }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "The growing feature is not enabled.", + "default": "None", + "name": "None", + "readonly": true + } + ] + } + ], "exports": [ { "kind": "js", diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index 14050004f7e..b845c2fde5c 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -754,7 +754,7 @@ "kind": "field", "static": true, "privacy": "public", - "description": "The badge is displayed at the top-end corner of the button.\n\n**Note:** It's highly recommended to use the OverlayText design mode only in cozy density.", + "description": "The badge is displayed at the top-end corner of the button.\n\n**Note:** According to design guidance, the OverlayText design mode is best used in cozy density to avoid potential visual issues in compact.", "default": "OverlayText", "name": "OverlayText", "readonly": true @@ -5251,7 +5251,7 @@ "declarations": [ { "kind": "class", - "description": "The `ui5-button-badge` component defines a badge that appears in the `ui5-button`.\n\n * ### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ButtonBadge.js\";`", + "description": "The `ui5-button-badge` component defines a badge that appears in the `ui5-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ButtonBadge.js\";`", "name": "ButtonBadge", "members": [ { @@ -5268,7 +5268,7 @@ ] }, "default": "\"AttentionDot\"", - "description": "Determines where the badge should be placed and how it should be styled.", + "description": "Defines the badge placement and appearance.\n- **InlineText** - displayed inside the button after its text, and recommended for **compact** density.\n- **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density.\n- **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities.", "privacy": "public", "_ui5since": "2.7.0" }, @@ -5279,14 +5279,14 @@ "text": "string" }, "default": "\"\"", - "description": "Defines the text of the component.\n\n**Note:** Text is not needed when the `design` property is set to `AttentionDot`.", + "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.", "privacy": "public", "_ui5since": "2.7.0" } ], "attributes": [ { - "description": "Determines where the badge should be placed and how it should be styled.", + "description": "Defines the badge placement and appearance.\n- **InlineText** - displayed inside the button after its text, and recommended for **compact** density.\n- **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density.\n- **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities.", "name": "design", "default": "\"AttentionDot\"", "fieldName": "design", @@ -5295,7 +5295,7 @@ } }, { - "description": "Defines the text of the component.\n\n**Note:** Text is not needed when the `design` property is set to `AttentionDot`.", + "description": "Defines the text of the component.\n\n**Note:** Text is not applied when the `design` property is set to `AttentionDot`.", "name": "text", "default": "\"\"", "fieldName": "text", diff --git a/packages/main/src/webComponents/Avatar/index.tsx b/packages/main/src/webComponents/Avatar/index.tsx index 27749cfeaaa..6eb9e5e41c2 100644 --- a/packages/main/src/webComponents/Avatar/index.tsx +++ b/packages/main/src/webComponents/Avatar/index.tsx @@ -5,9 +5,9 @@ import type { AvatarAccessibilityAttributes } from '@ui5/webcomponents/dist/Avat import type AvatarColorScheme from '@ui5/webcomponents/dist/types/AvatarColorScheme.js'; import type AvatarShape from '@ui5/webcomponents/dist/types/AvatarShape.js'; import type AvatarSize from '@ui5/webcomponents/dist/types/AvatarSize.js'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface AvatarAttributes { /** diff --git a/packages/main/src/webComponents/AvatarGroup/index.tsx b/packages/main/src/webComponents/AvatarGroup/index.tsx index 5e105c7bf1b..b58029d574e 100644 --- a/packages/main/src/webComponents/AvatarGroup/index.tsx +++ b/packages/main/src/webComponents/AvatarGroup/index.tsx @@ -8,9 +8,9 @@ import type { } from '@ui5/webcomponents/dist/AvatarGroup.js'; import type AvatarColorScheme from '@ui5/webcomponents/dist/types/AvatarColorScheme.js'; import type AvatarGroupType from '@ui5/webcomponents/dist/types/AvatarGroupType.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface AvatarGroupAttributes { /** diff --git a/packages/main/src/webComponents/Bar/index.tsx b/packages/main/src/webComponents/Bar/index.tsx index 6984045de46..69ccebe13ca 100644 --- a/packages/main/src/webComponents/Bar/index.tsx +++ b/packages/main/src/webComponents/Bar/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/Bar.js'; import type BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface BarAttributes { /** diff --git a/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx b/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx index 0b36f019161..3be394fc8b5 100644 --- a/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx +++ b/packages/main/src/webComponents/BarcodeScannerDialog/index.tsx @@ -5,8 +5,8 @@ import type { BarcodeScannerDialogScanErrorEventDetail, BarcodeScannerDialogScanSuccessEventDetail } from '@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface BarcodeScannerDialogAttributes { /** diff --git a/packages/main/src/webComponents/Breadcrumbs/index.tsx b/packages/main/src/webComponents/Breadcrumbs/index.tsx index 4f753b877e4..2cb2afb7b24 100644 --- a/packages/main/src/webComponents/Breadcrumbs/index.tsx +++ b/packages/main/src/webComponents/Breadcrumbs/index.tsx @@ -4,9 +4,9 @@ import '@ui5/webcomponents/dist/Breadcrumbs.js'; import type { BreadcrumbsItemClickEventDetail } from '@ui5/webcomponents/dist/Breadcrumbs.js'; import type BreadcrumbsDesign from '@ui5/webcomponents/dist/types/BreadcrumbsDesign.js'; import type BreadcrumbsSeparator from '@ui5/webcomponents/dist/types/BreadcrumbsSeparator.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface BreadcrumbsAttributes { /** diff --git a/packages/main/src/webComponents/BreadcrumbsItem/index.tsx b/packages/main/src/webComponents/BreadcrumbsItem/index.tsx index 8bc9e1ba58d..aa11b52d448 100644 --- a/packages/main/src/webComponents/BreadcrumbsItem/index.tsx +++ b/packages/main/src/webComponents/BreadcrumbsItem/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents/dist/BreadcrumbsItem.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface BreadcrumbsItemAttributes { /** diff --git a/packages/main/src/webComponents/BusyIndicator/index.tsx b/packages/main/src/webComponents/BusyIndicator/index.tsx index 39581337089..5bafc41064b 100644 --- a/packages/main/src/webComponents/BusyIndicator/index.tsx +++ b/packages/main/src/webComponents/BusyIndicator/index.tsx @@ -3,9 +3,9 @@ import '@ui5/webcomponents/dist/BusyIndicator.js'; import type BusyIndicatorSize from '@ui5/webcomponents/dist/types/BusyIndicatorSize.js'; import type BusyIndicatorTextPlacement from '@ui5/webcomponents/dist/types/BusyIndicatorTextPlacement.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface BusyIndicatorAttributes { /** diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx index da6cfa40b85..cf1c14936f4 100644 --- a/packages/main/src/webComponents/Button/index.tsx +++ b/packages/main/src/webComponents/Button/index.tsx @@ -5,9 +5,9 @@ import type { ButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/Butt import type ButtonAccessibleRole from '@ui5/webcomponents/dist/types/ButtonAccessibleRole.js'; import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import type ButtonType from '@ui5/webcomponents/dist/types/ButtonType.js'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { MouseEventHandler, ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ButtonAttributes { /** diff --git a/packages/main/src/webComponents/ButtonBadge/index.tsx b/packages/main/src/webComponents/ButtonBadge/index.tsx index 3efb721a2c5..121517381dc 100644 --- a/packages/main/src/webComponents/ButtonBadge/index.tsx +++ b/packages/main/src/webComponents/ButtonBadge/index.tsx @@ -2,12 +2,15 @@ import '@ui5/webcomponents/dist/ButtonBadge.js'; import type ButtonBadgeDesign from '@ui5/webcomponents/dist/types/ButtonBadgeDesign.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface ButtonBadgeAttributes { /** - * Determines where the badge should be placed and how it should be styled. + * Defines the badge placement and appearance. + * - **InlineText** - displayed inside the button after its text, and recommended for **compact** density. + * - **OverlayText** - displayed at the top-end corner of the button, and recommended for **cozy** density. + * - **AttentionDot** - displayed at the top-end corner of the button as a dot, and suitable for both **cozy** and **compact** densities. * * **Note:** Available since [v2.7.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.7.0) of **@ui5/webcomponents**. * @default "AttentionDot" @@ -17,7 +20,7 @@ interface ButtonBadgeAttributes { /** * Defines the text of the component. * - * **Note:** Text is not needed when the `design` property is set to `AttentionDot`. + * **Note:** Text is not applied when the `design` property is set to `AttentionDot`. * * **Note:** Available since [v2.7.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.7.0) of **@ui5/webcomponents**. */ @@ -31,7 +34,7 @@ interface ButtonBadgePropTypes extends ButtonBadgeAttributes, OmitText is handled. If set to true, sequences of white space are preserved. - */ - renderWhitespace?: boolean; -} +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface ExpandableTextAttributes { /** @@ -64,10 +34,7 @@ interface ExpandableTextAttributes { interface ExpandableTextDomRef extends Required, Ui5DomRef {} -interface ExpandableTextPropTypes - extends ExpandableTextAttributes, - Omit, - DeprecatedExpandableTextProps {} +interface ExpandableTextPropTypes extends ExpandableTextAttributes, Omit {} /** * The `ExpandableText` component allows displaying a large body of text in a small space. It provides an "expand/collapse" functionality, which shows/hides potentially truncated text. @@ -85,8 +52,7 @@ interface ExpandableTextPropTypes * * On phones, if the component is configured to display the full text in a popover, the popover will appear in full screen. * - * __Note:__ For compatibility reasons, `children`, `showOverflowInPopover`, and `renderWhitespace` are added by the UI5 Web Components for React wrapper and are not part of the underlying web component (`ui5-expandable-text`). - * These props will be removed in the next major release (not yet planned); see their deprecation notices for alternatives. + * * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) * diff --git a/packages/main/src/webComponents/FileUploader/index.tsx b/packages/main/src/webComponents/FileUploader/index.tsx index 242cef5b160..64311bc54a9 100644 --- a/packages/main/src/webComponents/FileUploader/index.tsx +++ b/packages/main/src/webComponents/FileUploader/index.tsx @@ -6,9 +6,9 @@ import type { FileUploaderFileSizeExceedEventDetail } from '@ui5/webcomponents/dist/FileUploader.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface FileUploaderAttributes { /** diff --git a/packages/main/src/webComponents/FilterItem/index.tsx b/packages/main/src/webComponents/FilterItem/index.tsx index ac66421a97e..a7425f9295e 100644 --- a/packages/main/src/webComponents/FilterItem/index.tsx +++ b/packages/main/src/webComponents/FilterItem/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/FilterItem.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface FilterItemAttributes { /** diff --git a/packages/main/src/webComponents/FilterItemOption/index.tsx b/packages/main/src/webComponents/FilterItemOption/index.tsx index 0df400343cd..2f06d2f3070 100644 --- a/packages/main/src/webComponents/FilterItemOption/index.tsx +++ b/packages/main/src/webComponents/FilterItemOption/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/FilterItemOption.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface FilterItemOptionAttributes { /** diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx index a47b5a62764..191ba33f24f 100644 --- a/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx +++ b/packages/main/src/webComponents/FlexibleColumnLayout/index.tsx @@ -7,8 +7,8 @@ import type { FlexibleColumnLayoutLayoutChangeEventDetail } from '@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js'; import type FCLLayout from '@ui5/webcomponents-fiori/dist/types/FCLLayout.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface FlexibleColumnLayoutAttributes { /** diff --git a/packages/main/src/webComponents/Form/index.tsx b/packages/main/src/webComponents/Form/index.tsx index 5b3ab32c6bb..93e8f174677 100644 --- a/packages/main/src/webComponents/Form/index.tsx +++ b/packages/main/src/webComponents/Form/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/Form.js'; import type FormItemSpacing from '@ui5/webcomponents/dist/types/FormItemSpacing.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface FormAttributes { /** diff --git a/packages/main/src/webComponents/FormGroup/index.tsx b/packages/main/src/webComponents/FormGroup/index.tsx index 1954e3492a4..063a4e63fea 100644 --- a/packages/main/src/webComponents/FormGroup/index.tsx +++ b/packages/main/src/webComponents/FormGroup/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents/dist/FormGroup.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface FormGroupAttributes { /** diff --git a/packages/main/src/webComponents/FormItem/index.tsx b/packages/main/src/webComponents/FormItem/index.tsx index ff9d1c5c5be..ca7801660f4 100644 --- a/packages/main/src/webComponents/FormItem/index.tsx +++ b/packages/main/src/webComponents/FormItem/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents/dist/FormItem.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface FormItemAttributes { /** diff --git a/packages/main/src/webComponents/Icon/index.tsx b/packages/main/src/webComponents/Icon/index.tsx index 01e0ed45635..6e836137ea1 100644 --- a/packages/main/src/webComponents/Icon/index.tsx +++ b/packages/main/src/webComponents/Icon/index.tsx @@ -3,8 +3,8 @@ import '@ui5/webcomponents/dist/Icon.js'; import type IconDesign from '@ui5/webcomponents/dist/types/IconDesign.js'; import type IconMode from '@ui5/webcomponents/dist/types/IconMode.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface IconAttributes { /** diff --git a/packages/main/src/webComponents/IllustratedMessage/index.tsx b/packages/main/src/webComponents/IllustratedMessage/index.tsx index ee4910498c0..4ab60ba4819 100644 --- a/packages/main/src/webComponents/IllustratedMessage/index.tsx +++ b/packages/main/src/webComponents/IllustratedMessage/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents-fiori/dist/IllustratedMessage.js'; import type IllustrationMessageDesign from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageDesign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface IllustratedMessageAttributes { /** diff --git a/packages/main/src/webComponents/Input/index.tsx b/packages/main/src/webComponents/Input/index.tsx index c5ac5da95a5..381498b440a 100644 --- a/packages/main/src/webComponents/Input/index.tsx +++ b/packages/main/src/webComponents/Input/index.tsx @@ -4,9 +4,9 @@ import '@ui5/webcomponents/dist/Input.js'; import type { InputSelectionChangeEventDetail } from '@ui5/webcomponents/dist/Input.js'; import type InputType from '@ui5/webcomponents/dist/types/InputType.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface InputAttributes { /** diff --git a/packages/main/src/webComponents/Label/index.tsx b/packages/main/src/webComponents/Label/index.tsx index fa9e9980bf6..aabf57c7ad1 100644 --- a/packages/main/src/webComponents/Label/index.tsx +++ b/packages/main/src/webComponents/Label/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/Label.js'; import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface LabelAttributes { /** diff --git a/packages/main/src/webComponents/Link/index.tsx b/packages/main/src/webComponents/Link/index.tsx index f40e041962e..ac1f4962d4d 100644 --- a/packages/main/src/webComponents/Link/index.tsx +++ b/packages/main/src/webComponents/Link/index.tsx @@ -5,9 +5,9 @@ import type { LinkAccessibilityAttributes, LinkClickEventDetail } from '@ui5/web import type LinkAccessibleRole from '@ui5/webcomponents/dist/types/LinkAccessibleRole.js'; import type LinkDesign from '@ui5/webcomponents/dist/types/LinkDesign.js'; import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface LinkAttributes { /** diff --git a/packages/main/src/webComponents/List/index.tsx b/packages/main/src/webComponents/List/index.tsx index e150621d563..6d1575bdef4 100644 --- a/packages/main/src/webComponents/List/index.tsx +++ b/packages/main/src/webComponents/List/index.tsx @@ -14,9 +14,9 @@ import type ListAccessibleRole from '@ui5/webcomponents/dist/types/ListAccessibl import type ListGrowingMode from '@ui5/webcomponents/dist/types/ListGrowingMode.js'; import type ListSelectionMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js'; import type ListSeparator from '@ui5/webcomponents/dist/types/ListSeparator.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ListAttributes { /** diff --git a/packages/main/src/webComponents/ListItemCustom/index.tsx b/packages/main/src/webComponents/ListItemCustom/index.tsx index e2b8bd259fa..d93ff59b5db 100644 --- a/packages/main/src/webComponents/ListItemCustom/index.tsx +++ b/packages/main/src/webComponents/ListItemCustom/index.tsx @@ -4,9 +4,9 @@ import '@ui5/webcomponents/dist/ListItemCustom.js'; import type { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/ListItem.js'; import type Highlight from '@ui5/webcomponents/dist/types/Highlight.js'; import type ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ListItemCustomAttributes { /** diff --git a/packages/main/src/webComponents/ListItemGroup/index.tsx b/packages/main/src/webComponents/ListItemGroup/index.tsx index 1ea32b62442..3f9fc01f77b 100644 --- a/packages/main/src/webComponents/ListItemGroup/index.tsx +++ b/packages/main/src/webComponents/ListItemGroup/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/ListItemGroup.js'; import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ListItemGroupAttributes { /** diff --git a/packages/main/src/webComponents/ListItemStandard/index.tsx b/packages/main/src/webComponents/ListItemStandard/index.tsx index 1de27c055a6..91ca6e4fe59 100644 --- a/packages/main/src/webComponents/ListItemStandard/index.tsx +++ b/packages/main/src/webComponents/ListItemStandard/index.tsx @@ -5,9 +5,9 @@ import type { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/Li import type Highlight from '@ui5/webcomponents/dist/types/Highlight.js'; import type ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ListItemStandardAttributes { /** diff --git a/packages/main/src/webComponents/MediaGallery/index.tsx b/packages/main/src/webComponents/MediaGallery/index.tsx index ca732a564e2..d37317d010c 100644 --- a/packages/main/src/webComponents/MediaGallery/index.tsx +++ b/packages/main/src/webComponents/MediaGallery/index.tsx @@ -5,9 +5,9 @@ import type { MediaGallerySelectionChangeEventDetail } from '@ui5/webcomponents- import type MediaGalleryLayout from '@ui5/webcomponents-fiori/dist/types/MediaGalleryLayout.js'; import type MediaGalleryMenuHorizontalAlign from '@ui5/webcomponents-fiori/dist/types/MediaGalleryMenuHorizontalAlign.js'; import type MediaGalleryMenuVerticalAlign from '@ui5/webcomponents-fiori/dist/types/MediaGalleryMenuVerticalAlign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface MediaGalleryAttributes { /** diff --git a/packages/main/src/webComponents/MediaGalleryItem/index.tsx b/packages/main/src/webComponents/MediaGalleryItem/index.tsx index e6fc64500c8..6b8aa347045 100644 --- a/packages/main/src/webComponents/MediaGalleryItem/index.tsx +++ b/packages/main/src/webComponents/MediaGalleryItem/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents-fiori/dist/MediaGalleryItem.js'; import type MediaGalleryItemLayout from '@ui5/webcomponents-fiori/dist/types/MediaGalleryItemLayout.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface MediaGalleryItemAttributes { /** diff --git a/packages/main/src/webComponents/Menu/index.tsx b/packages/main/src/webComponents/Menu/index.tsx index ccae4f6b548..0d03a422a75 100644 --- a/packages/main/src/webComponents/Menu/index.tsx +++ b/packages/main/src/webComponents/Menu/index.tsx @@ -6,9 +6,9 @@ import type { MenuBeforeOpenEventDetail, MenuItemClickEventDetail } from '@ui5/webcomponents/dist/Menu.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface MenuAttributes { /** diff --git a/packages/main/src/webComponents/MenuItem/index.tsx b/packages/main/src/webComponents/MenuItem/index.tsx index e8f9b80b511..83ed9b75fb7 100644 --- a/packages/main/src/webComponents/MenuItem/index.tsx +++ b/packages/main/src/webComponents/MenuItem/index.tsx @@ -5,9 +5,9 @@ import type { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/Li import type { MenuBeforeCloseEventDetail, MenuBeforeOpenEventDetail } from '@ui5/webcomponents/dist/MenuItem.js'; import type Highlight from '@ui5/webcomponents/dist/types/Highlight.js'; import type ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface MenuItemAttributes { /** diff --git a/packages/main/src/webComponents/MenuSeparator/index.tsx b/packages/main/src/webComponents/MenuSeparator/index.tsx index 0e86bd9c161..7bfbf6e3708 100644 --- a/packages/main/src/webComponents/MenuSeparator/index.tsx +++ b/packages/main/src/webComponents/MenuSeparator/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents/dist/MenuSeparator.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface MenuSeparatorAttributes {} diff --git a/packages/main/src/webComponents/MessageStrip/index.tsx b/packages/main/src/webComponents/MessageStrip/index.tsx index 32af7bf27e5..9223f42fac0 100644 --- a/packages/main/src/webComponents/MessageStrip/index.tsx +++ b/packages/main/src/webComponents/MessageStrip/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/MessageStrip.js'; import type MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface MessageStripAttributes { /** diff --git a/packages/main/src/webComponents/MultiComboBox/index.tsx b/packages/main/src/webComponents/MultiComboBox/index.tsx index a53c441ecf3..68afaa19d65 100644 --- a/packages/main/src/webComponents/MultiComboBox/index.tsx +++ b/packages/main/src/webComponents/MultiComboBox/index.tsx @@ -4,9 +4,9 @@ import '@ui5/webcomponents/dist/MultiComboBox.js'; import type { MultiComboBoxSelectionChangeEventDetail } from '@ui5/webcomponents/dist/MultiComboBox.js'; import type ComboBoxFilter from '@ui5/webcomponents/dist/types/ComboBoxFilter.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface MultiComboBoxAttributes { /** diff --git a/packages/main/src/webComponents/MultiComboBoxItem/index.tsx b/packages/main/src/webComponents/MultiComboBoxItem/index.tsx index 750a6a28c82..0cb8558fa79 100644 --- a/packages/main/src/webComponents/MultiComboBoxItem/index.tsx +++ b/packages/main/src/webComponents/MultiComboBoxItem/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents/dist/MultiComboBoxItem.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface MultiComboBoxItemAttributes { /** diff --git a/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx b/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx index 539522627b6..e5d9a43c83a 100644 --- a/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx +++ b/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/MultiComboBoxItemGroup.js'; import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface MultiComboBoxItemGroupAttributes { /** diff --git a/packages/main/src/webComponents/MultiInput/index.tsx b/packages/main/src/webComponents/MultiInput/index.tsx index e73b22a8e05..79757cdfe38 100644 --- a/packages/main/src/webComponents/MultiInput/index.tsx +++ b/packages/main/src/webComponents/MultiInput/index.tsx @@ -5,9 +5,9 @@ import type { InputSelectionChangeEventDetail } from '@ui5/webcomponents/dist/In import type { MultiInputTokenDeleteEventDetail } from '@ui5/webcomponents/dist/MultiInput.js'; import type InputType from '@ui5/webcomponents/dist/types/InputType.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface MultiInputAttributes { /** diff --git a/packages/main/src/webComponents/NavigationLayout/index.tsx b/packages/main/src/webComponents/NavigationLayout/index.tsx index 63bcb9d8d0d..17ad3ec1586 100644 --- a/packages/main/src/webComponents/NavigationLayout/index.tsx +++ b/packages/main/src/webComponents/NavigationLayout/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents-fiori/dist/NavigationLayout.js'; import type NavigationLayoutMode from '@ui5/webcomponents-fiori/dist/types/NavigationLayoutMode.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface NavigationLayoutAttributes { /** diff --git a/packages/main/src/webComponents/NotificationList/index.tsx b/packages/main/src/webComponents/NotificationList/index.tsx index ae4810151d9..3633ae48e3b 100644 --- a/packages/main/src/webComponents/NotificationList/index.tsx +++ b/packages/main/src/webComponents/NotificationList/index.tsx @@ -6,9 +6,9 @@ import type { NotificationItemCloseEventDetail, NotificationItemToggleEventDetail } from '@ui5/webcomponents-fiori/dist/NotificationList.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface NotificationListAttributes { /** diff --git a/packages/main/src/webComponents/NotificationListGroupItem/index.tsx b/packages/main/src/webComponents/NotificationListGroupItem/index.tsx index 58a8e69a949..6375cf5fcd9 100644 --- a/packages/main/src/webComponents/NotificationListGroupItem/index.tsx +++ b/packages/main/src/webComponents/NotificationListGroupItem/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js'; import type NotificationListGrowingMode from '@ui5/webcomponents/dist/types/NotificationListGrowingMode.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface NotificationListGroupItemAttributes { /** diff --git a/packages/main/src/webComponents/NotificationListItem/index.tsx b/packages/main/src/webComponents/NotificationListItem/index.tsx index 698286cbe4d..6c9caa4b309 100644 --- a/packages/main/src/webComponents/NotificationListItem/index.tsx +++ b/packages/main/src/webComponents/NotificationListItem/index.tsx @@ -5,9 +5,9 @@ import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import type { NotificationListItemCloseEventDetail } from '@ui5/webcomponents-fiori/dist/NotificationListItem.js'; import type NotificationListItemImportance from '@ui5/webcomponents-fiori/dist/types/NotificationListItemImportance.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface NotificationListItemAttributes { /** diff --git a/packages/main/src/webComponents/Option/index.tsx b/packages/main/src/webComponents/Option/index.tsx index 64d0a98a0ec..790d1d2e87c 100644 --- a/packages/main/src/webComponents/Option/index.tsx +++ b/packages/main/src/webComponents/Option/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents/dist/Option.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface OptionAttributes { /** diff --git a/packages/main/src/webComponents/OptionCustom/index.tsx b/packages/main/src/webComponents/OptionCustom/index.tsx index 6d0fd9efa03..5973a130018 100644 --- a/packages/main/src/webComponents/OptionCustom/index.tsx +++ b/packages/main/src/webComponents/OptionCustom/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents/dist/OptionCustom.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface OptionCustomAttributes { /** diff --git a/packages/main/src/webComponents/Page/index.tsx b/packages/main/src/webComponents/Page/index.tsx index 763b4c32cb9..ad15e91732b 100644 --- a/packages/main/src/webComponents/Page/index.tsx +++ b/packages/main/src/webComponents/Page/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents-fiori/dist/Page.js'; import type PageBackgroundDesign from '@ui5/webcomponents-fiori/dist/types/PageBackgroundDesign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface PageAttributes { /** diff --git a/packages/main/src/webComponents/Panel/index.tsx b/packages/main/src/webComponents/Panel/index.tsx index fb8aa911511..29fc34ada96 100644 --- a/packages/main/src/webComponents/Panel/index.tsx +++ b/packages/main/src/webComponents/Panel/index.tsx @@ -3,9 +3,9 @@ import '@ui5/webcomponents/dist/Panel.js'; import type PanelAccessibleRole from '@ui5/webcomponents/dist/types/PanelAccessibleRole.js'; import type TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface PanelAttributes { /** diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx index cc79e5eaeb6..3789c93c63e 100644 --- a/packages/main/src/webComponents/Popover/index.tsx +++ b/packages/main/src/webComponents/Popover/index.tsx @@ -6,9 +6,9 @@ import type PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHo import type PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; import type PopoverVerticalAlign from '@ui5/webcomponents/dist/types/PopoverVerticalAlign.js'; import type PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface PopoverAttributes { /** diff --git a/packages/main/src/webComponents/ProductSwitch/index.tsx b/packages/main/src/webComponents/ProductSwitch/index.tsx index 4a1c2bfeb3a..c86dba3c9b0 100644 --- a/packages/main/src/webComponents/ProductSwitch/index.tsx +++ b/packages/main/src/webComponents/ProductSwitch/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/ProductSwitch.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface ProductSwitchAttributes {} diff --git a/packages/main/src/webComponents/ProductSwitchItem/index.tsx b/packages/main/src/webComponents/ProductSwitchItem/index.tsx index 6a96e1246cd..d4678d0ec2d 100644 --- a/packages/main/src/webComponents/ProductSwitchItem/index.tsx +++ b/packages/main/src/webComponents/ProductSwitchItem/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/ProductSwitchItem.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface ProductSwitchItemAttributes { /** diff --git a/packages/main/src/webComponents/ProgressIndicator/index.tsx b/packages/main/src/webComponents/ProgressIndicator/index.tsx index d9c775b4cdc..4cc51ae34e5 100644 --- a/packages/main/src/webComponents/ProgressIndicator/index.tsx +++ b/packages/main/src/webComponents/ProgressIndicator/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents/dist/ProgressIndicator.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface ProgressIndicatorAttributes { /** diff --git a/packages/main/src/webComponents/RadioButton/index.tsx b/packages/main/src/webComponents/RadioButton/index.tsx index e1467b4c64d..9512f1dc94b 100644 --- a/packages/main/src/webComponents/RadioButton/index.tsx +++ b/packages/main/src/webComponents/RadioButton/index.tsx @@ -3,8 +3,8 @@ import '@ui5/webcomponents/dist/RadioButton.js'; import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface RadioButtonAttributes { /** diff --git a/packages/main/src/webComponents/RangeSlider/index.tsx b/packages/main/src/webComponents/RangeSlider/index.tsx index cb962dbca5c..5f7975a37f9 100644 --- a/packages/main/src/webComponents/RangeSlider/index.tsx +++ b/packages/main/src/webComponents/RangeSlider/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents/dist/RangeSlider.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface RangeSliderAttributes { /** diff --git a/packages/main/src/webComponents/RatingIndicator/index.tsx b/packages/main/src/webComponents/RatingIndicator/index.tsx index 800fabc436a..80d138eedf1 100644 --- a/packages/main/src/webComponents/RatingIndicator/index.tsx +++ b/packages/main/src/webComponents/RatingIndicator/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents/dist/RatingIndicator.js'; import type RatingIndicatorSize from '@ui5/webcomponents/dist/types/RatingIndicatorSize.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface RatingIndicatorAttributes { /** diff --git a/packages/main/src/webComponents/ResponsivePopover/index.tsx b/packages/main/src/webComponents/ResponsivePopover/index.tsx index 298ae151d71..1e694317e10 100644 --- a/packages/main/src/webComponents/ResponsivePopover/index.tsx +++ b/packages/main/src/webComponents/ResponsivePopover/index.tsx @@ -6,9 +6,9 @@ import type PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHo import type PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; import type PopoverVerticalAlign from '@ui5/webcomponents/dist/types/PopoverVerticalAlign.js'; import type PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ResponsivePopoverAttributes { /** diff --git a/packages/main/src/webComponents/SegmentedButton/index.tsx b/packages/main/src/webComponents/SegmentedButton/index.tsx index 2a778e95663..cbdf59e2fe5 100644 --- a/packages/main/src/webComponents/SegmentedButton/index.tsx +++ b/packages/main/src/webComponents/SegmentedButton/index.tsx @@ -6,9 +6,9 @@ import type { SegmentedButtonSelectionChangeEventDetail } from '@ui5/webcomponents/dist/SegmentedButton.js'; import type SegmentedButtonSelectionMode from '@ui5/webcomponents/dist/types/SegmentedButtonSelectionMode.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface SegmentedButtonAttributes { /** diff --git a/packages/main/src/webComponents/SegmentedButtonItem/index.tsx b/packages/main/src/webComponents/SegmentedButtonItem/index.tsx index 96347ed87d1..40e2efccf6f 100644 --- a/packages/main/src/webComponents/SegmentedButtonItem/index.tsx +++ b/packages/main/src/webComponents/SegmentedButtonItem/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents/dist/SegmentedButtonItem.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface SegmentedButtonItemAttributes { /** diff --git a/packages/main/src/webComponents/Select/index.tsx b/packages/main/src/webComponents/Select/index.tsx index 175d371a003..a8b94c2694b 100644 --- a/packages/main/src/webComponents/Select/index.tsx +++ b/packages/main/src/webComponents/Select/index.tsx @@ -3,9 +3,9 @@ import '@ui5/webcomponents/dist/Select.js'; import type { IOption, SelectChangeEventDetail, SelectLiveChangeEventDetail } from '@ui5/webcomponents/dist/Select.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface SelectAttributes { /** diff --git a/packages/main/src/webComponents/ShellBar/index.tsx b/packages/main/src/webComponents/ShellBar/index.tsx index ddc9c1bea7e..e5e77287ab3 100644 --- a/packages/main/src/webComponents/ShellBar/index.tsx +++ b/packages/main/src/webComponents/ShellBar/index.tsx @@ -11,9 +11,9 @@ import type { ShellBarProfileClickEventDetail, ShellBarSearchButtonEventDetail } from '@ui5/webcomponents-fiori/dist/ShellBar.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ShellBarAttributes { /** diff --git a/packages/main/src/webComponents/ShellBarItem/index.tsx b/packages/main/src/webComponents/ShellBarItem/index.tsx index 55445c34ddd..dfaf98e57e0 100644 --- a/packages/main/src/webComponents/ShellBarItem/index.tsx +++ b/packages/main/src/webComponents/ShellBarItem/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents-fiori/dist/ShellBarItem.js'; import type { ShellBarItemClickEventDetail } from '@ui5/webcomponents-fiori/dist/ShellBarItem.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface ShellBarItemAttributes { /** diff --git a/packages/main/src/webComponents/ShellBarSpacer/index.tsx b/packages/main/src/webComponents/ShellBarSpacer/index.tsx index bd68f9043b9..01a0c2aa9d4 100644 --- a/packages/main/src/webComponents/ShellBarSpacer/index.tsx +++ b/packages/main/src/webComponents/ShellBarSpacer/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/ShellBarSpacer.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface ShellBarSpacerAttributes {} diff --git a/packages/main/src/webComponents/SideNavigation/index.tsx b/packages/main/src/webComponents/SideNavigation/index.tsx index 74bea61e08e..12ec9440133 100644 --- a/packages/main/src/webComponents/SideNavigation/index.tsx +++ b/packages/main/src/webComponents/SideNavigation/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents-fiori/dist/SideNavigation.js'; import type { SideNavigationSelectionChangeEventDetail } from '@ui5/webcomponents-fiori/dist/SideNavigation.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface SideNavigationAttributes { /** diff --git a/packages/main/src/webComponents/SideNavigationGroup/index.tsx b/packages/main/src/webComponents/SideNavigationGroup/index.tsx index 246df00dc90..1033a11a7a4 100644 --- a/packages/main/src/webComponents/SideNavigationGroup/index.tsx +++ b/packages/main/src/webComponents/SideNavigationGroup/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/SideNavigationGroup.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface SideNavigationGroupAttributes { /** diff --git a/packages/main/src/webComponents/SideNavigationItem/index.tsx b/packages/main/src/webComponents/SideNavigationItem/index.tsx index a02ad09abc0..00c01ccc820 100644 --- a/packages/main/src/webComponents/SideNavigationItem/index.tsx +++ b/packages/main/src/webComponents/SideNavigationItem/index.tsx @@ -3,9 +3,9 @@ import '@ui5/webcomponents-fiori/dist/SideNavigationItem.js'; import type { SideNavigationItemAccessibilityAttributes } from '@ui5/webcomponents-fiori/dist/SideNavigationSelectableItemBase.js'; import type SideNavigationItemDesign from '@ui5/webcomponents-fiori/dist/types/SideNavigationItemDesign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface SideNavigationItemAttributes { /** diff --git a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx index 1ada932ff76..ee0a4bcb12b 100644 --- a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx +++ b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx @@ -3,8 +3,8 @@ import '@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js'; import type { SideNavigationItemAccessibilityAttributes } from '@ui5/webcomponents-fiori/dist/SideNavigationSelectableItemBase.js'; import type SideNavigationItemDesign from '@ui5/webcomponents-fiori/dist/types/SideNavigationItemDesign.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface SideNavigationSubItemAttributes { /** diff --git a/packages/main/src/webComponents/Slider/index.tsx b/packages/main/src/webComponents/Slider/index.tsx index 104f3f74d45..96a1f85dfb5 100644 --- a/packages/main/src/webComponents/Slider/index.tsx +++ b/packages/main/src/webComponents/Slider/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents/dist/Slider.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface SliderAttributes { /** diff --git a/packages/main/src/webComponents/SortItem/index.tsx b/packages/main/src/webComponents/SortItem/index.tsx index a9452288425..8fe31e8608a 100644 --- a/packages/main/src/webComponents/SortItem/index.tsx +++ b/packages/main/src/webComponents/SortItem/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/SortItem.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface SortItemAttributes { /** diff --git a/packages/main/src/webComponents/SpecialCalendarDate/index.tsx b/packages/main/src/webComponents/SpecialCalendarDate/index.tsx index 1c63f481d34..deea7b6f740 100644 --- a/packages/main/src/webComponents/SpecialCalendarDate/index.tsx +++ b/packages/main/src/webComponents/SpecialCalendarDate/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents/dist/SpecialCalendarDate.js'; import type CalendarLegendItemType from '@ui5/webcomponents/dist/types/CalendarLegendItemType.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface SpecialCalendarDateAttributes { /** diff --git a/packages/main/src/webComponents/SplitButton/index.tsx b/packages/main/src/webComponents/SplitButton/index.tsx index 2061a2b5957..84bcef0b0fb 100644 --- a/packages/main/src/webComponents/SplitButton/index.tsx +++ b/packages/main/src/webComponents/SplitButton/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/SplitButton.js'; import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface SplitButtonAttributes { /** diff --git a/packages/main/src/webComponents/StepInput/index.tsx b/packages/main/src/webComponents/StepInput/index.tsx index 3ec32944ee5..708a8c412ee 100644 --- a/packages/main/src/webComponents/StepInput/index.tsx +++ b/packages/main/src/webComponents/StepInput/index.tsx @@ -3,8 +3,8 @@ import '@ui5/webcomponents/dist/StepInput.js'; import type { StepInputValueStateChangeEventDetail } from '@ui5/webcomponents/dist/StepInput.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface StepInputAttributes { /** diff --git a/packages/main/src/webComponents/SuggestionItem/index.tsx b/packages/main/src/webComponents/SuggestionItem/index.tsx index f356e6e60ae..df078c3bc11 100644 --- a/packages/main/src/webComponents/SuggestionItem/index.tsx +++ b/packages/main/src/webComponents/SuggestionItem/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents/dist/SuggestionItem.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface SuggestionItemAttributes { /** diff --git a/packages/main/src/webComponents/SuggestionItemCustom/index.tsx b/packages/main/src/webComponents/SuggestionItemCustom/index.tsx index fb4c8fe528c..9bc8c4e22eb 100644 --- a/packages/main/src/webComponents/SuggestionItemCustom/index.tsx +++ b/packages/main/src/webComponents/SuggestionItemCustom/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents/dist/SuggestionItemCustom.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface SuggestionItemCustomAttributes { /** diff --git a/packages/main/src/webComponents/SuggestionItemGroup/index.tsx b/packages/main/src/webComponents/SuggestionItemGroup/index.tsx index 3c396f8c8b5..5a139092ff3 100644 --- a/packages/main/src/webComponents/SuggestionItemGroup/index.tsx +++ b/packages/main/src/webComponents/SuggestionItemGroup/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/SuggestionItemGroup.js'; import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface SuggestionItemGroupAttributes { /** diff --git a/packages/main/src/webComponents/Switch/index.tsx b/packages/main/src/webComponents/Switch/index.tsx index cfc12a4ca40..0135b9e9d8b 100644 --- a/packages/main/src/webComponents/Switch/index.tsx +++ b/packages/main/src/webComponents/Switch/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents/dist/Switch.js'; import type SwitchDesign from '@ui5/webcomponents/dist/types/SwitchDesign.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface SwitchAttributes { /** diff --git a/packages/main/src/webComponents/Tab/index.tsx b/packages/main/src/webComponents/Tab/index.tsx index 7ce6faa06b8..1d6646124c4 100644 --- a/packages/main/src/webComponents/Tab/index.tsx +++ b/packages/main/src/webComponents/Tab/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/Tab.js'; import type SemanticColor from '@ui5/webcomponents/dist/types/SemanticColor.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TabAttributes { /** diff --git a/packages/main/src/webComponents/TabContainer/index.tsx b/packages/main/src/webComponents/TabContainer/index.tsx index b2b6ab50055..73b156a4255 100644 --- a/packages/main/src/webComponents/TabContainer/index.tsx +++ b/packages/main/src/webComponents/TabContainer/index.tsx @@ -9,9 +9,9 @@ import type { import type BackgroundDesign from '@ui5/webcomponents/dist/types/BackgroundDesign.js'; import type OverflowMode from '@ui5/webcomponents/dist/types/OverflowMode.js'; import type TabLayout from '@ui5/webcomponents/dist/types/TabLayout.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TabContainerAttributes { /** diff --git a/packages/main/src/webComponents/TabSeparator/index.tsx b/packages/main/src/webComponents/TabSeparator/index.tsx index 5e08e3b85cb..f8efb5846a4 100644 --- a/packages/main/src/webComponents/TabSeparator/index.tsx +++ b/packages/main/src/webComponents/TabSeparator/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents/dist/TabSeparator.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface TabSeparatorAttributes {} diff --git a/packages/main/src/webComponents/Table/index.tsx b/packages/main/src/webComponents/Table/index.tsx index 2f47d41de94..09736784416 100644 --- a/packages/main/src/webComponents/Table/index.tsx +++ b/packages/main/src/webComponents/Table/index.tsx @@ -7,9 +7,9 @@ import type { TableRowClickEventDetail } from '@ui5/webcomponents/dist/Table.js'; import type TableOverflowMode from '@ui5/webcomponents/dist/types/TableOverflowMode.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TableAttributes { /** diff --git a/packages/main/src/webComponents/TableCell/index.tsx b/packages/main/src/webComponents/TableCell/index.tsx index 9fc24bab09d..8cb83c8b5a0 100644 --- a/packages/main/src/webComponents/TableCell/index.tsx +++ b/packages/main/src/webComponents/TableCell/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/TableCell.js'; import type TableCellHorizontalAlign from '@ui5/webcomponents/dist/types/TableCellHorizontalAlign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface TableCellAttributes { /** diff --git a/packages/main/src/webComponents/TableGrowing/index.tsx b/packages/main/src/webComponents/TableGrowing/index.tsx index 11d716cc3db..308c4a8eec8 100644 --- a/packages/main/src/webComponents/TableGrowing/index.tsx +++ b/packages/main/src/webComponents/TableGrowing/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents/dist/TableGrowing.js'; import type TableGrowingMode from '@ui5/webcomponents/dist/types/TableGrowingMode.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface TableGrowingAttributes { /** diff --git a/packages/main/src/webComponents/TableHeaderCell/index.tsx b/packages/main/src/webComponents/TableHeaderCell/index.tsx index 2c4f0239617..c1c9edb6bde 100644 --- a/packages/main/src/webComponents/TableHeaderCell/index.tsx +++ b/packages/main/src/webComponents/TableHeaderCell/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/TableHeaderCell.js'; import type TableCellHorizontalAlign from '@ui5/webcomponents/dist/types/TableCellHorizontalAlign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface TableHeaderCellAttributes { /** diff --git a/packages/main/src/webComponents/TableHeaderRow/index.tsx b/packages/main/src/webComponents/TableHeaderRow/index.tsx index 55482cf0eaa..53e5e6b75fa 100644 --- a/packages/main/src/webComponents/TableHeaderRow/index.tsx +++ b/packages/main/src/webComponents/TableHeaderRow/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents/dist/TableHeaderRow.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface TableHeaderRowAttributes { /** diff --git a/packages/main/src/webComponents/TableRow/index.tsx b/packages/main/src/webComponents/TableRow/index.tsx index 9e78ccbd2cb..728770cbd97 100644 --- a/packages/main/src/webComponents/TableRow/index.tsx +++ b/packages/main/src/webComponents/TableRow/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents/dist/TableRow.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TableRowAttributes { /** diff --git a/packages/main/src/webComponents/TableRowAction/index.tsx b/packages/main/src/webComponents/TableRowAction/index.tsx index cca4d1b62de..1e11968e3c7 100644 --- a/packages/main/src/webComponents/TableRowAction/index.tsx +++ b/packages/main/src/webComponents/TableRowAction/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents/dist/TableRowAction.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface TableRowActionAttributes { /** diff --git a/packages/main/src/webComponents/TableRowActionNavigation/index.tsx b/packages/main/src/webComponents/TableRowActionNavigation/index.tsx index f123b182a12..4b93de36ac5 100644 --- a/packages/main/src/webComponents/TableRowActionNavigation/index.tsx +++ b/packages/main/src/webComponents/TableRowActionNavigation/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents/dist/TableRowActionNavigation.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface TableRowActionNavigationAttributes { /** diff --git a/packages/main/src/webComponents/TableSelection/index.tsx b/packages/main/src/webComponents/TableSelection/index.tsx index a2aa03c3c1b..755d5b3107f 100644 --- a/packages/main/src/webComponents/TableSelection/index.tsx +++ b/packages/main/src/webComponents/TableSelection/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents/dist/TableSelection.js'; import type TableSelectionMode from '@ui5/webcomponents/dist/types/TableSelectionMode.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface TableSelectionAttributes { /** diff --git a/packages/main/src/webComponents/TableVirtualizer/index.tsx b/packages/main/src/webComponents/TableVirtualizer/index.tsx index 67a7a1e522d..050b9377964 100644 --- a/packages/main/src/webComponents/TableVirtualizer/index.tsx +++ b/packages/main/src/webComponents/TableVirtualizer/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents/dist/TableVirtualizer.js'; import type { RangeChangeEventDetail } from '@ui5/webcomponents/dist/TableVirtualizer.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface TableVirtualizerAttributes { /** diff --git a/packages/main/src/webComponents/Tag/index.tsx b/packages/main/src/webComponents/Tag/index.tsx index e2e8633152f..29d588ca20f 100644 --- a/packages/main/src/webComponents/Tag/index.tsx +++ b/packages/main/src/webComponents/Tag/index.tsx @@ -4,9 +4,9 @@ import '@ui5/webcomponents/dist/Tag.js'; import type TagDesign from '@ui5/webcomponents/dist/types/TagDesign.js'; import type TagSize from '@ui5/webcomponents/dist/types/TagSize.js'; import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TagAttributes { /** diff --git a/packages/main/src/webComponents/Text/index.tsx b/packages/main/src/webComponents/Text/index.tsx index 471e4e37a71..7aa4f7575f0 100644 --- a/packages/main/src/webComponents/Text/index.tsx +++ b/packages/main/src/webComponents/Text/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/Text.js'; import type TextEmptyIndicatorMode from '@ui5/webcomponents/dist/types/TextEmptyIndicatorMode.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface TextAttributes { /** diff --git a/packages/main/src/webComponents/TextArea/index.tsx b/packages/main/src/webComponents/TextArea/index.tsx index ecc97c51676..5c0940fddc9 100644 --- a/packages/main/src/webComponents/TextArea/index.tsx +++ b/packages/main/src/webComponents/TextArea/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents/dist/TextArea.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface TextAreaAttributes { /** diff --git a/packages/main/src/webComponents/TimePicker/index.tsx b/packages/main/src/webComponents/TimePicker/index.tsx index 115184ac0cd..bcd522c9f93 100644 --- a/packages/main/src/webComponents/TimePicker/index.tsx +++ b/packages/main/src/webComponents/TimePicker/index.tsx @@ -3,8 +3,8 @@ import '@ui5/webcomponents/dist/TimePicker.js'; import type { TimePickerChangeEventDetail, TimePickerInputEventDetail } from '@ui5/webcomponents/dist/TimePicker.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface TimePickerAttributes { /** diff --git a/packages/main/src/webComponents/Timeline/index.tsx b/packages/main/src/webComponents/Timeline/index.tsx index aa67f8e03fd..f3bf523f37d 100644 --- a/packages/main/src/webComponents/Timeline/index.tsx +++ b/packages/main/src/webComponents/Timeline/index.tsx @@ -3,9 +3,9 @@ import '@ui5/webcomponents-fiori/dist/Timeline.js'; import type TimelineGrowingMode from '@ui5/webcomponents-fiori/dist/types/TimelineGrowingMode.js'; import type TimelineLayout from '@ui5/webcomponents-fiori/dist/types/TimelineLayout.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface TimelineAttributes { /** diff --git a/packages/main/src/webComponents/TimelineGroupItem/index.tsx b/packages/main/src/webComponents/TimelineGroupItem/index.tsx index ad0cfc796df..1824c3fc962 100644 --- a/packages/main/src/webComponents/TimelineGroupItem/index.tsx +++ b/packages/main/src/webComponents/TimelineGroupItem/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/TimelineGroupItem.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface TimelineGroupItemAttributes { /** diff --git a/packages/main/src/webComponents/TimelineItem/index.tsx b/packages/main/src/webComponents/TimelineItem/index.tsx index bb702809818..dbd8fccfdf0 100644 --- a/packages/main/src/webComponents/TimelineItem/index.tsx +++ b/packages/main/src/webComponents/TimelineItem/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents-fiori/dist/TimelineItem.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface TimelineItemAttributes { /** diff --git a/packages/main/src/webComponents/Title/index.tsx b/packages/main/src/webComponents/Title/index.tsx index 9f591c3bb49..3a1241d3676 100644 --- a/packages/main/src/webComponents/Title/index.tsx +++ b/packages/main/src/webComponents/Title/index.tsx @@ -3,9 +3,9 @@ import '@ui5/webcomponents/dist/Title.js'; import type TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js'; import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface TitleAttributes { /** diff --git a/packages/main/src/webComponents/Toast/index.tsx b/packages/main/src/webComponents/Toast/index.tsx index 6db0e447b33..224950531ce 100644 --- a/packages/main/src/webComponents/Toast/index.tsx +++ b/packages/main/src/webComponents/Toast/index.tsx @@ -2,9 +2,9 @@ import '@ui5/webcomponents/dist/Toast.js'; import type ToastPlacement from '@ui5/webcomponents/dist/types/ToastPlacement.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface ToastAttributes { /** diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx index 500f0422f6b..ec7809938be 100644 --- a/packages/main/src/webComponents/ToggleButton/index.tsx +++ b/packages/main/src/webComponents/ToggleButton/index.tsx @@ -5,9 +5,9 @@ import type { ButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/Butt import type ButtonAccessibleRole from '@ui5/webcomponents/dist/types/ButtonAccessibleRole.js'; import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import type ButtonType from '@ui5/webcomponents/dist/types/ButtonType.js'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { MouseEventHandler, ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface ToggleButtonAttributes { /** diff --git a/packages/main/src/webComponents/Token/index.tsx b/packages/main/src/webComponents/Token/index.tsx index 09b38d31268..b68ce89020f 100644 --- a/packages/main/src/webComponents/Token/index.tsx +++ b/packages/main/src/webComponents/Token/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents/dist/Token.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface TokenAttributes { /** diff --git a/packages/main/src/webComponents/Tokenizer/index.tsx b/packages/main/src/webComponents/Tokenizer/index.tsx index 1e4d59a2d9f..400ca78effe 100644 --- a/packages/main/src/webComponents/Tokenizer/index.tsx +++ b/packages/main/src/webComponents/Tokenizer/index.tsx @@ -5,8 +5,8 @@ import type { TokenizerSelectionChangeEventDetail, TokenizerTokenDeleteEventDetail } from '@ui5/webcomponents/dist/Tokenizer.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface TokenizerAttributes { /** diff --git a/packages/main/src/webComponents/Toolbar/index.tsx b/packages/main/src/webComponents/Toolbar/index.tsx index 8dd273a4bef..13649f05ce8 100644 --- a/packages/main/src/webComponents/Toolbar/index.tsx +++ b/packages/main/src/webComponents/Toolbar/index.tsx @@ -3,9 +3,9 @@ import '@ui5/webcomponents/dist/Toolbar.js'; import type ToolbarAlign from '@ui5/webcomponents/dist/types/ToolbarAlign.js'; import type ToolbarDesign from '@ui5/webcomponents/dist/types/ToolbarDesign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface ToolbarAttributes { /** diff --git a/packages/main/src/webComponents/ToolbarButton/index.tsx b/packages/main/src/webComponents/ToolbarButton/index.tsx index d99940ef027..9fdd11c0d2c 100644 --- a/packages/main/src/webComponents/ToolbarButton/index.tsx +++ b/packages/main/src/webComponents/ToolbarButton/index.tsx @@ -4,8 +4,8 @@ import '@ui5/webcomponents/dist/ToolbarButton.js'; import type { ToolbarButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/ToolbarButton.js'; import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import type ToolbarItemOverflowBehavior from '@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; interface ToolbarButtonAttributes { /** diff --git a/packages/main/src/webComponents/ToolbarSelect/index.tsx b/packages/main/src/webComponents/ToolbarSelect/index.tsx index 5d79bc560d8..95b945fabf6 100644 --- a/packages/main/src/webComponents/ToolbarSelect/index.tsx +++ b/packages/main/src/webComponents/ToolbarSelect/index.tsx @@ -4,9 +4,9 @@ import '@ui5/webcomponents/dist/ToolbarSelect.js'; import type { ToolbarSelectChangeEventDetail } from '@ui5/webcomponents/dist/ToolbarSelect.js'; import type ToolbarItemOverflowBehavior from '@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface ToolbarSelectAttributes { /** diff --git a/packages/main/src/webComponents/ToolbarSelectOption/index.tsx b/packages/main/src/webComponents/ToolbarSelectOption/index.tsx index f4d2b84f450..f0d5844181d 100644 --- a/packages/main/src/webComponents/ToolbarSelectOption/index.tsx +++ b/packages/main/src/webComponents/ToolbarSelectOption/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents/dist/ToolbarSelectOption.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface ToolbarSelectOptionAttributes { /** diff --git a/packages/main/src/webComponents/ToolbarSeparator/index.tsx b/packages/main/src/webComponents/ToolbarSeparator/index.tsx index f0b911bd352..1a3a35d0632 100644 --- a/packages/main/src/webComponents/ToolbarSeparator/index.tsx +++ b/packages/main/src/webComponents/ToolbarSeparator/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents/dist/ToolbarSeparator.js'; import type ToolbarItemOverflowBehavior from '@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface ToolbarSeparatorAttributes { /** diff --git a/packages/main/src/webComponents/ToolbarSpacer/index.tsx b/packages/main/src/webComponents/ToolbarSpacer/index.tsx index d926ef87888..869d7b8a179 100644 --- a/packages/main/src/webComponents/ToolbarSpacer/index.tsx +++ b/packages/main/src/webComponents/ToolbarSpacer/index.tsx @@ -2,8 +2,8 @@ import '@ui5/webcomponents/dist/ToolbarSpacer.js'; import type ToolbarItemOverflowBehavior from '@ui5/webcomponents/dist/types/ToolbarItemOverflowBehavior.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface ToolbarSpacerAttributes { /** diff --git a/packages/main/src/webComponents/Tree/index.tsx b/packages/main/src/webComponents/Tree/index.tsx index c2a12069853..074f4e90afc 100644 --- a/packages/main/src/webComponents/Tree/index.tsx +++ b/packages/main/src/webComponents/Tree/index.tsx @@ -11,9 +11,9 @@ import type { WalkCallback } from '@ui5/webcomponents/dist/Tree.js'; import type ListSelectionMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TreeAttributes { /** diff --git a/packages/main/src/webComponents/TreeItem/index.tsx b/packages/main/src/webComponents/TreeItem/index.tsx index 68b3f7478c3..9ad7bdd23fd 100644 --- a/packages/main/src/webComponents/TreeItem/index.tsx +++ b/packages/main/src/webComponents/TreeItem/index.tsx @@ -5,9 +5,9 @@ import type { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/Li import type Highlight from '@ui5/webcomponents/dist/types/Highlight.js'; import type ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TreeItemAttributes { /** diff --git a/packages/main/src/webComponents/TreeItemCustom/index.tsx b/packages/main/src/webComponents/TreeItemCustom/index.tsx index 958d9868ba3..24dd7465d23 100644 --- a/packages/main/src/webComponents/TreeItemCustom/index.tsx +++ b/packages/main/src/webComponents/TreeItemCustom/index.tsx @@ -5,9 +5,9 @@ import type { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/Li import type Highlight from '@ui5/webcomponents/dist/types/Highlight.js'; import type ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface TreeItemCustomAttributes { /** diff --git a/packages/main/src/webComponents/UploadCollection/index.tsx b/packages/main/src/webComponents/UploadCollection/index.tsx index 43bc03f4c48..6831083c7aa 100644 --- a/packages/main/src/webComponents/UploadCollection/index.tsx +++ b/packages/main/src/webComponents/UploadCollection/index.tsx @@ -6,9 +6,9 @@ import type { UploadCollectionItemDeleteEventDetail, UploadCollectionSelectionChangeEventDetail } from '@ui5/webcomponents-fiori/dist/UploadCollection.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface UploadCollectionAttributes { /** diff --git a/packages/main/src/webComponents/UploadCollectionItem/index.tsx b/packages/main/src/webComponents/UploadCollectionItem/index.tsx index 418410e66a7..e11ba0e64d8 100644 --- a/packages/main/src/webComponents/UploadCollectionItem/index.tsx +++ b/packages/main/src/webComponents/UploadCollectionItem/index.tsx @@ -5,9 +5,9 @@ import type { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/Li import type Highlight from '@ui5/webcomponents/dist/types/Highlight.js'; import type ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import type UploadState from '@ui5/webcomponents-fiori/dist/types/UploadState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface UploadCollectionItemAttributes { /** diff --git a/packages/main/src/webComponents/UserMenu/index.tsx b/packages/main/src/webComponents/UserMenu/index.tsx index 1ed33c177cd..ee36fd02094 100644 --- a/packages/main/src/webComponents/UserMenu/index.tsx +++ b/packages/main/src/webComponents/UserMenu/index.tsx @@ -5,9 +5,9 @@ import type { UserMenuItemClickEventDetail, UserMenuOtherAccountClickEventDetail } from '@ui5/webcomponents-fiori/dist/UserMenu.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface UserMenuAttributes { /** diff --git a/packages/main/src/webComponents/UserMenuAccount/index.tsx b/packages/main/src/webComponents/UserMenuAccount/index.tsx index 24e24d9245e..645435223cd 100644 --- a/packages/main/src/webComponents/UserMenuAccount/index.tsx +++ b/packages/main/src/webComponents/UserMenuAccount/index.tsx @@ -1,8 +1,8 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/UserMenuAccount.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface UserMenuAccountAttributes { /** diff --git a/packages/main/src/webComponents/UserMenuItem/index.tsx b/packages/main/src/webComponents/UserMenuItem/index.tsx index 3b5ada8d956..dee3513e3c4 100644 --- a/packages/main/src/webComponents/UserMenuItem/index.tsx +++ b/packages/main/src/webComponents/UserMenuItem/index.tsx @@ -5,9 +5,9 @@ import type { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/Li import type { MenuBeforeCloseEventDetail, MenuBeforeOpenEventDetail } from '@ui5/webcomponents/dist/MenuItem.js'; import type Highlight from '@ui5/webcomponents/dist/types/Highlight.js'; import type ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; interface UserMenuItemAttributes { /** diff --git a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx index 47bb7d991c5..321dda8a47b 100644 --- a/packages/main/src/webComponents/ViewSettingsDialog/index.tsx +++ b/packages/main/src/webComponents/ViewSettingsDialog/index.tsx @@ -6,8 +6,8 @@ import type { ViewSettingsDialogConfirmEventDetail, VSDSettings } from '@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface ViewSettingsDialogAttributes { /** diff --git a/packages/main/src/webComponents/Wizard/index.tsx b/packages/main/src/webComponents/Wizard/index.tsx index 7cb7e333ac0..3e4e1302e51 100644 --- a/packages/main/src/webComponents/Wizard/index.tsx +++ b/packages/main/src/webComponents/Wizard/index.tsx @@ -3,9 +3,9 @@ import '@ui5/webcomponents-fiori/dist/Wizard.js'; import type WizardContentLayout from '@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js'; import type { WizardStepChangeEventDetail } from '@ui5/webcomponents-fiori/dist/Wizard.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '../../types/index.js'; interface WizardAttributes { /** diff --git a/packages/main/src/webComponents/WizardStep/index.tsx b/packages/main/src/webComponents/WizardStep/index.tsx index c1ca5c9a532..6e4ff46967f 100644 --- a/packages/main/src/webComponents/WizardStep/index.tsx +++ b/packages/main/src/webComponents/WizardStep/index.tsx @@ -1,9 +1,9 @@ 'use client'; import '@ui5/webcomponents-fiori/dist/WizardStep.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; -import { withWebComponent } from '../../internal/withWebComponent.js'; -import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface WizardStepAttributes { /** From 47a21bc6d14425c11c11704c2bb1d33a68f5f11b Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 11 Feb 2025 12:09:36 +0100 Subject: [PATCH 05/16] run wrapper sript (compat) --- packages/compat/src/components/Table/index.tsx | 7 ++----- packages/compat/src/components/TableCell/index.tsx | 5 ++--- packages/compat/src/components/TableColumn/index.tsx | 5 ++--- packages/compat/src/components/TableGroupRow/index.tsx | 5 ++--- packages/compat/src/components/TableRow/index.tsx | 5 ++--- 5 files changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/compat/src/components/Table/index.tsx b/packages/compat/src/components/Table/index.tsx index bc965645c5a..79f7d656632 100644 --- a/packages/compat/src/components/Table/index.tsx +++ b/packages/compat/src/components/Table/index.tsx @@ -8,11 +8,8 @@ import type { import type { TableRowClickEventDetail } from '@ui5/webcomponents-compat/dist/TableRow.js'; import type TableGrowingMode from '@ui5/webcomponents-compat/dist/types/TableGrowingMode.js'; import type TableMode from '@ui5/webcomponents-compat/dist/types/TableMode.js'; -import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js'; -import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js'; -import type { UI5WCSlotsNode } from '@ui5/webcomponents-react/dist/types/index.js'; -import type { Ui5CustomEvent } from '@ui5/webcomponents-react/dist/types/Ui5CustomEvent.js'; -import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js'; import type { ReactNode } from 'react'; interface TableAttributes { diff --git a/packages/compat/src/components/TableCell/index.tsx b/packages/compat/src/components/TableCell/index.tsx index 3575dc02204..32caf097886 100644 --- a/packages/compat/src/components/TableCell/index.tsx +++ b/packages/compat/src/components/TableCell/index.tsx @@ -1,9 +1,8 @@ 'use client'; import '@ui5/webcomponents-compat/dist/TableCell.js'; -import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js'; -import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js'; -import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js'; import type { ReactNode } from 'react'; interface TableCellAttributes {} diff --git a/packages/compat/src/components/TableColumn/index.tsx b/packages/compat/src/components/TableColumn/index.tsx index 9d2b7c2a50d..eb242ead07c 100644 --- a/packages/compat/src/components/TableColumn/index.tsx +++ b/packages/compat/src/components/TableColumn/index.tsx @@ -2,9 +2,8 @@ import '@ui5/webcomponents-compat/dist/TableColumn.js'; import type TableColumnPopinDisplay from '@ui5/webcomponents-compat/dist/types/TableColumnPopinDisplay.js'; -import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js'; -import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js'; -import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js'; import type { ReactNode } from 'react'; interface TableColumnAttributes { diff --git a/packages/compat/src/components/TableGroupRow/index.tsx b/packages/compat/src/components/TableGroupRow/index.tsx index c509d52beca..faa275a5b6a 100644 --- a/packages/compat/src/components/TableGroupRow/index.tsx +++ b/packages/compat/src/components/TableGroupRow/index.tsx @@ -1,9 +1,8 @@ 'use client'; import '@ui5/webcomponents-compat/dist/TableGroupRow.js'; -import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js'; -import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js'; -import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js'; import type { ReactNode } from 'react'; interface TableGroupRowAttributes {} diff --git a/packages/compat/src/components/TableRow/index.tsx b/packages/compat/src/components/TableRow/index.tsx index 1d0a6317c91..467ab16d2a4 100644 --- a/packages/compat/src/components/TableRow/index.tsx +++ b/packages/compat/src/components/TableRow/index.tsx @@ -2,9 +2,8 @@ import '@ui5/webcomponents-compat/dist/TableRow.js'; import type TableRowType from '@ui5/webcomponents-compat/dist/types/TableRowType.js'; -import { withWebComponent } from '@ui5/webcomponents-react/dist/internal/withWebComponent.js'; -import type { CommonProps } from '@ui5/webcomponents-react/dist/types/CommonProps.js'; -import type { Ui5DomRef } from '@ui5/webcomponents-react/dist/types/Ui5DomRef.js'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js'; import type { ReactNode } from 'react'; interface TableRowAttributes { From 08b3f1779398f4b75dbac6e48f158b5a6f19da09 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 11 Feb 2025 12:23:21 +0100 Subject: [PATCH 06/16] Update index.tsx --- .../webComponents/ExpandableText/index.tsx | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/main/src/webComponents/ExpandableText/index.tsx b/packages/main/src/webComponents/ExpandableText/index.tsx index 092426afe1b..262b3331218 100644 --- a/packages/main/src/webComponents/ExpandableText/index.tsx +++ b/packages/main/src/webComponents/ExpandableText/index.tsx @@ -5,6 +5,36 @@ import type ExpandableTextOverflowMode from '@ui5/webcomponents/dist/types/Expan import type TextEmptyIndicatorMode from '@ui5/webcomponents/dist/types/TextEmptyIndicatorMode.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js'; + +//todo: remove once ExpandableText supports setting white-space +addCustomCSSWithScoping( + 'ui5-expandable-text', + ` +:host([data-_render-whitespace]) [ui5-text]{ +white-space: pre-wrap; +}` +); + +interface DeprecatedExpandableTextProps { + /** + * Text of the component. + * + * @deprecated: Please use `text` instead. + */ + children?: string; + /** + * Determines if the full text should be displayed inside a `ResponsivePopover` or in-place. + * + * @deprecated: Please use `overflowMode` instead. + */ + showOverflowInPopover?: boolean; + //todo: deprecate once white-space can be applied w/o addCustomCSS + /** + * Defines how white-space inside Text is handled. If set to true, sequences of white space are preserved. + */ + renderWhitespace?: boolean; +} interface ExpandableTextAttributes { /** @@ -34,7 +64,10 @@ interface ExpandableTextAttributes { interface ExpandableTextDomRef extends Required, Ui5DomRef {} -interface ExpandableTextPropTypes extends ExpandableTextAttributes, Omit {} +interface ExpandableTextPropTypes + extends ExpandableTextAttributes, + Omit, + DeprecatedExpandableTextProps {} /** * The `ExpandableText` component allows displaying a large body of text in a small space. It provides an "expand/collapse" functionality, which shows/hides potentially truncated text. @@ -52,7 +85,8 @@ interface ExpandableTextPropTypes extends ExpandableTextAttributes, Omit Date: Tue, 11 Feb 2025 12:32:53 +0100 Subject: [PATCH 07/16] wip --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 743ea9d1a15..ffb4e27991c 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push", "wrappers:main": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'", "wrappers:fiori": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'", - "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react/dist/internal/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components", + "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components", "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem", "create-webcomponents-wrapper-compat": "(cd packages/cli && tsc) && yarn run wrappers:compat && yarn run sb:prepare-cem && eslint --fix ./packages/compat/src/components/*/index.tsx", "chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook", From c570f63c43974db3d5d5554678447f90e7254336 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 11 Feb 2025 15:11:34 +0100 Subject: [PATCH 08/16] build ai pkg, add components, merge CEMs for SB --- .storybook/custom-element-manifests/ai.json | 635 ++++++++++++++++++ .storybook/main.ts | 5 + .storybook/utils.ts | 8 +- package.json | 5 +- packages/ai/.gitignore | 5 + packages/ai/README.md | 3 + packages/ai/package.json | 48 ++ packages/ai/src/components/Button/index.tsx | 109 +++ .../ai/src/components/ButtonState/index.tsx | 82 +++ .../ai/src/components/PromptInput/index.tsx | 196 ++++++ packages/ai/src/index.ts | 3 + packages/ai/tsconfig.build.json | 12 + packages/ai/tsconfig.json | 15 + tsconfig.build.json | 3 + tsconfig.json | 3 + yarn.lock | 24 + 16 files changed, 1151 insertions(+), 5 deletions(-) create mode 100644 .storybook/custom-element-manifests/ai.json create mode 100644 packages/ai/.gitignore create mode 100644 packages/ai/README.md create mode 100644 packages/ai/package.json create mode 100644 packages/ai/src/components/Button/index.tsx create mode 100644 packages/ai/src/components/ButtonState/index.tsx create mode 100644 packages/ai/src/components/PromptInput/index.tsx create mode 100644 packages/ai/src/index.ts create mode 100644 packages/ai/tsconfig.build.json create mode 100644 packages/ai/tsconfig.json diff --git a/.storybook/custom-element-manifests/ai.json b/.storybook/custom-element-manifests/ai.json new file mode 100644 index 00000000000..fd971af176c --- /dev/null +++ b/.storybook/custom-element-manifests/ai.json @@ -0,0 +1,635 @@ +{ + "schemaVersion": "1.0.0", + "readme": "", + "modules": [ + { + "kind": "javascript-module", + "path": "dist/Assets.js", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "dist/Button.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-ai-button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `ui5-ai-button`\nor by pressing keyboard keys like [Enter] or [Space].\n\n### Usage\n\nFor the `ui5-ai-button` user interface, you can define one or more button states by placing `ui5-ai-button-state` components in their default slot.\nEach state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose.\nYou can define a split mode for the `ui5-ai-button`, which will results in displaying an arrow button for additional actions.\n\nYou can choose from a set of predefined designs for `ui5-ai-button` (as in `ui5-button`) to match the desired styling.\n\nThe `ui5-ai-button` can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is\nin split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space].\nYou can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4].\nTo display additional actions, you can attach a menu to the arrow button.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/Button.js\";`", + "name": "Button", + "slots": [ + { + "name": "default", + "description": "Defines the available states of the component.\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that\nyou only use `ui5-ai-button-state` components in order to preserve the intended design.", + "_ui5propertyName": "states", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "ButtonState", + "package": "@ui5/webcomponents-ai", + "module": "dist/ButtonState.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "design", + "type": { + "text": "ButtonDesign | undefined", + "references": [ + { + "name": "ButtonDesign", + "package": "@ui5/webcomponents", + "module": "dist/types/ButtonDesign.js" + } + ] + }, + "default": "\"Default\"", + "description": "Defines the component design.", + "privacy": "public" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "privacy": "public" + }, + { + "kind": "field", + "name": "state", + "type": { + "text": "string | undefined" + }, + "description": "Defines the current state of the component.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "arrowButtonPressed", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.", + "privacy": "public", + "_ui5since": "2.6.0", + "_ui5noAttribute": true + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + }, + { + "name": "arrow-button-click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the component is in split mode and after the arrow button\nis activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down],\n[Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the component design.", + "name": "design", + "default": "\"Default\"", + "fieldName": "design", + "type": { + "text": "\"Default\" | \"Positive\" | \"Negative\" | \"Transparent\" | \"Emphasized\" | \"Attention\" | undefined" + } + }, + { + "description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the current state of the component.", + "name": "state", + "default": "undefined", + "fieldName": "state", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the active state of the arrow button in split mode.\nSet to true when the button is in split mode and a menu with additional options\nis opened by the arrow button. Set back to false when the menu is closed.", + "name": "arrow-button-pressed", + "default": "false", + "fieldName": "arrowButtonPressed", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-ai-button", + "customElement": true, + "_ui5experimental": "The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.", + "_ui5since": "2.0.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "Button", + "module": "dist/Button.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-ai-button", + "declaration": { + "name": "Button", + "module": "dist/Button.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/ButtonState.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\n`ui5-ai-button-state` is the item to use for defining states of `ui5-ai-button` components.\n\n### Usage\n\n`ui5-si-button-state` is an abstract element, representing a state of `ui5-ai-button`. It is meant to be used in the `states` slot\nof `ui5-ai-button` and should be used as standalone component.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/AiButtonState.js\";`", + "name": "ButtonState", + "members": [ + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Defines the name of the button state.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "text", + "type": { + "text": "string | undefined" + }, + "description": "Defines the text of the button in this state.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "icon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon to be displayed as graphical element within the component before the text.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "endIcon", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon to be displayed as graphical element within the component after the text.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "showArrowButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines if the component is in split button mode.", + "privacy": "public", + "_ui5since": "2.6.0" + } + ], + "attributes": [ + { + "description": "Defines the name of the button state.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the text of the button in this state.", + "name": "text", + "default": "undefined", + "fieldName": "text", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the icon to be displayed as graphical element within the component before the text.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "icon", + "default": "undefined", + "fieldName": "icon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the icon to be displayed as graphical element within the component after the text.\nThe SAP-icons font provides numerous options.\n\n**Example:**\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", + "name": "end-icon", + "default": "undefined", + "fieldName": "endIcon", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines if the component is in split button mode.", + "name": "show-arrow-button", + "default": "false", + "fieldName": "showArrowButton", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-ai-button-state", + "customElement": true, + "_ui5experimental": "The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.", + "_ui5since": "2.0.0", + "_ui5privacy": "public", + "_ui5abstract": true + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "ButtonState", + "module": "dist/ButtonState.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-ai-button-state", + "declaration": { + "name": "ButtonState", + "module": "dist/ButtonState.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/PromptInput.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nThe `ui5-ai-prompt-input` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs.\n\n**Note:** The web component is in an experimental state\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-ai/dist/PromptInput.js", + "name": "PromptInput", + "slots": [ + { + "name": "default", + "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The ``, `` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.", + "_ui5propertyName": "suggestionItems", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "IInputSuggestionItem", + "package": "@ui5/webcomponents", + "module": "dist/Input.js" + } + ] + }, + "_ui5privacy": "public" + }, + { + "name": "valueStateMessage", + "description": "Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.", + "_ui5since": "2.0.0", + "_ui5type": { + "text": "Array" + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "value", + "type": { + "text": "string" + }, + "default": "\"\"", + "description": "Defines the value of the component.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "placeholder", + "type": { + "text": "string | undefined" + }, + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "label", + "type": { + "text": "string | undefined" + }, + "description": "Defines the label of the input field.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "showClearIcon", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the clear icon of the input will be shown.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "showExceededText", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "disabled", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "readonly", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "maxlength", + "type": { + "text": "number | undefined" + }, + "description": "Sets the maximum number of characters available in the input field.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "valueState", + "type": { + "text": "ValueState", + "references": [ + { + "name": "ValueState", + "package": "@ui5/webcomponents-base", + "module": "dist/types/ValueState.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines the value state of the component.", + "privacy": "public", + "_ui5since": "2.0.0" + }, + { + "kind": "field", + "name": "showSuggestions", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component should show suggestions, if such are present.", + "privacy": "public" + } + ], + "events": [ + { + "name": "submit", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the input operation has finished by pressing Enter\nor AI button is clicked.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + }, + { + "name": "input", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + }, + { + "name": "change", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the input operation has finished by pressing Enter\nor on focusout.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true, + "_ui5since": "2.0.0" + } + ], + "attributes": [ + { + "description": "Defines the value of the component.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the label of the input field.", + "name": "label", + "default": "undefined", + "fieldName": "label", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines whether the clear icon of the input will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", + "type": { + "text": "boolean" + } + }, + { + "description": "Determines whether the characters exceeding the maximum allowed character count are visible\nin the component.\n\nIf set to `false`, the user is not allowed to enter more characters than what is set in the\n`maxlength` property.\nIf set to `true` the characters exceeding the `maxlength` value are selected on\npaste and the counter below the component displays their number.", + "name": "show-exceeded-text", + "default": "false", + "fieldName": "showExceededText", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", + "name": "disabled", + "default": "false", + "fieldName": "disabled", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "name": "readonly", + "default": "false", + "fieldName": "readonly", + "type": { + "text": "boolean" + } + }, + { + "description": "Sets the maximum number of characters available in the input field.", + "name": "maxlength", + "default": "undefined", + "fieldName": "maxlength", + "type": { + "text": "number | undefined" + } + }, + { + "description": "Defines the value state of the component.", + "name": "value-state", + "default": "\"None\"", + "fieldName": "valueState", + "type": { + "text": "\"Positive\" | \"Negative\" | \"None\" | \"Critical\" | \"Information\"" + } + }, + { + "description": "Defines whether the component should show suggestions, if such are present.", + "name": "show-suggestions", + "default": "false", + "fieldName": "showSuggestions", + "type": { + "text": "boolean" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-ai-prompt-input", + "customElement": true, + "_ui5experimental": "The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "PromptInput", + "module": "dist/PromptInput.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-ai-prompt-input", + "declaration": { + "name": "PromptInput", + "module": "dist/PromptInput.js" + } + } + ] + } + ] +} diff --git a/.storybook/main.ts b/.storybook/main.ts index 9e4ec0e49f9..9c817485c37 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -64,6 +64,11 @@ const config: StorybookConfig = { directory: '../packages/compat', files: '**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))', titlePrefix: 'Legacy Components' + }, + { + directory: '../packages/ai', + files: '**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))', + titlePrefix: 'AI' } ], addons, diff --git a/.storybook/utils.ts b/.storybook/utils.ts index 8313c3b4596..5c818e46027 100644 --- a/.storybook/utils.ts +++ b/.storybook/utils.ts @@ -1,6 +1,8 @@ import { DocsContext } from '@storybook/blocks'; import { useContext, useMemo } from 'react'; // @ts-expect-error: storybook can handle this +import cemAi from './custom-element-manifests/ai.json'; +// @ts-expect-error: storybook can handle this import cemFiori from './custom-element-manifests/fiori.json'; // @ts-expect-error: storybook can handle this import cemMain from './custom-element-manifests/main.json'; @@ -16,10 +18,6 @@ export const MAPPED_THEMES = [ { value: 'sap_fiori_3_dark', title: 'Quartz Dark' }, { value: 'sap_fiori_3_hcb', title: 'Quartz High Contrast Black' }, { value: 'sap_fiori_3_hcw', title: 'Quartz High Contrast White' } - // deprecated - // { value: 'sap_belize', title: 'Belize' }, - // { value: 'sap_belize_hcb', title: 'Belize High Contrast Black' }, - // { value: 'sap_belize_hcw', title: 'Belize High Contrast White' } ]; export const excludePropsForAbstract = ['className', 'style']; @@ -50,6 +48,8 @@ export function useGetCem() { return cemMain; case 'package:@ui5/webcomponents-fiori': return cemFiori; + case 'package:@ui5/webcomponents-ai': + return cemAi; } } diff --git a/package.json b/package.json index ffb4e27991c..7fea34716c2 100644 --- a/package.json +++ b/package.json @@ -24,12 +24,14 @@ "wrappers:main": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'", "wrappers:fiori": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'", "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components", + "wrappers:ai": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-ai --out ./packages/ai/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/ai/src/components", "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem", "create-webcomponents-wrapper-compat": "(cd packages/cli && tsc) && yarn run wrappers:compat && yarn run sb:prepare-cem && eslint --fix ./packages/compat/src/components/*/index.tsx", + "create-webcomponents-wrapper-ai": "(cd packages/cli && tsc) && yarn run wrappers:ai && yarn run sb:prepare-cem && eslint --fix ./packages/ai/src/components/*/index.tsx", "chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook", "postinstall": "husky && yarn setup", "create-cypress-commands-docs": "documentation build ./packages/cypress-commands/src/commands.ts -f json -o ./packages/cypress-commands/api-commands.json && documentation build ./packages/cypress-commands/src/queries.ts -f json -o ./packages/cypress-commands/api-queries.json", - "sb:prepare-cem": "node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents --out ./.storybook/custom-element-manifests/main.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-fiori --out ./.storybook/custom-element-manifests/fiori.json", + "sb:prepare-cem": "node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents --out ./.storybook/custom-element-manifests/main.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-fiori --out ./.storybook/custom-element-manifests/fiori.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-ai --out ./.storybook/custom-element-manifests/ai.json", "create-theming-parameters": "node scripts/generate-theming-parameters.js" }, "dependencies": { @@ -42,6 +44,7 @@ "@storybook/react-vite": "8.5.0", "@storybook/theming": "8.5.0", "@ui5/webcomponents": "2.7.2", + "@ui5/webcomponents-ai": "2.7.2", "@ui5/webcomponents-compat": "2.7.2", "@ui5/webcomponents-fiori": "2.7.2", "@ui5/webcomponents-icons": "2.7.2", diff --git a/packages/ai/.gitignore b/packages/ai/.gitignore new file mode 100644 index 00000000000..78d3413701e --- /dev/null +++ b/packages/ai/.gitignore @@ -0,0 +1,5 @@ +/LICENSE +/NOTICE.txt +/dist + +src/**/*.css.ts \ No newline at end of file diff --git a/packages/ai/README.md b/packages/ai/README.md new file mode 100644 index 00000000000..6eb3d5cbb57 --- /dev/null +++ b/packages/ai/README.md @@ -0,0 +1,3 @@ +# @ui5/webcomponents-ai-react + +React wrapper for the [@ui5/webcomponents-ai](https://sap.github.io/ui5-webcomponents/components/ai/) web components. diff --git a/packages/ai/package.json b/packages/ai/package.json new file mode 100644 index 00000000000..d06d9df94f0 --- /dev/null +++ b/packages/ai/package.json @@ -0,0 +1,48 @@ +{ + "private": true, + "name": "@ui5/webcomponents-ai-react", + "version": "2.7.1", + "description": "React wrapper for `@ui5/webcomponents-ai` web components.", + "type": "module", + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + }, + "./package.json": "./package.json", + "./dist": "./dist/index.js", + "./dist/*": "./dist/*", + "./dist/*.js": "./dist/*.js" + }, + "homepage": "https://sap.github.io/ui5-webcomponents-react", + "repository": { + "type": "git", + "url": "https://github.com/SAP/ui5-webcomponents-react.git", + "directory": "packages/ai" + }, + "author": "SAP SE (https://www.sap.com)", + "license": "Apache-2.0", + "sideEffects": false, + "scripts": { + "clean": "rimraf dist", + "build:version-info": "node ../../scripts/generate-version-info.js" + }, + "dependencies": { + "@ui5/webcomponents-react-base": "workspace:~" + }, + "peerDependencies": { + "@ui5/webcomponents-ai": "~2.7.2", + "react": "^18 || ^19" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "dist", + "CHANGELOG.md", + "NOTICE.txt" + ] +} diff --git a/packages/ai/src/components/Button/index.tsx b/packages/ai/src/components/Button/index.tsx new file mode 100644 index 00000000000..a54ab6ca114 --- /dev/null +++ b/packages/ai/src/components/Button/index.tsx @@ -0,0 +1,109 @@ +'use client'; + +import '@ui5/webcomponents-ai/dist/Button.js'; +import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import type { ReactNode } from 'react'; + +interface ButtonAttributes { + /** + * Defines the active state of the arrow button in split mode. + * Set to true when the button is in split mode and a menu with additional options + * is opened by the arrow button. Set back to false when the menu is closed. + * + * **Note:** Available since [v2.6.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.6.0) of **@ui5/webcomponents-ai**. + * @default false + */ + arrowButtonPressed?: boolean; + + /** + * Defines the component design. + * @default "Default" + */ + design?: ButtonDesign | undefined | keyof typeof ButtonDesign; + + /** + * Defines whether the component is disabled. + * A disabled component can't be pressed or + * focused, and it is not in the tab chain. + * @default false + */ + disabled?: boolean; + + /** + * Defines the current state of the component. + * @default undefined + */ + state?: string | undefined; +} + +interface ButtonDomRef extends Required, Ui5DomRef {} + +interface ButtonPropTypes + extends ButtonAttributes, + Omit { + /** + * Defines the available states of the component. + * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that + * you only use `ButtonState` components in order to preserve the intended design. + */ + children?: ReactNode | ReactNode[]; + /** + * Fired when the component is in split mode and after the arrow button + * is activated either by clicking or tapping it or by using the [Arrow Up] / [Arrow Down], + * [Alt] + [Arrow Up]/ [Arrow Down], or [F4] keyboard keys. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onArrowButtonClick?: (event: Ui5CustomEvent) => void; + + /** + * Fired when the component is activated either with a + * mouse/tap or by using the Enter or Space key. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onClick?: (event: Ui5CustomEvent) => void; +} + +/** + * The `Button` component serves as a button for AI-related scenarios. Users can trigger actions by clicking or tapping the `Button` + * or by pressing keyboard keys like [Enter] or [Space]. + * + * ### Usage + * + * For the `Button` user interface, you can define one or more button states by placing `ButtonState` components in their default slot. + * Each state has a name for identification and can include text, an icon, and an end icon, as needed for its purpose. + * You can define a split mode for the `Button`, which will results in displaying an arrow button for additional actions. + * + * You can choose from a set of predefined designs for `Button` (as in `ui5-button`) to match the desired styling. + * + * The `Button` can be activated by clicking or tapping it. You can change the button state in the click event handler. When the button is + * in split mode, you can activate the default button action by clicking or tapping it, or by pressing keyboard keys like [Enter] or [Space]. + * You can activate the arrow button by clicking or tapping it, or by pressing keyboard keys like [Arrow Up], [Arrow Down], or [F4]. + * To display additional actions, you can attach a menu to the arrow button. + * + * + * + * __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-ai__. + * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change. + */ +const Button = withWebComponent( + 'ui5-ai-button', + ['design', 'state'], + ['arrowButtonPressed', 'disabled'], + [], + ['arrow-button-click', 'click'] +); + +Button.displayName = 'Button'; + +export { Button }; +export type { ButtonDomRef, ButtonPropTypes }; diff --git a/packages/ai/src/components/ButtonState/index.tsx b/packages/ai/src/components/ButtonState/index.tsx new file mode 100644 index 00000000000..2c6c227ea8b --- /dev/null +++ b/packages/ai/src/components/ButtonState/index.tsx @@ -0,0 +1,82 @@ +'use client'; + +import '@ui5/webcomponents-ai/dist/ButtonState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; + +interface ButtonStateAttributes { + /** + * Defines the icon to be displayed as graphical element within the component after the text. + * The SAP-icons font provides numerous options. + * + * **Example:** + * + * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). + * @default undefined + */ + endIcon?: string | undefined; + + /** + * Defines the icon to be displayed as graphical element within the component before the text. + * The SAP-icons font provides numerous options. + * + * **Example:** + * + * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). + * @default undefined + */ + icon?: string | undefined; + + /** + * Defines the name of the button state. + * @default undefined + */ + name?: string | undefined; + + /** + * Defines if the component is in split button mode. + * + * **Note:** Available since [v2.6.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.6.0) of **@ui5/webcomponents-ai**. + * @default false + */ + showArrowButton?: boolean; + + /** + * Defines the text of the button in this state. + * @default undefined + */ + text?: string | undefined; +} + +interface ButtonStateDomRef extends Required, Ui5DomRef {} + +interface ButtonStatePropTypes extends ButtonStateAttributes, Omit {} + +/** + * `ButtonState` is the item to use for defining states of `Button` components. + * + * ### Usage + * + * `ui5-si-button-state` is an abstract element, representing a state of `Button`. It is meant to be used in the `states` slot + * of `Button` and should be used as standalone component. + * + * + * + * __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-ai__. + * @abstract + * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change. + */ +const ButtonState = withWebComponent( + 'ui5-ai-button-state', + ['endIcon', 'icon', 'name', 'text'], + ['showArrowButton'], + [], + [] +); + +ButtonState.displayName = 'ButtonState'; + +export { ButtonState }; +export type { ButtonStateDomRef, ButtonStatePropTypes }; diff --git a/packages/ai/src/components/PromptInput/index.tsx b/packages/ai/src/components/PromptInput/index.tsx new file mode 100644 index 00000000000..a6f89e5f9c1 --- /dev/null +++ b/packages/ai/src/components/PromptInput/index.tsx @@ -0,0 +1,196 @@ +'use client'; + +import '@ui5/webcomponents-ai/dist/PromptInput.js'; +import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; +import type { ReactNode } from 'react'; + +interface PromptInputAttributes { + /** + * Defines whether the component is in disabled state. + * + * **Note:** A disabled component is completely noninteractive. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * @default false + */ + disabled?: boolean; + + /** + * Defines the label of the input field. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * @default undefined + */ + label?: string | undefined; + + /** + * Sets the maximum number of characters available in the input field. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * @default undefined + */ + maxlength?: number | undefined; + + /** + * Defines a short hint intended to aid the user with data entry when the + * component has no value. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * @default undefined + */ + placeholder?: string | undefined; + + /** + * Defines whether the component is read-only. + * + * **Note:** A read-only component is not editable, + * but still provides visual feedback upon user interaction. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * @default false + */ + readonly?: boolean; + + /** + * Defines whether the clear icon of the input will be shown. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * @default false + */ + showClearIcon?: boolean; + + /** + * Determines whether the characters exceeding the maximum allowed character count are visible + * in the component. + * + * If set to `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 component displays their number. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * @default false + */ + showExceededText?: boolean; + + /** + * Defines whether the component should show suggestions, if such are present. + * @default false + */ + showSuggestions?: boolean; + + /** + * Defines the value of the component. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + */ + value?: string; + + /** + * Defines the value state of the component. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * @default "None" + */ + valueState?: ValueState | keyof typeof ValueState; +} + +interface PromptInputDomRef extends Required, Ui5DomRef {} + +interface PromptInputPropTypes + extends PromptInputAttributes, + Omit< + CommonProps, + keyof PromptInputAttributes | 'children' | 'valueStateMessage' | 'onChange' | 'onInput' | 'onSubmit' + > { + /** + * Defines the suggestion items. + * + * **Note:** The suggestions would be displayed only if the `showSuggestions` + * property is set to `true`. + * + * **Note:** The ``, `` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items. + */ + children?: ReactNode | ReactNode[]; + + /** + * Defines the value state message that will be displayed as pop up under the component. + * The value state message slot should contain only one root element. + * + * **Note:** If not specified, a default text (in the respective language) will be displayed. + * + * **Note:** The `valueStateMessage` would be displayed, + * when the component is in `Information`, `Critical` or `Negative` value state. + * + * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="valueStateMessage"`). + * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. + * + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. + * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + */ + valueStateMessage?: UI5WCSlotsNode; + /** + * Fired when the input operation has finished by pressing Enter + * or on focusout. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onChange?: (event: Ui5CustomEvent) => void; + + /** + * Fired when the value of the component changes at each keystroke, + * and when a suggestion item has been selected. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onInput?: (event: Ui5CustomEvent) => void; + + /** + * Fired when the input operation has finished by pressing Enter + * or AI button is clicked. + * + * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onSubmit?: (event: Ui5CustomEvent) => void; +} + +/** + * The `PromptInput` component allows the user to write custom instructions in natural language, so that AI is guided to generate content tailored to user needs. + * + * **Note:** The web component is in an experimental state + * + * ### ES6 Module Import + * + * `import "@ui5/webcomponents-ai/dist/PromptInput.js + * + * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) + * @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change. + */ +const PromptInput = withWebComponent( + 'ui5-ai-prompt-input', + ['label', 'maxlength', 'placeholder', 'value', 'valueState'], + ['disabled', 'readonly', 'showClearIcon', 'showExceededText', 'showSuggestions'], + ['valueStateMessage'], + ['change', 'input', 'submit'] +); + +PromptInput.displayName = 'PromptInput'; + +export { PromptInput }; +export type { PromptInputDomRef, PromptInputPropTypes }; diff --git a/packages/ai/src/index.ts b/packages/ai/src/index.ts new file mode 100644 index 00000000000..9687d6ed0f3 --- /dev/null +++ b/packages/ai/src/index.ts @@ -0,0 +1,3 @@ +export { Button } from './components/Button/index.js'; +export { ButtonState } from './components/ButtonState/index.js'; +export { PromptInput } from './components/PromptInput/index.js'; diff --git a/packages/ai/tsconfig.build.json b/packages/ai/tsconfig.build.json new file mode 100644 index 00000000000..0604991aae0 --- /dev/null +++ b/packages/ai/tsconfig.build.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "references": [ + { + "path": "../base/tsconfig.build.json" + }, + { + "path": "../main/tsconfig.build.json" + } + ], + "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"] +} diff --git a/packages/ai/tsconfig.json b/packages/ai/tsconfig.json new file mode 100644 index 00000000000..7409f3c8e3f --- /dev/null +++ b/packages/ai/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "strict": true, + "noImplicitAny": false, + "strictNullChecks": false, + "isolatedModules": true + }, + "references": [ + { + "path": "../base/tsconfig.json" + } + ], + "include": ["src/**/*"] +} diff --git a/tsconfig.build.json b/tsconfig.build.json index 7b79d30c347..3faa9abf212 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -18,6 +18,9 @@ }, { "path": "./packages/compat/tsconfig.build.json" + }, + { + "path": "./packages/ai/tsconfig.build.json" } ], "files": [] diff --git a/tsconfig.json b/tsconfig.json index 0b7a06feb1b..15ecf390452 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,6 +19,9 @@ { "path": "./packages/compat/tsconfig.json" }, + { + "path": "./packages/ai/tsconfig.json" + }, { "path": "./tsconfig.spec.json" }, diff --git a/yarn.lock b/yarn.lock index 73c520a2a80..cfa49e4e654 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6104,6 +6104,29 @@ __metadata: languageName: node linkType: hard +"@ui5/webcomponents-ai-react@workspace:packages/ai": + version: 0.0.0-use.local + resolution: "@ui5/webcomponents-ai-react@workspace:packages/ai" + dependencies: + "@ui5/webcomponents-react-base": "workspace:~" + peerDependencies: + "@ui5/webcomponents-ai": ~2.7.2 + react: ^18 || ^19 + languageName: unknown + linkType: soft + +"@ui5/webcomponents-ai@npm:2.7.2": + version: 2.7.2 + resolution: "@ui5/webcomponents-ai@npm:2.7.2" + dependencies: + "@ui5/webcomponents": "npm:2.7.2" + "@ui5/webcomponents-base": "npm:2.7.2" + "@ui5/webcomponents-icons": "npm:2.7.2" + "@ui5/webcomponents-theming": "npm:2.7.2" + checksum: 10c0/f0f3afe7db22df3ec01afc69ef07acc785b6deaf67fe3240dddfc2fe85dcbcf4433f9c772bfecfd84c3bc3791eef90fe92981c3479fa4d3871bda0b55b7ff49e + languageName: node + linkType: hard + "@ui5/webcomponents-base@npm:2.7.2": version: 2.7.2 resolution: "@ui5/webcomponents-base@npm:2.7.2" @@ -23518,6 +23541,7 @@ __metadata: "@types/react": "npm:^19.0.1" "@types/react-dom": "npm:^19.0.1" "@ui5/webcomponents": "npm:2.7.2" + "@ui5/webcomponents-ai": "npm:2.7.2" "@ui5/webcomponents-compat": "npm:2.7.2" "@ui5/webcomponents-fiori": "npm:2.7.2" "@ui5/webcomponents-icons": "npm:2.7.2" From c71f4e40c8fd863e040285a5282b23caa1c36bcf Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 11 Feb 2025 15:12:07 +0100 Subject: [PATCH 09/16] add `Button` story --- packages/ai/src/components/Button/Button.mdx | 128 ++++++++++++++++++ .../src/components/Button/Button.stories.tsx | 110 +++++++++++++++ 2 files changed, 238 insertions(+) create mode 100644 packages/ai/src/components/Button/Button.mdx create mode 100644 packages/ai/src/components/Button/Button.stories.tsx diff --git a/packages/ai/src/components/Button/Button.mdx b/packages/ai/src/components/Button/Button.mdx new file mode 100644 index 00000000000..a3d791b2897 --- /dev/null +++ b/packages/ai/src/components/Button/Button.mdx @@ -0,0 +1,128 @@ +import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw'; +import { Canvas, Description, Markdown, Meta } from '@storybook/blocks'; +import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components'; +import * as ComponentStories from './Button.stories'; +import { ButtonState } from '../ButtonState/index.tsx'; + + + + + +
+ +## Example + + + +
+ + Show static code + + ```tsx + function AIButton(props) { + const generationIdRef = useRef(null); + const buttonRef = useRef(null); + const [buttonState, setButtonState] = useState("generate"); + const [menuOpen, setMenuOpen] = useState(false); + + const startGeneration = () => { + generationIdRef.current = setTimeout(() => { + setButtonState("revise"); + }, 3000); + }; + + const handleClick: ButtonPropTypes["onClick"] = (e) => { + const btn = e.target; + + setMenuOpen(false); + switch (btn.state) { + case "generate": + setButtonState("generating"); + startGeneration(); + break; + case "generating": + if (generationIdRef.current) { + clearTimeout(generationIdRef.current); + generationIdRef.current = null; + } + setButtonState("generate"); + break; + case "revise": + setMenuOpen(true); + break; + } + }; + + const handleMenuItemClick: MenuPropTypes["onItemClick"] = (e) => { + if (e.detail.text === "Regenerate") { + setButtonState("generating"); + startGeneration(); + } + }; + + return ( + <> + + {menuOpen && ( + { + setMenuOpen(false); + }} + > + + + + + + + + + + + + + + + + + + + + )} + + ); + } + ``` + +
+ +## Properties + + + +{SubcomponentsSection} + +## ButtonState + + + + +