@porsche-design-system/components-react 3.8.0 → 3.9.0-rc.0

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

@@ -5,6 +5,7 @@ import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextareaWrapperCss as getComponentCss$3 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { StateMessage } from './state-message.mjs';
+import { Label } from './label.mjs';
 
 class DSRTextareaWrapper extends Component {
     host;
@@ -14,9 +15,9 @@ class DSRTextareaWrapper extends Component {
     hasCounter;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const labelProps = {};
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$3(typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props.disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), this.props.hasCounter && jsx("span", { className: "counter", "aria-hidden": "true" }), jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
+        const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$3(disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, 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, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "counter", "aria-hidden": "true" }), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), 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/provider.mjs

@@ -6,8 +6,9 @@ import { load } from '@porsche-design-system/components-js';
 // to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
 const PorscheDesignSystemContext = createContext({
     prefix: undefined,
+    theme: 'light',
 });
-const PorscheDesignSystemProvider = ({ prefix = '', cdn, ...props }) => {
+const PorscheDesignSystemProvider = ({ prefix = '', cdn, theme = 'light', ...props }) => {
     // @ts-ignore
     if (!process.browser) {
         // for ssr we set the global PORSCHE_DESIGN_SYSTEM_CDN_URL variable that is used in our getCDNBaseURL() util to respect the cdn
@@ -18,7 +19,7 @@ const PorscheDesignSystemProvider = ({ prefix = '', cdn, ...props }) => {
     useEffect(() => {
         load({ prefix, cdn });
     }, []); // runtime prefix or cdn change is not supported
-    return jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
+    return jsx(PorscheDesignSystemContext.Provider, { value: { prefix, theme }, ...props });
 };
 
 export { PorscheDesignSystemContext, PorscheDesignSystemProvider };

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

@@ -1,3 +1,6 @@
-const stripFocusAndHoverStyles = (css) => css.replace(/\n.*(?::focus|hover:hover)[\s\S]+?\n}/g, '');
+// 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/hooks.d.ts

@@ -1,12 +1,13 @@
 import type { MutableRefObject } from 'react';
 import { useEffect } from 'react';
-import type { ToastMessage } from './lib/types';
+import type { Theme, ToastMessage } from './lib/types';
 /**
  * sets a flag that skips the need for `PorscheDesignSystemProvider` during testing
  * when `process.env.NODE_ENV === 'test'`
  */
 export declare const skipCheckForPorscheDesignSystemProviderDuringTests: () => void;
 export declare const usePrefix: (tagName: string) => string;
+export declare const useTheme: () => Theme;
 export declare const useEventCallback: (ref: MutableRefObject<HTMLElement | undefined>, eventName: string, eventHandler: (e: Event) => void) => void;
 export declare const useMergedClass: (ref: MutableRefObject<HTMLElement | undefined>, className?: string) => string;
 export declare const useBrowserLayoutEffect: typeof useEffect;

package/ssr/esm/lib/components/button-pure.wrapper.d.ts

@@ -33,6 +33,10 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean;
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     */
+    name?: string;
     /**
      * Size of the button.
      */
@@ -49,6 +53,10 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Specifies the type of the button.
      */
     type?: ButtonPureType;
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     */
+    value?: string;
     /**
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
@@ -88,6 +96,10 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean;
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     */
+    name?: string;
     /**
      * Size of the button.
      */
@@ -104,6 +116,10 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
      * Specifies the type of the button.
      */
     type?: ButtonPureType;
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     */
+    value?: string;
     /**
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release

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

@@ -25,6 +25,10 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean;
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     */
+    name?: string;
     /**
      * Adapts the button color depending on the theme.
      */
@@ -33,6 +37,10 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Specifies the type of the button.
      */
     type?: ButtonType;
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     */
+    value?: string;
     /**
      * The style variant of the button.
      */
@@ -63,6 +71,10 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean;
+    /**
+     * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
+     */
+    name?: string;
     /**
      * Adapts the button color depending on the theme.
      */
@@ -71,6 +83,10 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
      * Specifies the type of the button.
      */
     type?: ButtonType;
+    /**
+     * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
+     */
+    value?: string;
     /**
      * The style variant of the button.
      */

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

@@ -0,0 +1,18 @@
+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;
+    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/select-wrapper.d.ts

@@ -3,6 +3,5 @@ export declare class DSRSelectWrapper extends Component<any> {
     host: HTMLElement;
     private select;
     private iconElement;
-    private dropdownElement;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/state-message.d.ts

@@ -1,10 +1,11 @@
 import type { FC } from 'react';
 type StateMessageProps = {
-    id?: string;
+    hasMessage: boolean;
     state: any;
     message: string;
     theme: any;
     host: HTMLElement;
 };
+export declare const messageId = "message";
 export declare const StateMessage: FC<StateMessageProps>;
 export {};

package/ssr/esm/lib/dsr-components/tabs-bar.d.ts

@@ -2,6 +2,7 @@ import { Component } from 'react';
 export declare class DSRTabsBar extends Component<any> {
     host: HTMLElement;
     private tabElements;
+    private internalTabIndex;
     private barElement;
     private scrollerElement;
     private direction;

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

@@ -590,6 +590,17 @@ export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
 export type LinkButtonIconName = IconName | "none";
 export type ButtonVariant = LinkButtonVariant;
 export type LinkVariant = LinkButtonVariant;
+export type PorscheDesignSystem = {
+    [key: `${number}.${number}.${number}${`-rc.${number}` | ""}`]: {
+        prefixes: string[];
+        isReady: () => Promise<void>;
+        readyResolve: () => void;
+    };
+    cdn: {
+        url: string;
+        prefixes: string[];
+    };
+};
 export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAttributes, T> | string;
 declare const ACCORDION_SIZES: readonly [
     "small",
@@ -1042,7 +1053,11 @@ declare const PIN_CODE_TYPES: readonly [
 ];
 export type PinCodeType = (typeof PIN_CODE_TYPES)[number];
 declare const PIN_CODE_LENGTHS: readonly [
+    1,
+    2,
+    3,
     4,
+    5,
     6
 ];
 export type PinCodeLength = (typeof PIN_CODE_LENGTHS)[number];

package/ssr/esm/provider.d.ts

@@ -1,10 +1,13 @@
 import type { PropsWithChildren, JSX } from 'react';
+import type { Theme } from './lib/types';
 export declare const PorscheDesignSystemContext: import("react").Context<{
     prefix?: string;
+    theme: Theme;
 }>;
 type Props = {
     prefix?: string;
     cdn?: 'auto' | 'cn';
+    theme?: Theme;
 };
-export declare const PorscheDesignSystemProvider: ({ prefix, cdn, ...props }: PropsWithChildren<Props>) => JSX.Element;
+export declare const PorscheDesignSystemProvider: ({ prefix, cdn, theme, ...props }: PropsWithChildren<Props>) => JSX.Element;
 export {};