npm - @porsche-design-system/components-react - Versions diffs - 4.2.0-rc.4 → 4.2.0 - Mend

@porsche-design-system/components-react 4.2.0-rc.4 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout.cjs CHANGED Viewed

@@ -25,12 +25,18 @@ class DSRFlyout extends react.Component {
     hasHeader;
     hasFooter;
     hasSubFooter;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => utilsEntry.showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasSubFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sub-footer').length > 0;
-        const style = minifyCss.minifyCss(stylesEntry.getFlyoutCss(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior));
+        const style = minifyCss.minifyCss(stylesEntry.getFlyoutCss(this.props.open, this.props.background, this.props.backdrop, this.props.position, hasHeader, hasFooter, hasSubFooter, this.props.footerBehavior, this.props.fullscreen));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(dialogBase.DialogBase, { host: null, dismissable: true, containerClass: "flyout", header: hasHeader ? jsxRuntime.jsx("slot", { name: "header" }) : undefined, footer: hasFooter ? jsxRuntime.jsx("slot", { name: "footer" }) : undefined, subFooter: hasSubFooter ? jsxRuntime.jsx("slot", { name: "sub-footer" }) : undefined, ariaAttributes: utilsEntry.parseAndGetAriaAttributes({
                                 'aria-modal': true,
                                 ...{ 'aria-label': hasHeader ? namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children : 'Flyout' },

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

@@ -19,7 +19,7 @@ class DSRInlineNotification extends react.Component {
     host;
     hasHeadingSlot;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasHeadingSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0;
         const headingText = this.props.heading ? this.props.heading : namedSlotChildren.find(({ props: { slot } }) => slot === 'heading')?.props.children;
         const style = minifyCss.minifyCss(stylesEntry.getInlineNotificationCss(this.props.state, !!this.props.actionLabel, this.props.dismissButton, !!(this.props.heading || hasHeadingSlot)));

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/modal.cjs CHANGED Viewed

@@ -22,8 +22,14 @@ class DSRModal extends react.Component {
     footer;
     hasHeader;
     hasFooter;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => utilsEntry.showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         this.props.disableCloseButton ? false : this.props.dismissButton;

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

@@ -68,7 +68,7 @@ class DSRMultiSelect extends react.Component {
         // triggers value watcher which syncs form value
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasCustomFilterSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'filter').length > 0;
         const hasCustomSelectedSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'selected').length > 0;
         const buttonId = 'button';

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

@@ -37,7 +37,7 @@ class DSRPinCode extends react.Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         // reset array of input elements
         this.inputElements = [];
         const currentInputId = 'current-input';

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

@@ -11,7 +11,7 @@ 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." }
+ * @slot {"name": "button", "description": "Renders a custom trigger button. When used, the default info button is replaced." }
  */
 class DSRPopover extends react.Component {
     host;
@@ -25,7 +25,7 @@ class DSRPopover extends react.Component {
     // TODO: This should be updated when slot is changed
     hasSlottedButton;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
         const style = minifyCss.minifyCss(stylesEntry.getPopoverCss()).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: [hasSlottedButton ? (jsxRuntime.jsx("slot", { name: "button" })) : (jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes({

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-group.cjs CHANGED Viewed

@@ -37,7 +37,7 @@ class DSRRadioGroup extends react.Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const inputDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? utilsEntry.descriptionId : undefined;
         const inputMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? stateMessage.messageId : undefined;
         const style = minifyCss.minifyCss(stylesEntry.getRadioGroupCss(this.props.disabled, this.props.loading, this.props.hideLabel, this.props.state, this.props.compact, this.props.direction));

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

@@ -15,7 +15,7 @@ var icon_wrapper = require('../components/icon.wrapper.cjs');
 class DSRSegmentedControlItem extends react.Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children} = splitChildren.splitChildren(this.props.children);
         // this additional validation is still needed because undefined is allowed with current propTypes
         const hasIcon = !!this.props.icon || !!this.props.iconSource;
         const hasSlottedContent = !!children.length;

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

@@ -63,7 +63,7 @@ class DSRSelect extends react.Component {
         // triggers value watcher which syncs form value
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasCustomFilterSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'filter').length > 0;
         const hasCustomSelectedSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'selected').length > 0;
         const buttonId = 'button';

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

@@ -19,8 +19,14 @@ class DSRSheet extends react.Component {
     dialog;
     scroller;
     hasHeader;
+    topLayer = utilsEntry.createTopLayerController({
+        getElement: () => this.props.dialog,
+        isShown: () => !!this.props.dialog?.open,
+        show: () => utilsEntry.showDialog(this.props.dialog, this.props.scroller),
+        hide: () => this.props.dialog?.close(),
+    });
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         if (this.props.open) ;
         const style = minifyCss.minifyCss(stylesEntry.getSheetCss(this.props.open, this.props.background, this.props.dismissButton));

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

@@ -18,7 +18,7 @@ class DSRStepperHorizontal extends react.Component {
     slot;
     resizeObserver;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren.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/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.cjs CHANGED Viewed

@@ -15,7 +15,7 @@ var scroller_wrapper = require('../components/scroller.wrapper.cjs');
 class DSRTable extends react.Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasSlottedCaption = namedSlotChildren.filter(({ props: { slot } }) => slot === 'caption').length > 0;
         const captionId = 'caption';
         const tableAttr = this.props.caption

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

@@ -24,7 +24,7 @@ class DSRTabsBar extends react.Component {
     isTabList;
     resizeObserver;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children} = splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getTabsBarCss(this.props.background, this.props.size, this.props.compact, utilsEntry.getSanitizedActiveTabIndex(this.props.activeTabIndex, children)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(scroller_wrapper.PScroller, { className: "scroller", compact: this.props.compact, ...(this.props.isTabList && { aria: { role: 'tablist' } }), children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("span", { className: "bar" })] })] }), this.props.children] }));
     }

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

@@ -18,7 +18,7 @@ class DSRTabs extends react.Component {
     tabsItems = [];
     slot;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren.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/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/textarea.cjs CHANGED Viewed

@@ -35,7 +35,7 @@ class DSRTextarea extends react.Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const id = 'textarea';
         const textareaDescriptionId = (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) ? utilsEntry.descriptionId : undefined;
         const textareaMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? stateMessage.messageId : undefined;