@porsche-design-system/components-react 3.20.0 → 3.21.0-rc.0

package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs

@@ -4554,7 +4554,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
     const { textColor: textColorDark, borderColor: borderColorDark, borderColorHover: borderColorHoverDark, backgroundColor: backgroundColorDark, backgroundColorHover: backgroundColorHoverDark, } = getVariantColors(variant, 'dark');
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
-    const scalingVar = `var(${cssVariableInternalScaling}, ${compact ? 'calc(4 / 13)' : 1})`; // Compact mode needs to have 4px paddingBlock thus this scaling factor
+    const scalingVar = `var(${cssVariableInternalScaling}, var(--p-internal-scaling-factor))`;
     const borderCompensation = variant === 'ghost' ? `+ ${borderWidthBase}` : ''; // Compensate for missing border in ghost variant (Fixes border backdrop-filter blur rendering issue in safari)
     const paddingBlock = `calc(${scalingVar} * 0.8125 * ${SCALING_BASE_VALUE} ${borderCompensation})`; // 0.8125 * SCALING_BASE_VALUE corresponds to 13px
     const paddingInline = `max(calc(${scalingVar} * 1.625 * ${SCALING_BASE_VALUE} ${borderCompensation}), ${variant === 'ghost' ? '6px' : '4px'})`; // 1.625 * SCALING_BASE_VALUE corresponds to 26px
@@ -4593,6 +4593,9 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             transform: 'translate3d(0,0,0)', // creates new stacking context (for slotted anchor + focus)
             backgroundColor,
             color: textColor,
+            ...buildResponsiveStyles(compact, (compactValue) => ({
+                '--p-internal-scaling-factor': compactValue ? 'calc(4 / 13)' : 1, // Compact mode needs to have 4px paddingBlock thus this scaling factor
+            })),
             transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
             ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                 padding: hideLabelValue ? paddingBlock : `${paddingBlock} ${paddingInline}`,
@@ -6632,6 +6635,7 @@ const getScrollerJssStyle = (position, theme) => {
     };
     return {
         position: 'absolute',
+        isolation: 'isolate', // creates new stacking context to show scrollbars on top of header/footer areas (on iOS/iPadOS)
         display: 'grid',
         ...(position === 'fullscreen'
             ? {
@@ -6650,10 +6654,11 @@ const getScrollerJssStyle = (position, theme) => {
         }),
     };
 };
+const dialogPaddingBlock = `calc(${spacingFluidSmall} + ${spacingFluidMedium})`;
 const dialogGridJssStyle = {
     display: 'grid',
     gridTemplate: `auto/${spacingFluidSmall} auto ${spacingFluidSmall}`,
-    paddingBlock: `calc(${spacingFluidSmall} + ${spacingFluidMedium})`,
+    paddingBlock: dialogPaddingBlock,
     rowGap: spacingFluidMedium,
     columnGap: `calc(${spacingFluidLarge} - ${spacingFluidSmall})`,
     alignContent: 'flex-start',
@@ -6680,25 +6685,15 @@ const getDialogTransitionJssStyle = (isVisible, slideIn) => {
             ? {
                 opacity: 1,
                 transform: 'initial',
-                // we need to ensure that the elements inside, which get auto focused by `.showModal()`, to always be in the
-                // viewport (or off the view on the start-hand side) before the dialog transition starts otherwise the transition
-                // won't work in all cases, e.g. `dir="rtl"` and `<p-flyout position="end" />`. Because auto focus would force the
-                // focused elements to be rendered in the viewport immediately and ignore the transition.
-                ...(slideIn === '<' && {
-                    marginInlineEnd: 0,
-                }),
             }
             : {
                 opacity: 0,
-                ...(slideIn === '<' && {
-                    marginInlineEnd: '200vw',
-                }),
                 transform: slideIn === '^' ? 'translateY(25vh)' : `translateX(${slideIn === '>' ? '-' : ''}100%)`,
                 '&:dir(rtl)': {
                     transform: slideIn === '^' ? 'translateY(25vh)' : `translateX(${slideIn === '>' ? '' : '-'}100%)`,
                 },
             }),
-        transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}, margin-inline-end 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '1ms' : motionDurationMap[duration]})`,
+        transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
     };
 };
 const getDialogStickyAreaJssStyle = (area, theme) => {
@@ -6732,8 +6727,9 @@ const getDialogStickyAreaJssStyle = (area, theme) => {
 const cssVariableWidth$2 = '--p-flyout-width';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter, theme) => {
+const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
+    const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
         '@global': {
             ':host': {
@@ -6753,12 +6749,20 @@ const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                 '&:not([name])': {
                     gridColumn: '2/3',
                     zIndex: 0, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                    ...(isFooterFixed &&
+                        hasHeader && {
+                        gridRow: 2,
+                    }),
                 },
                 ...(hasHeader && {
                     '&[name=header]': {
                         ...getDialogStickyAreaJssStyle('header', theme),
                         gridColumn: '1/-1',
                         zIndex: 3, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                        ...(isFooterFixed && {
+                            gridRow: 1,
+                        }),
+                        marginBlockStart: 0,
                     },
                 }),
                 ...(hasFooter && {
@@ -6766,6 +6770,12 @@ const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                         ...getDialogStickyAreaJssStyle('footer', theme),
                         gridColumn: '1/-1',
                         zIndex: 2, // controls layering + creates new stacking context (prevents content within to be above other dialog areas)
+                        ...(isFooterFixed && {
+                            gridRow: hasHeader ? 3 : 2,
+                            ...(!hasSubFooter && {
+                                marginBlockEnd: '.3px', // lets the footer shadow disappear when flyout is scrolled to the bottom
+                            }),
+                        }),
                     },
                 }),
                 ...(hasSubFooter && {
@@ -6793,6 +6803,22 @@ const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             width: `var(${cssVariableWidth$2},auto)`,
             minWidth: '320px',
             maxWidth: `var(${cssVariableMaxWidth},1180px)`,
+            ...(hasHeader && {
+                paddingBlockStart: 0,
+            }),
+            ...(isFooterFixed &&
+                !hasSubFooter && {
+                paddingBlockEnd: 0,
+            }),
+            ...(isFooterFixed && {
+                gridTemplateRows: hasHeader ? 'auto 1fr auto' : '1fr',
+                '&::before': {
+                    content: '""',
+                    minHeight: hasHeader ? '100dvh' : `calc(100dvh - ${dialogPaddingBlock})`,
+                    gridArea: `1/1/${hasHeader ? '4' : '3'}/-1`,
+                    pointerEvents: 'none',
+                },
+            }),
         },
         dismiss: {
             ...dismissButtonJssStyle,
@@ -6802,7 +6828,7 @@ const getComponentCss$R = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
             insetBlockStart: spacingFluidSmall,
             insetInlineEnd: spacingFluidSmall,
             marginBlockStart: `calc(${spacingFluidMedium} * -1)`,
-            justifySelf: 'flex-end',
+            placeSelf: 'flex-start flex-end',
         },
     });
 };
@@ -7833,7 +7859,7 @@ const getComponentCss$E = (isOpen, backdrop, fullscreen, hasDismissButton, hasHe
                 insetBlockStart: spacingFluidSmall,
                 marginBlockStart: `calc(${spacingFluidMedium} * -1)`,
                 marginInlineEnd: spacingFluidSmall,
-                justifySelf: 'flex-end',
+                placeSelf: 'flex-start flex-end',
             },
         }),
     });
@@ -8118,9 +8144,7 @@ const getUnitCounterJssStyle = (isDisabled, theme) => {
     };
 };
 
-const INTERNAL_MULTI_SELECT_SLOT = 'internal-select';
-
-const getComponentCss$B = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
+const getComponentCss$B = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme) => {
     const { contrastHighColor } = getThemedColors(theme);
     const { contrastHighColor: contrastHighColorDark } = getThemedColors('dark');
     return getCss({
@@ -8133,15 +8157,6 @@ const getComponentCss$B = (direction, isOpen, isDisabled, hideLabel, state, isWi
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            ...(isWithinForm &&
-                addImportantToEachRule({
-                    [`::slotted([slot=${INTERNAL_MULTI_SELECT_SLOT}])`]: {
-                        position: 'absolute',
-                        opacity: 0,
-                        height: '0px',
-                        bottom: 0,
-                    },
-                })),
             // TODO: re-use select-wrapper-style
             input: getInputStyles(isDisabled, direction, isOpen, state, theme),
         },
@@ -8150,9 +8165,6 @@ const getComponentCss$B = (direction, isOpen, isDisabled, hideLabel, state, isWi
             gap: spacingStaticXSmall,
             // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
             minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(2)})`,
-            ...(isWithinForm && {
-                position: 'relative', // Necessary for native HTML validation box positioning (internal-select)
-            }),
         },
         wrapper: {
             position: 'relative',
@@ -9582,15 +9594,13 @@ const getComponentCss$q = (isDisabled, hasCustomDropdown, hideLabel, state, them
     });
 };
 
-const INTERNAL_SELECT_SLOT = 'internal-select';
-
 const cssVarBackgroundColor = '--p-select-background-color';
 const cssVarTextColor = '--p-select-text-color';
 const cssVarBorderColor = '--p-select-border-color';
 const cssVarIconFilter = '--p-select-icon-filter';
 const cssVarBackgroundColorFocus = '--p-select-focus-background-color';
 const cssVarBorderColorFocus = '--p-select-focus-border-color';
-const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isWithinForm, isNativePopoverCase, theme) => {
+const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isNativePopoverCase, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -9601,15 +9611,6 @@ const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isWi
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
-            ...(isWithinForm &&
-                addImportantToEachRule({
-                    [`::slotted([slot=${INTERNAL_SELECT_SLOT}])`]: {
-                        position: 'absolute',
-                        opacity: 0,
-                        height: '0px',
-                        bottom: 0,
-                    },
-                })),
             // TODO: re-use select-wrapper-style
             button: getButtonStyles(isDisabled, direction, isOpen, state, theme),
         },
@@ -9618,9 +9619,6 @@ const getComponentCss$p = (direction, isOpen, isDisabled, hideLabel, state, isWi
             gap: spacingStaticXSmall,
             // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
             minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(1)})`,
-            ...(isWithinForm && {
-                position: 'relative', // Necessary for native HTML validation box positioning (internal-select)
-            }),
         },
         wrapper: {
             position: 'relative',

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3658,8 +3658,6 @@ const buildImgSrc = (innerManifest) => `${getCDNBaseURL()}/marque/${innerManifes
 const getSvgUrl = (model) => {
     return `${getCDNBaseURL()}/model-signatures/${MODEL_SIGNATURES_MANIFEST[model].src}`;
 };
-
-const INTERNAL_MULTI_SELECT_SLOT = 'internal-select';
 const getSelectedOptions = (options) => options.filter((option) => option.selected);
 const getSelectedOptionValues = (options) => options.filter((option) => option.selected).map((option) => option.value);
 exports.ItemType = void 0;
@@ -3834,8 +3832,6 @@ const isCustomDropdown = (filter, native) => {
         return !isTouchDevice();
     }
 };
-
-const INTERNAL_SELECT_SLOT = 'internal-select';
 const getSelectedOptionString = (options) => options.find((option) => option.selected)?.textContent ?? '';
 const isStateCompleteOrWarning = (state) => {
     return state === 'complete' || state === 'warning';
@@ -3881,8 +3877,6 @@ const getTextTagType = (host, tag) => {
 exports.DISPLAY_TAGS = DISPLAY_TAGS;
 exports.HEADING_TAGS = HEADING_TAGS;
 exports.HEADLINE_TAGS = HEADLINE_TAGS;
-exports.INTERNAL_MULTI_SELECT_SLOT = INTERNAL_MULTI_SELECT_SLOT;
-exports.INTERNAL_SELECT_SLOT = INTERNAL_SELECT_SLOT;
 exports.TEXT_TAGS = TEXT_TAGS;
 exports._hasShowPickerSupport = _hasShowPickerSupport;
 exports.anchorSlot = anchorSlot;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/accordion.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/banner.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/button-group.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/button-pure.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/button-tile.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/button.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/checkbox-wrapper.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/checkbox.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/content-wrapper.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/crest.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/display.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/divider.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/fieldset-wrapper.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/fieldset.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/flex-item.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/flex.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/flyout-multilevel-item.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/flyout-multilevel.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/flyout.wrapper.cjs

@@ -7,29 +7,30 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var flyout = require('../dsr-components/flyout.cjs');
 
-const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, children, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, children, ...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,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(flyout.DSRFlyout, { aria, disableBackdropClick, open, position, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(flyout.DSRFlyout, { aria, disableBackdropClick, footerBehavior, open, position, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',
+        hidden: rest.hidden ? "" : undefined,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/grid-item.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/grid.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/heading.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/headline.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/icon.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/inline-notification.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link-pure.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link-social.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-model-signature.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-product.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/marque.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/modal.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/model-signature.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/multi-select-option.wrapper.cjs

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