@porsche-design-system/components-react 3.20.0 → 3.21.0

package/CHANGELOG.md

@@ -14,6 +14,49 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.21.0] - 2024-11-12
+
+### [3.21.0-rc.0] - 2024-11-11
+
+#### Added
+
+- `Flyout`: Prop `footerBehavior` to always make footer fixed
+  ([3590](https://github.com/porsche-design-system/porsche-design-system/pull/3590))
+- `Checkbox`, `Textarea`: `formDisabledCallback` and `formStateRestoreCallback` from ElementInternals API and sync
+  validity with form element. ([#3528](https://github.com/porsche-design-system/porsche-design-system/pull/3528))
+- `Link`, `Link Pure`, `Link Tile`: `aria-haspopup` is now supported for `aria` prop
+  ([#3589](https://github.com/porsche-design-system/porsche-design-system/pull/3589))
+- `Button`, `Link`: `compact` prop is breakpoint customizable
+  ([#3580](https://github.com/porsche-design-system/porsche-design-system/pull/3580))
+- `Select`, `Multi-Select`: Added `form` prop to explicitly associate these components with a specific form when they
+  are not directly nested within it. ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))
+
+#### Changed
+
+- `Select`, `Multi-Select`:
+  - Remove native select and use ElementInternals API
+    ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))
+  - **Breaking Change**: `Select` and `Multi-Select` components no longer support native validation due to the removal
+    of the underlying native `<select>` element.
+
+#### Fixed
+
+- `Flyout`: overlapping of scrollbar in iOS/iPadOS Safari when sticky header/footer is used
+  ([#3607](https://github.com/porsche-design-system/porsche-design-system/pull/3607))
+- `Carousel`: dynamic change in `slidesPerPages` when using `focusOnCenterSlide` prop breaks pagination
+  ([#3592](https://github.com/porsche-design-system/porsche-design-system/pull/3592))
+- `Flyout`, `Modal`:
+  - transition not working correctly when using conditionally rendered content
+    ([#3590](https://github.com/porsche-design-system/porsche-design-system/pull/3590))
+  - dismiss button not sticky in case header slot is not present
+    ([#3574](https://github.com/porsche-design-system/porsche-design-system/pull/3574))
+  - dismiss button overlaps content area
+    ([#3574](https://github.com/porsche-design-system/porsche-design-system/pull/3574))
+- `jsdom-polyfill`: errors from included polyfill packages
+  ([3543](https://github.com/porsche-design-system/porsche-design-system/pull/3543))
+- React: global `hidden` attribute with value `false` not working
+  ([#3555](https://github.com/porsche-design-system/porsche-design-system/pull/3555))
+
 ### [3.20.0] - 2024-10-24
 
 ### [3.20.0-rc.1] - 2024-10-24
@@ -22,8 +65,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 - React: better tree-shaking for `@porsche-design-system/components-react`
   ([#3554](https://github.com/porsche-design-system/porsche-design-system/pull/3554))
-- `Icon`: `sidebar`
-  ([#3556](https://github.com/porsche-design-system/porsche-design-system/pull/3556))
+- `Icon`: `sidebar` ([#3556](https://github.com/porsche-design-system/porsche-design-system/pull/3556))
 
 #### Changed
 

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

@@ -18,6 +18,7 @@ const PAccordion = /*#__PURE__*/ react.forwardRef(({ compact, heading, headingTa
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButto
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -14,6 +14,7 @@ const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'colu
     }, [direction]);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PButtonTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, as
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disable
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -18,6 +18,7 @@ const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebar
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -18,6 +18,7 @@ const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignH
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PCheckboxWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, la
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -18,6 +18,7 @@ const PCheckbox = /*#__PURE__*/ react.forwardRef(({ checked = false, compact = f
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PContentWrapper = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'tra
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PCrest = /*#__PURE__*/ react.forwardRef(({ aria, href, target = '_self', c
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PDisplay = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'pri
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PDivider = /*#__PURE__*/ react.forwardRef(({ color = 'contrast-low', direc
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PFieldsetWrapper = /*#__PURE__*/ react.forwardRef(({ label = '', labelSize
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PFieldset = /*#__PURE__*/ react.forwardRef(({ label = '', labelSize = 'med
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PFlexItem = /*#__PURE__*/ react.forwardRef(({ alignSelf = 'auto', flex = '
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PFlex = /*#__PURE__*/ react.forwardRef(({ alignContent = 'stretch', alignI
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/flyout-multilevel-item.wrapper.cjs

@@ -16,6 +16,7 @@ const PFlyoutMultilevelItem = /*#__PURE__*/ react.forwardRef(({ identifier, labe
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -18,6 +18,7 @@ const PFlyoutMultilevel = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, ar
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -6,19 +6,20 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = hooks.usePrefix('p-flyout');
-    const propsToSync = [aria, disableBackdropClick, open, position, theme || hooks.useTheme()];
+    const propsToSync = [aria, disableBackdropClick, footerBehavior, open, position, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disableBackdropClick', 'footerBehavior', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PGridItem = /*#__PURE__*/ react.forwardRef(({ offset = 0, size = 1, classN
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PGrid = /*#__PURE__*/ react.forwardRef(({ direction = 'row', gutter = { ba
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PHeading = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'pri
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PHeadline = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'pr
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'primary', lazy, n
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -18,6 +18,7 @@ const PInlineNotification = /*#__PURE__*/ react.forwardRef(({ actionIcon = 'arro
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PLinkPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PLinkSocial = /*#__PURE__*/ react.forwardRef(({ compact = false, hideLabel
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PLinkTileModelSignature = /*#__PURE__*/ react.forwardRef(({ aspectRatio =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PLinkTileProduct = /*#__PURE__*/ react.forwardRef(({ aspectRatio = '3:4',
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PLinkTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, aspe
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PLink = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, download,
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -20,6 +20,7 @@ const PModal = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', disabl
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PModelSignature = /*#__PURE__*/ react.forwardRef(({ color = 'primary', fet
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PMultiSelectOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, v
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -6,17 +6,18 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PMultiSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
+const PMultiSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-multi-select');
-    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/cjs/lib/components/optgroup.wrapper.cjs

@@ -16,6 +16,7 @@ const POptgroup = /*#__PURE__*/ react.forwardRef(({ disabled = false, label, cla
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -18,6 +18,7 @@ const PPagination = /*#__PURE__*/ react.forwardRef(({ activePage = 1, allyLabel,
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -17,6 +17,7 @@ const PPinCode = /*#__PURE__*/ react.forwardRef(({ description = '', disabled =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, description, direction
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PRadioButtonWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false,
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'cent
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PSegmentedControlItem = /*#__PURE__*/ react.forwardRef(({ aria, disabled =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -18,6 +18,7 @@ const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, col
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PSelectOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, value,
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PSelectWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', dropd
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -6,17 +6,18 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+const PSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-select');
-    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', theme,
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef(({ disabled = fals
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -18,6 +18,7 @@ const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, onUpd
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -18,6 +18,7 @@ const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked =
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -11,6 +11,7 @@ const PTableBody = /*#__PURE__*/ react.forwardRef(({ className, ...rest }, ref)
     const WebComponentTag = hooks.usePrefix('p-table-body');
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -14,6 +14,7 @@ const PTableCell = /*#__PURE__*/ react.forwardRef(({ multiline = false, classNam
     }, [multiline]);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

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

@@ -16,6 +16,7 @@ const PTableHeadCell = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, mult
     }, propsToSync);
     const props = {
         ...rest,
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };