@porsche-design-system/components-react 3.24.0 → 3.25.0-rc.1

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

@@ -0,0 +1,37 @@
+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 { getSheetCss as getComponentCss$p } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { PButton } from '../components/button.wrapper.mjs';
+
+/**
+ * @slot {"name": "header", "description": "Renders a header section above the content area." }
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ *
+ * @controlled {"props": ["open"], "event": "dismiss"}
+ */
+class DSRSheet extends Component {
+    host;
+    dialog;
+    scroller;
+    hasHeader;
+    render() {
+        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const hasHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
+        if (this.props.open) ;
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$p(this.props.open, this.props.dismissButton, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("dialog", { inert: !this.props.open, tabIndex: -1, ...parseAndGetAriaAttributes({
+                                'aria-modal': true,
+                                ...(hasHeader && {
+                                    'aria-label': namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0 && namedSlotChildren.find(({ props: { slot } }) => slot === 'header')?.props.children,
+                                }),
+                                ...parseAndGetAriaAttributes(this.props.aria),
+                            }), children: jsx("div", { className: "scroller", children: jsxs("div", { className: "sheet", children: [this.props.dismissButton && (jsx(PButton, { variant: "ghost", className: "dismiss", type: "button", hideLabel: true, icon: "close", theme: this.props.theme, children: "Dismiss sheet" })), hasHeader && jsx("slot", { name: "header" }), jsx("slot", {})] }) }) })] }), this.props.children] }));
+    }
+}
+
+export { DSRSheet };

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

@@ -7,8 +7,8 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextFieldWrapperCss as getComponentCss$8 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isWithinForm, hasLocateAction, showCustomCalendarOrTimeIndicator, isType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
-import { StateMessage } from './state-message.mjs';
 import { Label } from './label.mjs';
+import { StateMessage } from './state-message.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
@@ -51,7 +51,7 @@ class DSRTextFieldWrapper extends Component {
         const hasAction = hasLocateAction(this.props.actionIcon);
         const isClearable = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && !!otherChildren[0]?.props.value;
         const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$8(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)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$8(disabled, readOnly, 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-counter", "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 && 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")),

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

@@ -4,8 +4,8 @@ import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextareaWrapperCss as getComponentCss$4 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { StateMessage } from './state-message.mjs';
 import { Label } from './label.mjs';
+import { StateMessage } from './state-message.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
@@ -22,8 +22,8 @@ class DSRTextareaWrapper extends Component {
     eventListener;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$4(disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme)));
+        const { disabled, readOnly } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$4(disabled, readOnly, 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/lib/dsr-components/textarea.mjs

@@ -5,8 +5,8 @@ import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getTextareaCss as getComponentCss$3 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { debounce } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { messageId, StateMessage } from './state-message.mjs';
 import { Label, descriptionId } from './label.mjs';
+import { messageId, StateMessage } from './state-message.mjs';
 
 /**
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
@@ -24,7 +24,7 @@ class DSRTextarea extends Component {
     hasCounter;
     setCounterAriaTextDebounced = debounce(() => this.props.setCounterAriaText());
     formResetCallback() {
-        this.props.internals.setFormValue(this.props.defaultValue);
+        this.props.internals?.setFormValue(this.props.defaultValue);
     }
     formDisabledCallback() {
     }
@@ -33,7 +33,7 @@ class DSRTextarea extends Component {
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const id = 'textarea';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$3(this.props.disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.resize, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$3(this.props.disabled, this.props.readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.resize, this.props.theme)));
         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, htmlFor: id, label: this.props.label, description: this.props.description, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [jsx("textarea", { "aria-describedby": `${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, id: id, onBlur: this.props.onBlur, name: this.props.name, value: this.props.value, form: this.props.form, disabled: this.props.disabled, required: this.props.required, placeholder: this.props.placeholder, maxLength: this.props.maxLength, minLength: this.props.minLength, rows: this.props.rows, readOnly: this.props.readOnly, spellCheck: this.props.spellCheck, autoComplete: this.props.autoComplete, wrap: this.props.wrap }), this.props.hasCounter && (jsx("span", { className: "counter", "aria-hidden": "true", children: `${this.props.value.length}/${this.props.maxLength}` })), 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/public-api.mjs

@@ -48,6 +48,7 @@ export { PSegmentedControlItem } from './lib/components/segmented-control-item.w
 export { PSelect } from './lib/components/select.wrapper.mjs';
 export { PSelectOption } from './lib/components/select-option.wrapper.mjs';
 export { PSelectWrapper } from './lib/components/select-wrapper.wrapper.mjs';
+export { PSheet } from './lib/components/sheet.wrapper.mjs';
 export { PSpinner } from './lib/components/spinner.wrapper.mjs';
 export { PStepperHorizontal } from './lib/components/stepper-horizontal.wrapper.mjs';
 export { PStepperHorizontalItem } from './lib/components/stepper-horizontal-item.wrapper.mjs';

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

@@ -17,6 +17,10 @@ export type PButtonPureProps = BaseProps & {
      * Disables the button. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the button should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -84,6 +88,10 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<impo
      * Disables the button. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the button should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */

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

@@ -13,6 +13,10 @@ export type PButtonProps = BaseProps & {
      * Disables the button. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the button should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
@@ -63,6 +67,10 @@ export declare const PButton: import("react").ForwardRefExoticComponent<import("
      * Disables the button. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the button should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */

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

@@ -47,6 +47,7 @@ export * from './segmented-control-item.wrapper';
 export * from './select.wrapper';
 export * from './select-option.wrapper';
 export * from './select-wrapper.wrapper';
+export * from './sheet.wrapper';
 export * from './spinner.wrapper';
 export * from './stepper-horizontal.wrapper';
 export * from './stepper-horizontal-item.wrapper';

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

@@ -0,0 +1,72 @@
+import type { BaseProps } from '../../BaseProps';
+import type { SelectedAriaAttributes, SheetAriaAttribute, SheetMotionHiddenEndEventDetail, SheetMotionVisibleEndEventDetail, Theme } from '../types';
+export type PSheetProps = BaseProps & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<SheetAriaAttribute>;
+    /**
+     * If true, the sheet will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * If false, the sheet will not have a dismiss button.
+     */
+    dismissButton?: boolean;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the sheet is closed and the transition is finished.
+     */
+    onMotionHiddenEnd?: (event: CustomEvent<SheetMotionHiddenEndEventDetail>) => void;
+    /**
+     * Emitted when the sheet is opened and the transition is finished.
+     */
+    onMotionVisibleEnd?: (event: CustomEvent<SheetMotionVisibleEndEventDetail>) => void;
+    /**
+     * If true, the sheet is open.
+     */
+    open: boolean;
+    /**
+     * Adapts the sheet color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PSheet: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<SheetAriaAttribute>;
+    /**
+     * If true, the sheet will not be closable via backdrop click.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * If false, the sheet will not have a dismiss button.
+     */
+    dismissButton?: boolean;
+    /**
+     * Emitted when the component requests to be dismissed.
+     */
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the sheet is closed and the transition is finished.
+     */
+    onMotionHiddenEnd?: (event: CustomEvent<SheetMotionHiddenEndEventDetail>) => void;
+    /**
+     * Emitted when the sheet is opened and the transition is finished.
+     */
+    onMotionVisibleEnd?: (event: CustomEvent<SheetMotionVisibleEndEventDetail>) => void;
+    /**
+     * If true, the sheet is open.
+     */
+    open: boolean;
+    /**
+     * Adapts the sheet color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -4,6 +4,7 @@ import { Component } from 'react';
  */
 export declare class DSRButtonPure extends Component<any> {
     host: HTMLElement;
+    private internals;
     private initialLoading;
     private get isDisabledOrLoading();
     render(): JSX.Element;

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

@@ -4,6 +4,7 @@ import { Component } from 'react';
  */
 export declare class DSRButton extends Component<any> {
     host: HTMLElement;
+    private internals;
     private initialLoading;
     render(): JSX.Element;
 }

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

@@ -16,6 +16,7 @@ export declare class DSRCarousel extends Component<any> {
     private btnNext;
     private paginationEl;
     private slides;
+    private get parsedSlidesPerPage();
     private get splideSlides();
     private get hasNavigation();
     render(): JSX.Element;

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

@@ -0,0 +1,14 @@
+import { Component } from 'react';
+/**
+ * @slot {"name": "header", "description": "Renders a header section above the content area." }
+ * @slot {"name": "", "description": "Default slot for the main content." }
+ *
+ * @controlled {"props": ["open"], "event": "dismiss"}
+ */
+export declare class DSRSheet extends Component<any> {
+    host: HTMLElement;
+    private dialog;
+    private scroller;
+    private hasHeader;
+    render(): JSX.Element;
+}

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

@@ -1250,6 +1250,13 @@ declare const DROPDOWN_DIRECTIONS: readonly [
 ];
 export type SelectWrapperDropdownDirection = (typeof DROPDOWN_DIRECTIONS)[number];
 export type SelectWrapperState = FormState;
+declare const SHEET_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "role"
+];
+export type SheetAriaAttribute = (typeof SHEET_ARIA_ATTRIBUTES)[number];
+export type SheetMotionVisibleEndEventDetail = TransitionEvent;
+export type SheetMotionHiddenEndEventDetail = TransitionEvent;
 declare const SPINNER_SIZES: readonly [
     "small",
     "medium",