@porsche-design-system/components-react 3.5.0-rc.0 → 3.6.0-rc.0

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/hooks.cjs

@@ -0,0 +1,70 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var provider = require('./provider.cjs');
+var utils = require('./utils.cjs');
+
+let skipCheck = false;
+/**
+ * sets a flag that skips the need for `PorscheDesignSystemProvider` during testing
+ * when `process.env.NODE_ENV === 'test'`
+ */
+const skipCheckForPorscheDesignSystemProviderDuringTests = () => {
+    skipCheck = true;
+};
+const usePrefix = (tagName) => {
+    if (process.env.NODE_ENV === 'test' && skipCheck) {
+        return tagName;
+    }
+    else {
+        const { prefix } = react.useContext(provider.PorscheDesignSystemContext); // eslint-disable-line react-hooks/rules-of-hooks
+        if (prefix === undefined) {
+            throw new Error('It appears the <PorscheDesignSystemProvider /> is missing. Make sure to wrap your App in it.');
+        }
+        return prefix ? prefix + '-' + tagName : tagName;
+    }
+};
+const useEventCallback = (ref, eventName, eventHandler) => {
+    react.useEffect(() => {
+        const { current } = ref;
+        if (current && eventHandler) {
+            current.addEventListener(eventName, eventHandler);
+            return () => current?.removeEventListener(eventName, eventHandler);
+        }
+    }, [eventHandler]); // eslint-disable-line react-hooks/exhaustive-deps
+};
+const useMergedClass = (ref, className) => {
+    const prevComponentClassName = react.useRef();
+    return react.useMemo(() => {
+        if (!className) {
+            return undefined;
+        }
+        const { current } = ref;
+        let newClassName = className;
+        if (current) {
+            newClassName = utils.getMergedClassName(current.className, prevComponentClassName.current, className);
+            // the jsx does not override className when the attribute changes
+            current.className = newClassName;
+        }
+        prevComponentClassName.current = className;
+        return newClassName;
+    }, [className]); // eslint-disable-line react-hooks/exhaustive-deps
+};
+const useBrowserLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
+const useToastManager = () => {
+    const tagName = usePrefix('p-toast');
+    return {
+        addMessage: (message) => {
+            const toast = document.body.querySelector(tagName);
+            customElements.whenDefined(tagName).then(() => toast.addMessage(message));
+        },
+    };
+};
+
+exports.skipCheckForPorscheDesignSystemProviderDuringTests = skipCheckForPorscheDesignSystemProviderDuringTests;
+exports.useBrowserLayoutEffect = useBrowserLayoutEffect;
+exports.useEventCallback = useEventCallback;
+exports.useMergedClass = useMergedClass;
+exports.usePrefix = usePrefix;
+exports.useToastManager = useToastManager;

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

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var accordion = require('../dsr-components/accordion.cjs');
+
+const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme = 'light', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'accordionChange', onAccordionChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = hooks.usePrefix('p-accordion');
+    const propsToSync = [compact, heading, open, size, tag, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['compact', 'heading', 'open', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(accordion.DSRAccordion, { compact, heading, open, size, tag, theme, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PAccordion = PAccordion;

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

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var banner = require('../dsr-components/banner.cjs');
+
+const PBanner = react.forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme = 'light', width, className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
+    const WebComponentTag = hooks.usePrefix('p-banner');
+    const propsToSync = [description, dismissButton, heading, open, persistent, state, theme, width];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'dismissButton', 'heading', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(banner.DSRBanner, { description, dismissButton, heading, open, persistent, state, theme, width, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PBanner = PBanner;

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

@@ -0,0 +1,37 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var buttonGroup = require('../dsr-components/button-group.cjs');
+
+const PButtonGroup = react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-button-group');
+    hooks.useBrowserLayoutEffect(() => {
+        elementRef.current.direction = direction;
+    }, [direction]);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(buttonGroup.DSRButtonGroup, { direction, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PButtonGroup = PButtonGroup;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var buttonPure = require('../dsr-components/button-pure.cjs');
+
+const PButtonPure = react.forwardRef(({ active = false, alignLabel = 'right', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, size = 'small', stretch = false, theme = 'light', type = 'submit', weight = 'regular', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-button-pure');
+    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, size, stretch, theme, type, weight];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'size', 'stretch', 'theme', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(buttonPure.DSRButtonPure, { active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, size, stretch, theme, type, weight, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PButtonPure = PButtonPure;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var buttonTile = require('../dsr-components/button-tile.cjs');
+
+const PButtonTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-button-tile');
+    const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(buttonTile.DSRButtonTile, { align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PButtonTile = PButtonTile;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var button = require('../dsr-components/button.cjs');
+
+const PButton = react.forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, theme = 'light', type = 'submit', variant = 'primary', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-button');
+    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, theme, type, variant];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'theme', 'type', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(button.DSRButton, { aria, disabled, hideLabel, icon, iconSource, loading, theme, type, variant, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PButton = PButton;

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

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var carousel = require('../dsr-components/carousel.cjs');
+
+const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = hooks.usePrefix('p-carousel');
+    const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme, width, wrapContent];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['activeSlideIndex', 'alignHeader', 'description', 'disablePagination', 'heading', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(carousel.DSRCarousel, { activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme, width, wrapContent, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PCarousel = PCarousel;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var checkboxWrapper = require('../dsr-components/checkbox-wrapper.cjs');
+
+const PCheckboxWrapper = react.forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-checkbox-wrapper');
+    const propsToSync = [hideLabel, label, loading, message, state, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(checkboxWrapper.DSRCheckboxWrapper, { hideLabel, label, loading, message, state, theme, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PCheckboxWrapper = PCheckboxWrapper;

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

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var contentWrapper = require('../dsr-components/content-wrapper.cjs');
+
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
+const PContentWrapper = react.forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'extended', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-content-wrapper');
+    const propsToSync = [backgroundColor, theme, width];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['backgroundColor', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(contentWrapper.DSRContentWrapper, { backgroundColor, theme, width, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PContentWrapper = PContentWrapper;

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

@@ -0,0 +1,38 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var crest = require('../dsr-components/crest.cjs');
+
+const PCrest = react.forwardRef(({ aria, href, target = '_self', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-crest');
+    const propsToSync = [aria, href, target];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(crest.DSRCrest, { aria, href, target })),
+            }
+            : {
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PCrest = PCrest;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var display = require('../dsr-components/display.cjs');
+
+const PDisplay = react.forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'large', tag, theme = 'light', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-display');
+    const propsToSync = [align, color, ellipsis, size, tag, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(display.DSRDisplay, { align, color, ellipsis, size, tag, theme, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PDisplay = PDisplay;

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

@@ -0,0 +1,38 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var divider = require('../dsr-components/divider.cjs');
+
+const PDivider = react.forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-divider');
+    const propsToSync = [color, direction, orientation, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['color', 'direction', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(divider.DSRDivider, { color, direction, orientation, theme })),
+            }
+            : {
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PDivider = PDivider;

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

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var fieldsetWrapper = require('../dsr-components/fieldset-wrapper.cjs');
+
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
+const PFieldsetWrapper = react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-fieldset-wrapper');
+    const propsToSync = [label, labelSize, message, required, state, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(fieldsetWrapper.DSRFieldsetWrapper, { label, labelSize, message, required, state, theme, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PFieldsetWrapper = PFieldsetWrapper;

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

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var fieldset = require('../dsr-components/fieldset.cjs');
+
+const PFieldset = react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-fieldset');
+    const propsToSync = [label, labelSize, message, required, state, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(fieldset.DSRFieldset, { label, labelSize, message, required, state, theme, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PFieldset = PFieldset;