@porsche-design-system/components-react 2.17.0 → 2.18.0-rc.1

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+
+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)
+            ? { ...child, props: { ...child.props, listType: this.props.listType, orderType: this.props.orderType } }
+            : child);
+        const TagType = this.props.listType === 'unordered' ? 'ul' : 'ol';
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextListCss(this.props.theme)));
+        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(TagType, { role: "list", children: jsxRuntime.jsx("slot", {}) }) })] }), manipulatedChildren] }));
+    }
+}
+
+exports.DSRTextList = DSRTextList;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
+
+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); });
+        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;
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTextCss(this.props.size, this.props.weight, this.props.align, this.props.color, this.props.ellipsis, this.props.theme)));
+        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(TagType, { className: "root", children: jsxRuntime.jsx("slot", {}) }) })] }), this.props.children] }));
+    }
+}
+
+exports.DSRText = DSRText;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+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 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] }));
+    }
+}
+
+exports.DSRTextareaWrapper = DSRTextareaWrapper;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var minifyCss = require('../../minifyCss.js');
+var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
+var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
+
+class DSRToast extends react.Component {
+    render() {
+        const toast = false;
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getToastCss().replace(/(:host {[\S\s]+?})[\S\s]+/, '$1')));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: toast  })] }) }));
+    }
+}
+
+exports.DSRToast = DSRToast;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const minifyCss = (css) => css.replace(/\s\s+|\.\\(?=:)|[\n\\]+| (?={)|;(?=\s+})|(:|media)\s(?=.*;?)/g, '$1');
+
+exports.minifyCss = minifyCss;

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var componentsJs = require('@porsche-design-system/components-js');
+
+// to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
+const PorscheDesignSystemContext = react.createContext({
+    prefix: undefined,
+});
+const PorscheDesignSystemProvider = ({ prefix = '', ...props }) => {
+    react.useEffect(() => {
+        componentsJs.load({ prefix });
+    }, [prefix]);
+    return jsxRuntime.jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
+};
+
+exports.PorscheDesignSystemContext = PorscheDesignSystemContext;
+exports.PorscheDesignSystemProvider = PorscheDesignSystemProvider;

package/ssr/components-react/projects/react-ssr-wrapper/src/public-api.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var componentsJs = require('@porsche-design-system/components-js');
+var accordion_wrapper = require('./lib/components/accordion.wrapper.js');
+var banner_wrapper = require('./lib/components/banner.wrapper.js');
+var button_wrapper = require('./lib/components/button.wrapper.js');
+var buttonGroup_wrapper = require('./lib/components/button-group.wrapper.js');
+var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.js');
+var carousel_wrapper = require('./lib/components/carousel.wrapper.js');
+var checkboxWrapper_wrapper = require('./lib/components/checkbox-wrapper.wrapper.js');
+var contentWrapper_wrapper = require('./lib/components/content-wrapper.wrapper.js');
+var divider_wrapper = require('./lib/components/divider.wrapper.js');
+var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper.js');
+var flex_wrapper = require('./lib/components/flex.wrapper.js');
+var flexItem_wrapper = require('./lib/components/flex-item.wrapper.js');
+var grid_wrapper = require('./lib/components/grid.wrapper.js');
+var gridItem_wrapper = require('./lib/components/grid-item.wrapper.js');
+var headline_wrapper = require('./lib/components/headline.wrapper.js');
+var icon_wrapper = require('./lib/components/icon.wrapper.js');
+var inlineNotification_wrapper = require('./lib/components/inline-notification.wrapper.js');
+var link_wrapper = require('./lib/components/link.wrapper.js');
+var linkPure_wrapper = require('./lib/components/link-pure.wrapper.js');
+var linkSocial_wrapper = require('./lib/components/link-social.wrapper.js');
+var linkTile_wrapper = require('./lib/components/link-tile.wrapper.js');
+var marque_wrapper = require('./lib/components/marque.wrapper.js');
+var modal_wrapper = require('./lib/components/modal.wrapper.js');
+var pagination_wrapper = require('./lib/components/pagination.wrapper.js');
+var popover_wrapper = require('./lib/components/popover.wrapper.js');
+var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.wrapper.js');
+var scroller_wrapper = require('./lib/components/scroller.wrapper.js');
+var segmentedControl_wrapper = require('./lib/components/segmented-control.wrapper.js');
+var segmentedControlItem_wrapper = require('./lib/components/segmented-control-item.wrapper.js');
+var selectWrapper_wrapper = require('./lib/components/select-wrapper.wrapper.js');
+var spinner_wrapper = require('./lib/components/spinner.wrapper.js');
+var stepperHorizontal_wrapper = require('./lib/components/stepper-horizontal.wrapper.js');
+var stepperHorizontalItem_wrapper = require('./lib/components/stepper-horizontal-item.wrapper.js');
+var switch_wrapper = require('./lib/components/switch.wrapper.js');
+var table_wrapper = require('./lib/components/table.wrapper.js');
+var tableBody_wrapper = require('./lib/components/table-body.wrapper.js');
+var tableCell_wrapper = require('./lib/components/table-cell.wrapper.js');
+var tableHead_wrapper = require('./lib/components/table-head.wrapper.js');
+var tableHeadCell_wrapper = require('./lib/components/table-head-cell.wrapper.js');
+var tableHeadRow_wrapper = require('./lib/components/table-head-row.wrapper.js');
+var tableRow_wrapper = require('./lib/components/table-row.wrapper.js');
+var tabs_wrapper = require('./lib/components/tabs.wrapper.js');
+var tabsBar_wrapper = require('./lib/components/tabs-bar.wrapper.js');
+var tabsItem_wrapper = require('./lib/components/tabs-item.wrapper.js');
+var tag_wrapper = require('./lib/components/tag.wrapper.js');
+var tagDismissible_wrapper = require('./lib/components/tag-dismissible.wrapper.js');
+var text_wrapper = require('./lib/components/text.wrapper.js');
+var textFieldWrapper_wrapper = require('./lib/components/text-field-wrapper.wrapper.js');
+var textList_wrapper = require('./lib/components/text-list.wrapper.js');
+var textListItem_wrapper = require('./lib/components/text-list-item.wrapper.js');
+var textareaWrapper_wrapper = require('./lib/components/textarea-wrapper.wrapper.js');
+var toast_wrapper = require('./lib/components/toast.wrapper.js');
+var provider = require('./provider.js');
+var hooks = require('./hooks.js');
+var utils = require('./utils.js');
+
+
+
+Object.defineProperty(exports, 'componentsReady', {
+	enumerable: true,
+	get: function () { return componentsJs.componentsReady; }
+});
+exports.PAccordion = accordion_wrapper.PAccordion;
+exports.PBanner = banner_wrapper.PBanner;
+exports.PButton = button_wrapper.PButton;
+exports.PButtonGroup = buttonGroup_wrapper.PButtonGroup;
+exports.PButtonPure = buttonPure_wrapper.PButtonPure;
+exports.PCarousel = carousel_wrapper.PCarousel;
+exports.PCheckboxWrapper = checkboxWrapper_wrapper.PCheckboxWrapper;
+exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;
+exports.PDivider = divider_wrapper.PDivider;
+exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
+exports.PFlex = flex_wrapper.PFlex;
+exports.PFlexItem = flexItem_wrapper.PFlexItem;
+exports.PGrid = grid_wrapper.PGrid;
+exports.PGridItem = gridItem_wrapper.PGridItem;
+exports.PHeadline = headline_wrapper.PHeadline;
+exports.PIcon = icon_wrapper.PIcon;
+exports.PInlineNotification = inlineNotification_wrapper.PInlineNotification;
+exports.PLink = link_wrapper.PLink;
+exports.PLinkPure = linkPure_wrapper.PLinkPure;
+exports.PLinkSocial = linkSocial_wrapper.PLinkSocial;
+exports.PLinkTile = linkTile_wrapper.PLinkTile;
+exports.PMarque = marque_wrapper.PMarque;
+exports.PModal = modal_wrapper.PModal;
+exports.PPagination = pagination_wrapper.PPagination;
+exports.PPopover = popover_wrapper.PPopover;
+exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;
+exports.PScroller = scroller_wrapper.PScroller;
+exports.PSegmentedControl = segmentedControl_wrapper.PSegmentedControl;
+exports.PSegmentedControlItem = segmentedControlItem_wrapper.PSegmentedControlItem;
+exports.PSelectWrapper = selectWrapper_wrapper.PSelectWrapper;
+exports.PSpinner = spinner_wrapper.PSpinner;
+exports.PStepperHorizontal = stepperHorizontal_wrapper.PStepperHorizontal;
+exports.PStepperHorizontalItem = stepperHorizontalItem_wrapper.PStepperHorizontalItem;
+exports.PSwitch = switch_wrapper.PSwitch;
+exports.PTable = table_wrapper.PTable;
+exports.PTableBody = tableBody_wrapper.PTableBody;
+exports.PTableCell = tableCell_wrapper.PTableCell;
+exports.PTableHead = tableHead_wrapper.PTableHead;
+exports.PTableHeadCell = tableHeadCell_wrapper.PTableHeadCell;
+exports.PTableHeadRow = tableHeadRow_wrapper.PTableHeadRow;
+exports.PTableRow = tableRow_wrapper.PTableRow;
+exports.PTabs = tabs_wrapper.PTabs;
+exports.PTabsBar = tabsBar_wrapper.PTabsBar;
+exports.PTabsItem = tabsItem_wrapper.PTabsItem;
+exports.PTag = tag_wrapper.PTag;
+exports.PTagDismissible = tagDismissible_wrapper.PTagDismissible;
+exports.PText = text_wrapper.PText;
+exports.PTextFieldWrapper = textFieldWrapper_wrapper.PTextFieldWrapper;
+exports.PTextList = textList_wrapper.PTextList;
+exports.PTextListItem = textListItem_wrapper.PTextListItem;
+exports.PTextareaWrapper = textareaWrapper_wrapper.PTextareaWrapper;
+exports.PToast = toast_wrapper.PToast;
+exports.PorscheDesignSystemProvider = provider.PorscheDesignSystemProvider;
+exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
+exports.useToastManager = hooks.useToastManager;
+exports.skipPorscheDesignSystemCDNRequestsDuringTests = utils.skipPorscheDesignSystemCDNRequestsDuringTests;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const stripFocusAndHoverStyles = (css) => css.replace(/\n.*(?::focus|hover:hover)[\s\S]+?\n}/g, '');
+
+exports.stripFocusAndHoverStyles = stripFocusAndHoverStyles;

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

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const splitToArray =  (str) => str.split(' ').filter((str) => str);
+const getMergedClassName =  (domClassName, oldClassName = '', newClassName = '') => {
+    // classes previously set by component
+    const prevComponentClassNames = splitToArray(oldClassName);
+    // all classes not set by component -> to keep hydrated class and other classes set on host element
+    // (usually dom-manipulated class additions would be lost on rerender)
+    let domClasses = splitToArray(domClassName);
+    if (prevComponentClassNames.length) {
+        domClasses = domClasses.filter((x) => !prevComponentClassNames.includes(x));
+    }
+    // all classes set by component
+    const componentClasses = splitToArray(newClassName);
+    return componentClasses.concat(domClasses).join(' ');
+};
+const syncRef =  (elementRef, ref) => (el) => {
+    elementRef.current = el;
+    if (typeof ref === 'function') {
+        ref(el);
+    }
+    else if (ref !== null) {
+        ref.current = el;
+    }
+};
+const skipPorscheDesignSystemCDNRequestsDuringTests = () => {
+    window.PDS_SKIP_FETCH = true;
+};
+
+exports.getMergedClassName = getMergedClassName;
+exports.skipPorscheDesignSystemCDNRequestsDuringTests = skipPorscheDesignSystemCDNRequestsDuringTests;
+exports.syncRef = syncRef;