@porsche-design-system/components-react 3.27.2 → 3.28.0-rc.0

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

@@ -1,18 +1,14 @@
 import type { FC } from 'react';
-export declare const labelId = "label";
-export declare const descriptionId = "description";
-type FormElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 type LabelProps = {
     hasLabel: boolean;
     hasDescription: boolean;
+    htmlFor: string;
+    isRequired?: boolean;
     host: HTMLElement;
     label: string;
     description?: string;
-    htmlFor?: string;
-    isRequired?: boolean;
     isLoading?: boolean;
     isDisabled?: boolean;
-    formElement?: FormElement;
 };
 export declare const Label: FC<LabelProps>;
 export {};

package/ssr/esm/lib/dsr-components/legacy-label.d.ts

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+type FormElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+type LegacyLabelProps = {
+    hasLabel: boolean;
+    hasDescription: boolean;
+    formElement?: FormElement;
+    host: HTMLElement;
+    label: string;
+    description?: string;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+};
+export declare const LegacyLabel: FC<LegacyLabelProps>;
+export {};

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

@@ -859,6 +859,18 @@ declare const DIVIDER_DIRECTIONS: readonly [
 ];
 export type DividerDirection = (typeof DIVIDER_DIRECTIONS)[number];
 export type DividerOrientation = DividerDirection;
+declare const DRILLDOWN_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export type DrilldownAriaAttribute = (typeof DRILLDOWN_ARIA_ATTRIBUTES)[number];
+export type DrilldownUpdate = {
+    activeIdentifier: string | undefined;
+};
+/** @deprecated */
+export type DrilldownUpdateEvent = DrilldownUpdate;
+export type DrilldownUpdateEventDetail = DrilldownUpdateEvent;
+export type DrilldownLinkTarget = LinkTarget;
+export type DrilldownLinkAriaAttribute = LinkAriaAttribute;
 declare const FIELDSET_LABEL_SIZES: readonly [
     "small",
     "medium"
@@ -971,16 +983,6 @@ declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
 export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
 export type FlyoutMotionVisibleEndEventDetail = TransitionEvent;
 export type FlyoutMotionHiddenEndEventDetail = TransitionEvent;
-declare const FLYOUT_MULTILEVEL_ARIA_ATTRIBUTES: readonly [
-    "aria-label"
-];
-export type FlyoutMultilevelAriaAttribute = (typeof FLYOUT_MULTILEVEL_ARIA_ATTRIBUTES)[number];
-export type FlyoutMultilevelUpdate = {
-    activeIdentifier: string | undefined;
-};
-/** @deprecated */
-export type FlyoutMultilevelUpdateEvent = FlyoutMultilevelUpdate;
-export type FlyoutMultilevelUpdateEventDetail = FlyoutMultilevelUpdateEvent;
 declare const GRID_DIRECTIONS: readonly [
     "row",
     "row-reverse",
@@ -1086,6 +1088,18 @@ declare const ICON_COLORS: readonly [
     "state-disabled"
 ];
 export type IconColor = (typeof ICON_COLORS)[number];
+export type InputPasswordState = FormState;
+declare const INPUT_PASSWORD_AUTO_COMPLETE: readonly [
+    "off",
+    "on",
+    "current-password",
+    "new-password",
+    ""
+];
+export type InputPasswordAutoComplete = (typeof INPUT_PASSWORD_AUTO_COMPLETE)[number];
+export type InputPasswordChangeEventDetail = Event;
+export type InputPasswordBlurEventDetail = Event;
+export type InputPasswordInputEventDetail = InputEvent;
 export type LinkIcon = LinkButtonIconName;
 export type LinkPureIcon = LinkButtonIconName;
 export type LinkPureAriaAttribute = LinkAriaAttribute;

package/esm/lib/components/flyout-multilevel.wrapper.d.ts

@@ -1,56 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutMultilevelAriaAttribute, FlyoutMultilevelUpdateEventDetail, Theme } from '../types';
-export type PFlyoutMultilevelProps = BaseProps & {
-    /**
-     * Defines which flyout-multilevel-item to be visualized as opened.
-     */
-    activeIdentifier?: string | undefined;
-    /**
-     * Add ARIA attributes.
-     */
-    aria?: SelectedAriaAttributes<FlyoutMultilevelAriaAttribute>;
-    /**
-     * Emitted when the component requests to be dismissed.
-     */
-    onDismiss?: (event: CustomEvent<void>) => void;
-    /**
-     * Emitted when activeIdentifier is changed.
-     */
-    onUpdate?: (event: CustomEvent<FlyoutMultilevelUpdateEventDetail>) => void;
-    /**
-     * If true, the flyout-multilevel is visualized as opened.
-     */
-    open?: boolean;
-    /**
-     * Adapts the flyout-multilevel color depending on the theme.
-     */
-    theme?: Theme;
-};
-export declare const PFlyoutMultilevel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
-    /**
-     * Defines which flyout-multilevel-item to be visualized as opened.
-     */
-    activeIdentifier?: string | undefined;
-    /**
-     * Add ARIA attributes.
-     */
-    aria?: SelectedAriaAttributes<FlyoutMultilevelAriaAttribute>;
-    /**
-     * Emitted when the component requests to be dismissed.
-     */
-    onDismiss?: (event: CustomEvent<void>) => void;
-    /**
-     * Emitted when activeIdentifier is changed.
-     */
-    onUpdate?: (event: CustomEvent<FlyoutMultilevelUpdateEventDetail>) => void;
-    /**
-     * If true, the flyout-multilevel is visualized as opened.
-     */
-    open?: boolean;
-    /**
-     * Adapts the flyout-multilevel color depending on the theme.
-     */
-    theme?: Theme;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout-multilevel-item.cjs

@@ -1,33 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
-var splitChildren = require('../../splitChildren.cjs');
-var minifyCss = require('../../minifyCss.cjs');
-var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
-var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
-
-/**
- * @slot {"name": "", "description": "Default slot for the main content." }
- *
- * @experimental
- */
-class DSRFlyoutMultilevelItem extends react.Component {
-    host;
-    scroller;
-    get theme() {
-        return this.props.theme || 'light'; // default as fallback (internal private prop is controlled by flyout-multilevel)
-    }
-    componentDidRender() {
-        this.props.scroller.scrollTo(0, 0); // Reset scroll position when navigated
-    }
-    render() {
-        splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutMultilevelItemCss(this.props.primary, this.props.secondary, this.props.cascade, this.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: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { inert: this.props.primary || this.props.cascade, className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.props.secondary, aria: { 'aria-expanded': this.props.secondary }, theme: this.theme, children: this.props.label }), jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", theme: this.theme, hideLabel: { base: true, s: false }, children: this.props.label }), jsxRuntime.jsx("h2", { children: this.props.label }), jsxRuntime.jsx("div", { className: "drawer", children: jsxRuntime.jsx("div", { className: "scroller", children: jsxRuntime.jsx("slot", {}) }) })] })] }), this.props.children] }));
-    }
-}
-
-exports.DSRFlyoutMultilevelItem = DSRFlyoutMultilevelItem;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/stripFocusAndHoverStyles.cjs

@@ -1,8 +0,0 @@
-'use strict';
-
-// TODO: The replacement currently doesn't work when there are empty lines between closing brackets, thus we manually replace where this is the case
-const stripFocusAndHoverStyles = (css) => css
-    .replace(/@media screen and \(-webkit-min-device-pixel-ratio: 0\) and \(min-resolution: 0.001dpcm\) {[\s\S]+?}\n\n/g, '')
-    .replace(/\n.*(?::focus|hover:hover)[\s\S]+?\n}/g, '');
-
-exports.stripFocusAndHoverStyles = stripFocusAndHoverStyles;

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout-multilevel-item.mjs

@@ -1,31 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
-import { splitChildren } from '../../splitChildren.mjs';
-import { minifyCss } from '../../minifyCss.mjs';
-import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getFlyoutMultilevelItemCss as getComponentCss$T } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { PButtonPure } from '../components/button-pure.wrapper.mjs';
-
-/**
- * @slot {"name": "", "description": "Default slot for the main content." }
- *
- * @experimental
- */
-class DSRFlyoutMultilevelItem extends Component {
-    host;
-    scroller;
-    get theme() {
-        return this.props.theme || 'light'; // default as fallback (internal private prop is controlled by flyout-multilevel)
-    }
-    componentDidRender() {
-        this.props.scroller.scrollTo(0, 0); // Reset scroll position when navigated
-    }
-    render() {
-        splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$T(this.props.primary, this.props.secondary, this.props.cascade, this.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PButtonPure, { inert: this.props.primary || this.props.cascade, className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.props.secondary, aria: { 'aria-expanded': this.props.secondary }, theme: this.theme, children: this.props.label }), jsx(PButtonPure, { className: "back", type: "button", size: "small", alignLabel: "end", stretch: true, icon: "arrow-left", theme: this.theme, hideLabel: { base: true, s: false }, children: this.props.label }), jsx("h2", { children: this.props.label }), jsx("div", { className: "drawer", children: jsx("div", { className: "scroller", children: jsx("slot", {}) }) })] })] }), this.props.children] }));
-    }
-}
-
-export { DSRFlyoutMultilevelItem };

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

@@ -1,6 +0,0 @@
-// TODO: The replacement currently doesn't work when there are empty lines between closing brackets, thus we manually replace where this is the case
-const stripFocusAndHoverStyles = (css) => css
-    .replace(/@media screen and \(-webkit-min-device-pixel-ratio: 0\) and \(min-resolution: 0.001dpcm\) {[\s\S]+?}\n\n/g, '')
-    .replace(/\n.*(?::focus|hover:hover)[\s\S]+?\n}/g, '');
-
-export { stripFocusAndHoverStyles };

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

@@ -1,56 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutMultilevelAriaAttribute, FlyoutMultilevelUpdateEventDetail, Theme } from '../types';
-export type PFlyoutMultilevelProps = BaseProps & {
-    /**
-     * Defines which flyout-multilevel-item to be visualized as opened.
-     */
-    activeIdentifier?: string | undefined;
-    /**
-     * Add ARIA attributes.
-     */
-    aria?: SelectedAriaAttributes<FlyoutMultilevelAriaAttribute>;
-    /**
-     * Emitted when the component requests to be dismissed.
-     */
-    onDismiss?: (event: CustomEvent<void>) => void;
-    /**
-     * Emitted when activeIdentifier is changed.
-     */
-    onUpdate?: (event: CustomEvent<FlyoutMultilevelUpdateEventDetail>) => void;
-    /**
-     * If true, the flyout-multilevel is visualized as opened.
-     */
-    open?: boolean;
-    /**
-     * Adapts the flyout-multilevel color depending on the theme.
-     */
-    theme?: Theme;
-};
-export declare const PFlyoutMultilevel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
-    /**
-     * Defines which flyout-multilevel-item to be visualized as opened.
-     */
-    activeIdentifier?: string | undefined;
-    /**
-     * Add ARIA attributes.
-     */
-    aria?: SelectedAriaAttributes<FlyoutMultilevelAriaAttribute>;
-    /**
-     * Emitted when the component requests to be dismissed.
-     */
-    onDismiss?: (event: CustomEvent<void>) => void;
-    /**
-     * Emitted when activeIdentifier is changed.
-     */
-    onUpdate?: (event: CustomEvent<FlyoutMultilevelUpdateEventDetail>) => void;
-    /**
-     * If true, the flyout-multilevel is visualized as opened.
-     */
-    open?: boolean;
-    /**
-     * Adapts the flyout-multilevel color depending on the theme.
-     */
-    theme?: Theme;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,14 +0,0 @@
-import { Component } from 'react';
-import type { FlyoutMultilevelItemInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
-/**
- * @slot {"name": "", "description": "Default slot for the main content." }
- *
- * @experimental
- */
-export declare class DSRFlyoutMultilevelItem extends Component<any> {
-    host: HTMLElement & FlyoutMultilevelItemInternalHTMLProps;
-    private scroller;
-    private get theme();
-    componentDidRender(): void;
-    render(): JSX.Element;
-}

package/ssr/esm/stripFocusAndHoverStyles.d.ts

@@ -1 +0,0 @@
-export declare const stripFocusAndHoverStyles: (css: string) => string;