@porsche-design-system/components-react 2.15.0 → 2.16.0

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

@@ -0,0 +1,72 @@
+import { HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, CarouselInternationalization, CarouselChangeEvent, Theme } from '../types';
+export declare type PCarouselProps = HTMLAttributes<{}> & {
+    /**
+     * Defines the description used in the carousel.
+     */
+    description?: string;
+    /**
+     * If true, the carousel will not show pagination bullets at the bottom.
+     */
+    disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Defines the heading used in the carousel.
+     */
+    heading?: string;
+    /**
+     * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
+     */
+    intl?: CarouselInternationalization;
+    /**
+     * Emitted when carousel's content slides.
+     */
+    onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * Sets the amount of slides visible at the same time.
+     */
+    slidesPerPage?: BreakpointCustomizable<number>;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * Whether the content should receive a padding to the sides to be aligned on the grid when used full width and not within content-wrapper.
+     */
+    wrapContent?: boolean;
+};
+export declare const PCarousel: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
+    /**
+     * Defines the description used in the carousel.
+     */
+    description?: string;
+    /**
+     * If true, the carousel will not show pagination bullets at the bottom.
+     */
+    disablePagination?: BreakpointCustomizable<boolean>;
+    /**
+     * Defines the heading used in the carousel.
+     */
+    heading?: string;
+    /**
+     * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
+     */
+    intl?: CarouselInternationalization;
+    /**
+     * Emitted when carousel's content slides.
+     */
+    onCarouselChange?: (event: CustomEvent<CarouselChangeEvent>) => void;
+    /**
+     * Sets the amount of slides visible at the same time.
+     */
+    slidesPerPage?: BreakpointCustomizable<number>;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
+    /**
+     * Whether the content should receive a padding to the sides to be aligned on the grid when used full width and not within content-wrapper.
+     */
+    wrapContent?: boolean;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './banner.wrapper';
 export * from './button.wrapper';
 export * from './button-group.wrapper';
 export * from './button-pure.wrapper';
+export * from './carousel.wrapper';
 export * from './checkbox-wrapper.wrapper';
 export * from './content-wrapper.wrapper';
 export * from './divider.wrapper';
@@ -22,6 +23,7 @@ export * from './modal.wrapper';
 export * from './pagination.wrapper';
 export * from './popover.wrapper';
 export * from './radio-button-wrapper.wrapper';
+export * from './scroller.wrapper';
 export * from './segmented-control.wrapper';
 export * from './segmented-control-item.wrapper';
 export * from './select-wrapper.wrapper';

package/lib/components/scroller.wrapper.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, ThemeExtendedElectric } from '../types';
+export declare type PScrollerProps = HTMLAttributes<{}> & {
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: GradientColorTheme;
+    /**
+     * Sets the vertical position of scroll indicator icon
+     */
+    scrollIndicatorPosition?: ScrollIndicatorPosition;
+    /**
+     * Scrolls the scroll area to the left either smooth or immediately
+     */
+    scrollToPosition?: ScrollToPosition;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: ThemeExtendedElectric;
+};
+export declare const PScroller: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
+    /**
+     * Adapts the background gradient color of prev and next button.
+     */
+    gradientColorScheme?: GradientColorTheme;
+    /**
+     * Sets the vertical position of scroll indicator icon
+     */
+    scrollIndicatorPosition?: ScrollIndicatorPosition;
+    /**
+     * Scrolls the scroll area to the left either smooth or immediately
+     */
+    scrollToPosition?: ScrollToPosition;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: ThemeExtendedElectric;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/stepper-horizontal.wrapper.d.ts

@@ -1,10 +1,14 @@
 import { HTMLAttributes } from 'react';
-import type { StepChangeEvent, Theme } from '../types';
+import type { StepChangeEvent, BreakpointCustomizable, StepperHorizontalSize, Theme } from '../types';
 export declare type PStepperHorizontalProps = HTMLAttributes<{}> & {
     /**
      * Emitted when active step is changed.
      */
     onStepChange?: (event: CustomEvent<StepChangeEvent>) => void;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<StepperHorizontalSize>;
     /**
      * Adapts the tag color depending on the theme.
      */
@@ -15,6 +19,10 @@ export declare const PStepperHorizontal: import("react").ForwardRefExoticCompone
      * Emitted when active step is changed.
      */
     onStepChange?: (event: CustomEvent<StepChangeEvent>) => void;
+    /**
+     * The text size.
+     */
+    size?: BreakpointCustomizable<StepperHorizontalSize>;
     /**
      * Adapts the tag color depending on the theme.
      */

package/lib/types.d.ts

@@ -1,3 +1,4 @@
+import { Options } from '@splidejs/splide';
 export declare type IconName = "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "document" | "download" | "duration" | "edit" | "email" | "exclamation" | "external" | "filter" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "grid" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "key" | "leaf" | "leather" | "light" | "list" | "locate" | "lock" | "lock-open" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "route" | "rss" | "save" | "screen" | "search" | "send" | "share" | "shopping-bag" | "shopping-cart" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "sun" | "switch" | "tablet" | "tachometer" | "truck" | "upload" | "user" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out";
 declare const FORM_STATES: readonly [
     "none",
@@ -35,8 +36,12 @@ export declare type GradientColorTheme = typeof GRADIENT_COLOR_THEMES[number];
 export declare type ScrollToPosition = {
     scrollPosition: number;
     isSmooth?: boolean;
-};
-export declare type PrevNextButtonJssStyle = any;
+} | string;
+declare const SCROLL_INDICATOR_POSITIONS: readonly [
+    "top",
+    "center"
+];
+export declare type ScrollIndicatorPosition = typeof SCROLL_INDICATOR_POSITIONS[number];
 declare const THEMES: readonly [
     "light",
     "dark"
@@ -359,6 +364,11 @@ declare const BUTTON_GROUP_DIRECTIONS: readonly [
 ];
 export declare type ButtonGroupDirectionType = typeof BUTTON_GROUP_DIRECTIONS[number];
 export declare type ButtonGroupDirection = BreakpointCustomizable<ButtonGroupDirectionType>;
+export declare type CarouselInternationalization = Partial<Pick<Options["i18n"], "prev" | "next" | "first" | "last" | "slideLabel" | "slide">>;
+export declare type CarouselChangeEvent = {
+    activeIndex: number;
+    previousIndex: number;
+};
 declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
     "transparent",
     "default"
@@ -610,6 +620,11 @@ declare const SPINNER_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type SpinnerAriaAttributes = typeof SPINNER_ARIA_ATTRIBUTES[number];
+declare const STEPPER_HORIZONTAL_SIZES: readonly [
+    "small",
+    "medium"
+];
+export declare type StepperHorizontalSize = typeof STEPPER_HORIZONTAL_SIZES[number];
 export declare type StepChangeEvent = {
     activeStepIndex: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "2.15.0"
+    "@porsche-design-system/components-js": "2.16.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

package/public-api.js

@@ -183,6 +183,23 @@ const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel
     return jsxRuntime.jsx(Tag, { ...props });
 });
 
+const PCarousel = /*#__PURE__*/ react.forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    useEventCallback(elementRef, 'carouselChange', onCarouselChange);
+    const Tag = usePrefix('p-carousel');
+    const propsToSync = [description, disablePagination, heading, intl, slidesPerPage, theme, wrapContent];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disablePagination', 'heading', 'intl', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(Tag, { ...props });
+});
+
 const PCheckboxWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const Tag = usePrefix('p-checkbox-wrapper');
@@ -491,6 +508,22 @@ const PRadioButtonWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false,
     return jsxRuntime.jsx(Tag, { ...props });
 });
 
+const PScroller = /*#__PURE__*/ react.forwardRef(({ gradientColorScheme = 'default', scrollIndicatorPosition = 'center', scrollToPosition, theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const Tag = usePrefix('p-scroller');
+    const propsToSync = [gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(Tag, { ...props });
+});
+
 const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'background-default', onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
@@ -556,13 +589,15 @@ const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', theme =
     return jsxRuntime.jsx(Tag, { ...props });
 });
 
-const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, theme = 'light', className, ...rest }, ref) => {
+const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, size = 'small', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     useEventCallback(elementRef, 'stepChange', onStepChange);
     const Tag = usePrefix('p-stepper-horizontal');
+    const propsToSync = [size, theme];
     useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme;
-    }, [theme]);
+        const { current } = elementRef;
+        ['size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
     const props = {
         ...rest,
         class: useMergedClass(elementRef, className),
@@ -872,6 +907,7 @@ exports.PBanner = PBanner;
 exports.PButton = PButton;
 exports.PButtonGroup = PButtonGroup;
 exports.PButtonPure = PButtonPure;
+exports.PCarousel = PCarousel;
 exports.PCheckboxWrapper = PCheckboxWrapper;
 exports.PContentWrapper = PContentWrapper;
 exports.PDivider = PDivider;
@@ -891,6 +927,7 @@ exports.PModal = PModal;
 exports.PPagination = PPagination;
 exports.PPopover = PPopover;
 exports.PRadioButtonWrapper = PRadioButtonWrapper;
+exports.PScroller = PScroller;
 exports.PSegmentedControl = PSegmentedControl;
 exports.PSegmentedControlItem = PSegmentedControlItem;
 exports.PSelectWrapper = PSelectWrapper;