@porsche-design-system/components-react 3.23.0 → 3.24.0-rc.1

package/esm/lib/components/optgroup.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 
 const POptgroup = /*#__PURE__*/ forwardRef(({ disabled = false, label, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-optgroup');
     const propsToSync = [disabled, label];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const POptgroup = /*#__PURE__*/ forwardRef(({ disabled = false, label, className
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/pagination.wrapper.d.ts

@@ -55,7 +55,7 @@ export type PPaginationProps = BaseProps & {
      */
     totalItemsCount: number;
 };
-export declare const PPagination: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PPagination: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Index of the currently active page.
      */

package/esm/lib/components/pagination.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PPagination = /*#__PURE__*/ forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks, onPageChange, onUpdate, showLastPage = true, theme, totalItemsCount = 1, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'pageChange', onPageChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-pagination');
@@ -16,7 +16,6 @@ const PPagination = /*#__PURE__*/ forwardRef(({ activePage = 1, allyLabel, allyL
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/pin-code.wrapper.d.ts

@@ -62,7 +62,7 @@ export type PPinCodeProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PPinCode: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PPinCode: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The description text.
      */

package/esm/lib/components/pin-code.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PPinCode = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-pin-code');
     const propsToSync = [description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || useTheme(), type, value];
@@ -15,7 +15,6 @@ const PPinCode = /*#__PURE__*/ forwardRef(({ description = '', disabled = false,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/popover.wrapper.d.ts

@@ -18,7 +18,7 @@ export type PPopoverProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PPopover: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PPopover: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/esm/lib/components/popover.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bottom', theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-popover');
     const propsToSync = [aria, description, direction, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bot
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/radio-button-wrapper.wrapper.d.ts

@@ -26,7 +26,7 @@ export type PRadioButtonWrapperProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */

package/esm/lib/components/radio-button-wrapper.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PRadioButtonWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-radio-button-wrapper');
     const propsToSync = [hideLabel, label, loading, message, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PRadioButtonWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/scroller.wrapper.d.ts

@@ -34,7 +34,7 @@ export type PScrollerProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PScroller: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PScroller: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets the vertical position of scroll indicator.
      */

package/esm/lib/components/scroller.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-scroller');
     const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', a
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/segmented-control-item.wrapper.d.ts

@@ -26,7 +26,7 @@ export type PSegmentedControlItemProps = BaseProps & {
      */
     value: string | number;
 };
-export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/esm/lib/components/segmented-control-item.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 
 const PSegmentedControlItem = /*#__PURE__*/ forwardRef(({ aria, disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-segmented-control-item');
     const propsToSync = [aria, disabled, icon, iconSource, label, value];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PSegmentedControlItem = /*#__PURE__*/ forwardRef(({ aria, disabled = false
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/segmented-control.wrapper.d.ts

@@ -38,7 +38,7 @@ export type PSegmentedControlProps = BaseProps & {
      */
     value?: string | number;
 };
-export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
      */

package/esm/lib/components/segmented-control.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', disabled = false, form, name, onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
@@ -16,7 +16,6 @@ const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns =
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/select-option.wrapper.d.ts

@@ -9,7 +9,7 @@ export type PSelectOptionProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PSelectOption: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSelectOption: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the option.
      */

package/esm/lib/components/select-option.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 
 const PSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-select-option');
     const propsToSync = [disabled, value];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PSelectOption = /*#__PURE__*/ forwardRef(({ disabled = false, value, class
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/select-wrapper.wrapper.d.ts

@@ -38,7 +38,7 @@ export type PSelectWrapperProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The description text.
      */

package/esm/lib/components/select-wrapper.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PSelectWrapper = /*#__PURE__*/ forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-select-wrapper');
     const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PSelectWrapper = /*#__PURE__*/ forwardRef(({ description = '', dropdownDir
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/select.wrapper.d.ts

@@ -54,7 +54,7 @@ export type PSelectProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PSelect: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSelect: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The description text.
      */

package/esm/lib/components/select.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-select');
     const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
@@ -15,7 +15,6 @@ const PSelect = /*#__PURE__*/ forwardRef(({ description = '', disabled = false,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/spinner.wrapper.d.ts

@@ -14,7 +14,7 @@ export type PSpinnerProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PSpinner: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSpinner: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/esm/lib/components/spinner.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../
 import { syncRef } from '../../utils.mjs';
 
 const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-spinner');
     const propsToSync = [aria, size, theme || useTheme()];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', theme, classN
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/stepper-horizontal-item.wrapper.d.ts

@@ -10,7 +10,7 @@ export type PStepperHorizontalItemProps = BaseProps & {
      */
     state?: StepperHorizontalItemState;
 };
-export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
      */

package/esm/lib/components/stepper-horizontal-item.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 
 const PStepperHorizontalItem = /*#__PURE__*/ forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-stepper-horizontal-item');
     const propsToSync = [disabled, state];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PStepperHorizontalItem = /*#__PURE__*/ forwardRef(({ disabled = false, sta
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/stepper-horizontal.wrapper.d.ts

@@ -18,7 +18,7 @@ export type PStepperHorizontalProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active step is changed.
      */

package/esm/lib/components/stepper-horizontal.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'stepChange', onStepChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-stepper-horizontal');
@@ -16,7 +16,6 @@ const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, onUpdate, s
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/switch.wrapper.d.ts

@@ -38,7 +38,7 @@ export type PSwitchProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PSwitch: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSwitch: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aligns the label.
      */

package/esm/lib/components/switch.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PSwitch = /*#__PURE__*/ forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'switchChange', onSwitchChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-switch');
@@ -16,7 +16,6 @@ const PSwitch = /*#__PURE__*/ forwardRef(({ alignLabel = 'end', checked = false,
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-body.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
 export type PTableBodyProps = BaseProps & {};
-export declare const PTableBody: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTableBody: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/table-body.wrapper.mjs

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

package/esm/lib/components/table-cell.wrapper.d.ts

@@ -5,7 +5,7 @@ export type PTableCellProps = BaseProps & {
      */
     multiline?: boolean;
 };
-export declare const PTableCell: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTableCell: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays slotted text multiline or forced into a single line.
      */

package/esm/lib/components/table-cell.wrapper.mjs

@@ -5,14 +5,13 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 
 const PTableCell = /*#__PURE__*/ forwardRef(({ multiline = false, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-cell');
     useBrowserLayoutEffect(() => {
         elementRef.current.multiline = multiline;
     }, [multiline]);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-head-cell.wrapper.d.ts

@@ -14,7 +14,7 @@ export type PTableHeadCellProps = BaseProps & {
      */
     sort?: TableHeadCellSort;
 };
-export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
      */

package/esm/lib/components/table-head-cell.wrapper.mjs

@@ -5,7 +5,7 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 
 const PTableHeadCell = /*#__PURE__*/ forwardRef(({ hideLabel = false, multiline = false, sort, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-head-cell');
     const propsToSync = [hideLabel, multiline, sort];
     useBrowserLayoutEffect(() => {
@@ -14,7 +14,6 @@ const PTableHeadCell = /*#__PURE__*/ forwardRef(({ hideLabel = false, multiline
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-head-row.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
 export type PTableHeadRowProps = BaseProps & {};
-export declare const PTableHeadRow: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTableHeadRow: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/table-head-row.wrapper.mjs

@@ -5,11 +5,10 @@ import { usePrefix, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
 const PTableHeadRow = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-head-row');
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-head.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
 export type PTableHeadProps = BaseProps & {};
-export declare const PTableHead: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTableHead: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/table-head.wrapper.mjs

@@ -5,11 +5,10 @@ import { usePrefix, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
 const PTableHead = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-head');
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table-row.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
 export type PTableRowProps = BaseProps & {};
-export declare const PTableRow: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTableRow: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/table-row.wrapper.mjs

@@ -5,11 +5,10 @@ import { usePrefix, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
 const PTableRow = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-table-row');
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };

package/esm/lib/components/table.wrapper.d.ts

@@ -18,7 +18,7 @@ export type PTableProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PTable: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTable: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
      */

package/esm/lib/components/table.wrapper.mjs

@@ -5,7 +5,7 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 
 const PTable = /*#__PURE__*/ forwardRef(({ caption, onSortingChange, onUpdate, theme, className, ...rest }, ref) => {
-    const elementRef = useRef();
+    const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'sortingChange', onSortingChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-table');
@@ -16,7 +16,6 @@ const PTable = /*#__PURE__*/ forwardRef(({ caption, onSortingChange, onUpdate, t
     }, propsToSync);
     const props = {
         ...rest,
-        hidden: rest.hidden ? "" : undefined,
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };