@porsche-design-system/components-react 3.27.0-rc.5 → 3.27.0

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

@@ -2351,18 +2351,18 @@ function getDynamicStyles(styles) {
 var index = createJss();
 
 var jss_esm = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  RuleList: RuleList,
-  SheetsManager: SheetsManager,
-  SheetsRegistry: SheetsRegistry,
-  create: createJss,
-  createGenerateId: createGenerateId,
-  createRule: createRule,
-  default: index,
-  getDynamicStyles: getDynamicStyles,
-  hasCSSTOMSupport: hasCSSTOMSupport,
-  sheets: sheets,
-  toCssValue: toCssValue
+    __proto__: null,
+    RuleList: RuleList,
+    SheetsManager: SheetsManager,
+    SheetsRegistry: SheetsRegistry,
+    create: createJss,
+    createGenerateId: createGenerateId,
+    createRule: createRule,
+    default: index,
+    getDynamicStyles: getDynamicStyles,
+    hasCSSTOMSupport: hasCSSTOMSupport,
+    sheets: sheets,
+    toCssValue: toCssValue
 });
 
 var at = '@global';
@@ -3187,9 +3187,6 @@ const getTagNameWithoutPrefix = (host) => {
     return (tagNameWithoutPrefix || tagName); // return tagName as fallback for default tags
 };
 
-// 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';
-
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 function getClosestHTMLElement(element, selector) {
     return element?.closest(selector);
@@ -3243,7 +3240,7 @@ const parseJSONAttribute = (attribute) => {
         .replace(/[\s"]?([\w-]+)[\s"]?:/g, '"$1":'));
 };
 
-const hasWindow = typeof window !== 'undefined';
+const hasWindow$1 = typeof window !== 'undefined';
 const parseAndGetAriaAttributes = (rawAttributes) => {
     if (rawAttributes) {
         return Object.fromEntries(Object.entries(parseJSONAttribute(rawAttributes)).map(([key, val]) => [
@@ -3254,7 +3251,7 @@ const parseAndGetAriaAttributes = (rawAttributes) => {
     }
     return undefined;
 };
-hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
+hasWindow$1 && window.matchMedia?.('(forced-colors: active)').matches;
 
 const getButtonBaseAriaAttributes = (isDisabled, isLoading) => {
     return {
@@ -3390,7 +3387,7 @@ supportsConstructableStylesheets();
 })(); // determine it once
 
 const attributeMutationMap = new Map();
-hasWindow &&
+hasWindow$1 &&
     new MutationObserver((mutations) => {
         for (const mutation of mutations
             // reduce array to only entries that have really a changed value
@@ -3402,7 +3399,7 @@ hasWindow &&
     });
 
 const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
-hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
+hasWindow$1 && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
 
 Object.entries(breakpoint).reduce((result, [key, val]) => ({ ...result, [`${val}px`]: key }), {});
 
@@ -3417,7 +3414,7 @@ const observedNodesMap = new Map();
 /**
  * Mutation observer for observing changes in the children of observed nodes.
  */
-hasWindow &&
+hasWindow$1 &&
     new MutationObserver((mutations) => {
         // there may be race conditions in jsdom-polyfill tests  where the map is already empty when a mutation happens
         if (observedNodesMap.size > 0) {
@@ -3432,7 +3429,7 @@ hasWindow &&
     });
 
 const isTouchDevice = () => {
-    if (!hasWindow) {
+    if (!hasWindow$1) {
         return undefined;
     }
     return !!('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
@@ -3467,6 +3464,9 @@ var MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png":
 
 // index.ts
 var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
+
+// 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);
 };
@@ -3535,7 +3535,7 @@ var unwrapErr = (result) => {
  * @returns {boolean} `true` if the native Popover API is supported, `false` otherwise.
  */
 const supportsNativePopover = () => {
-    if (!hasWindow) {
+    if (!hasWindow$1) {
         return false;
     }
     return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'popover');
@@ -3545,6 +3545,22 @@ const hasNativePopoverSupport = supportsNativePopover();
 // getter for easy mocking
 const getHasNativePopoverSupport = () => hasNativePopoverSupport;
 
+/**
+ * Checks if the current environment supports the native CSS Anchor Positioning.
+ *
+ * @returns {boolean} `true` if native CSS Anchor Positioning is supported, `false` otherwise.
+ */
+const supportsNativeCSSAnchorPositioning = () => {
+    // SSR or older browsers
+    if (typeof CSS === 'undefined' || !CSS.supports)
+        return false;
+    return CSS.supports('(anchor-name: --test) and (position-anchor: --test) and (position-area: bottom) and (position-try-fallbacks: flip-block) and (width: anchor-size(width))');
+};
+// determine it once
+const hasNativeCSSAnchorPositioningSupport = supportsNativeCSSAnchorPositioning();
+// getter for easy mocking
+const getHasCSSAnchorPositioningSupport = () => hasNativeCSSAnchorPositioningSupport;
+
 const hasDocument = typeof document !== 'undefined';
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -3574,6 +3590,7 @@ const getButtonAriaAttributes = (isDisabled, isLoading, aria) => {
 };
 getMediaQueryMin('s');
 getMediaQueryMin('xxl');
+['auto', ...Array.from(new Array(10), (_, i) => i + 1)];
 // Infinite bullets will be shown if the total number of bullets is greater than this value
 const INFINITE_BULLET_THRESHOLD = 5;
 const isInfinitePagination = (amountOfPages) => {
@@ -3938,6 +3955,7 @@ exports.getCurrentActivePage = getCurrentActivePage;
 exports.getDirectChildHTMLElement = getDirectChildHTMLElement;
 exports.getDisplayTagType = getDisplayTagType;
 exports.getHTMLElement = getHTMLElement;
+exports.getHasCSSAnchorPositioningSupport = getHasCSSAnchorPositioningSupport;
 exports.getHasNativePopoverSupport = getHasNativePopoverSupport;
 exports.getHeadingTagType = getHeadingTagType;
 exports.getHeadlineTagType = getHeadlineTagType;
@@ -3963,7 +3981,7 @@ exports.hasDocument = hasDocument;
 exports.hasLocateAction = hasLocateAction;
 exports.hasSpecificDirectChildTag = hasSpecificDirectChildTag;
 exports.hasVisibleIcon = hasVisibleIcon;
-exports.hasWindow = hasWindow;
+exports.hasWindow = hasWindow$1;
 exports.headerSlot = headerSlot;
 exports.isCurrentInput = isCurrentInput;
 exports.isCustomDropdown = isCustomDropdown;
@@ -3984,6 +4002,7 @@ exports.parseJSONAttribute = parseJSONAttribute;
 exports.scrollAreaClass = scrollAreaClass;
 exports.showCustomCalendarOrTimeIndicator = showCustomCalendarOrTimeIndicator;
 exports.supportsConstructableStylesheets = supportsConstructableStylesheets;
+exports.supportsNativeCSSAnchorPositioning = supportsNativeCSSAnchorPositioning;
 exports.supportsNativePopover = supportsNativePopover;
 exports.tempDiv = tempDiv;
 exports.tempIcon = tempIcon;

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

@@ -7,22 +7,22 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var carousel = require('../dsr-components/carousel.cjs');
 
-const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, children, ...rest }, ref) => {
+const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignControls = 'auto', alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), trimSpace, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignControls, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), trimSpace, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignControls', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(carousel.DSRCarousel, { activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || hooks.useTheme(), trimSpace, width, wrapContent, children })),
+                children: (jsxRuntime.jsx(carousel.DSRCarousel, { activeSlideIndex, alignControls, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || hooks.useTheme(), trimSpace, width, wrapContent, children })),
             }
             : {
                 children,

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

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

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

@@ -57,7 +57,7 @@ class DSRCarousel extends react.Component {
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
             : this.props.pagination, utilsEntry.isInfinitePagination(this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] ||
-            this.props.alignHeader), this.props.theme, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length))));
+            this.props.alignHeader), this.props.theme, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length), this.props.alignControls)));
         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.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
                                             (this.props.heading ? (jsxRuntime.jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsxRuntime.jsx("div", { className: "heading", id: headingId, children: jsxRuntime.jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
                                         'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,

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

@@ -15,7 +15,7 @@ class DSRMultiSelectOption extends react.Component {
     host;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const { theme = 'light', selected, highlighted, hidden, textContent } = this.props;
+        const { theme = 'light', selected, highlighted } = this.props;
         this.props.disabled || this.props.disabledParent;
         minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getMultiSelectOptionCss(theme)));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, {}));

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

@@ -32,13 +32,13 @@ class DSRMultiSelect extends react.Component {
     defaultValue;
     multiSelectOptions = [];
     multiSelectOptgroups = [];
-    inputContainer;
     inputElement;
-    listElement;
+    resetButtonElement;
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
-    isNativePopoverCase = false;
-    parentTableElement;
     popoverElement;
+    hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
+    hasNativeCSSAnchorPositioningSupport = utilsEntry.getHasCSSAnchorPositioningSupport();
+    cleanUpAutoUpdate;
     get currentValue() {
         return utilsEntry.getSelectedOptionValues(this.props.multiSelectOptions);
     }
@@ -58,17 +58,11 @@ class DSRMultiSelect extends react.Component {
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const optionsSelectedId = 'options-selected';
-        const dropdownId = 'list';
         const inputId = 'filter';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getMultiSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxRuntime.jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [utilsEntry.getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
-                                                popover: 'auto',
-                                                className: 'popover',
-                                                ...(this.props.popoverElement?.matches(':popover-open') && {
-                                                    'popover-open': true,
-                                                }),
-                                            }), children: jsxRuntime.jsxs("div", { id: dropdownId, className: "listbox", children: [!this.props.hasFilterResults && (jsxRuntime.jsxs("div", { className: "no-results", role: "option", children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: "---" }), jsxRuntime.jsx("span", { className: "sr-only", children: "No results found" })] })), jsxRuntime.jsx("slot", {})] }) })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.hasFilterResults ? this.props.srHighlightedOptionText : 'No results found' })] })] }), this.props.children] }));
+        const popoverId = 'list';
+        const optionsSelectedId = 'options-selected';
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getMultiSelectCss(this.props.dropdownDirection, this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.hasNativeCSSAnchorPositioningSupport, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxRuntime.jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [utilsEntry.getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, children: [!this.props.hasFilterResults && (jsxRuntime.jsxs("div", { className: "no-results", role: "option", children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: "---" }), jsxRuntime.jsx("span", { className: "sr-only", children: "No results found" })] })), jsxRuntime.jsx("slot", {})] })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.hasFilterResults ? this.props.srHighlightedOptionText : 'No results found' })] })] }), this.props.children] }));
     }
 }
 

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

@@ -15,11 +15,9 @@ class DSROptgroup extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const { theme = 'light', hidden } = this.props;
+        const labelId = 'label';
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getOptgroupCss(this.props.disabled, theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { role: "group", className: Object.entries({
-                                    optgroup: true,
-                                    'optgroup--disabled': this.props.disabled,
-                                }).map(([key, value]) => value && key).filter(Boolean).join(' '), "aria-disabled": this.props.disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, "aria-labelledby": "label", children: [jsxRuntime.jsx("span", { className: "label", role: "presentation", id: "label", children: this.props.label }), 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.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { role: "group", "aria-disabled": this.props.disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, "aria-labelledby": labelId, children: [jsxRuntime.jsx("span", { id: labelId, role: "presentation", children: this.props.label }), jsxRuntime.jsx("slot", {})] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -15,19 +15,19 @@ var icon_wrapper = require('../components/icon.wrapper.cjs');
  */
 class DSRPopover extends react.Component {
     host;
-    open = false;
+    isOpen = false;
     popover;
     button;
     arrow;
-    cleanUp;
+    cleanUpAutoUpdate;
     hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getPopoverCss(this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4')));
         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.jsxs("button", { type: "button", ...utilsEntry.parseAndGetAriaAttributes({
                                         ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
-                                        ...{ 'aria-expanded': this.props.open },
-                                    }), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsxRuntime.jsx("span", { className: "label", children: "More information" })] }), this.props.open && (jsxRuntime.jsxs("div", { className: "popover", popover: "auto", children: [jsxRuntime.jsx("div", { className: "arrow" }), jsxRuntime.jsx("div", { className: "content", children: this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {}) })] }))] })] }), this.props.children] }));
+                                        ...{ 'aria-expanded': this.props.isOpen },
+                                    }), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsxRuntime.jsx("span", { className: "label", children: "More information" })] }), this.props.isOpen && (jsxRuntime.jsxs("div", { popover: "auto", children: [jsxRuntime.jsx("div", { className: "arrow" }), jsxRuntime.jsx("div", { className: "content", children: this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", {}) })] }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -13,24 +13,23 @@ class DSRSelectWrapperDropdown extends react.Component {
     isOpen = this.props.isOpenOverride;
     optionMaps = [];
     searchString = '';
-    inputElement;
-    listElement;
-    isNativePopoverCase = false;
-    parentTableElement;
+    inputOrButtonElement;
     popoverElement;
+    hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
+    hasNativeCSSAnchorPositioningSupport = utilsEntry.getHasCSSAnchorPositioningSupport();
+    cleanUpAutoUpdate;
     get selectedIndex() {
         return 0;
     }
     render() {
         // TODO: part won't be needed as soon as button/input of select-wrapper-dropdown is part of shadow dom of select-wrapper itself
         const part = 'select-wrapper-dropdown';
+        const inputId = 'filter';
         this.props.description && 'description';
         const buttonId = 'value';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperDropdownCss(this.props.direction === 'auto'
-            ? 'down'
-            : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.isNativePopoverCase, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperDropdownCss(this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.hasNativeCSSAnchorPositioningSupport, this.props.theme)));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.filter ? ([
-                            jsxRuntime.jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: utilsEntry.getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
+                            jsxRuntime.jsx("input", { id: inputId, type: "text", role: "combobox", disabled: this.props.disabled, placeholder: utilsEntry.getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
                             jsxRuntime.jsx("span", { 
                                 /* @ts-ignore */
                                 part: part }, "span"),

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

@@ -28,18 +28,17 @@ class DSRSelect extends react.Component {
     srHighlightedOptionText = '';
     internals;
     defaultValue;
-    comboboxContainer;
-    combobox;
-    listElement;
+    buttonElement;
+    popoverElement;
     selectOptions = [];
     selectOptgroups = [];
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
     searchString = '';
     searchTimeout = null;
-    isNativePopoverCase = false;
-    parentTableElement;
-    popoverElement;
     slottedImagePath = '';
+    hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
+    hasNativeCSSAnchorPositioningSupport = utilsEntry.getHasCSSAnchorPositioningSupport();
+    cleanUpAutoUpdate;
     formDisabledCallback() {
     }
     formStateRestoreCallback() {
@@ -50,24 +49,21 @@ class DSRSelect extends react.Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const buttonId = 'value';
-        const dropdownId = 'list';
+        const popoverId = 'list';
         const descriptionId = this.props.description ? 'description' : undefined;
         const selectMessageId = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) ? stateMessage.messageId : undefined;
         const initialStatusId = 'initial-status';
         const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.compact, this.props.theme, !!this.props.slottedImagePath)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, label.labelId, ariaDescribedBy, dropdownId), disabled: this.props.disabled, children: this.props.slottedImagePath ? (jsxRuntime.jsxs("span", { children: [jsxRuntime.jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsxRuntime.jsx("span", { children: utilsEntry.getSelectedOptionString(otherChildren) })] })) : (utilsEntry.getSelectedOptionString(otherChildren)) }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), jsxRuntime.jsx("div", { ...(this.props.isNativePopoverCase && {
-                                                popover: 'auto',
-                                                className: 'popover',
-                                                ...(this.props.popoverElement?.matches(':popover-open') && {
-                                                    'popover-open': true,
-                                                }),
-                                            }), children: jsxRuntime.jsx("div", { id: dropdownId, className: "listbox", ...utilsEntry.getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: jsxRuntime.jsx("slot", {}) }) })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), this.props.children] }));
+        const selectedOption = utilsEntry.getSelectedOptionString(otherChildren);
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss(this.props.dropdownDirection, this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact, this.props.theme, !!this.props.slottedImagePath)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, label.labelId, ariaDescribedBy, popoverId), disabled: this.props.disabled, children: [this.props.slottedImagePath && jsxRuntime.jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsxRuntime.jsx("span", { children: selectedOption }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" })] }), jsxRuntime.jsx("div", { id: popoverId, popover: "manual", tabIndex: -1, ...utilsEntry.getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), this.props.children] }));
     }
-    getSelectedOptionImagePath = (options) => options
-        .find((option) => option.selected)
-        ?.querySelector('img')
-        ?.getAttribute('src') ?? '';
+    getSelectedOptionImagePath = (options) => {
+        return (options
+            .find((option) => option.selected)
+            ?.querySelector('img')
+            ?.getAttribute('src') ?? '');
+    };
 }
 
 exports.DSRSelect = DSRSelect;

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

@@ -22,7 +22,7 @@ class DSRTable extends react.Component {
         const tableAttr = this.props.caption
             ? { 'aria-label': this.props.caption }
             : hasSlottedCaption && { 'aria-labelledby': captionId };
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTableCss(this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTableCss(this.props.compact, this.props.layout, this.props.theme)));
         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, theme: this.props.theme, children: jsxRuntime.jsx("div", { className: "table", role: "table", ...tableAttr, children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }