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

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

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import '../../provider.js';
+import { splitChildren } from '../../splitChildren.js';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
 import { getTabsBarCss as getComponentCss$b } from '../../../../../../components/dist/styles/esm/styles-entry.js';
@@ -13,13 +14,7 @@ class DSRTabsBar extends 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(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$b(this.props.size, this.props.weight, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PScroller, { className: "scroller", role: "tablist", theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, scrollIndicatorPosition: "top", children: [jsx("slot", {}), jsx("span", { className: "bar" })] })] }), this.props.children] }));
     }

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

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
@@ -6,13 +7,7 @@ import { getTabsItemCss as getComponentCss$a } from '../../../../../../component
 
 class DSRTabsItem extends 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(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$a(this.props.theme || 'light' // default as fallback
         )));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("slot", {})] }), this.props.children] }));

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

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import '../../provider.js';
+import { splitChildren } from '../../splitChildren.js';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
 import { getTabsCss as getComponentCss$9 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
@@ -12,18 +13,12 @@ class DSRTabs extends 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(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(stripFocusAndHoverStyles(getComponentCss$9()));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(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) => (jsx("button", { type: "button", children: tab.props.label }, index))) }), jsx("slot", {})] })] }), manipulatedChildren] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(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) => (jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsx("slot", {})] })] }), manipulatedChildren] }));
     }
 }
 

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

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import '../../provider.js';
+import { splitChildren } from '../../splitChildren.js';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
 import { getTagDismissibleCss as getComponentCss$7 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
@@ -9,13 +10,7 @@ import { PIcon } from '../components/icon.wrapper.js';
 
 class DSRTagDismissible extends 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(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$7(this.props.color, !!this.props.label)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("button", { type: "button", ...parseAndGetAriaAttributes(this.props.aria), children: [jsx("span", { className: "sr-only", children: "Remove:" }), this.props.label && jsx("span", { className: "label", children: this.props.label }), jsx("slot", {}), jsx(PIcon, { className: "icon", name: "close", color: "inherit", "aria-hidden": "true" })] })] }), this.props.children] }));
     }

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

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import '../../provider.js';
+import { splitChildren } from '../../splitChildren.js';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
 import { getTagCss as getComponentCss$8 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
@@ -9,13 +10,7 @@ import { PIcon } from '../components/icon.wrapper.js';
 
 class DSRTag extends 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(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$8(this.props.color, !!getDirectChildHTMLElement(null, 'a,button'), this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("span", { children: [(this.props.icon || this.props.iconSource) && (jsx(PIcon, { className: "icon", name: this.props.icon, source: this.props.iconSource, color: "inherit", theme: this.props.theme, "aria-hidden": "true" })), jsx("div", { children: jsx("slot", {}) })] })] }), this.props.children] }));
     }

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

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import '../../provider.js';
+import { splitChildren } from '../../splitChildren.js';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
 import { getTextFieldWrapperCss as getComponentCss$6 } from '../../../../../../components/dist/styles/esm/styles-entry.js';
@@ -17,14 +18,8 @@ class DSRTextFieldWrapper extends 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(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 = {
@@ -35,17 +30,17 @@ class DSRTextFieldWrapper extends Component {
         const isPassword = isType(type, 'password');
         isWithinForm(this.props.host);
         const hasAction = 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(stripFocusAndHoverStyles(getComponentCss$6(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), (isCounterVisible) && (jsx("span", { className: "unit", ...labelProps, "aria-hidden": "true", children: this.props.unit })), jsx("slot", {}), hasCounter ] }), isPassword ? (jsxs("button", { type: "button", disabled: disabled, "aria-pressed": this.props.showPassword ? 'true' : 'false', children: [jsx("span", { className: "sr-only", children: "Toggle password visibility" }), jsx(PIcon, { name: this.props.showPassword ? 'view-off' : 'view', ...iconProps })] })) : (isSearch && [
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), (isCounterVisible) && (jsx("span", { className: "unit", ...labelProps, "aria-hidden": "true", children: this.props.unit })), jsx("slot", {}), hasCounter ] }), isPassword ? (jsxs("button", { type: "button", disabled: disabled, "aria-pressed": this.props.showPassword ? 'true' : 'false', children: [jsx("span", { className: "sr-only", children: "Toggle password visibility" }), jsx(PIcon, { name: this.props.showPassword ? 'view-off' : 'view', ...iconProps })] })) : (isSearch && [
                                             jsx("button", { type: "button", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly, children: jsx(PIcon, { name: "close", ...iconProps }) }, "btn-clear"),
                                             hasAction && (jsxs("button", { type: "button", hidden: isClearable, disabled: disabledOrReadOnly, children: [jsx("span", { className: "sr-only", children: "Locate me" }), this.props.actionLoading ? (jsx(PSpinner, { size: "inherit" })) : (
                                                     // hardcoded locate icon
                                                     jsx(PIcon, { name: "locate", ...iconProps }))] }, "btn-action")),
                                             this.props.isWithinForm ? (jsxs("button", { type: "submit", disabled: disabledOrReadOnly, children: [jsx("span", { className: "sr-only", children: "Search" }), jsx(PIcon, { name: "search", ...iconProps })] }, "btn-submit")) : (jsx(PIcon, { className: "icon", name: "search", ...iconProps }, "icon")),
-                                        ])] }), (this.props.message || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(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) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, host: null }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
@@ -6,13 +7,7 @@ import { getTextListItemCss as getComponentCss$5 } from '../../../../../../compo
 
 class DSRTextListItem extends 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(this.props.children);
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$5(this.props.listType || 'unordered', // default as fallback
         this.props.orderType || 'numbered' // default as fallback
         )));

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

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
@@ -6,14 +7,8 @@ import { getTextListCss as getComponentCss$4 } from '../../../../../../component
 
 class DSRTextList extends 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(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/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text.js

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
@@ -7,13 +8,7 @@ import { getHTMLElement } from '../../../../../../components/dist/utils/esm/util
 
 class DSRText extends 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(this.props.children);
         const firstChild = 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/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/textarea-wrapper.js

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { splitChildren } from '../../splitChildren.js';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.js';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.js';
@@ -8,16 +9,10 @@ import { StateMessage } from './state-message.js';
 class DSRTextareaWrapper extends 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(this.props.children);
         const labelProps = {};
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$2((_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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlottedChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), this.props.isCounterVisible && (jsx("span", { className: "counter", ...labelProps, "aria-hidden": "true" })), jsx("slot", {}), this.props.hasCounter && 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) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, host: null }))] })] }), this.props.children] }));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$2(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text label__text--description", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), this.props.isCounterVisible && (jsx("span", { className: "counter", ...labelProps, "aria-hidden": "true" })), jsx("slot", {}), this.props.hasCounter && 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) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, host: null }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -0,0 +1,26 @@
+import { Fragment } from '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 === 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 };
+};
+
+export { splitChildren };

package/ssr/lib/components/button-group.wrapper.d.ts

@@ -1,16 +1,16 @@
 import { HTMLAttributes } from 'react';
-import type { ButtonGroupDirection } from '../types';
+import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
 export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
-    direction?: ButtonGroupDirection;
+    direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
 export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
-    direction?: ButtonGroupDirection;
+    direction?: BreakpointCustomizable<ButtonGroupDirection>;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/button-pure.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { AlignLabel, SelectedAriaAttributes, ButtonAriaAttributes, BreakpointCustomizable, LinkButtonPureIconName, TextSize, ThemeExtendedElectricDark, ButtonType, TextWeight } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, ButtonAriaAttributes, LinkButtonPureIconName, TextSize, ThemeExtendedElectricDark, ButtonType, TextWeight } from '../types';
 export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Display button in active state.
@@ -8,7 +8,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aligns the label.
      */
-    alignLabel?: AlignLabel;
+    alignLabel?: BreakpointCustomizable<AlignLabel>;
     /**
      * Add ARIA attributes.
      */
@@ -67,7 +67,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Aligns the label.
      */
-    alignLabel?: AlignLabel;
+    alignLabel?: BreakpointCustomizable<AlignLabel>;
     /**
      * Add ARIA attributes.
      */

package/ssr/lib/components/divider.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { DividerColor, DividerOrientation, Theme } from '../types';
+import type { DividerColor, BreakpointCustomizable, DividerOrientation, Theme } from '../types';
 export type PDividerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines color depending on theme.
@@ -8,7 +8,7 @@ export type PDividerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines orientation.
      */
-    orientation?: DividerOrientation;
+    orientation?: BreakpointCustomizable<DividerOrientation>;
     /**
      * Adapts color depending on theme.
      */
@@ -22,7 +22,7 @@ export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Defines orientation.
      */
-    orientation?: DividerOrientation;
+    orientation?: BreakpointCustomizable<DividerOrientation>;
     /**
      * Adapts color depending on theme.
      */

package/ssr/lib/components/flex-item.wrapper.d.ts

@@ -1,56 +1,56 @@
 import { HTMLAttributes } from 'react';
-import type { FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
+import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
 export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */
-    alignSelf?: FlexItemAlignSelf;
+    alignSelf?: BreakpointCustomizable<FlexItemAlignSelf>;
     /**
      * The shorthand property for the combined definition of "shrink", "grow" and "basis"
      */
-    flex?: FlexItemFlex;
+    flex?: BreakpointCustomizable<FlexItemFlex>;
     /**
      * The ability to allow/disallow the flex child to grow.
      */
-    grow?: FlexItemGrow;
+    grow?: BreakpointCustomizable<FlexItemGrow>;
     /**
      * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    offset?: FlexItemOffset;
+    offset?: BreakpointCustomizable<FlexItemOffset>;
     /**
      * The ability to allow/disallow the flex child to shrink.
      */
-    shrink?: FlexItemShrink;
+    shrink?: BreakpointCustomizable<FlexItemShrink>;
     /**
      * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    width?: FlexItemWidth;
+    width?: BreakpointCustomizable<FlexItemWidth>;
 };
 export declare const PFlexItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */
-    alignSelf?: FlexItemAlignSelf;
+    alignSelf?: BreakpointCustomizable<FlexItemAlignSelf>;
     /**
      * The shorthand property for the combined definition of "shrink", "grow" and "basis"
      */
-    flex?: FlexItemFlex;
+    flex?: BreakpointCustomizable<FlexItemFlex>;
     /**
      * The ability to allow/disallow the flex child to grow.
      */
-    grow?: FlexItemGrow;
+    grow?: BreakpointCustomizable<FlexItemGrow>;
     /**
      * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    offset?: FlexItemOffset;
+    offset?: BreakpointCustomizable<FlexItemOffset>;
     /**
      * The ability to allow/disallow the flex child to shrink.
      */
-    shrink?: FlexItemShrink;
+    shrink?: BreakpointCustomizable<FlexItemShrink>;
     /**
      * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    width?: FlexItemWidth;
+    width?: BreakpointCustomizable<FlexItemWidth>;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/flex.wrapper.d.ts

@@ -1,56 +1,56 @@
 import { HTMLAttributes } from 'react';
-import type { FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
+import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
 export type PFlexProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */
-    alignContent?: FlexAlignContent;
+    alignContent?: BreakpointCustomizable<FlexAlignContent>;
     /**
      * Defines how the flex items are aligned along the cross axis.
      */
-    alignItems?: FlexAlignItems;
+    alignItems?: BreakpointCustomizable<FlexAlignItems>;
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
      */
-    direction?: FlexDirection;
+    direction?: BreakpointCustomizable<FlexDirection>;
     /**
      * Defines the flex containers content flow if 2 or more containers are siblings of each other.
      */
-    inline?: FlexInline;
+    inline?: BreakpointCustomizable<FlexInline>;
     /**
      * Defines how the flex items are aligned along the main axis.
      */
-    justifyContent?: FlexJustifyContent;
+    justifyContent?: BreakpointCustomizable<FlexJustifyContent>;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: FlexWrap;
+    wrap?: BreakpointCustomizable<FlexWrap>;
 };
 export declare const PFlex: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */
-    alignContent?: FlexAlignContent;
+    alignContent?: BreakpointCustomizable<FlexAlignContent>;
     /**
      * Defines how the flex items are aligned along the cross axis.
      */
-    alignItems?: FlexAlignItems;
+    alignItems?: BreakpointCustomizable<FlexAlignItems>;
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
      */
-    direction?: FlexDirection;
+    direction?: BreakpointCustomizable<FlexDirection>;
     /**
      * Defines the flex containers content flow if 2 or more containers are siblings of each other.
      */
-    inline?: FlexInline;
+    inline?: BreakpointCustomizable<FlexInline>;
     /**
      * Defines how the flex items are aligned along the main axis.
      */
-    justifyContent?: FlexJustifyContent;
+    justifyContent?: BreakpointCustomizable<FlexJustifyContent>;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: FlexWrap;
+    wrap?: BreakpointCustomizable<FlexWrap>;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/grid-item.wrapper.d.ts

@@ -1,24 +1,24 @@
 import { HTMLAttributes } from 'react';
-import type { GridItemOffset, GridItemSize } from '../types';
+import type { BreakpointCustomizable, GridItemOffset, GridItemSize } from '../types';
 export type PGridItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    offset?: GridItemOffset;
+    offset?: BreakpointCustomizable<GridItemOffset>;
     /**
      * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    size?: GridItemSize;
+    size?: BreakpointCustomizable<GridItemSize>;
 };
 export declare const PGridItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    offset?: GridItemOffset;
+    offset?: BreakpointCustomizable<GridItemOffset>;
     /**
      * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    size?: GridItemSize;
+    size?: BreakpointCustomizable<GridItemSize>;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/grid.wrapper.d.ts

@@ -1,32 +1,32 @@
 import { HTMLAttributes } from 'react';
-import type { GridDirection, GridGutter, GridWrap } from '../types';
+import type { BreakpointCustomizable, GridDirection, GridGutter, GridWrap } from '../types';
 export type PGridProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */
-    direction?: GridDirection;
+    direction?: BreakpointCustomizable<GridDirection>;
     /**
      * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
      */
-    gutter?: GridGutter;
+    gutter?: BreakpointCustomizable<GridGutter>;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: GridWrap;
+    wrap?: BreakpointCustomizable<GridWrap>;
 };
 export declare const PGrid: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */
-    direction?: GridDirection;
+    direction?: BreakpointCustomizable<GridDirection>;
     /**
      * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
      */
-    gutter?: GridGutter;
+    gutter?: BreakpointCustomizable<GridGutter>;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: GridWrap;
+    wrap?: BreakpointCustomizable<GridWrap>;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/icon.wrapper.d.ts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, IconAriaAttributes, TextColor, IconName, IconSize, ThemeExtendedElectricDark } from '../types';
+import type { SelectedAriaAttributes, IconAriaAttribute, TextColor, IconName, IconSize, ThemeExtendedElectricDark } from '../types';
 export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<IconAriaAttributes>;
+    aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
      * Basic color variations depending on theme property.
      */
@@ -34,7 +34,7 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<IconAriaAttributes>;
+    aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
      * Basic color variations depending on theme property.
      */