@porsche-design-system/components-react 3.29.0-rc.0 → 3.29.0-rc.2

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

@@ -19,7 +19,7 @@ class DSRSheet extends Component {
     scroller;
     hasHeader;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         if (this.props.open) ;
         const style = minifyCss(getComponentCss$p(this.props.open, this.props.dismissButton, this.props.theme));

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

@@ -15,7 +15,7 @@ class DSRStepperHorizontal extends Component {
     scrollerElement;
     currentStepIndex;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren(this.props.children);
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, theme: this.props.theme } }
             : child);

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

@@ -13,7 +13,7 @@ import { PScroller } from '../components/scroller.wrapper.mjs';
 class DSRTable extends Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasSlottedCaption = namedSlotChildren.filter(({ props: { slot } }) => slot === 'caption').length > 0;
         const captionId = 'caption';
         const tableAttr = this.props.caption

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

@@ -21,7 +21,7 @@ class DSRTabsBar extends Component {
     hasPTabsParent;
     areTabsButtons;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren(this.props.children);
         const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? child.type === 'button'
                 ? {

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

@@ -15,7 +15,7 @@ class DSRTabs extends Component {
     host;
     tabsItemElements = [];
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren(this.props.children);
         const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, theme: this.props.theme, hidden: this.props.activeTabIndex !== i ? true : null } }
             : child);

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getTextFieldWrapperCss as getComponentCss$8 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { isWithinForm, hasLocateAction, showCustomCalendarOrTimeIndicator, isType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { isWithinForm, hasLocateAction, isType, showCustomCalendarOrTimeIndicator } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import { StateMessage } from './state-message.mjs';
 import { LegacyLabel } from './legacy-label.mjs';
@@ -34,7 +34,7 @@ class DSRTextFieldWrapper extends Component {
     hasUnit;
     eventListener;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { readOnly, disabled, type } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const disabledOrReadOnly = disabled || readOnly;
         const buttonProps = {

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

@@ -20,7 +20,7 @@ class DSRTextareaWrapper extends Component {
     hasCounter;
     eventListener;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { disabled, readOnly } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const style = minifyCss(getComponentCss$4(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(LegacyLabel, { 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 }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "counter", "aria-hidden": "true" }), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), jsx(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/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/textarea.mjs

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getTextareaCss as getComponentCss$3 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { debounce, descriptionId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { descriptionId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { Label } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 
@@ -19,9 +19,6 @@ class DSRTextarea extends Component {
     internals;
     defaultValue;
     textAreaElement;
-    counterElement;
-    hasCounter;
-    setCounterAriaTextDebounced = debounce(() => this.props.setCounterAriaText());
     formResetCallback() {
         this.props.internals?.setFormValue(this.props.defaultValue);
     }
@@ -30,10 +27,12 @@ class DSRTextarea extends Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const id = 'textarea';
-        const style = minifyCss(getComponentCss$3(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.resize, this.props.theme));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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 }), jsxs("div", { className: "wrapper", children: [jsx("textarea", { "aria-describedby": `${descriptionId} ${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 && (jsx("span", { className: "counter", "aria-hidden": "true", children: `${this.props.value.length}/${this.props.maxLength}` })), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), jsx(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(getComponentCss$3(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.counter, this.props.resize, this.props.theme));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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 }), jsxs("div", { className: "wrapper", children: [jsx("textarea", { "aria-describedby": `${descriptionId} ${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 && (jsxs(Fragment, { children: [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` }), jsx("span", { className: "counter", "aria-hidden": "true", children: this.props.maxLength ? `${this.props.value.length}/${this.props.maxLength}` : `${this.props.value.length}` })] }))] }), jsx(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/esm/lib/components/popover.wrapper.d.ts

@@ -13,6 +13,14 @@ export type PPopoverProps = BaseProps & {
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: PopoverDirection;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * If true, the popover is open.
+     */
+    open?: boolean;
     /**
      * Adapts the popover color depending on the theme.
      */
@@ -31,6 +39,14 @@ export declare const PPopover: import("react").ForwardRefExoticComponent<import(
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: PopoverDirection;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * If true, the popover is open.
+     */
+    open?: boolean;
     /**
      * Adapts the popover color depending on the theme.
      */

package/ssr/esm/lib/components/textarea.wrapper.d.ts

@@ -5,6 +5,10 @@ export type PTextareaProps = BaseProps & {
      * Specifies whether the input can be autofilled by the browser
      */
     autoComplete?: TextareaAutoComplete;
+    /**
+     * Show or hide the character counter.
+     */
+    counter?: boolean;
     /**
      * The description text.
      */
@@ -73,10 +77,6 @@ export type PTextareaProps = BaseProps & {
      * The number of rows of the textarea.
      */
     rows?: number;
-    /**
-     * Show or hide max character count.
-     */
-    showCounter?: boolean;
     /**
      * Specifies whether the input should have its spelling and grammar checked
      */
@@ -103,6 +103,10 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<import
      * Specifies whether the input can be autofilled by the browser
      */
     autoComplete?: TextareaAutoComplete;
+    /**
+     * Show or hide the character counter.
+     */
+    counter?: boolean;
     /**
      * The description text.
      */
@@ -171,10 +175,6 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<import
      * The number of rows of the textarea.
      */
     rows?: number;
-    /**
-     * Show or hide max character count.
-     */
-    showCounter?: boolean;
     /**
      * Specifies whether the input should have its spelling and grammar checked
      */

package/ssr/esm/lib/dsr-components/popover.d.ts

@@ -1,14 +1,16 @@
 import { Component } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the popover content." }
+ * @slot {"name": "button", "description": "Slot for custom button." }
  */
 export declare class DSRPopover extends Component<any> {
     host: HTMLElement;
-    private isOpen;
     private popover;
     private button;
+    private slottedButton;
     private arrow;
     private cleanUpAutoUpdate;
     private hasNativePopoverSupport;
+    private hasSlottedButton;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/textarea.d.ts

@@ -9,9 +9,6 @@ export declare class DSRTextarea extends Component<any> {
     private internals;
     private defaultValue;
     private textAreaElement;
-    private counterElement;
-    private hasCounter;
-    private setCounterAriaTextDebounced;
     formResetCallback(): void;
     formDisabledCallback(): void;
     formStateRestoreCallback(): void;

package/ssr/esm/lib/types.d.ts

@@ -221,6 +221,8 @@ declare const ICON_NAMES: readonly [
     "add",
     "adjust",
     "aggregation",
+    "ai-spark",
+    "ai-spark-filled",
     "arrow-compact-down",
     "arrow-compact-left",
     "arrow-compact-right",

package/partials/index.js

@@ -1,12 +0,0 @@
-'use strict';
-
-var partials = require('@porsche-design-system/components-js/partials');
-
-
-
-Object.keys(partials).forEach(function (k) {
-	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return partials[k]; }
-	});
-});