@porsche-design-system/components-react 2.13.0-rc.3 → 2.13.0

package/lib/components/index.d.ts

@@ -26,6 +26,8 @@ export * from './segmented-control.wrapper';
 export * from './segmented-control-item.wrapper';
 export * from './select-wrapper.wrapper';
 export * from './spinner.wrapper';
+export * from './stepper-horizontal.wrapper';
+export * from './stepper-horizontal-item.wrapper';
 export * from './switch.wrapper';
 export * from './table.wrapper';
 export * from './table-body.wrapper';

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

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import type { StepperState } from '../types';
+export declare type PStepperHorizontalItemProps = HTMLAttributes<{}> & {
+    /**
+     * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: StepperState;
+};
+export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
+    /**
+     * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: StepperState;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import type { StepChangeEvent, Theme } from '../types';
+export declare type PStepperHorizontalProps = HTMLAttributes<{}> & {
+    /**
+     * Emitted when active step is changed.
+     */
+    onStepChange?: (event: CustomEvent<StepChangeEvent>) => void;
+    /**
+     * Adapts the tag color depending on the theme.
+     */
+    theme?: Theme;
+};
+export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
+    /**
+     * Emitted when active step is changed.
+     */
+    onStepChange?: (event: CustomEvent<StepChangeEvent>) => void;
+    /**
+     * Adapts the tag color depending on the theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/types.d.ts

@@ -21,6 +21,12 @@ export declare type BreakpointValues<T> = {
     base: T;
 };
 export declare type BreakpointCustomizable<T> = T | BreakpointValues<T>;
+export declare type GradientColorTheme = "default" | "surface";
+export declare type ScrollToPosition = {
+    scrollPosition: number;
+    isSmooth?: boolean;
+};
+export declare type PrevNextButtonJssStyle = any;
 declare const TEXT_SIZES: readonly [
     "x-small",
     "small",
@@ -465,12 +471,6 @@ declare const POPOVER_DIRECTIONS: readonly [
     "left"
 ];
 export declare type PopoverDirection = typeof POPOVER_DIRECTIONS[number];
-export declare type GradientColorTheme = "default" | "surface";
-export declare type ScrollToPosition = {
-    scrollPosition: number;
-    isSmooth?: boolean;
-};
-export declare type PrevNextButtonJssStyle = any;
 declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
     "background-surface",
     "background-default"
@@ -493,6 +493,10 @@ declare const SPINNER_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export declare type SpinnerAriaAttributes = typeof SPINNER_ARIA_ATTRIBUTES[number];
+export declare type StepChangeEvent = {
+    activeStepIndex: number;
+};
+export declare type StepperState = "current" | "complete" | "warning";
 export declare type SwitchChangeEvent = {
     checked: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "2.13.0-rc.3",
+  "version": "2.13.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.13.0-rc.3"
+    "@porsche-design-system/components-js": "2.13.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",

package/public-api.js

@@ -556,6 +556,37 @@ 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 elementRef = react.useRef();
+    useEventCallback(elementRef, 'stepChange', onStepChange);
+    const Tag = usePrefix('p-stepper-horizontal');
+    useBrowserLayoutEffect(() => {
+        elementRef.current.theme = theme;
+    }, [theme]);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(Tag, { ...props });
+});
+
+const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const Tag = usePrefix('p-stepper-horizontal-item');
+    const propsToSync = [disabled, state];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['disabled', 'state'].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 PSwitch = /*#__PURE__*/ react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, stretch = false, tabbable = true, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     useEventCallback(elementRef, 'switchChange', onSwitchChange);
@@ -863,6 +894,8 @@ exports.PSegmentedControl = PSegmentedControl;
 exports.PSegmentedControlItem = PSegmentedControlItem;
 exports.PSelectWrapper = PSelectWrapper;
 exports.PSpinner = PSpinner;
+exports.PStepperHorizontal = PStepperHorizontal;
+exports.PStepperHorizontalItem = PStepperHorizontalItem;
 exports.PSwitch = PSwitch;
 exports.PTable = PTable;
 exports.PTableBody = PTableBody;