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

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

@@ -5,7 +5,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getSelectCss as getComponentCss$q } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getComboboxAriaAttributes, getSelectedOptionString, getListAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getHasNativePopoverSupport, getHasCSSAnchorPositioningSupport, getSelectedOptionString, getComboboxAriaAttributes, getListAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { Label, labelId } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
@@ -26,18 +26,17 @@ class DSRSelect extends 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 = getHasNativePopoverSupport();
+    hasNativeCSSAnchorPositioningSupport = getHasCSSAnchorPositioningSupport();
+    cleanUpAutoUpdate;
     formDisabledCallback() {
     }
     formStateRestoreCallback() {
@@ -48,24 +47,21 @@ class DSRSelect extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = 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) ? messageId : undefined;
         const initialStatusId = 'initial-status';
         const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$q('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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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 }), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, labelId, ariaDescribedBy, dropdownId), disabled: this.props.disabled, children: this.props.slottedImagePath ? (jsxs("span", { children: [jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsx("span", { children: getSelectedOptionString(otherChildren) })] })) : (getSelectedOptionString(otherChildren)) }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), jsx("div", { ...(this.props.isNativePopoverCase && {
-                                                popover: 'auto',
-                                                className: 'popover',
-                                                ...(this.props.popoverElement?.matches(':popover-open') && {
-                                                    'popover-open': true,
-                                                }),
-                                            }), children: jsx("div", { id: dropdownId, className: "listbox", ...getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: jsx("slot", {}) }) })] }), jsx(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 }), jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), this.props.children] }));
+        const selectedOption = getSelectedOptionString(otherChildren);
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$q(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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 }), jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, labelId, ariaDescribedBy, popoverId), disabled: this.props.disabled, children: [this.props.slottedImagePath && jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsx("span", { children: selectedOption }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" })] }), jsx("div", { id: popoverId, popover: "manual", tabIndex: -1, ...getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: jsx("slot", {}) }), jsx(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 }), 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') ?? '');
+    };
 }
 
 export { DSRSelect };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-cell.mjs

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTableCellCss as getComponentCss$j } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTableCellCss as getComponentCss$i } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the table cell content." }
@@ -12,7 +12,7 @@ class DSRTableCell extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$j(this.props.multiline)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$i(this.props.multiline)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getTableCss as getComponentCss$i } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getTableCss as getComponentCss$j } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { PScroller } from '../components/scroller.wrapper.mjs';
 
 /**
@@ -20,7 +20,7 @@ class DSRTable extends Component {
         const tableAttr = this.props.caption
             ? { 'aria-label': this.props.caption }
             : hasSlottedCaption && { 'aria-labelledby': captionId };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$i(this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$j(this.props.compact, this.props.layout, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedCaption && (jsx("div", { id: captionId, className: "caption", children: jsx("slot", { name: "caption" }) })), jsx(PScroller, { scrollbar: true, theme: this.props.theme, children: jsx("div", { className: "table", role: "table", ...tableAttr, children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/lib/components/carousel.wrapper.d.ts

@@ -1,10 +1,14 @@
 import type { BaseProps } from '../../BaseProps';
-import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
+import type { CarouselAlignControls, CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselGradientColor, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, CarouselSlidesPerPage, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = BaseProps & {
     /**
      * Defines which slide to be active (zero-based numbering).
      */
     activeSlideIndex?: number;
+    /**
+     * Alignment of slotted controls
+     */
+    alignControls?: CarouselAlignControls;
     /**
      * Alignment of heading and description
      */
@@ -64,7 +68,7 @@ export type PCarouselProps = BaseProps & {
     /**
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
-    slidesPerPage?: BreakpointCustomizable<number> | "auto";
+    slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
     /**
      * Adapts the color when used on dark background.
      */
@@ -88,6 +92,10 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
      * Defines which slide to be active (zero-based numbering).
      */
     activeSlideIndex?: number;
+    /**
+     * Alignment of slotted controls
+     */
+    alignControls?: CarouselAlignControls;
     /**
      * Alignment of heading and description
      */
@@ -147,7 +155,7 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
     /**
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
-    slidesPerPage?: BreakpointCustomizable<number> | "auto";
+    slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
     /**
      * Adapts the color when used on dark background.
      */

package/ssr/esm/lib/components/table.wrapper.d.ts

@@ -1,10 +1,18 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TableUpdateEventDetail, Theme } from '../types';
+import type { TableLayout, TableUpdateEventDetail, Theme } from '../types';
 export type PTableProps = BaseProps & {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
      */
     caption?: string;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * Controls the layout behavior of the table.
+     */
+    layout?: TableLayout;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when sorting is changed.
      */
@@ -23,6 +31,14 @@ export declare const PTable: import("react").ForwardRefExoticComponent<import("r
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
      */
     caption?: string;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
+    /**
+     * Controls the layout behavior of the table.
+     */
+    layout?: TableLayout;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when sorting is changed.
      */

package/ssr/esm/lib/dsr-components/multi-select.d.ts

@@ -16,13 +16,13 @@ export declare class DSRMultiSelect extends Component<any> {
     private defaultValue;
     private multiSelectOptions;
     private multiSelectOptgroups;
-    private inputContainer;
     private inputElement;
-    private listElement;
+    private resetButtonElement;
     private preventOptionUpdate;
-    private isNativePopoverCase;
-    private parentTableElement;
     private popoverElement;
+    private hasNativePopoverSupport;
+    private hasNativeCSSAnchorPositioningSupport;
+    private cleanUpAutoUpdate;
     private get currentValue();
     setFormValue(value: string[]): void;
     formDisabledCallback(): void;

package/ssr/esm/lib/dsr-components/popover.d.ts

@@ -4,11 +4,11 @@ import { Component } from 'react';
  */
 export declare class DSRPopover extends Component<any> {
     host: HTMLElement;
-    private open;
+    private isOpen;
     private popover;
     private button;
     private arrow;
-    private cleanUp;
+    private cleanUpAutoUpdate;
     private hasNativePopoverSupport;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/select-wrapper-dropdown.d.ts

@@ -4,11 +4,11 @@ export declare class DSRSelectWrapperDropdown extends Component<any> {
     private isOpen;
     private optionMaps;
     private searchString;
-    private inputElement;
-    private listElement;
-    private isNativePopoverCase;
-    private parentTableElement;
+    private inputOrButtonElement;
     private popoverElement;
+    private hasNativePopoverSupport;
+    private hasNativeCSSAnchorPositioningSupport;
+    private cleanUpAutoUpdate;
     private get selectedIndex();
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/select.d.ts

@@ -13,18 +13,17 @@ export declare class DSRSelect extends Component<any> {
     private srHighlightedOptionText;
     private internals;
     private defaultValue;
-    private comboboxContainer;
-    private combobox;
-    private listElement;
+    private buttonElement;
+    private popoverElement;
     private selectOptions;
     private selectOptgroups;
     private preventOptionUpdate;
     private searchString;
     private searchTimeout;
-    private isNativePopoverCase;
-    private parentTableElement;
-    private popoverElement;
     private slottedImagePath;
+    private hasNativePopoverSupport;
+    private hasNativeCSSAnchorPositioningSupport;
+    private cleanUpAutoUpdate;
     formDisabledCallback(): void;
     formStateRestoreCallback(): void;
     formResetCallback(): void;

package/ssr/esm/lib/types.d.ts

@@ -767,6 +767,8 @@ declare const CAROUSEL_WIDTHS: readonly [
     "extended"
 ];
 export type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
+declare const CAROUSEL_SLIDES_PER_PAGE: (string | number)[];
+export type CarouselSlidesPerPage = (typeof CAROUSEL_SLIDES_PER_PAGE)[number];
 declare const CAROUSEL_GRADIENT_COLORS: readonly [
     "background-base",
     "background-surface",
@@ -791,6 +793,12 @@ export type CarouselUpdateEvent = {
     previousIndex: number;
 };
 export type CarouselUpdateEventDetail = CarouselUpdateEvent;
+declare const CAROUSEL_ALIGN_CONTROLS: readonly [
+    "start",
+    "center",
+    "auto"
+];
+export type CarouselAlignControls = (typeof CAROUSEL_ALIGN_CONTROLS)[number];
 export type CheckboxState = FormState;
 export type CheckboxUpdateEventDetail = {
     name: string;
@@ -1357,6 +1365,11 @@ export type SwitchUpdateEvent = {
 };
 export type SwitchUpdateEventDetail = SwitchUpdateEvent;
 export type Direction = "asc" | "desc";
+declare const TABLE_LAYOUTS: readonly [
+    "auto",
+    "fixed"
+];
+export type TableLayout = (typeof TABLE_LAYOUTS)[number];
 export type TableHeadCellSort = {
     id: string;
     active?: boolean;