@porsche-design-system/components-react 4.0.0-beta.4 → 4.0.0-rc.1

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3270,18 +3270,15 @@ const getComboboxAriaAttributes = (isOpen, isRequired, labelId, descriptionId, d
     };
 };
 
-/** @deprecated since v4.0.0, will be removed with next major release. Use 2px instead. */
-const borderWidthBase = '2px';
-
 const fontPorscheNext = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use fontPorscheNext instead. */
 const fontFamily = fontPorscheNext;
 
-const leadingNormal = 'calc(6px + 2.125ex)';
+const leadingNormal$1 = 'calc(6px + 2.125ex)';
 
 /** @deprecated since v4.0.0, will be removed with next major release. Use leadingNormal instead */
-const fontLineHeight = leadingNormal;
+const fontLineHeight = leadingNormal$1;
 
 const typescaleSm = '1rem';
 
@@ -3440,7 +3437,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.0.0-beta.4"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.0.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);
@@ -3461,64 +3458,6 @@ const supportsNativePopover = () => {
 const hasNativePopoverSupport = supportsNativePopover();
 // getter for easy mocking
 const getHasNativePopoverSupport = () => hasNativePopoverSupport;
-
-/*
- Stencil Client Platform v4.23.2 | MIT Licensed | https://stenciljs.com
- */
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/utils/result.ts
-var result_exports = {};
-__export(result_exports, {
-  err: () => err,
-  map: () => map,
-  ok: () => ok,
-  unwrap: () => unwrap,
-  unwrapErr: () => unwrapErr
-});
-var ok = (value) => ({
-  isOk: true,
-  isErr: false,
-  value
-});
-var err = (value) => ({
-  isOk: false,
-  isErr: true,
-  value
-});
-function map(result, fn) {
-  if (result.isOk) {
-    const val = fn(result.value);
-    if (val instanceof Promise) {
-      return val.then((newVal) => ok(newVal));
-    } else {
-      return ok(val);
-    }
-  }
-  if (result.isErr) {
-    const value = result.value;
-    return err(value);
-  }
-  throw "should never get here";
-}
-var unwrap = (result) => {
-  if (result.isOk) {
-    return result.value;
-  } else {
-    throw result.value;
-  }
-};
-var unwrapErr = (result) => {
-  if (result.isErr) {
-    return result.value;
-  } else {
-    throw result.value;
-  }
-};
 const headerSlot = 'header';
 const anchorSlot = 'anchor';
 
@@ -3619,6 +3558,15 @@ const internalValidateProps = {
 const breakpointCustomizableTemplate = `value, ${internalValidateProps
     .formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {}))
     .replace(/"/g, '')}`;
+const getBannerAriaAttributes = (state, labelId, descriptionId) => {
+    const isAlert = state === 'warning' || state === 'error';
+    return {
+        role: isAlert ? 'alert' : 'status',
+        'aria-live': isAlert ? 'assertive' : 'polite',
+        'aria-labelledby': labelId,
+        'aria-describedby': descriptionId,
+    };
+};
 const getButtonPureAriaAttributes = (isDisabled, isLoading, aria) => {
     return {
         ...parseAndGetAriaAttributes(aria),
@@ -3767,16 +3715,7 @@ const buildIconUrl = (iconNameOrSource = DEFAULT_ICON_NAME) => {
     }
     return buildIconUrl(DEFAULT_ICON_NAME);
 };
-const getInlineNotificationIconName = (state) => {
-    const iconMap = {
-        info: 'information-filled',
-        warning: 'warning-filled',
-        success: 'success-filled',
-        error: 'error-filled',
-    };
-    return iconMap[state];
-};
-const getContentAriaAttributes = (state, labelId, descriptionId) => {
+const getInlineNotificationAriaAttributes = (state, labelId, descriptionId) => {
     const isAlert = state === 'warning' || state === 'error';
     return {
         role: isAlert ? 'alert' : 'status',
@@ -3919,7 +3858,7 @@ const tempDiv = hasDocument ? document.createElement('div') : undefined;
 if (tempDiv) {
     tempDiv.style.position = 'absolute';
     tempDiv.style.visibility = 'hidden';
-    tempDiv.style.border = `${borderWidthBase} solid`;
+    tempDiv.style.border = '1px solid';
     tempDiv.style.boxSizing = 'border-box';
     tempDiv.style.font = BUTTON_FONT.replace(fontFamily, tempFont);
 }
@@ -3976,12 +3915,12 @@ exports.createRange = createRange;
 exports.crestSize = crestSize;
 exports.descriptionId = descriptionId;
 exports.displaySizeToTagMap = displaySizeToTagMap;
+exports.getBannerAriaAttributes = getBannerAriaAttributes;
 exports.getButtonAriaAttributes = getButtonAriaAttributes;
 exports.getButtonBaseAriaAttributes = getButtonBaseAriaAttributes;
 exports.getButtonPureAriaAttributes = getButtonPureAriaAttributes;
 exports.getCDNBaseURL = getCDNBaseURL;
 exports.getComboboxAriaAttributes = getComboboxAriaAttributes;
-exports.getContentAriaAttributes = getContentAriaAttributes;
 exports.getCurrentActivePage = getCurrentActivePage;
 exports.getDirectChildHTMLElement = getDirectChildHTMLElement;
 exports.getDisplayTagType = getDisplayTagType;
@@ -3989,7 +3928,7 @@ exports.getFieldsetAriaAttributes = getFieldsetAriaAttributes;
 exports.getHTMLElement = getHTMLElement;
 exports.getHasNativePopoverSupport = getHasNativePopoverSupport;
 exports.getHeadingTagType = getHeadingTagType;
-exports.getInlineNotificationIconName = getInlineNotificationIconName;
+exports.getInlineNotificationAriaAttributes = getInlineNotificationAriaAttributes;
 exports.getSegmentedControlItemAriaAttributes = getSegmentedControlItemAriaAttributes;
 exports.getStepperHorizontalIconName = getStepperHorizontalIconName;
 exports.getSvgUrl = getSvgUrl;

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

@@ -7,22 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var banner = require('../dsr-components/banner.cjs');
 
-const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, state = 'info', className, children, ...rest }, ref) => {
+const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, position = { base: 'bottom', s: 'top' }, state = 'info', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
-    const propsToSync = [description, dismissButton, heading, headingTag, open, state];
+    const propsToSync = [description, dismissButton, heading, headingTag, open, position, state];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'position', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                ...{ "popover": "manual" },
-                children: (jsxRuntime.jsx(banner.DSRBanner, { description, dismissButton, heading, headingTag, open, state, children })),
+                children: (jsxRuntime.jsx(banner.DSRBanner, { description, dismissButton, heading, headingTag, open, position, state, children })),
             }
             : {
                 children,

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

@@ -6,7 +6,8 @@ require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var inlineNotification_wrapper = require('../components/inline-notification.wrapper.cjs');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
+var button_wrapper = require('../components/button.wrapper.cjs');
 
 /**
  * @slot {"name": "heading", "description": "Defines the heading used in the banner. Can be used alternatively to the heading prop. Can be used for rich content.", "hasAltProp": true }
@@ -16,12 +17,16 @@ var inlineNotification_wrapper = require('../components/inline-notification.wrap
  */
 class DSRBanner extends react.Component {
     host;
-    inlineNotificationElement;
-    closeBtn;
+    refPopover;
+    refDismiss;
     render() {
-        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stylesEntry.getBannerCss(this.props.open));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(inlineNotification_wrapper.PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.props.dismissButton, "aria-hidden": this.props.open ? 'false' : 'true', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 && jsxRuntime.jsx("slot", { name: "heading", slot: "heading" }), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsxRuntime.jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
+        splitChildren.splitChildren(this.props.children);
+        const bannerId = 'banner';
+        const labelId = 'heading';
+        const descriptionId = 'description';
+        const Heading = this.props.headingTag;
+        const style = minifyCss.minifyCss(stylesEntry.getBannerCss(this.props.open, this.props.position, this.props.state, this.props.dismissButton));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("div", { id: bannerId, popover: "manual", "aria-hidden": this.props.open ? 'false' : 'true', ...utilsEntry.getBannerAriaAttributes(this.props.state, labelId, descriptionId), children: jsxRuntime.jsxs("div", { className: "banner", children: [this.props.heading ? jsxRuntime.jsx(Heading, { id: labelId, children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }), this.props.description ? jsxRuntime.jsx("p", { id: descriptionId, children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" }), this.props.dismissButton && (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, "aria-controls": bannerId, children: "Close banner" }))] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -22,7 +22,7 @@ class DSRButton extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getButtonCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.compact));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", "aria-hidden": "true" }), utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: "inherit", "aria-hidden": "true" })), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), 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(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("button", { ...utilsEntry.getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingMessage.loadingId : undefined, children: [this.props.loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", "aria-hidden": "true" }), utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: "inherit", "aria-hidden": "true" })), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }
 

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

@@ -9,7 +9,6 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 var button_wrapper = require('../components/button.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
-var icon_wrapper = require('../components/icon.wrapper.cjs');
 
 /**
  * @slot {"name": "heading", "description": "Shows a heading. Can be used to render rich markup." }
@@ -18,14 +17,13 @@ var icon_wrapper = require('../components/icon.wrapper.cjs');
 class DSRInlineNotification extends react.Component {
     host;
     render() {
-        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
-        const bannerId = 'banner';
-        const labelId = 'label';
+        splitChildren.splitChildren(this.props.children);
+        const notificationId = 'notification';
+        const labelId = 'heading';
         const descriptionId = 'description';
         const Heading = this.props.headingTag;
         const style = minifyCss.minifyCss(stylesEntry.getInlineNotificationCss(this.props.state, !!this.props.actionLabel, this.props.dismissButton));
-        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.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getInlineNotificationIconName(this.props.state), color: this.props.state, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { id: bannerId, className: "content", ...utilsEntry.getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) &&
-                                            (this.props.heading ? (jsxRuntime.jsx(Heading, { id: labelId, className: "heading", children: this.props.heading })) : (jsxRuntime.jsx("slot", { name: "heading" }))), jsxRuntime.jsx("p", { id: descriptionId, className: "description", children: this.props.description || jsxRuntime.jsx("slot", {}) })] }), this.props.actionLabel && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.props.dismissButton && (jsxRuntime.jsx(button_wrapper.PButton, { className: "close", type: "button", variant: "secondary", icon: "close", hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { id: notificationId, className: "notification", ...utilsEntry.getInlineNotificationAriaAttributes(this.props.state, labelId, descriptionId), children: [this.props.heading ? jsxRuntime.jsx(Heading, { id: labelId, children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" }), this.props.description ? jsxRuntime.jsx("p", { id: descriptionId, children: this.props.description }) : jsxRuntime.jsx("slot", {}), this.props.actionLabel && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.props.dismissButton && (jsxRuntime.jsx(button_wrapper.PButton, { className: "dismiss", type: "button", variant: "secondary", icon: "close", hideLabel: true, compact: true, "aria-controls": notificationId, children: "Close notification" }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -10,10 +10,7 @@ const StateMessage = ({ hasMessage, state, message }) => {
     const isErrorState = state === 'error';
     return (
     // needs to be rendered always to have correct behaviour for screen readers
-    jsxRuntime.jsx("span", { id: messageId, className: "message", role: state === 'success' ? 'status' : 'alert', children: hasMessage && [
-            jsxRuntime.jsx(icon_wrapper.PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'error' : 'success', "aria-hidden": "true" }),
-            message || jsxRuntime.jsx("slot", { name: "message" }),
-        ] }));
+    jsxRuntime.jsx("span", { id: messageId, className: "message", role: state === 'success' ? 'status' : 'alert', children: hasMessage && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icon_wrapper.PIcon, { name: isErrorState ? 'exclamation' : 'check', color: isErrorState ? 'error' : 'success', "aria-hidden": "true" }), message || jsxRuntime.jsx("slot", { name: "message" })] })) }));
 };
 
 exports.StateMessage = StateMessage;