@porsche-design-system/components-react 4.2.0 → 4.3.0

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, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ react.forwardRef(({ activeTabIndex = 0, aria, 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, background, compact, size, weight];
+    const propsToSync = [activeTabIndex, aria, background, compact, size, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'aria', '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, background, compact, size, weight, children })),
+                children: (jsxRuntime.jsx(tabs.DSRTabs, { activeTabIndex, aria, background, compact, size, weight, children })),
             }
             : {
                 children,

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

@@ -21,7 +21,7 @@ class DSRScroller extends react.Component {
     render() {
         splitChildren.splitChildren(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] }));
+        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", ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), 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/tabs-bar.cjs

@@ -26,7 +26,12 @@ class DSRTabsBar extends react.Component {
     render() {
         const { children} = splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stylesEntry.getTabsBarCss(this.props.background, this.props.size, this.props.compact, utilsEntry.getSanitizedActiveTabIndex(this.props.activeTabIndex, children)));
-        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" })] })] }), 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(scroller_wrapper.PScroller, { className: "scroller", compact: this.props.compact, ...(this.props.isTabList && {
+                                aria: {
+                                    role: 'tablist',
+                                    ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
+                                },
+                            }), children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx("span", { className: "bar" })] })] }), this.props.children] }));
     }
 }
 

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

@@ -23,7 +23,7 @@ class DSRTabs extends react.Component {
             ? { ...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, 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] }));
+        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, aria: this.props.aria, 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] }));
     }
 }