@porsche-design-system/components-react 3.15.2 → 3.16.0-rc.1

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

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

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

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

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

@@ -29,6 +29,7 @@ const PTableBody = react.forwardRef(({ className, children, ...rest }, ref) => {
         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/table-cell.wrapper.cjs

@@ -32,6 +32,7 @@ const PTableCell = react.forwardRef(({ multiline = false, className, children, .
         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/table-head-cell.wrapper.cjs

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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/table-head-row.wrapper.cjs

@@ -29,6 +29,7 @@ const PTableHeadRow = react.forwardRef(({ className, children, ...rest }, ref) =
         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/table-head.wrapper.cjs

@@ -29,6 +29,7 @@ const PTableHead = react.forwardRef(({ className, children, ...rest }, ref) => {
         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/table-row.wrapper.cjs

@@ -29,6 +29,7 @@ const PTableRow = react.forwardRef(({ className, children, ...rest }, ref) => {
         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/table.wrapper.cjs

@@ -35,6 +35,7 @@ const PTable = react.forwardRef(({ caption, onSortingChange, onUpdate, theme, cl
         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/tabs-bar.wrapper.cjs

@@ -35,6 +35,7 @@ const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background
         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/tabs-item.wrapper.cjs

@@ -33,6 +33,7 @@ const PTabsItem = react.forwardRef((
         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/tabs.wrapper.cjs

@@ -35,6 +35,7 @@ const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'backgroun
         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/tag-dismissible.wrapper.cjs

@@ -33,6 +33,7 @@ const PTagDismissible = react.forwardRef(({ aria, color = 'background-surface',
         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/tag.wrapper.cjs

@@ -33,6 +33,7 @@ const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource,
         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/text-field-wrapper.wrapper.cjs

@@ -34,6 +34,7 @@ const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false,
         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/text-list-item.wrapper.cjs

@@ -29,6 +29,7 @@ const PTextListItem = react.forwardRef(({ className, children, ...rest }, ref) =
         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/text-list.wrapper.cjs

@@ -33,6 +33,7 @@ const PTextList = react.forwardRef(({ listType, orderType, theme, type = 'unorde
         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/text.wrapper.cjs

@@ -33,6 +33,7 @@ const PText = react.forwardRef(({ align = 'start', color = 'primary', ellipsis =
         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/textarea-wrapper.wrapper.cjs

@@ -33,6 +33,7 @@ const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false
         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/toast.wrapper.cjs

@@ -31,6 +31,7 @@ const PToast = react.forwardRef(({ theme, className, ...rest }, ref) => {
         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/wordmark.wrapper.cjs

@@ -32,6 +32,7 @@ const PWordmark = react.forwardRef(({ aria, href, size = 'small', target = '_sel
         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/dsr-components/accordion.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -8,6 +8,7 @@ var button_wrapper = require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -0,0 +1,107 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../components/accordion.wrapper.cjs');
+require('../components/banner.wrapper.cjs');
+require('../components/button.wrapper.cjs');
+require('../components/button-group.wrapper.cjs');
+var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
+require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
+require('../components/carousel.wrapper.cjs');
+require('../components/checkbox-wrapper.wrapper.cjs');
+require('../components/content-wrapper.wrapper.cjs');
+require('../components/crest.wrapper.cjs');
+require('../components/display.wrapper.cjs');
+require('../components/divider.wrapper.cjs');
+require('../components/fieldset.wrapper.cjs');
+require('../components/fieldset-wrapper.wrapper.cjs');
+require('../components/flex.wrapper.cjs');
+require('../components/flex-item.wrapper.cjs');
+var flyout_wrapper = require('../components/flyout.wrapper.cjs');
+require('../components/flyout-navigation.wrapper.cjs');
+require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/grid.wrapper.cjs');
+require('../components/grid-item.wrapper.cjs');
+require('../components/heading.wrapper.cjs');
+require('../components/headline.wrapper.cjs');
+require('../components/icon.wrapper.cjs');
+require('../components/inline-notification.wrapper.cjs');
+require('../components/link.wrapper.cjs');
+require('../components/link-pure.wrapper.cjs');
+require('../components/link-social.wrapper.cjs');
+require('../components/link-tile.wrapper.cjs');
+require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
+require('../components/marque.wrapper.cjs');
+require('../components/modal.wrapper.cjs');
+require('../components/model-signature.wrapper.cjs');
+require('../components/multi-select.wrapper.cjs');
+require('../components/multi-select-option.wrapper.cjs');
+require('../components/pagination.wrapper.cjs');
+require('../components/pin-code.wrapper.cjs');
+require('../components/popover.wrapper.cjs');
+require('../components/radio-button-wrapper.wrapper.cjs');
+require('../components/scroller.wrapper.cjs');
+require('../components/segmented-control.wrapper.cjs');
+require('../components/segmented-control-item.wrapper.cjs');
+require('../components/select.wrapper.cjs');
+require('../components/select-option.wrapper.cjs');
+require('../components/select-wrapper.wrapper.cjs');
+require('../components/spinner.wrapper.cjs');
+require('../components/stepper-horizontal.wrapper.cjs');
+require('../components/stepper-horizontal-item.wrapper.cjs');
+require('../components/switch.wrapper.cjs');
+require('../components/table.wrapper.cjs');
+require('../components/table-body.wrapper.cjs');
+require('../components/table-cell.wrapper.cjs');
+require('../components/table-head.wrapper.cjs');
+require('../components/table-head-cell.wrapper.cjs');
+require('../components/table-head-row.wrapper.cjs');
+require('../components/table-row.wrapper.cjs');
+require('../components/tabs.wrapper.cjs');
+require('../components/tabs-bar.wrapper.cjs');
+require('../components/tabs-item.wrapper.cjs');
+require('../components/tag.wrapper.cjs');
+require('../components/tag-dismissible.wrapper.cjs');
+require('../components/text.wrapper.cjs');
+require('../components/text-field-wrapper.wrapper.cjs');
+require('../components/text-list.wrapper.cjs');
+require('../components/text-list-item.wrapper.cjs');
+require('../components/textarea-wrapper.wrapper.cjs');
+require('../components/toast.wrapper.cjs');
+require('../components/wordmark.wrapper.cjs');
+var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
+var minifyCss = require('../../minifyCss.cjs');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+
+/** @experimental */
+class DSRCanvas extends react.Component {
+    host;
+    isDesktopView = false;
+    render() {
+        splitChildren.splitChildren(this.props.children);
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCanvasCss(this.props.sidebarStartOpen, this.props.sidebarStartWidth, this.props.sidebarEndOpen, this.props.sidebarEndWidth)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "canvas", children: [jsxRuntime.jsx("header", { part: "header", children: jsxRuntime.jsx("slot", { name: "header" }) }), jsxRuntime.jsx("main", { part: "main", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx("footer", { part: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) }), this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("aside", { 
+                                                    // "part" is not valid in TS
+                                                    // eslint-disable-next-line
+                                                    /* @ts-ignore */
+                                                    part: "sidebar-start", 
+                                                    // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                                                    // eslint-disable-next-line
+                                                    /* @ts-ignore */
+                                                    inert: this.props.sidebarStartOpen ? null : true, children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", icon: "close", hideLabel: true, children: "Close Sidebar" }), jsxRuntime.jsx("slot", { name: "sidebar-start" })] }), jsxRuntime.jsxs("aside", { 
+                                                    // "part" is not valid in TS
+                                                    // eslint-disable-next-line
+                                                    /* @ts-ignore */
+                                                    part: "sidebar-end", 
+                                                    // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                                                    // eslint-disable-next-line
+                                                    /* @ts-ignore */
+                                                    inert: this.props.sidebarEndOpen ? null : true, children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", icon: "close", hideLabel: true, children: "Close Sidebar" }), jsxRuntime.jsx("slot", { name: "sidebar-end" })] })] }))] }), !this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(flyout_wrapper.PFlyout, { open: this.props.sidebarStartOpen, position: "start", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) }), jsxRuntime.jsx(flyout_wrapper.PFlyout, { open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }))] })] }), this.props.children] }));
+    }
+}
+
+exports.DSRCanvas = DSRCanvas;

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -88,7 +89,11 @@ class DSRFlyoutNavigationItem extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutNavigationItemCss(this.open, this.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.open, aria: { 'aria-expanded': this.open }, theme: this.theme, children: this.props.label }), jsxRuntime.jsxs("div", { className: "scroller", inert: this.open ? null : '', children: [jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "back", type: "button", size: "medium", icon: "arrow-head-left", hideLabel: true, theme: this.theme, children: "Back" }), jsxRuntime.jsx("h2", { className: "heading", children: this.props.label })] }), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) })] })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.open, aria: { 'aria-expanded': this.open }, theme: this.theme, children: this.props.label }), jsxRuntime.jsxs("div", { className: "scroller", 
+                                    // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                                    // eslint-disable-next-line
+                                    /* @ts-ignore */
+                                    inert: this.open ? null : '', children: [jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "back", type: "button", size: "medium", icon: "arrow-head-left", hideLabel: true, theme: this.theme, children: "Back" }), jsxRuntime.jsx("h2", { className: "heading", children: this.props.label })] }), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) })] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -86,7 +87,11 @@ class DSRFlyoutNavigation extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutNavigationCss(this.props.open, !!this.props.activeIdentifier, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("dialog", { inert: this.props.open ? null : '', tabIndex: -1, children: [jsxRuntime.jsx("div", { className: "header", children: jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }) }), jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsx("nav", { className: "content", ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("dialog", { 
+                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                            // eslint-disable-next-line
+                            /* @ts-ignore */
+                            inert: this.props.open ? null : '', tabIndex: -1, children: [jsxRuntime.jsx("div", { className: "header", children: jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", size: "medium", icon: "close", hideLabel: true, theme: this.props.theme, children: "Dismiss flyout" }) }), jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsx("nav", { className: "content", ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -80,11 +81,9 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 class DSRFlyout extends react.Component {
     host;
     dialog;
-    wrapper;
-    dismissBtn;
+    scroller;
     header;
     footer;
-    subFooter;
     hasHeader;
     hasFooter;
     hasSubFooter;
@@ -97,8 +96,16 @@ class DSRFlyout extends react.Component {
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutCss(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasFooter, hasSubFooter, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("dialog", { inert: this.props.open ? null : '', tabIndex: -1, ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: jsxRuntime.jsxs("div", { className: "wrapper", ...(hasSubFooter && { onScroll: this.props.updateShadow }), children: [jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsxRuntime.jsx("slot", { name: "header" })] }, "header"), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("div", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) }, "footer")), hasSubFooter && (jsxRuntime.jsx("div", { className: "sub-footer", children: jsxRuntime.jsx("slot", { name: "sub-footer" }) }, "sub-footer"))] }) })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutCss(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasHeader, hasFooter, hasSubFooter, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("dialog", { 
+                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                            // eslint-disable-next-line
+                            /* @ts-ignore */
+                            inert: this.props.open ? null : '', tabIndex: -1, ...utilsEntry.parseAndGetAriaAttributes({
+                                'aria-modal': true,
+                                'aria-hidden': !this.props.open,
+                                ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
+                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "flyout", children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss flyout" }), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {}), hasFooter && jsxRuntime.jsx("slot", { name: "footer" }), hasSubFooter && jsxRuntime.jsx("slot", { name: "sub-footer" })] }) }) })] }), this.props.children] }));
     }
 }
 

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -8,6 +8,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -81,17 +82,23 @@ class DSRModal extends react.Component {
     host;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0);
+        const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) || namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasDismissButton = this.props.disableCloseButton ? false : this.props.dismissButton;
+        // TODO: why do we validate only when opened?
         if (this.props.open) ;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getModalCss(this.props.open, this.props.backdrop, this.props.fullscreen, hasDismissButton, hasHeader, hasFooter, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: "scroll-container", children: jsxRuntime.jsxs("div", { className: "root", role: "dialog", ...utilsEntry.parseAndGetAriaAttributes({
-                                        'aria-modal': true,
-                                        'aria-label': this.props.heading,
-                                        'aria-hidden': !this.props.open,
-                                        ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                                    }), tabIndex: -1, inert: this.props.open ? null : '', children: [hasDismissButton && (jsxRuntime.jsx("div", { className: "controls", children: jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" }) })), hasHeader && (jsxRuntime.jsx("div", { className: "header", children: this.props.heading ? jsxRuntime.jsx("h2", { children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }) }, "heading")), jsxRuntime.jsx("div", { className: "content", children: jsxRuntime.jsx("slot", {}) }), hasFooter && (jsxRuntime.jsx("div", { className: "footer", children: jsxRuntime.jsx("slot", { name: "footer" }) }, "footer"))] }) }) })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("dialog", { 
+                            // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
+                            // eslint-disable-next-line
+                            /* @ts-ignore */
+                            inert: this.props.open ? null : '', tabIndex: -1, ...utilsEntry.parseAndGetAriaAttributes({
+                                'aria-modal': true,
+                                'aria-label': this.props.heading,
+                                'aria-hidden': !this.props.open,
+                                ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
+                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "modal", children: [hasDismissButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss modal" })), hasHeader &&
+                                            (this.props.heading ? (jsxRuntime.jsx("h2", { children: this.props.heading })) : namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsxRuntime.jsx("slot", { name: "heading" })) : (jsxRuntime.jsx("slot", { name: "header" }))), jsxRuntime.jsx("slot", {}), hasFooter && jsxRuntime.jsx("slot", { name: "footer" })] }) }) })] }), this.props.children] }));
     }
 }
 

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

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

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -104,7 +105,7 @@ class DSRMultiSelect extends react.Component {
         const dropdownId = 'list';
         const inputId = 'filter';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getMultiSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.isNativePopoverCase, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxRuntime.jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [utilsEntry.getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", icon: "close", hideLabel: "true", theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxRuntime.jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [utilsEntry.getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
                                                 popover: 'auto',
                                                 className: 'popover',
                                                 ...(this.props.popoverElement?.matches(':popover-open') && {