@porsche-design-system/components-react 3.16.0-rc.0 → 3.16.0-rc.2

package/CHANGELOG.md

@@ -14,6 +14,49 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.16.0-rc.2] - 2024-07-02
+
+#### Added
+
+- Partials: Added default `og:image` and related meta tags to the `getMetaTagsAndIconLinks` partial. Can be disabled by
+  setting the `ogImage` option to `false`.
+  ([#3357](https://github.com/porsche-design-system/porsche-design-system/pull/3357))
+
+#### Changed
+
+- `Flyout Navigation`, `Flyout Navigation Item`: renamed (experimental) component to `Flyout Multilevel` and
+  `Flyout Multilevel Item` ([#3351](https://github.com/porsche-design-system/porsche-design-system/pull/3351))
+- `Toast`: Renders fully on `#top-layer`, stacking behaviour has changed and follows W3C standards now, see
+  https://developer.mozilla.org/en-US/docs/Glossary/Top_layer and
+  https://developer.chrome.com/blog/what-is-the-top-layer
+  ([#3356](https://github.com/porsche-design-system/porsche-design-system/pull/3356))
+
+```diff
+- <p-flyout-navigation><p-flyout-navigation-item></p-flyout-navigation-item></p-flyout-navigation>
++ <p-flyout-multilevel><p-flyout-multilevel-item></p-flyout-multilevel-item></p-flyout-multilevel>
+```
+
+#### Fixed
+
+- Types: `@porsche-design-system/components-vue` typings are not exposed
+  ([#3355](https://github.com/porsche-design-system/porsche-design-system/pull/3355))
+
+### [3.16.0-rc.1] - 2024-06-18
+
+#### Added
+
+- `jsdom-polyfill` Added polyfills for `Popover API` and `ResizeObserver`
+  ([#3334](https://github.com/porsche-design-system/porsche-design-system/pull/3334))
+- `Segmented Control`: Prop `aria` added to `Segmented Control Item` to support ARIA attributes
+  ([#3327](https://github.com/porsche-design-system/porsche-design-system/pull/3327))
+
+#### Changed
+
+- Angular: updated peer dependency to `>=17.0.0 <19.0.0`
+  ([#3346](https://github.com/porsche-design-system/porsche-design-system/pull/3346))
+- React: Improve prop typings for all wrappers of `@porsche-design-system/components-react`
+  ([#3336](https://github.com/porsche-design-system/porsche-design-system/pull/3336))
+
 ### [3.16.0-rc.0] - 2024-06-05
 
 #### Added

package/cjs/lib/components/accordion.wrapper.cjs

@@ -21,6 +21,7 @@ const PAccordion = react.forwardRef(({ compact, heading, headingTag = 'h2', onAc
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/banner.wrapper.cjs

@@ -20,6 +20,7 @@ const PBanner = react.forwardRef(({ description = '', dismissButton = true, head
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/button-group.wrapper.cjs

@@ -17,6 +17,7 @@ const PButtonGroup = react.forwardRef(({ direction = { base: 'column', xs: 'row'
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/button-pure.wrapper.cjs

@@ -19,6 +19,7 @@ const PButtonPure = react.forwardRef(({ active = false, alignLabel = 'end', aria
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/button-tile.wrapper.cjs

@@ -19,6 +19,7 @@ const PButtonTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/button.wrapper.cjs

@@ -19,6 +19,7 @@ const PButton = react.forwardRef(({ aria, disabled = false, hideLabel = false, i
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/canvas.wrapper.cjs

@@ -0,0 +1,28 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+
+const PCanvas = react.forwardRef(({ onDismissSidebarEnd, onDismissSidebarStart, sidebarEndOpen = false, sidebarEndWidth = 'medium', sidebarStartOpen = false, sidebarStartWidth = 'medium', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
+    hooks.useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
+    const WebComponentTag = hooks.usePrefix('p-canvas');
+    const propsToSync = [sidebarEndOpen, sidebarEndWidth, sidebarStartOpen, sidebarStartWidth];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['sidebarEndOpen', 'sidebarEndWidth', 'sidebarStartOpen', 'sidebarStartWidth'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PCanvas = PCanvas;

package/cjs/lib/components/carousel.wrapper.cjs

@@ -21,6 +21,7 @@ const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/checkbox-wrapper.wrapper.cjs

@@ -19,6 +19,7 @@ const PCheckboxWrapper = react.forwardRef(({ hideLabel = false, label = '', load
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/content-wrapper.wrapper.cjs

@@ -20,6 +20,7 @@ const PContentWrapper = react.forwardRef(({ backgroundColor = 'transparent', the
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/crest.wrapper.cjs

@@ -19,6 +19,7 @@ const PCrest = react.forwardRef(({ aria, href, target = '_self', className, ...r
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/display.wrapper.cjs

@@ -19,6 +19,7 @@ const PDisplay = react.forwardRef(({ align = 'start', color = 'primary', ellipsi
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/divider.wrapper.cjs

@@ -19,6 +19,7 @@ const PDivider = react.forwardRef(({ color = 'contrast-low', direction = 'horizo
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/fieldset-wrapper.wrapper.cjs

@@ -20,6 +20,7 @@ const PFieldsetWrapper = react.forwardRef(({ label = '', labelSize = 'medium', m
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/fieldset.wrapper.cjs

@@ -19,6 +19,7 @@ const PFieldset = react.forwardRef(({ label = '', labelSize = 'medium', message
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/flex-item.wrapper.cjs

@@ -20,6 +20,7 @@ const PFlexItem = react.forwardRef(({ alignSelf = 'auto', flex = 'initial', grow
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/flex.wrapper.cjs

@@ -20,6 +20,7 @@ const PFlex = react.forwardRef(({ alignContent = 'stretch', alignItems = 'stretc
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/{flyout-navigation-item.wrapper.cjs → flyout-multilevel-item.wrapper.cjs}

@@ -6,9 +6,9 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className, ...rest }, ref) => {
+const PFlyoutMultilevelItem = react.forwardRef(({ identifier, label, className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    const WebComponentTag = hooks.usePrefix('p-flyout-navigation-item');
+    const WebComponentTag = hooks.usePrefix('p-flyout-multilevel-item');
     const propsToSync = [identifier, label];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -19,7 +19,8 @@ const PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 
-exports.PFlyoutNavigationItem = PFlyoutNavigationItem;
+exports.PFlyoutMultilevelItem = PFlyoutMultilevelItem;

package/cjs/lib/components/{flyout-navigation.wrapper.cjs → flyout-multilevel.wrapper.cjs}

@@ -6,11 +6,11 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyoutNavigation = react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+const PFlyoutMultilevel = react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
-    const WebComponentTag = hooks.usePrefix('p-flyout-navigation');
+    const WebComponentTag = hooks.usePrefix('p-flyout-multilevel');
     const propsToSync = [activeIdentifier, aria, open, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -21,7 +21,8 @@ const PFlyoutNavigation = react.forwardRef(({ activeIdentifier, aria, onDismiss,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 
-exports.PFlyoutNavigation = PFlyoutNavigation;
+exports.PFlyoutMultilevel = PFlyoutMultilevel;

package/cjs/lib/components/flyout.wrapper.cjs

@@ -20,6 +20,7 @@ const PFlyout = react.forwardRef(({ aria, disableBackdropClick = false, onDismis
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/grid-item.wrapper.cjs

@@ -20,6 +20,7 @@ const PGridItem = react.forwardRef(({ offset = 0, size = 1, className, ...rest }
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/grid.wrapper.cjs

@@ -20,6 +20,7 @@ const PGrid = react.forwardRef(({ direction = 'row', gutter = { base: 16, s: 24,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/heading.wrapper.cjs

@@ -19,6 +19,7 @@ const PHeading = react.forwardRef(({ align = 'start', color = 'primary', ellipsi
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/headline.wrapper.cjs

@@ -20,6 +20,7 @@ const PHeadline = react.forwardRef(({ align = 'start', color = 'primary', ellips
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/icon.wrapper.cjs

@@ -19,6 +19,7 @@ const PIcon = react.forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-r
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/inline-notification.wrapper.cjs

@@ -21,6 +21,7 @@ const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', acti
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/link-pure.wrapper.cjs

@@ -19,6 +19,7 @@ const PLinkPure = react.forwardRef(({ active = false, alignLabel = 'end', aria,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/link-social.wrapper.cjs

@@ -20,6 +20,7 @@ const PLinkSocial = react.forwardRef(({ hideLabel = false, href, icon, iconSourc
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/link-tile-model-signature.wrapper.cjs

@@ -19,6 +19,7 @@ const PLinkTileModelSignature = react.forwardRef(({ aspectRatio = '3:4', descrip
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/link-tile-product.wrapper.cjs

@@ -20,6 +20,7 @@ const PLinkTileProduct = react.forwardRef(({ aspectRatio = '3:4', description, h
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/link-tile.wrapper.cjs

@@ -19,6 +19,7 @@ const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/link.wrapper.cjs

@@ -19,6 +19,7 @@ const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/marque.wrapper.cjs

@@ -20,6 +20,7 @@ const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/modal.wrapper.cjs

@@ -21,6 +21,7 @@ const PModal = react.forwardRef(({ aria, backdrop = 'blur', disableBackdropClick
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/model-signature.wrapper.cjs

@@ -19,6 +19,7 @@ const PModelSignature = react.forwardRef(({ color = 'primary', fetchPriority = '
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/multi-select-option.wrapper.cjs

@@ -19,6 +19,7 @@ const PMultiSelectOption = react.forwardRef(({ disabled = false, value, classNam
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/multi-select.wrapper.cjs

@@ -20,6 +20,7 @@ const PMultiSelect = react.forwardRef(({ description = '', disabled = false, dro
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/pagination.wrapper.cjs

@@ -21,6 +21,7 @@ const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/pin-code.wrapper.cjs

@@ -20,6 +20,7 @@ const PPinCode = react.forwardRef(({ description = '', disabled = false, hideLab
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/popover.wrapper.cjs

@@ -19,6 +19,7 @@ const PPopover = react.forwardRef(({ aria, description, direction = 'bottom', th
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/radio-button-wrapper.wrapper.cjs

@@ -19,6 +19,7 @@ const PRadioButtonWrapper = react.forwardRef(({ hideLabel = false, label = '', l
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/scroller.wrapper.cjs

@@ -19,6 +19,7 @@ const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', aria, gra
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/segmented-control-item.wrapper.cjs

@@ -6,19 +6,20 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSegmentedControlItem = react.forwardRef(({ disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
+const PSegmentedControlItem = react.forwardRef(({ aria, disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-segmented-control-item');
-    const propsToSync = [disabled, icon, iconSource, label, value];
+    const propsToSync = [aria, disabled, icon, iconSource, label, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['disabled', 'icon', 'iconSource', 'label', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disabled', 'icon', 'iconSource', 'label', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/segmented-control.wrapper.cjs

@@ -21,6 +21,7 @@ const PSegmentedControl = react.forwardRef(({ backgroundColor, columns = 'auto',
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/select-option.wrapper.cjs

@@ -19,6 +19,7 @@ const PSelectOption = react.forwardRef(({ disabled = false, value, className, ..
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/select-wrapper.wrapper.cjs

@@ -19,6 +19,7 @@ const PSelectWrapper = react.forwardRef(({ description = '', dropdownDirection =
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/select.wrapper.cjs

@@ -20,6 +20,7 @@ const PSelect = react.forwardRef(({ description = '', disabled = false, dropdown
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/spinner.wrapper.cjs

@@ -19,6 +19,7 @@ const PSpinner = react.forwardRef(({ aria, size = 'small', theme, className, ...
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/stepper-horizontal-item.wrapper.cjs

@@ -19,6 +19,7 @@ const PStepperHorizontalItem = react.forwardRef(({ disabled = false, state, clas
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/stepper-horizontal.wrapper.cjs

@@ -21,6 +21,7 @@ const PStepperHorizontal = react.forwardRef(({ onStepChange, onUpdate, size = 's
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/switch.wrapper.cjs

@@ -21,6 +21,7 @@ const PSwitch = react.forwardRef(({ alignLabel = 'end', checked = false, disable
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/table-body.wrapper.cjs

@@ -14,6 +14,7 @@ const PTableBody = react.forwardRef(({ className, ...rest }, ref) => {
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/table-cell.wrapper.cjs

@@ -17,6 +17,7 @@ const PTableCell = react.forwardRef(({ multiline = false, className, ...rest },
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/table-head-cell.wrapper.cjs

@@ -19,6 +19,7 @@ const PTableHeadCell = react.forwardRef(({ hideLabel = false, multiline = false,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/table-head-row.wrapper.cjs

@@ -14,6 +14,7 @@ const PTableHeadRow = react.forwardRef(({ className, ...rest }, ref) => {
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 

package/cjs/lib/components/table-head.wrapper.cjs

@@ -14,6 +14,7 @@ const PTableHead = react.forwardRef(({ className, ...rest }, ref) => {
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });