@porsche-design-system/components-react 3.24.0 → 3.25.0-rc.0

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var buttonPure = require('../dsr-components/button-pure.cjs');
 
-const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, children, ...rest }, ref) => {
+const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, form, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-pure');
-    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme || hooks.useTheme(), type, underline, value, weight];
+    const propsToSync = [active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, theme || hooks.useTheme(), type, underline, value, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(buttonPure.DSRButtonPure, { active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, name, size, stretch, theme: theme || hooks.useTheme(), type, underline, value, weight, children })),
+                children: (jsxRuntime.jsx(buttonPure.DSRButtonPure, { active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, theme: theme || hooks.useTheme(), type, underline, value, weight, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var button = require('../dsr-components/button.cjs');
 
-const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
+const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disabled = false, form, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button');
-    const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(button.DSRButton, { aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme: theme || hooks.useTheme(), type, value, variant, children })),
+                children: (jsxRuntime.jsx(button.DSRButton, { aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, theme: theme || hooks.useTheme(), type, value, variant, children })),
             }
             : {
                 children,

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

@@ -0,0 +1,40 @@
+"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 sheet = require('../dsr-components/sheet.cjs');
+
+const PSheet = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, dismissButton = true, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, children, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
+    hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
+    hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
+    const WebComponentTag = hooks.usePrefix('p-sheet');
+    const propsToSync = [aria, disableBackdropClick, dismissButton, open, theme || hooks.useTheme()];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'disableBackdropClick', 'dismissButton', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(sheet.DSRSheet, { aria, disableBackdropClick, dismissButton, open, theme: theme || hooks.useTheme(), children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PSheet = PSheet;

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

@@ -17,6 +17,8 @@ var spinner_wrapper = require('../components/spinner.wrapper.cjs');
  */
 class DSRButtonPure extends react.Component {
     host;
+    // In the React wrapper, all props are synced as properties on the element ref, so reflecting "form" as an attribute ensures it is properly handled in the form submission process.
+    internals;
     initialLoading = false;
     get isDisabledOrLoading() {
         return utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading);

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

@@ -17,6 +17,8 @@ var spinner_wrapper = require('../components/spinner.wrapper.cjs');
  */
 class DSRButton extends react.Component {
     host;
+    // In the React wrapper, all props are synced as properties on the element ref, so reflecting "form" as an attribute ensures it is properly handled in the form submission process.
+    internals;
     initialLoading = false;
     render() {
         splitChildren.splitChildren(this.props.children);

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

@@ -8,8 +8,8 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var loadingMessage = require('./loading-message.cjs');
-var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
 var spinner_wrapper = require('../components/spinner.wrapper.cjs');
 
 /**

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

@@ -8,8 +8,8 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var loadingMessage = require('./loading-message.cjs');
-var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
 var spinner_wrapper = require('../components/spinner.wrapper.cjs');
 
 /**
@@ -25,7 +25,7 @@ class DSRCheckbox extends react.Component {
     defaultChecked;
     checkboxInputElement;
     formResetCallback() {
-        this.props.internals.setFormValue(this.props.defaultChecked ? this.props.value : undefined);
+        this.props.internals?.setFormValue(this.props.defaultChecked ? this.props.value : undefined);
     }
     formDisabledCallback() {
     }

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

@@ -9,8 +9,8 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
-var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
 var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 /**
@@ -47,7 +47,7 @@ class DSRMultiSelect extends react.Component {
         for (const val of value) {
             formData.append(this.props.name, val);
         }
-        this.props.internals.setFormValue(formData);
+        this.props.internals?.setFormValue(formData);
     }
     formDisabledCallback() {
     }

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

@@ -9,8 +9,8 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var loadingMessage = require('./loading-message.cjs');
-var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
 var spinner_wrapper = require('../components/spinner.wrapper.cjs');
 
 /**
@@ -29,7 +29,7 @@ class DSRPinCode extends react.Component {
     defaultValue;
     inputElements = [];
     formResetCallback() {
-        this.props.internals.setFormValue(this.props.defaultValue);
+        this.props.internals?.setFormValue(this.props.defaultValue);
     }
     formDisabledCallback() {
     }

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

@@ -8,8 +8,8 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var loadingMessage = require('./loading-message.cjs');
-var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
 var spinner_wrapper = require('../components/spinner.wrapper.cjs');
 
 /**

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

@@ -17,7 +17,7 @@ class DSRSegmentedControl extends react.Component {
     internals;
     defaultValue;
     formResetCallback() {
-        this.props.internals.setFormValue(this.props.defaultValue?.toString());
+        this.props.internals?.setFormValue(this.props.defaultValue?.toString());
     }
     formDisabledCallback() {
     }

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

@@ -8,8 +8,8 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
 var icon_wrapper = require('../components/icon.wrapper.cjs');
 var selectWrapperDropdown_wrapper = require('../components/select-wrapper-dropdown.wrapper.cjs');
 

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

@@ -8,8 +8,8 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
 var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 /**
@@ -45,7 +45,7 @@ class DSRSelect extends react.Component {
     formStateRestoreCallback() {
     }
     formResetCallback() {
-        this.props.internals.setFormValue(this.props.defaultValue);
+        this.props.internals?.setFormValue(this.props.defaultValue);
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);

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

@@ -0,0 +1,39 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../provider.cjs');
+var splitChildren = require('../../splitChildren.cjs');
+var minifyCss = require('../../minifyCss.cjs');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
+var button_wrapper = require('../components/button.wrapper.cjs');
+
+/**
+ * @slot {"name": "header", "description": "Renders a header section above the content area." }
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ *
+ * @controlled {"props": ["open"], "event": "dismiss"}
+ */
+class DSRSheet extends react.Component {
+    host;
+    dialog;
+    scroller;
+    hasHeader;
+    render() {
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
+        if (this.props.open) ;
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSheetCss(this.props.open, this.props.dismissButton, 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, tabIndex: -1, ...utilsEntry.parseAndGetAriaAttributes({
+                                'aria-modal': true,
+                                ...(hasHeader && {
+                                    'aria-label': namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0 && namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children,
+                                }),
+                                ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
+                            }), children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsxs("div", { className: "sheet", children: [this.props.dismissButton && (jsxRuntime.jsx(button_wrapper.PButton, { variant: "ghost", className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss sheet" })), hasHeader && jsxRuntime.jsx("slot", { name: "header" }), jsxRuntime.jsx("slot", {})] }) }) })] }), this.props.children] }));
+    }
+}
+
+exports.DSRSheet = DSRSheet;

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

@@ -9,8 +9,8 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
-var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
 var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 /**
@@ -53,7 +53,7 @@ class DSRTextFieldWrapper extends react.Component {
         const hasAction = utilsEntry.hasLocateAction(this.props.actionIcon);
         const isClearable = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && !!otherChildren[0]?.props.value;
         const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextFieldWrapperCss(disabled, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.submitButton, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextFieldWrapperCss(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.submitButton, 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, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), hasCounter, (this.props.isCounterVisible) && (jsxRuntime.jsx("span", { className: "unit-counter", "aria-hidden": "true", children: this.props.unit })), isPassword && this.props.showPasswordToggle ? (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...buttonProps, type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : utilsEntry.showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsxRuntime.jsxs(buttonPure_wrapper.PButtonPure, { ...buttonProps, type: "button", icon: isCalendar ? 'calendar' : 'clock', disabled: disabled, children: ["Show $", isCalendar ? 'date' : 'time', " picker"] })) : (isSearch && [
                                             // TODO: create an own component, which would fix SSR support too
                                             this.props.isWithinForm && this.props.submitButton ? (react.createElement(buttonPure_wrapper.PButtonPure, { ...buttonProps, key: "btn-submit", type: "submit", icon: "search", disabled: disabledOrReadOnly }, "Search")) : (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "search", color: "state-disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),

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

@@ -6,8 +6,8 @@ var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
@@ -24,8 +24,8 @@ class DSRTextareaWrapper extends react.Component {
     eventListener;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextareaWrapperCss(disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme)));
+        const { disabled, readOnly } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextareaWrapperCss(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, 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, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), this.props.hasCounter && jsxRuntime.jsx("span", { className: "counter", "aria-hidden": "true" }), this.props.hasCounter && jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite" })] }), 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 })] })] }), this.props.children] }));
     }
 }

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

@@ -7,8 +7,8 @@ var minifyCss = require('../../minifyCss.cjs');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var stateMessage = require('./state-message.cjs');
 var label = require('./label.cjs');
+var stateMessage = require('./state-message.cjs');
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
@@ -26,7 +26,7 @@ class DSRTextarea extends react.Component {
     hasCounter;
     setCounterAriaTextDebounced = utilsEntry.debounce(() => this.props.setCounterAriaText());
     formResetCallback() {
-        this.props.internals.setFormValue(this.props.defaultValue);
+        this.props.internals?.setFormValue(this.props.defaultValue);
     }
     formDisabledCallback() {
     }
@@ -35,7 +35,7 @@ class DSRTextarea extends react.Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const id = 'textarea';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextareaCss(this.props.disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.resize, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextareaCss(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.resize, 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, htmlFor: id, label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("textarea", { "aria-describedby": `${label.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, id: id, onBlur: this.props.onBlur, name: this.props.name, value: this.props.value, form: this.props.form, disabled: this.props.disabled, required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, rows: this.props.rows, readOnly: this.props.readOnly, spellCheck: this.props.spellCheck, autoComplete: this.props.autoComplete, wrap: this.props.wrap }), this.props.hasCounter && (jsxRuntime.jsx("span", { className: "counter", "aria-hidden": "true", children: `${this.props.value.length}/${this.props.maxLength}` })), this.props.hasCounter && jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite" })] }), 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 })] })] }), this.props.children] }));
     }
 }

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/public-api.cjs

@@ -50,6 +50,7 @@ var segmentedControlItem_wrapper = require('./lib/components/segmented-control-i
 var select_wrapper = require('./lib/components/select.wrapper.cjs');
 var selectOption_wrapper = require('./lib/components/select-option.wrapper.cjs');
 var selectWrapper_wrapper = require('./lib/components/select-wrapper.wrapper.cjs');
+var sheet_wrapper = require('./lib/components/sheet.wrapper.cjs');
 var spinner_wrapper = require('./lib/components/spinner.wrapper.cjs');
 var stepperHorizontal_wrapper = require('./lib/components/stepper-horizontal.wrapper.cjs');
 var stepperHorizontalItem_wrapper = require('./lib/components/stepper-horizontal-item.wrapper.cjs');
@@ -133,6 +134,7 @@ exports.PSegmentedControlItem = segmentedControlItem_wrapper.PSegmentedControlIt
 exports.PSelect = select_wrapper.PSelect;
 exports.PSelectOption = selectOption_wrapper.PSelectOption;
 exports.PSelectWrapper = selectWrapper_wrapper.PSelectWrapper;
+exports.PSheet = sheet_wrapper.PSheet;
 exports.PSpinner = spinner_wrapper.PSpinner;
 exports.PStepperHorizontal = stepperHorizontal_wrapper.PStepperHorizontal;
 exports.PStepperHorizontalItem = stepperHorizontalItem_wrapper.PStepperHorizontalItem;