@porsche-design-system/components-react 3.28.0 → 3.29.0-rc.1

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

@@ -11,22 +11,27 @@ var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 /**
  * @slot {"name": "", "description": "Default slot for the popover content." }
+ * @slot {"name": "button", "description": "Slot for custom button." }
  */
 class DSRPopover extends react.Component {
     host;
-    isOpen = false;
     popover;
     button;
+    slottedButton;
     arrow;
     cleanUpAutoUpdate;
     hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
+    hasSlottedButton;
     render() {
-        splitChildren.splitChildren(this.props.children);
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
         const style = minifyCss.minifyCss(stylesEntry.getPopoverCss(this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4'));
-        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("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes({
+        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: [hasSlottedButton ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", { name: "button" }) })) : (jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes({
                                         ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                                        ...{ 'aria-expanded': this.props.isOpen },
-                                    }), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsxRuntime.jsx("span", { className: "label", children: "More information" })] }), this.props.isOpen && (jsxRuntime.jsxs("div", { popover: "auto", children: [jsxRuntime.jsx("div", { className: "arrow" }), jsxRuntime.jsx("div", { className: "content", children: this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {}) })] }))] })] }), this.props.children] }));
+                                        ...{ 'aria-expanded': this.props.open },
+                                    }), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsxRuntime.jsx("span", { className: "label", children: "More information" })] })), this.props.open && (jsxRuntime.jsxs("div", { popover: "auto", onToggle: (e) => {
+                                        this.props.onTogglePopover(e);
+                                    }, children: [jsxRuntime.jsx("div", { className: "arrow" }), jsxRuntime.jsx("div", { className: "content", children: this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {}) })] }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -10,6 +10,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 var label = require('./label.cjs');
 var stateMessage = require('./state-message.cjs');
 var icon_wrapper = require('../components/icon.wrapper.cjs');
+var inputSearch_wrapper = require('../components/input-search.wrapper.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,10 +25,12 @@ class DSRSelect 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.
     isOpen = false;
+    hasFilterResults = true;
     internals;
     defaultValue;
     buttonElement;
     popoverElement;
+    filterInputElement;
     selectOptions = [];
     selectOptgroups = [];
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
@@ -52,7 +55,7 @@ class DSRSelect extends react.Component {
         const ariaDescribedBy = [descriptionId, selectMessageId].filter(Boolean).join(' ');
         const selectedOption = utilsEntry.getSelectedOptionString(otherChildren);
         const style = minifyCss.minifyCss(stylesEntry.getSelectCss(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact, this.props.theme, !!this.props.slottedImagePath));
-        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("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, utilsEntry.labelId, ariaDescribedBy, popoverId), disabled: this.props.disabled, children: [this.props.slottedImagePath && jsxRuntime.jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsxRuntime.jsx("span", { children: selectedOption }), 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", { id: popoverId, popover: "manual", tabIndex: -1, ...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 })] })] }), this.props.children] }));
+        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("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, utilsEntry.labelId, ariaDescribedBy, popoverId), disabled: this.props.disabled, children: [this.props.slottedImagePath && jsxRuntime.jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsxRuntime.jsx("span", { children: selectedOption }), 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.jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, role: "dialog", "aria-label": this.props.label, "aria-hidden": this.props.isOpen ? null : 'true', children: [this.props.filter && (jsxRuntime.jsx(inputSearch_wrapper.PInputSearch, { className: "filter", name: "filter", label: "Filter options", hideLabel: true, autoComplete: "off", clear: true, indicator: true, compact: true, theme: this.props.theme, ...utilsEntry.getComboboxFilterAriaAttributes() })), jsxRuntime.jsxs("div", { className: "options", role: "listbox", "aria-label": this.props.label, children: [this.props.filter && !this.props.hasFilterResults && (jsxRuntime.jsx("div", { className: "no-results", "aria-live": "polite", role: "option", children: jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2013" }) })), 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 })] })] }), this.props.children] }));
     }
     getSelectedOptionImagePath = (options) => {
         return (options

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

@@ -21,9 +21,6 @@ class DSRTextarea extends react.Component {
     internals;
     defaultValue;
     textAreaElement;
-    counterElement;
-    hasCounter;
-    setCounterAriaTextDebounced = utilsEntry.debounce(() => this.props.setCounterAriaText());
     formResetCallback() {
         this.props.internals?.setFormValue(this.props.defaultValue);
     }
@@ -34,8 +31,10 @@ class DSRTextarea extends react.Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const id = 'textarea';
-        const style = minifyCss.minifyCss(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": `${utilsEntry.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] }));
+        const style = minifyCss.minifyCss(stylesEntry.getTextareaCss(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.counter, 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": `${utilsEntry.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.counter && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", children: this.props.maxLength
+                                                        ? `You have ${this.props.maxLength - this.props.value.length} out of ${this.props.maxLength} characters left`
+                                                        : `${this.props.value.length} characters entered` }), jsxRuntime.jsx("span", { className: "counter", "aria-hidden": "true", children: this.props.maxLength ? `${this.props.value.length}/${this.props.maxLength}` : `${this.props.value.length}` })] }))] }), 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

@@ -31,6 +31,8 @@ var icon_wrapper = require('./lib/components/icon.wrapper.cjs');
 var inlineNotification_wrapper = require('./lib/components/inline-notification.wrapper.cjs');
 var inputNumber_wrapper = require('./lib/components/input-number.wrapper.cjs');
 var inputPassword_wrapper = require('./lib/components/input-password.wrapper.cjs');
+var inputSearch_wrapper = require('./lib/components/input-search.wrapper.cjs');
+var inputText_wrapper = require('./lib/components/input-text.wrapper.cjs');
 var link_wrapper = require('./lib/components/link.wrapper.cjs');
 var linkPure_wrapper = require('./lib/components/link-pure.wrapper.cjs');
 var linkSocial_wrapper = require('./lib/components/link-social.wrapper.cjs');
@@ -118,6 +120,8 @@ exports.PIcon = icon_wrapper.PIcon;
 exports.PInlineNotification = inlineNotification_wrapper.PInlineNotification;
 exports.PInputNumber = inputNumber_wrapper.PInputNumber;
 exports.PInputPassword = inputPassword_wrapper.PInputPassword;
+exports.PInputSearch = inputSearch_wrapper.PInputSearch;
+exports.PInputText = inputText_wrapper.PInputText;
 exports.PLink = link_wrapper.PLink;
 exports.PLinkPure = linkPure_wrapper.PLinkPure;
 exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;