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

package/esm/lib/types.d.ts

@@ -676,6 +676,13 @@ export type ButtonTileSize = TileSize;
 export type ButtonTileBackground = TileBackground;
 export type ButtonTileWeight = TileWeight;
 export type ButtonTileAlign = TileAlign;
+declare const CANVAS_SIDEBAR_WIDTHS: readonly [
+    "medium",
+    "large"
+];
+export type CanvasSidebarWidth = (typeof CANVAS_SIDEBAR_WIDTHS)[number];
+export type CanvasSidebarStartWidth = CanvasSidebarWidth;
+export type CanvasSidebarEndWidth = CanvasSidebarWidth;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"
@@ -857,16 +864,16 @@ declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
-declare const FLYOUT_NAVIGATION_ARIA_ATTRIBUTES: readonly [
+declare const FLYOUT_MULTILEVEL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
-export type FlyoutNavigationAriaAttribute = (typeof FLYOUT_NAVIGATION_ARIA_ATTRIBUTES)[number];
-export type FlyoutNavigationUpdate = {
+export type FlyoutMultilevelAriaAttribute = (typeof FLYOUT_MULTILEVEL_ARIA_ATTRIBUTES)[number];
+export type FlyoutMultilevelUpdate = {
     activeIdentifier: string;
 };
 /** @deprecated */
-export type FlyoutNavigationUpdateEvent = FlyoutNavigationUpdate;
-export type FlyoutNavigationUpdateEventDetail = FlyoutNavigationUpdateEvent;
+export type FlyoutMultilevelUpdateEvent = FlyoutMultilevelUpdate;
+export type FlyoutMultilevelUpdateEventDetail = FlyoutMultilevelUpdateEvent;
 declare const GRID_DIRECTIONS: readonly [
     "row",
     "row-reverse",
@@ -1190,6 +1197,10 @@ export type SegmentedControlUpdateEventDetail = SegmentedControlUpdateEvent;
 declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
 export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
 export type SegmentedControlItemIcon = LinkButtonIconName;
+declare const SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export type SegmentedControlItemAriaAttribute = (typeof SEGMENTED_CONTROL_ITEM_ARIA_ATTRIBUTES)[number];
 export type SelectState = FormState;
 export type SelectDropdownDirection = SelectComponentsDropdownDirection;
 export type SelectUpdateEventDetail = {

package/esm/public-api.mjs

@@ -5,6 +5,7 @@ export { PButton } from './lib/components/button.wrapper.mjs';
 export { PButtonGroup } from './lib/components/button-group.wrapper.mjs';
 export { PButtonPure } from './lib/components/button-pure.wrapper.mjs';
 export { PButtonTile } from './lib/components/button-tile.wrapper.mjs';
+export { PCanvas } from './lib/components/canvas.wrapper.mjs';
 export { PCarousel } from './lib/components/carousel.wrapper.mjs';
 export { PCheckboxWrapper } from './lib/components/checkbox-wrapper.wrapper.mjs';
 export { PContentWrapper } from './lib/components/content-wrapper.wrapper.mjs';
@@ -16,8 +17,8 @@ export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.mjs'
 export { PFlex } from './lib/components/flex.wrapper.mjs';
 export { PFlexItem } from './lib/components/flex-item.wrapper.mjs';
 export { PFlyout } from './lib/components/flyout.wrapper.mjs';
-export { PFlyoutNavigation } from './lib/components/flyout-navigation.wrapper.mjs';
-export { PFlyoutNavigationItem } from './lib/components/flyout-navigation-item.wrapper.mjs';
+export { PFlyoutMultilevel } from './lib/components/flyout-multilevel.wrapper.mjs';
+export { PFlyoutMultilevelItem } from './lib/components/flyout-multilevel-item.wrapper.mjs';
 export { PGrid } from './lib/components/grid.wrapper.mjs';
 export { PGridItem } from './lib/components/grid-item.wrapper.mjs';
 export { PHeading } from './lib/components/heading.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.16.0-rc.0",
+  "version": "3.16.0-rc.2",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.16.0-rc.0"
+    "@porsche-design-system/components-js": "3.16.0-rc.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

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

@@ -3668,7 +3668,7 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
             ...isShownJssStyle,
         };
 };
-// TODO: migrate flyout-navigation to use shared backdrop of dialog-styles.ts
+// TODO: migrate flyout-multilevel to use shared backdrop of dialog-styles.ts
 /**
  * Generates JSS styles for a frosted glass background.
  * @param {boolean} isVisible - Determines if the frosted glass effect is visible.
@@ -4086,7 +4086,7 @@ const formatObjectOutput = (value) => {
 'value, ' +
     formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
 
-const getComponentCss$15 = (size, compact, open, theme, sticky) => {
+const getComponentCss$16 = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4255,7 +4255,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$14 = (isOpen) => {
+const getComponentCss$15 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4326,7 +4326,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$13 = (direction) => {
+const getComponentCss$14 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4478,7 +4478,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$12 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$13 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4656,7 +4656,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$11 = (isDisabledOrLoading, ...args) => {
+const getComponentCss$12 = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4780,7 +4780,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$10 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$11 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4835,6 +4835,96 @@ const getComponentCss$10 = (icon, iconSource, variant, hideLabel, disabled, load
     }));
 };
 
+const cssVariableSidebarStartWidth = '--p-canvas-sidebar-start-width';
+const cssVariableSidebarEndWidth = '--p-canvas-sidebar-end-width';
+// TODO: maybe default grid gap would also work
+const gridProductiveGap = gridGap.replace('36px', '24px');
+const mediaQueryDesktopView = getMediaQueryMin('m');
+const sidebarWidths = {
+    medium: '320px',
+    large: '480px', // TODO: won't work at viewport 1000px when both sidebars are opened
+};
+const getComponentCss$10 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ':is(header, main, footer, aside)': {
+                padding: gridProductiveGap,
+                boxSizing: 'border-box',
+                zIndex: 0,
+            },
+            header: {
+                gridArea: 'header',
+                position: 'sticky',
+                top: 0,
+                zIndex: 1,
+            },
+            main: {
+                gridArea: 'main',
+                '--pds-grid-span-full': 'span 6',
+                '--pds-grid-span-one-half': 'span 3',
+                '--pds-grid-span-one-third': 'span 2',
+                '--pds-grid-span-two-thirds': 'span 4',
+                display: 'grid',
+                gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
+                gap: gridProductiveGap,
+                alignContent: 'flex-start',
+                [mediaQueryDesktopView]: {
+                    '--pds-grid-span-full': 'span 12',
+                    '--pds-grid-span-one-half': 'span 6',
+                    '--pds-grid-span-one-third': 'span 4',
+                    '--pds-grid-span-two-thirds': 'span 8',
+                    gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
+                },
+            },
+            footer: {
+                gridArea: 'footer',
+            },
+            aside: {
+                // TODO: box-shadows or colored surface must be defined, design is missing
+                position: 'relative',
+                transition: getTransition('margin'),
+                '&:first-of-type': {
+                    gridArea: 'sidebar-start',
+                    width: `var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]})`,
+                    marginInlineStart: isSidebarStartOpen
+                        ? 0
+                        : `calc(var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]}) * -1)`,
+                },
+                '&:last-of-type': {
+                    gridArea: 'sidebar-end',
+                    width: `var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]})`,
+                    marginInlineEnd: isSidebarEndOpen
+                        ? 0
+                        : `calc(var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]}) * -1)`,
+                },
+            },
+        },
+        canvas: {
+            display: 'grid',
+            gridTemplateRows: 'auto minmax(0, 1fr) auto',
+            gridTemplateAreas: '"header" "main" "footer"',
+            minWidth: '320px',
+            minHeight: '100dvh',
+            [mediaQueryDesktopView]: {
+                gridTemplate: 'auto minmax(0, 1fr) auto / auto minmax(0, 1fr) auto',
+                gridTemplateAreas: '"header header header" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
+            },
+        },
+        close: {
+            // TODO: must be positioned properly, design is missing
+            position: 'absolute',
+            inset: `${spacingStaticXSmall} ${spacingStaticXSmall} auto auto`,
+        },
+    });
+};
+
 const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
 const carouselTransitionDuration = motionDurationModerate;
 const paginationInfiniteStartCaseClass = 'pagination--infinite';
@@ -5699,8 +5789,8 @@ const getFlyoutDialogResetJssStyle = () => {
     };
 };
 
-const cssVariableVisibility = '--p-internal-flyout-navigation-visibility';
-const cssVariableVisibilityTransitionDuration = '--p-internal-flyout-navigation-visibility-transition-duration';
+const cssVariableVisibility = '--p-internal-flyout-multilevel-visibility';
+const cssVariableVisibilityTransitionDuration = '--p-internal-flyout-multilevel-visibility-transition-duration';
 const frostedGlassHeaderHeight = '4rem';
 const frostedGlassBackgroundColorLight$1 = 'rgba(255, 255, 255, 0.79)';
 const frostedGlassBackgroundColorDark$1 = 'rgba(14, 14, 18, 0.79)';
@@ -5763,7 +5853,7 @@ const getComponentCss$R = (isPrimaryScrollerVisible, isSecondaryScrollerVisible,
         scroller: {
             gridArea: '1/1',
             overflow: 'auto',
-            // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-navigation is closed
+            // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-multilevel is closed
             // on mobile we need to decide if secondary scroller needs to be visible or not, on desktop it's not necessary but also doesn't harm
             visibility: `var(${cssVariableVisibility},${isSecondaryScrollerVisible ? 'hidden' : 'inherit'})`,
             transition: `${getTransition('left', 'long', isSecondaryScrollerVisible ? 'in' : 'out')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${!isPrimaryScrollerVisible || isSecondaryScrollerVisible ? motionDurationLong : '0s'})`,
@@ -5936,13 +6026,13 @@ const getComponentCss$Q = (isSecondaryScrollerVisible, theme) => {
         scroller: {
             position: 'fixed',
             inset: 0,
-            // "cssVariableTransitionDuration" ensures closing animation of secondary scroller is given when whole flyout-navigation gets closed
-            // "cssVariableVisibility" ensures secondary scroller is not tabbable when whole flyout-navigation is closed
+            // "cssVariableTransitionDuration" ensures closing animation of secondary scroller is given when whole flyout-multilevel gets closed
+            // "cssVariableVisibility" ensures secondary scroller is not tabbable when whole flyout-multilevel is closed
             ...(isSecondaryScrollerVisible
                 ? {
                     zIndex: 2,
                     transform: 'translate3d(0, 0, 0)',
-                    // TODO: Should be visibility: inherit to allow overwriting but currently not possible since it would inherit from the scroller of the p-flyout-navigation itself, which is hidden on mobile
+                    // TODO: Should be visibility: inherit to allow overwriting but currently not possible since it would inherit from the scroller of the p-flyout-multilevel itself, which is hidden on mobile
                     visibility: `var(${cssVariableVisibility},visible)`,
                     transition: `${getTransition('transform', 'long', 'in')}, visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},0s))`,
                 }
@@ -10230,13 +10320,13 @@ const getComponentCss$1 = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
-                position: 'fixed',
+                position: 'fixed', // fallback for older browsers without native `popover` support
                 insetInline: gridExtendedOffsetBase,
                 // Needs a not overridable internal css variable to cover default position depending on viewport size and to handle animation properly.
                 // In addition, a public css variable can be passed to overwrite the default position.
                 [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 56px)`,
                 bottom: `var(${cssVariablePositionBottomInternal})`,
-                zIndex: TOAST_Z_INDEX,
+                zIndex: TOAST_Z_INDEX, // fallback for older browsers without native `popover` support
                 [getMediaQueryMin('s')]: {
                     insetInline: '64px auto',
                     maxWidth: 'min(42rem, calc(100vw - 64px * 2))',
@@ -10312,12 +10402,13 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$15;
-exports.getBannerCss = getComponentCss$14;
-exports.getButtonCss = getComponentCss$10;
-exports.getButtonGroupCss = getComponentCss$13;
-exports.getButtonPureCss = getComponentCss$12;
-exports.getButtonTileCss = getComponentCss$11;
+exports.getAccordionCss = getComponentCss$16;
+exports.getBannerCss = getComponentCss$15;
+exports.getButtonCss = getComponentCss$11;
+exports.getButtonGroupCss = getComponentCss$14;
+exports.getButtonPureCss = getComponentCss$13;
+exports.getButtonTileCss = getComponentCss$12;
+exports.getCanvasCss = getComponentCss$10;
 exports.getCarouselCss = getComponentCss$$;
 exports.getCheckboxWrapperCss = getComponentCss$_;
 exports.getContentWrapperCss = getComponentCss$Z;
@@ -10329,8 +10420,8 @@ exports.getFieldsetWrapperCss = getComponentCss$V;
 exports.getFlexCss = getComponentCss$S;
 exports.getFlexItemCss = getComponentCss$T;
 exports.getFlyoutCss = getComponentCss$P;
-exports.getFlyoutNavigationCss = getComponentCss$R;
-exports.getFlyoutNavigationItemCss = getComponentCss$Q;
+exports.getFlyoutMultilevelCss = getComponentCss$R;
+exports.getFlyoutMultilevelItemCss = getComponentCss$Q;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;

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

@@ -3591,6 +3591,64 @@ const isScrollable = (isPrevHidden, isNextHidden) => {
     return !(isPrevHidden && isNextHidden);
 };
 
+/*
+ Stencil Client Platform v4.18.3 | MIT Licensed | https://stenciljs.com
+ */
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/utils/result.ts
+var result_exports = {};
+__export(result_exports, {
+  err: () => err,
+  map: () => map,
+  ok: () => ok,
+  unwrap: () => unwrap,
+  unwrapErr: () => unwrapErr
+});
+var ok = (value) => ({
+  isOk: true,
+  isErr: false,
+  value
+});
+var err = (value) => ({
+  isOk: false,
+  isErr: true,
+  value
+});
+function map(result, fn) {
+  if (result.isOk) {
+    const val = fn(result.value);
+    if (val instanceof Promise) {
+      return val.then((newVal) => ok(newVal));
+    } else {
+      return ok(val);
+    }
+  }
+  if (result.isErr) {
+    const value = result.value;
+    return err(value);
+  }
+  throw "should never get here";
+}
+var unwrap = (result) => {
+  if (result.isOk) {
+    return result.value;
+  } else {
+    throw result.value;
+  }
+};
+var unwrapErr = (result) => {
+  if (result.isErr) {
+    return result.value;
+  } else {
+    throw result.value;
+  }
+};
+
 /**
  * Checks if the current environment supports the native Popover API.
  *
@@ -3883,10 +3941,10 @@ const isCurrentInput = (index, value, length) => {
     }
     return index === firstWhitespaceIndex; // Some value is entered: set current-input id on the first input element which does not have a value
 };
-
-const getButtonAttributes = (isSelected, isDisabled) => ({
+const getSegmentedControlItemAriaAttributes = (isSelected, isDisabled, ariaProp) => ({
     ...getButtonBaseAriaAttributes(isDisabled, false),
     ...parseAndGetAriaAttributes({ 'aria-pressed': isSelected }),
+    ...parseAndGetAriaAttributes(ariaProp),
 });
 const getIconColor = (isDisabled) => {
     return !isDisabled ? 'primary' : 'contrast-medium';
@@ -4000,7 +4058,6 @@ exports.createRange = createRange;
 exports.crestSize = crestSize;
 exports.displaySizeToTagMap = displaySizeToTagMap;
 exports.getButtonAriaAttributes = getButtonAriaAttributes;
-exports.getButtonAttributes = getButtonAttributes;
 exports.getButtonBaseAriaAttributes = getButtonBaseAriaAttributes;
 exports.getButtonPureAriaAttributes = getButtonPureAriaAttributes;
 exports.getCDNBaseURL = getCDNBaseURL;
@@ -4019,6 +4076,7 @@ exports.getInnerManifest = getInnerManifest;
 exports.getListAriaAttributes = getListAriaAttributes;
 exports.getOptionAriaAttributes = getOptionAriaAttributes;
 exports.getRole = getRole;
+exports.getSegmentedControlItemAriaAttributes = getSegmentedControlItemAriaAttributes;
 exports.getSelectedOptionMap = getSelectedOptionMap;
 exports.getSelectedOptionString = getSelectedOptionString;
 exports.getSelectedOptionValues = getSelectedOptionValues;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/{flyout-navigation-item.wrapper.cjs → flyout-multilevel-item.wrapper.cjs}

@@ -5,11 +5,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
-var flyoutNavigationItem = require('../dsr-components/flyout-navigation-item.cjs');
+var flyoutMultilevelItem = require('../dsr-components/flyout-multilevel-item.cjs');
 
-const PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className, children, ...rest }, ref) => {
+const PFlyoutMultilevelItem = react.forwardRef(({ identifier, label, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
-    const WebComponentTag = hooks.usePrefix('p-flyout-navigation-item');
+    const WebComponentTag = hooks.usePrefix('p-flyout-multilevel-item');
     const propsToSync = [identifier, label];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -24,7 +24,7 @@ const PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(flyoutNavigationItem.DSRFlyoutNavigationItem, { identifier, label, children })),
+                children: (jsxRuntime.jsx(flyoutMultilevelItem.DSRFlyoutMultilevelItem, { identifier, label, children })),
             }
             : {
                 children,
@@ -33,7 +33,8 @@ const PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className,
         class: hooks.useMergedClass(elementRef, className),
         ref: utils.syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 
-exports.PFlyoutNavigationItem = PFlyoutNavigationItem;
+exports.PFlyoutMultilevelItem = PFlyoutMultilevelItem;