@porsche-design-system/components-react 2.19.0-rc.2 → 2.19.1-rc.1

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -11,13 +12,7 @@ var icon_wrapper = require('../components/icon.wrapper.js');
 
 class DSRStepperHorizontalItem extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getStepperHorizontalItemCss(this.props.state, this.props.disabled, this.props.theme || 'light')));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { type: "button", "aria-disabled": !this.props.state || this.props.disabled ? 'true' : null, "aria-current": this.props.state === 'current' ? 'step' : null, children: [utilsEntry.isStateCompleteOrWarning(this.props.state) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getStepperHorizontalIconName(this.props.state), size: "inherit", theme: this.props.theme || 'light', color: "inherit", "aria-hidden": "true" })), this.props.state && jsxRuntime.jsxs("span", { className: "sr-only", children: [this.props.state, ": "] }), jsxRuntime.jsx("slot", {})] }) })] }), this.props.children] }));
     }

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -14,14 +15,8 @@ class DSRStepperHorizontal extends react.Component {
         this.stepperHorizontalItems = [];
     }
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        const defaultChildren = children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
-        const manipulatedChildren = children.map((child, i) => typeof child === 'object' && defaultChildren.includes(child)
+        const { children, namedSlotChildren, 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 } }
             : child);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getStepperHorizontalCss(this.props.size)));

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -14,13 +15,7 @@ class DSRSwitch extends react.Component {
         return utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading);
     }
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSwitchCss(this.props.alignLabel, this.props.hideLabel, this.props.stretch, this.props.checked, this.props.loading, this.isDisabledOrLoading, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("label", { className: "root", children: [jsxRuntime.jsx("span", { id: "label", className: "text", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx("button", { ...utilsEntry.getSwitchButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.checked), type: "button", role: "switch", tabIndex: this.props.tabbable ? parseInt(null, 10) || null : -1, children: jsxRuntime.jsx("span", { className: "toggle", children: this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.checked ? 'light' : 'dark', aria: { 'aria-label': 'Loading state' } })) }) })] })] }), this.props.children] }));
     }

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRTableBody extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTableBodyCss()));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRTableCell extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTableCellCss(this.props.multiline)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -11,13 +12,7 @@ var icon_wrapper = require('../components/icon.wrapper.js');
 
 class DSRTableHeadCell extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const { active, direction } = this.props.sort || {};
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTableHeadCellCss(active, direction, this.props.hideLabel, this.props.multiline)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: utilsEntry.isSortable(active, direction) ? (jsxRuntime.jsxs("button", { type: "button", children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", color: "inherit", name: "arrow-up", "aria-hidden": "true" })] })) : (jsxRuntime.jsx("span", { children: jsxRuntime.jsx("slot", {}) })) })] }), this.props.children] }));

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-row.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRTableHeadRow extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTableHeadRowCss()));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRTableHead extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTableHeadCss()));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRTableRow extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTableRowCss()));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("slot", {}) })] }), this.props.children] }));
     }

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -15,14 +16,8 @@ class DSRTable extends react.Component {
         this.isScrollable = false;
     }
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        const namedSlottedChildren = children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
-        const hasSlottedCaption = namedSlottedChildren.filter(({ props: { slot } }) => slot === 'caption').length > 0;
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const hasSlottedCaption = namedSlotChildren.filter(({ props: { slot } }) => slot === 'caption').length > 0;
         const captionId = 'caption';
         const tableAttr = this.props.caption
             ? { 'aria-label': this.props.caption }

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -15,13 +16,7 @@ class DSRTabsBar extends react.Component {
         this.direction = 'next';
     }
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTabsBarCss(this.props.size, this.props.weight, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(scroller_wrapper.PScroller, { className: "scroller", role: "tablist", theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, scrollIndicatorPosition: "top", children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("span", { className: "bar" })] })] }), this.props.children] }));
     }

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRTabsItem extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTabsItemCss(this.props.theme || 'light' // default as fallback
         )));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx("slot", {})] }), this.props.children] }));

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -14,18 +15,12 @@ class DSRTabs extends react.Component {
         this.tabsItemElements = [];
     }
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        const defaultChildren = children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
-        const manipulatedChildren = children.map((child, i) => typeof child === 'object' && defaultChildren.includes(child)
+        const { children, namedSlotChildren, 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);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTabsCss()));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(tabsBar_wrapper.PTabsBar, { className: "root", size: this.props.size, weight: this.props.weight, theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, activeTabIndex: this.props.activeTabIndex, children: defaultChildren.map((tab, index) => (jsxRuntime.jsx("button", { type: "button", children: tab.props.label }, index))) }), jsxRuntime.jsx("slot", {})] })] }), manipulatedChildren] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(tabsBar_wrapper.PTabsBar, { className: "root", size: this.props.size, weight: this.props.weight, theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, activeTabIndex: this.props.activeTabIndex, children: otherChildren.map((tab, index) => (jsxRuntime.jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsxRuntime.jsx("slot", {})] })] }), manipulatedChildren] }));
     }
 }
 

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -11,13 +12,7 @@ var icon_wrapper = require('../components/icon.wrapper.js');
 
 class DSRTagDismissible extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTagDismissibleCss(this.props.color, !!this.props.label)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Remove:" }), this.props.label && jsxRuntime.jsx("span", { className: "label", children: this.props.label }), jsxRuntime.jsx("slot", {}), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "close", color: "inherit", "aria-hidden": "true" })] })] }), this.props.children] }));
     }

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -11,13 +12,7 @@ var icon_wrapper = require('../components/icon.wrapper.js');
 
 class DSRTag extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTagCss(this.props.color, !!utilsEntry.getDirectChildHTMLElement(null, 'a,button'), this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("span", { children: [(this.props.icon || this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "inherit", theme: this.props.theme, "aria-hidden": "true" })), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("slot", {}) })] })] }), this.props.children] }));
     }

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

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 require('../../provider.js');
+var splitChildren = require('../../splitChildren.js');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
@@ -19,14 +20,8 @@ class DSRTextFieldWrapper extends react.Component {
     }
     render() {
         var _a, _b;
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        const namedSlottedChildren = children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        const defaultChildren = children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
-        const { readOnly, disabled, type } = ((_a = defaultChildren[0]) === null || _a === void 0 ? void 0 : _a.props) || {};
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { readOnly, disabled, type } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && ((_a = otherChildren[0]) === null || _a === void 0 ? void 0 : _a.props) || {};
         const disabledOrReadOnly = disabled || readOnly;
         const labelProps = {};
         const iconProps = {
@@ -37,17 +32,17 @@ class DSRTextFieldWrapper extends react.Component {
         const isPassword = utilsEntry.isType(type, 'password');
         utilsEntry.isWithinForm(this.props.host);
         const hasAction = utilsEntry.hasLocateAction(this.props.actionIcon);
-        const hasCounter = false; // hasCounterAndIsTypeText(defaultChildren[0]?.props);
+        const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
         const isCounterVisible = this.props.showCharacterCount && hasCounter;
-        const isClearable = !!((_b = defaultChildren[0]) === null || _b === void 0 ? void 0 : _b.props.value);
+        const isClearable = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && !!((_b = otherChildren[0]) === null || _b === void 0 ? void 0 : _b.props.value);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextFieldWrapperCss(disabled, this.props.hideLabel, this.props.state, isCounterVisible, isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.isWithinForm, hasAction, hasAction && this.props.actionLoading)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("label", { className: "label", children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) })), (isCounterVisible) && (jsxRuntime.jsx("span", { className: "unit", ...labelProps, "aria-hidden": "true", children: this.props.unit })), jsxRuntime.jsx("slot", {}), hasCounter ] }), isPassword ? (jsxRuntime.jsxs("button", { type: "button", disabled: disabled, "aria-pressed": this.props.showPassword ? 'true' : 'false', children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle password visibility" }), jsxRuntime.jsx(icon_wrapper.PIcon, { name: this.props.showPassword ? 'view-off' : 'view', ...iconProps })] })) : (isSearch && [
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) })), (isCounterVisible) && (jsxRuntime.jsx("span", { className: "unit", ...labelProps, "aria-hidden": "true", children: this.props.unit })), jsxRuntime.jsx("slot", {}), hasCounter ] }), isPassword ? (jsxRuntime.jsxs("button", { type: "button", disabled: disabled, "aria-pressed": this.props.showPassword ? 'true' : 'false', children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle password visibility" }), jsxRuntime.jsx(icon_wrapper.PIcon, { name: this.props.showPassword ? 'view-off' : 'view', ...iconProps })] })) : (isSearch && [
                                             jsxRuntime.jsx("button", { type: "button", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly, children: jsxRuntime.jsx(icon_wrapper.PIcon, { name: "close", ...iconProps }) }, "btn-clear"),
                                             hasAction && (jsxRuntime.jsxs("button", { type: "button", hidden: isClearable, disabled: disabledOrReadOnly, children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Locate me" }), this.props.actionLoading ? (jsxRuntime.jsx(spinner_wrapper.PSpinner, { size: "inherit" })) : (
                                                     // hardcoded locate icon
                                                     jsxRuntime.jsx(icon_wrapper.PIcon, { name: "locate", ...iconProps }))] }, "btn-action")),
                                             this.props.isWithinForm ? (jsxRuntime.jsxs("button", { type: "submit", disabled: disabledOrReadOnly, children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Search" }), jsxRuntime.jsx(icon_wrapper.PIcon, { name: "search", ...iconProps })] }, "btn-submit")) : (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "search", ...iconProps }, "icon")),
-                                        ])] }), (this.props.message || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsxRuntime.jsx(stateMessage.StateMessage, { state: this.props.state, message: this.props.message, host: null }))] })] }), this.props.children] }));
+                                        ])] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsxRuntime.jsx(stateMessage.StateMessage, { state: this.props.state, message: this.props.message, host: null }))] })] }), this.props.children] }));
     }
 }
 

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list-item.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,13 +9,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRTextListItem extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextListItemCss(this.props.listType || 'unordered', // default as fallback
         this.props.orderType || 'numbered' // default as fallback
         )));

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-list.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -8,14 +9,8 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 
 class DSRTextList extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        const defaultChildren = children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
-        const manipulatedChildren = children.map((child, i) => typeof child === 'object' && defaultChildren.includes(child)
+        const { children, namedSlotChildren, 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, listType: this.props.listType, orderType: this.props.orderType } }
             : child);
         const TagType = this.props.listType === 'unordered' ? 'ul' : 'ol';

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -9,13 +10,7 @@ var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entr
 
 class DSRText extends react.Component {
     render() {
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        splitChildren.splitChildren(this.props.children);
         const firstChild = utilsEntry.getHTMLElement(null, ':first-child');
         const hasSlottedTextTag = firstChild === null || firstChild === void 0 ? void 0 : firstChild.matches('p,span,div,address,blockquote,figcaption,cite,time,legend');
         const TagType = hasSlottedTextTag ? 'div' : this.props.tag;

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var splitChildren = require('../../splitChildren.js');
 var react = require('react');
 var minifyCss = require('../../minifyCss.js');
 var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
@@ -10,16 +11,10 @@ var stateMessage = require('./state-message.js');
 class DSRTextareaWrapper extends react.Component {
     render() {
         var _a;
-        const children = Array.isArray(this.props.children)
-            ? this.props.children
-            : this.props.children
-                ? [this.props.children]
-                : [];
-        const namedSlottedChildren = children.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
-        const defaultChildren = children.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const labelProps = {};
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextareaWrapperCss((_a = defaultChildren[0]) === null || _a === void 0 ? void 0 : _a.props.disabled, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.hasCounter)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("label", { className: "label", children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) })), this.props.isCounterVisible && (jsxRuntime.jsx("span", { className: "counter", ...labelProps, "aria-hidden": "true" })), jsxRuntime.jsx("slot", {}), this.props.hasCounter && jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite" })] }), (this.props.message || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsxRuntime.jsx(stateMessage.StateMessage, { state: this.props.state, message: this.props.message, host: null }))] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextareaWrapperCss(typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && ((_a = otherChildren[0]) === null || _a === void 0 ? void 0 : _a.props.disabled), this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.hasCounter)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsxRuntime.jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsxRuntime.jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsxRuntime.jsx("slot", { name: "description" }) })), this.props.isCounterVisible && (jsxRuntime.jsx("span", { className: "counter", ...labelProps, "aria-hidden": "true" })), jsxRuntime.jsx("slot", {}), this.props.hasCounter && jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite" })] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsxRuntime.jsx(stateMessage.StateMessage, { state: this.props.state, message: this.props.message, host: null }))] })] }), this.props.children] }));
     }
 }
 

package/ssr/components-react/projects/react-ssr-wrapper/src/splitChildren.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var react = require('react');
+
+/**
+ * @param children derived from PropsWithChildren
+ *
+ * type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };
+ * type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;
+ * interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
+ *     type: T;
+ *     props: P;
+ *     key: Key | null;
+ * }
+ */
+const splitChildren = (children) => {
+    children =
+        typeof children === 'object' && 'type' in children && children.type === react.Fragment
+            ? children.props.children // Unpack children of React.Fragment
+            : children;
+    const childrenArray = (Array.isArray(children) ? children : children ? [children] : []).filter((x) => x !== undefined && x !== null // children are filtered due to cases where conditionally rendered children can be undefined.
+    );
+    const otherChildren = childrenArray.filter((child) => { var _a; return !((_a = child.props) === null || _a === void 0 ? void 0 : _a.slot); });
+    const namedSlotChildren = childrenArray.filter((child) => { var _a; return (_a = child.props) === null || _a === void 0 ? void 0 : _a.slot; });
+    return { children: childrenArray, namedSlotChildren, otherChildren };
+};
+
+exports.splitChildren = splitChildren;