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

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

@@ -7,27 +7,28 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var multiSelect = require('../dsr-components/multi-select.cjs');
 
-const PMultiSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, children, ...rest }, ref) => {
+const PMultiSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-multi-select');
-    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(multiSelect.DSRMultiSelect, { description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(multiSelect.DSRMultiSelect, { description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme: theme || hooks.useTheme(), value, 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/optgroup.wrapper.cjs

@@ -27,6 +27,7 @@ const POptgroup = /*#__PURE__*/ react.forwardRef(({ disabled = false, label, cla
                 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/pagination.wrapper.cjs

@@ -28,6 +28,7 @@ const PPagination = /*#__PURE__*/ react.forwardRef(({ activePage = 1, allyLabel,
                 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/pin-code.wrapper.cjs

@@ -28,6 +28,7 @@ const PPinCode = /*#__PURE__*/ react.forwardRef(({ description = '', disabled =
                 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/popover.wrapper.cjs

@@ -27,6 +27,7 @@ const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, description, direction
                 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/radio-button-wrapper.wrapper.cjs

@@ -27,6 +27,7 @@ const PRadioButtonWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false,
                 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/scroller.wrapper.cjs

@@ -27,6 +27,7 @@ const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'cent
                 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/segmented-control-item.wrapper.cjs

@@ -29,6 +29,7 @@ const PSegmentedControlItem = /*#__PURE__*/ react.forwardRef((
                 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/segmented-control.wrapper.cjs

@@ -30,6 +30,7 @@ const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor, col
                 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/select-option.wrapper.cjs

@@ -27,6 +27,7 @@ const PSelectOption = /*#__PURE__*/ react.forwardRef(({ disabled = false, value,
                 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/select-wrapper-dropdown.wrapper.cjs

@@ -27,6 +27,7 @@ const PSelectWrapperDropdown = /*#__PURE__*/ react.forwardRef(({ description, di
                 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/select-wrapper.wrapper.cjs

@@ -27,6 +27,7 @@ const PSelectWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', dropd
                 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/select.wrapper.cjs

@@ -7,27 +7,28 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var select = require('../dsr-components/select.cjs');
 
-const PSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
+const PSelect = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-select');
-    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(select.DSRSelect, { description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(select.DSRSelect, { description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme: theme || hooks.useTheme(), value, 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/spinner.wrapper.cjs

@@ -26,6 +26,7 @@ const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', theme,
                 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/stepper-horizontal-item.wrapper.cjs

@@ -30,6 +30,7 @@ const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef((
                 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/stepper-horizontal.wrapper.cjs

@@ -29,6 +29,7 @@ const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, onUpd
                 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/switch.wrapper.cjs

@@ -29,6 +29,7 @@ const PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'end', checked =
                 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/table-body.wrapper.cjs

@@ -23,6 +23,7 @@ const PTableBody = /*#__PURE__*/ react.forwardRef(({ className, children, ...res
                 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/table-cell.wrapper.cjs

@@ -26,6 +26,7 @@ const PTableCell = /*#__PURE__*/ react.forwardRef(({ multiline = false, classNam
                 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/table-head-cell.wrapper.cjs

@@ -28,6 +28,7 @@ const PTableHeadCell = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, mult
                 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/table-head-row.wrapper.cjs

@@ -23,6 +23,7 @@ const PTableHeadRow = /*#__PURE__*/ react.forwardRef(({ className, 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/table-head.wrapper.cjs

@@ -23,6 +23,7 @@ const PTableHead = /*#__PURE__*/ react.forwardRef(({ className, children, ...res
                 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/table-row.wrapper.cjs

@@ -23,6 +23,7 @@ const PTableRow = /*#__PURE__*/ react.forwardRef(({ className, children, ...rest
                 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/table.wrapper.cjs

@@ -29,6 +29,7 @@ const PTable = /*#__PURE__*/ react.forwardRef(({ caption, onSortingChange, onUpd
                 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/tabs-bar.wrapper.cjs

@@ -29,6 +29,7 @@ const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, gradientColor
                 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/tabs-item.wrapper.cjs

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

@@ -29,6 +29,7 @@ const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, gradientColo
                 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/tag-dismissible.wrapper.cjs

@@ -27,6 +27,7 @@ const PTagDismissible = /*#__PURE__*/ react.forwardRef(({ aria, color = 'backgro
                 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/tag.wrapper.cjs

@@ -27,6 +27,7 @@ const PTag = /*#__PURE__*/ react.forwardRef(({ color = 'background-surface', com
                 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/text-field-wrapper.wrapper.cjs

@@ -28,6 +28,7 @@ const PTextFieldWrapper = /*#__PURE__*/ react.forwardRef(({ actionIcon, actionLo
                 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/text-list-item.wrapper.cjs

@@ -23,6 +23,7 @@ const PTextListItem = /*#__PURE__*/ react.forwardRef(({ className, 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/text-list.wrapper.cjs

@@ -27,6 +27,7 @@ const PTextList = /*#__PURE__*/ react.forwardRef(({ listType, orderType, theme,
                 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/text.wrapper.cjs

@@ -27,6 +27,7 @@ const PText = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primar
                 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/textarea-wrapper.wrapper.cjs

@@ -27,6 +27,7 @@ const PTextareaWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', hid
                 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/textarea.wrapper.cjs

@@ -30,6 +30,7 @@ const PTextarea = /*#__PURE__*/ react.forwardRef(({ autoComplete = '', descripti
                 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/toast.wrapper.cjs

@@ -26,6 +26,7 @@ const PToast = /*#__PURE__*/ react.forwardRef(({ theme, className, ...rest }, re
                 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/wordmark.wrapper.cjs

@@ -26,6 +26,7 @@ const PWordmark = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'small',
                 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/dsr-components/canvas.cjs

@@ -43,11 +43,11 @@ class DSRCanvas extends react.Component {
                                             // "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, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("header", { className: "sidebar__header sidebar__header--start", children: [jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) })] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })] }) })), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar sidebar--end", 
+                                            inert: this.props.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsxs("div", { className: "sidebar__header sidebar__header--start", children: [jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasTitle && (jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }))] }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })] }) })), hasSidebarEnd && this.props.isMediaQueryM && (jsxRuntime.jsx("aside", { className: "sidebar 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, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsx("header", { className: "sidebar__header sidebar__header--end", children: jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }) }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] })] }), this.props.children] }));
+                                            inert: this.props.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsxs("div", { className: "sidebar__scroller", children: [jsxRuntime.jsx("div", { className: "sidebar__header sidebar__header--end", children: jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }) }), jsxRuntime.jsx("div", { className: "sidebar__content", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) })] }) })), hasBackground && jsxRuntime.jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxRuntime.jsxs(flyout_wrapper.PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsxRuntime.jsx("h2", { slot: "header", children: jsxRuntime.jsx("slot", { name: "title" }) })), jsxRuntime.jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -21,10 +21,14 @@ class DSRCheckbox extends react.Component {
     // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
     // In the React wrapper, all props are synced as properties on the element ref, so reflecting "name" as an attribute ensures it is properly handled in the form submission process.
     internals;
+    defaultChecked;
     checkboxInputElement;
     formResetCallback() {
-        this.props.internals.setValidity({});
-        this.props.internals.setFormValue(undefined);
+        this.props.internals.setFormValue(this.props.defaultChecked ? this.props.value : undefined);
+    }
+    formDisabledCallback() {
+    }
+    formStateRestoreCallback() {
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);

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

@@ -36,7 +36,7 @@ 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), hasHeader, hasFooter, hasSubFooter, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutCss(this.props.open, (positionDeprecationMap[this.props.position] || this.props.position), hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, 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

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

@@ -20,6 +20,14 @@ var button_wrapper = require('../components/button.wrapper.cjs');
  */
 class DSRModal extends react.Component {
     host;
+    dialog;
+    scroller;
+    footer;
+    hasHeader;
+    hasFooter;
+    get hasDismissButton() {
+        return this.props.disableCloseButton ? false : this.props.dismissButton;
+    }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasHeader = (this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) || namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;

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

@@ -26,14 +26,13 @@ class DSRMultiSelect extends react.Component {
     isOpen = false;
     srHighlightedOptionText = '';
     hasFilterResults = true;
-    nativeSelect;
+    internals;
+    defaultValue;
     multiSelectOptions = [];
     multiSelectOptgroups = [];
     inputContainer;
     inputElement;
     listElement;
-    form;
-    isWithinForm;
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
     isNativePopoverCase = false;
     parentTableElement;
@@ -41,19 +40,31 @@ class DSRMultiSelect extends react.Component {
     get currentValue() {
         return utilsEntry.getSelectedOptionValues(this.props.multiSelectOptions);
     }
+    setFormValue(value) {
+        const formData = new FormData();
+        value.forEach((val) => formData.append(this.props.name, val));
+        this.props.internals.setFormValue(formData);
+    }
+    formDisabledCallback() {
+    }
+    formStateRestoreCallback() {
+    }
+    formResetCallback() {
+        this.props.setFormValue(this.props.defaultValue);
+    }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const optionsSelectedId = 'options-selected';
         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)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getMultiSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", 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, { type: "button", 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') && {
                                                     'popover-open': true,
                                                 }),
-                                            }), children: jsxRuntime.jsxs("div", { id: dropdownId, className: "listbox", children: [!this.props.hasFilterResults && (jsxRuntime.jsxs("div", { className: "no-results", "aria-live": "polite", role: "status", children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: "---" }), jsxRuntime.jsx("span", { className: "sr-only", children: "No results found" })] })), jsxRuntime.jsx("slot", {})] }) })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText }), this.props.isWithinForm && jsxRuntime.jsx("slot", { name: utilsEntry.INTERNAL_MULTI_SELECT_SLOT })] })] }), this.props.children] }));
+                                            }), children: jsxRuntime.jsxs("div", { id: dropdownId, className: "listbox", children: [!this.props.hasFilterResults && (jsxRuntime.jsxs("div", { className: "no-results", "aria-live": "polite", role: "status", children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: "---" }), jsxRuntime.jsx("span", { className: "sr-only", children: "No results found" })] })), jsxRuntime.jsx("slot", {})] }) })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), this.props.children] }));
     }
 }
 

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

@@ -24,20 +24,26 @@ class DSRSelect extends react.Component {
     host;
     isOpen = false;
     srHighlightedOptionText = '';
-    nativeSelect;
+    internals;
+    defaultValue;
     comboboxContainer;
     combobox;
     listElement;
     selectOptions = [];
     selectOptgroups = [];
-    form;
-    isWithinForm;
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
     searchString = '';
     searchTimeout = null;
     isNativePopoverCase = false;
     parentTableElement;
     popoverElement;
+    formDisabledCallback() {
+    }
+    formStateRestoreCallback() {
+    }
+    formResetCallback() {
+        this.props.internals.setFormValue(this.props.defaultValue);
+    }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const buttonId = 'value';
@@ -46,14 +52,14 @@ class DSRSelect extends react.Component {
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? stateMessage.messageId : undefined;
         const initialStatusId = 'initial-status';
         const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isWithinForm, this.props.isNativePopoverCase, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", 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: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, label.labelId, ariaDescribedBy, dropdownId), disabled: this.props.disabled, children: utilsEntry.getSelectedOptionString(otherChildren) }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
                                                 popover: 'auto',
                                                 className: 'popover',
                                                 ...(this.props.popoverElement?.matches(':popover-open') && {
                                                     'popover-open': true,
                                                 }),
-                                            }), children: jsxRuntime.jsx("div", { id: dropdownId, className: "listbox", ...utilsEntry.getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: jsxRuntime.jsx("slot", {}) }) })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText }), this.props.isWithinForm && jsxRuntime.jsx("slot", { name: utilsEntry.INTERNAL_SELECT_SLOT })] })] }), this.props.children] }));
+                                            }), children: jsxRuntime.jsx("div", { id: dropdownId, className: "listbox", ...utilsEntry.getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: jsxRuntime.jsx("slot", {}) }) })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), this.props.children] }));
     }
 }
 

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

@@ -20,14 +20,17 @@ class DSRTextarea extends react.Component {
     // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
     // In the React wrapper, all props are synced as properties on the element ref, so reflecting "name" as an attribute ensures it is properly handled in the form submission process.
     internals;
+    defaultValue;
     textAreaElement;
     counterElement;
     hasCounter;
     setCounterAriaTextDebounced = utilsEntry.debounce(() => this.props.setCounterAriaText());
     formResetCallback() {
-        this.props.internals.setValidity({});
-        this.props.internals.setFormValue('');
-        this.props.textAreaElement.value = '';
+        this.props.internals.setFormValue(this.props.defaultValue);
+    }
+    formDisabledCallback() {
+    }
+    formStateRestoreCallback() {
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);