@porsche-design-system/components-react 3.9.0 → 3.10.0-rc.1

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

@@ -16,6 +16,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
+import '../components/flyout-navigation.wrapper.mjs';
+import '../components/flyout-navigation-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';
@@ -27,6 +29,7 @@ import '../components/link-pure.wrapper.mjs';
 import '../components/link-social.wrapper.mjs';
 import '../components/link-tile.wrapper.mjs';
 import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/link-tile-product.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';

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

@@ -16,6 +16,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
+import '../components/flyout-navigation.wrapper.mjs';
+import '../components/flyout-navigation-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';
@@ -27,6 +29,7 @@ import '../components/link-pure.wrapper.mjs';
 import '../components/link-social.wrapper.mjs';
 import '../components/link-tile.wrapper.mjs';
 import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/link-tile-product.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';

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

@@ -16,6 +16,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
+import '../components/flyout-navigation.wrapper.mjs';
+import '../components/flyout-navigation-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';
@@ -27,6 +29,7 @@ import '../components/link-pure.wrapper.mjs';
 import '../components/link-social.wrapper.mjs';
 import '../components/link-tile.wrapper.mjs';
 import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/link-tile-product.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';

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

@@ -17,6 +17,8 @@ import '../components/fieldset-wrapper.wrapper.mjs';
 import '../components/flex.wrapper.mjs';
 import '../components/flex-item.wrapper.mjs';
 import '../components/flyout.wrapper.mjs';
+import '../components/flyout-navigation.wrapper.mjs';
+import '../components/flyout-navigation-item.wrapper.mjs';
 import '../components/grid.wrapper.mjs';
 import '../components/grid-item.wrapper.mjs';
 import '../components/heading.wrapper.mjs';
@@ -28,6 +30,7 @@ import '../components/link-pure.wrapper.mjs';
 import '../components/link-social.wrapper.mjs';
 import '../components/link-tile.wrapper.mjs';
 import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/link-tile-product.wrapper.mjs';
 import '../components/marque.wrapper.mjs';
 import '../components/modal.wrapper.mjs';
 import '../components/model-signature.wrapper.mjs';
@@ -105,10 +108,10 @@ class DSRTextFieldWrapper extends Component {
         const hasAction = hasLocateAction(this.props.actionIcon);
         const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
         const isClearable = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && !!otherChildren[0]?.props.value;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$7(disabled, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$7(disabled, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.submitButton, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", 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, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), hasCounter , (this.props.isCounterVisible) && (jsx("span", { className: "unit", "aria-hidden": "true", children: this.props.unit })), isPassword && this.props.showPasswordToggle ? (jsx(PButtonPure, { ...buttonProps, type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsxs(PButtonPure, { ...buttonProps, type: "button", icon: isCalendar ? 'calendar' : 'clock', disabled: disabled, children: ["Show $", isCalendar ? 'date' : 'time', " picker"] })) : (isSearch && [
                                             // TODO: create an own component, which would fix SSR support too
-                                            this.props.isWithinForm ? (createElement(PButtonPure, { ...buttonProps, key: "btn-submit", type: "submit", icon: "search", disabled: disabledOrReadOnly }, "Search")) : (jsx(PIcon, { className: "icon", name: "search", color: "state-disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
+                                            this.props.isWithinForm && this.props.submitButton ? (createElement(PButtonPure, { ...buttonProps, key: "btn-submit", type: "submit", icon: "search", disabled: disabledOrReadOnly }, "Search")) : (jsx(PIcon, { className: "icon", name: "search", color: "state-disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
                                             createElement(PButtonPure, { ...buttonProps, key: "btn-clear", type: "button", icon: "close", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly }, "Clear field"),
                                             hasAction && (createElement(PButtonPure, { ...buttonProps, key: "btn-action", type: "button", icon: "locate", hidden: isClearable, disabled: disabledOrReadOnly, loading: this.props.actionLoading }, "Locate me")),
                                         ])] }), 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 })] })] }), this.props.children] }));

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/minifyCss.mjs

@@ -1,3 +1,9 @@
-const minifyCss = (css) => css.replace(/\s\s+|\.\\(?=:)|[\n\\]+| (?={)|;(?=\s+})|(:|media)\s(?=.*;?)/g, '$1');
+const minifyCss = (css) => {
+    // TODO: could remove whitespace in selectors following
+    // - commas: e.g. `, `
+    // - before/after + combinator, e.g. ` + `
+    // - and potentially other combinators
+    return css.replace(/\s\s+|\.\\(?=:)|[\n\\]+(?!\+)| (?={)|;(?=\s+})|(:|media)\s(?=.*;?)/g, '$1');
+};
 
 export { minifyCss };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs

@@ -16,6 +16,8 @@ export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.mjs'
 export { PFlex } from './lib/components/flex.wrapper.mjs';
 export { PFlexItem } from './lib/components/flex-item.wrapper.mjs';
 export { PFlyout } from './lib/components/flyout.wrapper.mjs';
+export { PFlyoutNavigation } from './lib/components/flyout-navigation.wrapper.mjs';
+export { PFlyoutNavigationItem } from './lib/components/flyout-navigation-item.wrapper.mjs';
 export { PGrid } from './lib/components/grid.wrapper.mjs';
 export { PGridItem } from './lib/components/grid-item.wrapper.mjs';
 export { PHeading } from './lib/components/heading.wrapper.mjs';
@@ -27,6 +29,7 @@ export { PLinkPure } from './lib/components/link-pure.wrapper.mjs';
 export { PLinkSocial } from './lib/components/link-social.wrapper.mjs';
 export { PLinkTile } from './lib/components/link-tile.wrapper.mjs';
 export { PLinkTileModelSignature } from './lib/components/link-tile-model-signature.wrapper.mjs';
+export { PLinkTileProduct } from './lib/components/link-tile-product.wrapper.mjs';
 export { PMarque } from './lib/components/marque.wrapper.mjs';
 export { PModal } from './lib/components/modal.wrapper.mjs';
 export { PModelSignature } from './lib/components/model-signature.wrapper.mjs';

package/ssr/esm/lib/components/flyout-navigation-item.wrapper.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from 'react';
+export type PFlyoutNavigationItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    identifier: string;
+    label?: string;
+};
+export declare const PFlyoutNavigationItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    identifier: string;
+    label?: string;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/flyout-navigation.wrapper.d.ts

@@ -0,0 +1,56 @@
+import { type HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, FlyoutNavigationAriaAttribute, FlyoutNavigationUpdateEvent, Theme } from '../types';
+export type PFlyoutNavigationProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Defines which flyout-navigation-item to be visualized as opened.
+     */
+    activeIdentifier?: string | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<FlyoutNavigationAriaAttribute>;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when activeIdentifier is changed.
+     */
+    onUpdate?: (event: CustomEvent<FlyoutNavigationUpdateEvent>) => void;
+    /**
+     * If true, the flyout-navigation is visualized as opened.
+     */
+    open?: boolean;
+    /**
+     * Adapts the flyout-navigation color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PFlyoutNavigation: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Defines which flyout-navigation-item to be visualized as opened.
+     */
+    activeIdentifier?: string | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<FlyoutNavigationAriaAttribute>;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when activeIdentifier is changed.
+     */
+    onUpdate?: (event: CustomEvent<FlyoutNavigationUpdateEvent>) => void;
+    /**
+     * If true, the flyout-navigation is visualized as opened.
+     */
+    open?: boolean;
+    /**
+     * Adapts the flyout-navigation color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/index.d.ts

@@ -15,6 +15,8 @@ export * from './fieldset-wrapper.wrapper';
 export * from './flex.wrapper';
 export * from './flex-item.wrapper';
 export * from './flyout.wrapper';
+export * from './flyout-navigation.wrapper';
+export * from './flyout-navigation-item.wrapper';
 export * from './grid.wrapper';
 export * from './grid-item.wrapper';
 export * from './heading.wrapper';
@@ -26,6 +28,7 @@ export * from './link-pure.wrapper';
 export * from './link-social.wrapper';
 export * from './link-tile.wrapper';
 export * from './link-tile-model-signature.wrapper';
+export * from './link-tile-product.wrapper';
 export * from './marque.wrapper';
 export * from './modal.wrapper';
 export * from './model-signature.wrapper';

package/ssr/esm/lib/components/link-tile-product.wrapper.d.ts

@@ -0,0 +1,96 @@
+import { type HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEvent, LinkTileProductTarget, Theme } from '../types';
+export type PLinkTileProductProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Aspect ratio of the link-tile-product.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
+    /**
+     * Additional product description
+     */
+    description?: string;
+    /**
+     * Product heading
+     */
+    heading: string;
+    /**
+     * href of the `<a>`.
+     */
+    href?: string;
+    /**
+     * A Boolean attribute indicating that a like button should be shown.
+     */
+    likeButton?: boolean;
+    /**
+     * A Boolean attribute indicating that a product is liked.
+     */
+    liked?: boolean;
+    /**
+     * Emitted when the like button is clicked.
+     */
+    onLike?: (event: CustomEvent<LinkTileProductLikeEvent>) => void;
+    /**
+     * Product price
+     */
+    price: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTileProductTarget;
+    /**
+     * Adapts the link-tile-product color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Aspect ratio of the link-tile-product.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
+    /**
+     * Additional product description
+     */
+    description?: string;
+    /**
+     * Product heading
+     */
+    heading: string;
+    /**
+     * href of the `<a>`.
+     */
+    href?: string;
+    /**
+     * A Boolean attribute indicating that a like button should be shown.
+     */
+    likeButton?: boolean;
+    /**
+     * A Boolean attribute indicating that a product is liked.
+     */
+    liked?: boolean;
+    /**
+     * Emitted when the like button is clicked.
+     */
+    onLike?: (event: CustomEvent<LinkTileProductLikeEvent>) => void;
+    /**
+     * Product price
+     */
+    price: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTileProductTarget;
+    /**
+     * Adapts the link-tile-product color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -30,7 +30,8 @@ export type PPaginationProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     itemsPerPage?: number;
     /**
-     * The maximum number of page links rendered.
+     * Has no effect anymore
+     * @deprecated since v3.10.0, will be removed with next major release
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
@@ -84,7 +85,8 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
      */
     itemsPerPage?: number;
     /**
-     * The maximum number of page links rendered.
+     * Has no effect anymore
+     * @deprecated since v3.10.0, will be removed with next major release
      */
     maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**

package/ssr/esm/lib/components/text-field-wrapper.wrapper.d.ts

@@ -45,6 +45,10 @@ export type PTextFieldWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The validation state.
      */
     state?: TextFieldWrapperState;
+    /**
+     * Show search button if wrapped inside a form.
+     */
+    submitButton?: boolean;
     /**
      * Adapts the color depending on the theme.
      */
@@ -103,6 +107,10 @@ export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponen
      * The validation state.
      */
     state?: TextFieldWrapperState;
+    /**
+     * Show search button if wrapped inside a form.
+     */
+    submitButton?: boolean;
     /**
      * Adapts the color depending on the theme.
      */

package/ssr/esm/lib/dsr-components/flyout-navigation-item.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'react';
+import { type FlyoutNavigationItemInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+export declare class DSRFlyoutNavigationItem extends Component<any> {
+    host: HTMLElement & FlyoutNavigationItemInternalHTMLProps;
+    private get theme();
+    private get open();
+    render(): JSX.Element;
+}

package/ssr/esm/lib/dsr-components/flyout-navigation.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'react';
+/** __Experimental__ */
+export declare class DSRFlyoutNavigation extends Component<any> {
+    host: HTMLElement;
+    private dialog;
+    private flyoutNavigationItemElements;
+    render(): JSX.Element;
+}

package/ssr/esm/lib/dsr-components/link-tile-product.d.ts

@@ -0,0 +1,6 @@
+import { Component } from 'react';
+/** __Experimental__ */
+export declare class DSRLinkTileProduct extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

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

@@ -1,7 +1,5 @@
 import { Component } from 'react';
 export declare class DSRPagination extends Component<any> {
     host: HTMLElement;
-    private breakpointMaxNumberOfPageLinks;
-    private navigationElement;
     render(): JSX.Element;
 }

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

@@ -6,6 +6,9 @@ export declare class DSRSelectWrapperDropdown extends Component<any> {
     private searchString;
     private inputElement;
     private listElement;
+    private isNativePopover;
+    private parentTableElement;
+    private popoverElement;
     private get selectedIndex();
     render(): JSX.Element;
 }

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

@@ -820,6 +820,14 @@ declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
+declare const FLYOUT_NAVIGATION_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export type FlyoutNavigationAriaAttribute = (typeof FLYOUT_NAVIGATION_ARIA_ATTRIBUTES)[number];
+export type FlyoutNavigationUpdate = {
+    activeIdentifier: string;
+};
+export type FlyoutNavigationUpdateEvent = FlyoutNavigationUpdate;
 declare const GRID_DIRECTIONS: readonly [
     "row",
     "row-reverse",
@@ -988,6 +996,15 @@ export type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE
 export type LinkTileModelSignatureWeight = TileWeight;
 export type LinkTileModelSignatureAspectRatio = TileAspectRatio;
 export type LinkTileModelSignatureLinkDirection = GroupDirection;
+export type LinkTileProductTarget = LinkTarget;
+export type LinkTileProductLikeEvent = {
+    liked: boolean;
+};
+declare const TILE_PRODUCT_ASPECT_RATIOS: readonly [
+    "3:4",
+    "9:16"
+];
+export type LinkTileProductAspectRatio = Extract<TileAspectRatio, (typeof TILE_PRODUCT_ASPECT_RATIOS)[number]>;
 declare const MODEL_SIGNATURES_MANIFEST: {
     "718": string;
     "911": string;
@@ -1041,6 +1058,7 @@ declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7
 ];
+/** @deprecated */
 export type PaginationMaxNumberOfPageLinks = (typeof PAGINATION_NUMBER_OF_PAGE_LINKS)[number];
 export type PaginationUpdateEvent = {
     page: number;