@porsche-design-system/components-react 3.17.0 → 3.18.0

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');
@@ -116,7 +117,7 @@ class DSRSelect extends react.Component {
         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)));
-        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: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("button", { 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 && {
+        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') && {

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -69,6 +69,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -70,6 +70,7 @@ 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.cjs');
 require('../components/textarea-wrapper.wrapper.cjs');
 require('../components/toast.wrapper.cjs');
 require('../components/wordmark.wrapper.cjs');

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

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+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');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
+var stateMessage = require('./state-message.cjs');
+var label = require('./label.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." }
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ */
+class DSRTextarea extends react.Component {
+    host;
+    // 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;
+    textAreaElement;
+    counterElement;
+    hasCounter;
+    setCounterAriaTextDebounced = utilsEntry.debounce(() => this.props.setCounterAriaText());
+    formResetCallback() {
+        this.props.internals.setValidity({});
+        this.props.internals.setFormValue('');
+        this.props.textAreaElement.value = '';
+    }
+    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)));
+        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] }));
+    }
+}
+
+exports.DSRTextarea = DSRTextarea;

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

@@ -69,6 +69,7 @@ var text_wrapper = require('./lib/components/text.wrapper.cjs');
 var textFieldWrapper_wrapper = require('./lib/components/text-field-wrapper.wrapper.cjs');
 var textList_wrapper = require('./lib/components/text-list.wrapper.cjs');
 var textListItem_wrapper = require('./lib/components/text-list-item.wrapper.cjs');
+var textarea_wrapper = require('./lib/components/textarea.wrapper.cjs');
 var textareaWrapper_wrapper = require('./lib/components/textarea-wrapper.wrapper.cjs');
 var toast_wrapper = require('./lib/components/toast.wrapper.cjs');
 var wordmark_wrapper = require('./lib/components/wordmark.wrapper.cjs');
@@ -150,6 +151,7 @@ exports.PText = text_wrapper.PText;
 exports.PTextFieldWrapper = textFieldWrapper_wrapper.PTextFieldWrapper;
 exports.PTextList = textList_wrapper.PTextList;
 exports.PTextListItem = textListItem_wrapper.PTextListItem;
+exports.PTextarea = textarea_wrapper.PTextarea;
 exports.PTextareaWrapper = textareaWrapper_wrapper.PTextareaWrapper;
 exports.PToast = toast_wrapper.PToast;
 exports.PWordmark = wordmark_wrapper.PWordmark;