@porsche-design-system/components-react 4.0.0-beta.1 → 4.0.0-beta.2

package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs

@@ -3242,8 +3242,6 @@ const parseJSONAttribute = (attribute) => {
         // Convert tmp colon to real colon after all other replacements
         .replace(/__tmp-colon__/g, ':'));
 };
-
-const hasWindow$1 = typeof window !== 'undefined';
 const parseAndGetAriaAttributes = (rawAttributes) => {
     if (rawAttributes) {
         return Object.fromEntries(Object.entries(parseJSONAttribute(rawAttributes)).map(([key, val]) => [
@@ -3254,7 +3252,6 @@ const parseAndGetAriaAttributes = (rawAttributes) => {
     }
     return undefined;
 };
-hasWindow$1 && window.matchMedia?.('(forced-colors: active)').matches;
 
 const getButtonBaseAriaAttributes = (isDisabled, isLoading) => {
     return {
@@ -3399,6 +3396,8 @@ supportsConstructableStylesheets();
     }
 })(); // determine it once
 
+const hasWindow$1 = typeof window !== 'undefined';
+
 const attributeMutationMap = new Map();
 hasWindow$1 &&
     new MutationObserver((mutations) => {
@@ -3449,18 +3448,12 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.0.0-beta.1"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.0.0-beta.2"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);
 };
 
-// This class is shared since the popover needs to register a scroll listener to this node in order to hide the popover when the table is scrolled
-const scrollAreaClass = 'scroll-area';
-const isScrollable = (isPrevHidden, isNextHidden) => {
-    return !(isPrevHidden && isNextHidden);
-};
-
 /**
  * Checks if the current environment supports the native Popover API.
  *
@@ -4015,7 +4008,6 @@ exports.isDisabledOrLoading = isDisabledOrLoading;
 exports.isElementOfKind = isElementOfKind;
 exports.isInfinitePagination = isInfinitePagination;
 exports.isListTypeOrdered = isListTypeOrdered;
-exports.isScrollable = isScrollable;
 exports.isSortable = isSortable;
 exports.isStateCompleteOrWarning = isStateCompleteOrWarning;
 exports.isUrl = isUrl;
@@ -4023,7 +4015,6 @@ exports.labelId = labelId;
 exports.observedNodesMap = observedNodesMap;
 exports.parseAndGetAriaAttributes = parseAndGetAriaAttributes;
 exports.parseJSONAttribute = parseJSONAttribute;
-exports.scrollAreaClass = scrollAreaClass;
 exports.supportsConstructableStylesheets = supportsConstructableStylesheets;
 exports.supportsNativePopover = supportsNativePopover;
 exports.tempDiv = tempDiv;

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var scroller = require('../dsr-components/scroller.cjs');
 
-const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'center', aria, scrollToPosition, scrollbar = false, className, children, ...rest }, ref) => {
+const PScroller = /*#__PURE__*/ react.forwardRef(({ alignScrollIndicator = 'center', aria, compact, scrollToPosition, scrollbar = false, sticky = false, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, aria, scrollToPosition, scrollbar];
+    const propsToSync = [alignScrollIndicator, aria, compact, scrollToPosition, scrollbar, sticky];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'aria', 'scrollToPosition', 'scrollbar'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'compact', 'scrollToPosition', 'scrollbar', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(scroller.DSRScroller, { alignScrollIndicator, aria, scrollToPosition, scrollbar, children })),
+                children: (jsxRuntime.jsx(scroller.DSRScroller, { alignScrollIndicator, aria, compact, scrollToPosition, scrollbar, sticky, children })),
             }
             : {
                 children,

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

@@ -7,21 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var table = require('../dsr-components/table.cjs');
 
-const PTable = /*#__PURE__*/ react.forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, className, children, ...rest }, ref) => {
+const PTable = /*#__PURE__*/ react.forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, sticky = false, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
-    const propsToSync = [caption, compact, layout];
+    const propsToSync = [caption, compact, layout, sticky];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['caption', 'compact', 'layout'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['caption', 'compact', 'layout', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(table.DSRTable, { caption, compact, layout, children })),
+                children: (jsxRuntime.jsx(table.DSRTable, { caption, compact, layout, sticky, children })),
             }
             : {
                 children,

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

@@ -7,21 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tabsBar = require('../dsr-components/tabs-bar.cjs');
 
-const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ react.forwardRef(({ activeTabIndex, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, size, weight];
+    const propsToSync = [activeTabIndex, background, compact, size, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabsBar.DSRTabsBar, { activeTabIndex, size, weight, children })),
+                children: (jsxRuntime.jsx(tabsBar.DSRTabsBar, { activeTabIndex, background, compact, size, weight, children })),
             }
             : {
                 children,

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

@@ -7,21 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tabs = require('../dsr-components/tabs.cjs');
 
-const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, size, weight];
+    const propsToSync = [activeTabIndex, background, compact, size, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabs.DSRTabs, { activeTabIndex, size, weight, children })),
+                children: (jsxRuntime.jsx(tabs.DSRTabs, { activeTabIndex, background, compact, size, weight, children })),
             }
             : {
                 children,

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

@@ -1,31 +1,27 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
 var splitChildren = require('../../splitChildren.cjs');
+var react = require('react');
 var minifyCss = require('../../minifyCss.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var button_wrapper = require('../components/button.wrapper.cjs');
 
 /**
  * @slot {"name": "", "description": "Default slot for the scroller content." }
  */
 class DSRScroller extends react.Component {
     host;
-    isPrevHidden = true;
-    isNextHidden = true;
+    isIndicatorPrevVisible = false;
+    isIndicatorNextVisible = false;
     intersectionObserver;
-    scrollAreaElement;
+    scrollArea;
+    sentinelLeft;
+    sentinelRight;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const renderPrevNextButton = (direction) => {
-            return (jsxRuntime.jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsxRuntime.jsx(button_wrapper.PButton, { className: "action-button", variant: "secondary", "hide-label": "true", icon: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', type: "button", tabIndex: -1, dir: "ltr" // Otherwise icon will be flipped which doesn't make sense in this use case
-                    , children: direction }) }, direction));
-        };
-        const style = minifyCss.minifyCss(stylesEntry.getScrollerCss(this.isNextHidden, this.isPrevHidden, this.props.alignScrollIndicator, this.props.scrollbar));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("div", { className: utilsEntry.scrollAreaClass, children: jsxRuntime.jsxs("div", { className: "scroll-wrapper", role: utilsEntry.parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: utilsEntry.isScrollable(this.isPrevHidden, this.isNextHidden) ? 0 : null, children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("div", { className: "trigger" }), jsxRuntime.jsx("div", { className: "trigger" })] }) }), ['prev', 'next'].map(renderPrevNextButton)] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stylesEntry.getScrollerCss(this.props.isIndicatorPrevVisible, this.props.isIndicatorNextVisible, this.props.sticky, this.props.scrollbar, this.props.compact));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("span", { className: "prev" }), jsxRuntime.jsx("span", { className: "next" }), jsxRuntime.jsxs("div", { className: "scroll", role: utilsEntry.parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: this.props.isIndicatorPrevVisible || this.props.isIndicatorNextVisible ? 0 : null, children: [jsxRuntime.jsx("span", { className: "sentinel" }), jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("span", { className: "sentinel" })] })] })] }), this.props.children] }));
     }
 }
 

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

@@ -17,7 +17,7 @@ class DSRSelectOption extends react.Component {
         splitChildren.splitChildren(this.props.children);
         const { selected: isSelected, highlighted, hidden } = this.props;
         const isDisabled = this.props.disabled || this.props.disabledParent;
-        const style = minifyCss.minifyCss(stylesEntry.getSelectOptionCss(this.props.disabled));
+        const style = minifyCss.minifyCss(stylesEntry.getSelectOptionCss(isDisabled));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } })
                         // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
                         , "// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259", jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: Object.entries({

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

@@ -13,9 +13,10 @@ var scroller_wrapper = require('../components/scroller.wrapper.cjs');
  */
 class DSRStepperHorizontal extends react.Component {
     host;
+    scroller;
     stepperHorizontalItems = [];
-    scrollerElement;
-    currentStepIndex;
+    slot;
+    resizeObserver;
     render() {
         const { children, otherChildren } = splitChildren.splitChildren(this.props.children);
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)

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

@@ -22,7 +22,7 @@ class DSRTable extends react.Component {
             ? { 'aria-label': this.props.caption }
             : hasSlottedCaption && { 'aria-labelledby': captionId };
         const style = minifyCss.minifyCss(stylesEntry.getTableCss(this.props.compact, this.props.layout));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSlottedCaption && (jsxRuntime.jsx("div", { id: captionId, className: "caption", children: jsxRuntime.jsx("slot", { name: "caption" }) })), jsxRuntime.jsx(scroller_wrapper.PScroller, { scrollbar: true, children: jsxRuntime.jsx("div", { className: "table", role: "table", ...tableAttr, children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSlottedCaption && (jsxRuntime.jsx("div", { id: captionId, className: "caption", children: jsxRuntime.jsx("slot", { name: "caption" }) })), jsxRuntime.jsx(scroller_wrapper.PScroller, { scrollbar: true, compact: this.props.compact, sticky: this.props.sticky, children: jsxRuntime.jsx("div", { className: "table", role: "table", ...tableAttr, children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -15,13 +15,13 @@ var scroller_wrapper = require('../components/scroller.wrapper.cjs');
  */
 class DSRTabsBar extends react.Component {
     host;
-    tabElements = [];
-    internalTabIndex = this.props.activeTabIndex; // to not override and mutate external prop value
-    barElement;
-    scrollerElement;
-    direction = 'next';
+    tabs = [];
+    bar;
+    scroller;
+    slot;
     hasPTabsParent;
-    areTabsButtons;
+    isTabList;
+    resizeObserver;
     render() {
         const { children, otherChildren } = splitChildren.splitChildren(this.props.children);
         const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
@@ -45,8 +45,8 @@ class DSRTabsBar extends react.Component {
                     }
                     : child
             : child);
-        const style = minifyCss.minifyCss(stylesEntry.getTabsBarCss(this.props.size, this.props.weight));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(scroller_wrapper.PScroller, { className: "scroller", ...(this.props.areTabsButtons && { aria: { role: 'tablist' } }), alignScrollIndicator: "top", children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("span", { className: "bar" })] })] }), manipulatedChildren] }));
+        const style = minifyCss.minifyCss(stylesEntry.getTabsBarCss(this.props.background, this.props.size, this.props.compact));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(scroller_wrapper.PScroller, { className: "scroller", compact: this.props.compact, ...(this.props.isTabList && { aria: { role: 'tablist' } }), children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("span", { className: "bar" })] })] }), manipulatedChildren] }));
     }
 }
 

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

@@ -15,14 +15,15 @@ var tabsBar_wrapper = require('../components/tabs-bar.wrapper.cjs');
  */
 class DSRTabs extends react.Component {
     host;
-    tabsItemElements = [];
+    tabsItems = [];
+    slot;
     render() {
         const { children, otherChildren } = splitChildren.splitChildren(this.props.children);
         const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, theme: this.props.theme, hidden: this.props.activeTabIndex !== i ? true : null } }
             : child);
         const style = minifyCss.minifyCss(stylesEntry.getTabsCss());
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(tabsBar_wrapper.PTabsBar, { className: "root", size: this.props.size, weight: this.props.weight, 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] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(tabsBar_wrapper.PTabsBar, { className: "root", size: this.props.size, background: this.props.background, compact: this.props.compact, 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] }));
     }
 }