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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/esm/public-api.js +65 -1
  3. package/jsdom-polyfill/index.js +1 -1
  4. package/lib/components/index.d.ts +4 -0
  5. package/lib/components/modal.wrapper.d.ts +2 -2
  6. package/lib/components/pagination.wrapper.d.ts +4 -4
  7. package/lib/components/segmented-control-item.wrapper.d.ts +48 -0
  8. package/lib/components/segmented-control.wrapper.d.ts +40 -0
  9. package/lib/components/stepper-horizontal-item.wrapper.d.ts +24 -0
  10. package/lib/components/stepper-horizontal.wrapper.d.ts +24 -0
  11. package/lib/components/tabs-item.wrapper.d.ts +2 -2
  12. package/lib/types.d.ts +17 -5
  13. package/package.json +2 -2
  14. package/public-api.js +68 -0
package/lib/components/index.d.ts CHANGED
@@ -22,8 +22,12 @@ export * from './modal.wrapper';
22
22
  export * from './pagination.wrapper';
23
23
  export * from './popover.wrapper';
24
24
  export * from './radio-button-wrapper.wrapper';
25
+ export * from './segmented-control.wrapper';
26
+ export * from './segmented-control-item.wrapper';
25
27
  export * from './select-wrapper.wrapper';
26
28
  export * from './spinner.wrapper';
29
+ export * from './stepper-horizontal.wrapper';
30
+ export * from './stepper-horizontal-item.wrapper';
27
31
  export * from './switch.wrapper';
28
32
  export * from './table.wrapper';
29
33
  export * from './table-body.wrapper';
package/lib/components/modal.wrapper.d.ts CHANGED
@@ -28,7 +28,7 @@ export declare type PModalProps = HTMLAttributes<{}> & {
28
28
  /**
29
29
  * If true, the modal is open.
30
30
  */
31
- open?: boolean;
31
+ open: boolean;
32
32
  };
33
33
  export declare const PModal: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
34
34
  /**
@@ -58,7 +58,7 @@ export declare const PModal: import("react").ForwardRefExoticComponent<HTMLAttri
58
58
  /**
59
59
  * If true, the modal is open.
60
60
  */
61
- open?: boolean;
61
+ open: boolean;
62
62
  } & {
63
63
  children?: import("react").ReactNode;
64
64
  } & import("react").RefAttributes<HTMLElement>>;
package/lib/components/pagination.wrapper.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare type PPaginationProps = HTMLAttributes<{}> & {
4
4
  /**
5
5
  * Index of the currently active page.
6
6
  */
7
- activePage?: number;
7
+ activePage: number;
8
8
  /**
9
9
  * Aria label what the pagination is used for.
10
10
  */
@@ -40,13 +40,13 @@ export declare type PPaginationProps = HTMLAttributes<{}> & {
40
40
  /**
41
41
  * The total count of items.
42
42
  */
43
- totalItemsCount?: number;
43
+ totalItemsCount: number;
44
44
  };
45
45
  export declare const PPagination: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
46
46
  /**
47
47
  * Index of the currently active page.
48
48
  */
49
- activePage?: number;
49
+ activePage: number;
50
50
  /**
51
51
  * Aria label what the pagination is used for.
52
52
  */
@@ -82,5 +82,5 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<HTML
82
82
  /**
83
83
  * The total count of items.
84
84
  */
85
- totalItemsCount?: number;
85
+ totalItemsCount: number;
86
86
  } & import("react").RefAttributes<HTMLElement>>;
package/lib/components/segmented-control-item.wrapper.d.ts ADDED
@@ -0,0 +1,48 @@
1
+ import { HTMLAttributes } from 'react';
2
+ import type { IconName } from '../types';
3
+ export declare type PSegmentedControlItemProps = HTMLAttributes<{}> & {
4
+ /**
5
+ * Disables the button. No events will be triggered while disabled state is active.
6
+ */
7
+ disabled?: boolean;
8
+ /**
9
+ * The icon shown.
10
+ */
11
+ icon?: IconName;
12
+ /**
13
+ * A URL path to a custom icon.
14
+ */
15
+ iconSource?: string;
16
+ /**
17
+ * The label text.
18
+ */
19
+ label?: string;
20
+ /**
21
+ * The value of this item which is emitted by the parent element if it becomes selected. This property is **required**.
22
+ */
23
+ value: string | number;
24
+ };
25
+ export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
26
+ /**
27
+ * Disables the button. No events will be triggered while disabled state is active.
28
+ */
29
+ disabled?: boolean;
30
+ /**
31
+ * The icon shown.
32
+ */
33
+ icon?: IconName;
34
+ /**
35
+ * A URL path to a custom icon.
36
+ */
37
+ iconSource?: string;
38
+ /**
39
+ * The label text.
40
+ */
41
+ label?: string;
42
+ /**
43
+ * The value of this item which is emitted by the parent element if it becomes selected. This property is **required**.
44
+ */
45
+ value: string | number;
46
+ } & {
47
+ children?: import("react").ReactNode;
48
+ } & import("react").RefAttributes<HTMLElement>>;
package/lib/components/segmented-control.wrapper.d.ts ADDED
@@ -0,0 +1,40 @@
1
+ import { HTMLAttributes } from 'react';
2
+ import type { SegmentedControlBackgroundColor, SegmentedControlChangeEvent, Theme } from '../types';
3
+ export declare type PSegmentedControlProps = HTMLAttributes<{}> & {
4
+ /**
5
+ * Background color variations
6
+ */
7
+ backgroundColor?: SegmentedControlBackgroundColor;
8
+ /**
9
+ * Emitted when selected element changes.
10
+ */
11
+ onSegmentedControlChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
12
+ /**
13
+ * Adapts the segmented-control color depending on the theme.
14
+ */
15
+ theme?: Theme;
16
+ /**
17
+ * Sets the initial value of the segmented-control.
18
+ */
19
+ value?: string | number;
20
+ };
21
+ export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
22
+ /**
23
+ * Background color variations
24
+ */
25
+ backgroundColor?: SegmentedControlBackgroundColor;
26
+ /**
27
+ * Emitted when selected element changes.
28
+ */
29
+ onSegmentedControlChange?: (event: CustomEvent<SegmentedControlChangeEvent>) => void;
30
+ /**
31
+ * Adapts the segmented-control color depending on the theme.
32
+ */
33
+ theme?: Theme;
34
+ /**
35
+ * Sets the initial value of the segmented-control.
36
+ */
37
+ value?: string | number;
38
+ } & {
39
+ children?: import("react").ReactNode;
40
+ } & import("react").RefAttributes<HTMLElement>>;
package/lib/components/stepper-horizontal-item.wrapper.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { HTMLAttributes } from 'react';
2
+ import type { StepperState } from '../types';
3
+ export declare type PStepperHorizontalItemProps = HTMLAttributes<{}> & {
4
+ /**
5
+ * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
6
+ */
7
+ disabled?: boolean;
8
+ /**
9
+ * The validation state.
10
+ */
11
+ state?: StepperState;
12
+ };
13
+ export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
14
+ /**
15
+ * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
16
+ */
17
+ disabled?: boolean;
18
+ /**
19
+ * The validation state.
20
+ */
21
+ state?: StepperState;
22
+ } & {
23
+ children?: import("react").ReactNode;
24
+ } & import("react").RefAttributes<HTMLElement>>;
package/lib/components/stepper-horizontal.wrapper.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { HTMLAttributes } from 'react';
2
+ import type { StepChangeEvent, Theme } from '../types';
3
+ export declare type PStepperHorizontalProps = HTMLAttributes<{}> & {
4
+ /**
5
+ * Emitted when active step is changed.
6
+ */
7
+ onStepChange?: (event: CustomEvent<StepChangeEvent>) => void;
8
+ /**
9
+ * Adapts the tag color depending on the theme.
10
+ */
11
+ theme?: Theme;
12
+ };
13
+ export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
14
+ /**
15
+ * Emitted when active step is changed.
16
+ */
17
+ onStepChange?: (event: CustomEvent<StepChangeEvent>) => void;
18
+ /**
19
+ * Adapts the tag color depending on the theme.
20
+ */
21
+ theme?: Theme;
22
+ } & {
23
+ children?: import("react").ReactNode;
24
+ } & import("react").RefAttributes<HTMLElement>>;
package/lib/components/tabs-item.wrapper.d.ts CHANGED
@@ -3,13 +3,13 @@ export declare type PTabsItemProps = HTMLAttributes<{}> & {
3
3
  /**
4
4
  * Defines the label used in tabs.
5
5
  */
6
- label?: string;
6
+ label: string;
7
7
  };
8
8
  export declare const PTabsItem: import("react").ForwardRefExoticComponent<HTMLAttributes<{}> & {
9
9
  /**
10
10
  * Defines the label used in tabs.
11
11
  */
12
- label?: string;
12
+ label: string;
13
13
  } & {
14
14
  children?: import("react").ReactNode;
15
15
  } & import("react").RefAttributes<HTMLElement>>;
package/lib/types.d.ts CHANGED
@@ -21,6 +21,12 @@ export declare type BreakpointValues<T> = {
21
21
  base: T;
22
22
  };
23
23
  export declare type BreakpointCustomizable<T> = T | BreakpointValues<T>;
24
+ export declare type GradientColorTheme = "default" | "surface";
25
+ export declare type ScrollToPosition = {
26
+ scrollPosition: number;
27
+ isSmooth?: boolean;
28
+ };
29
+ export declare type PrevNextButtonJssStyle = any;
24
30
  declare const TEXT_SIZES: readonly [
25
31
  "x-small",
26
32
  "small",
@@ -465,12 +471,14 @@ declare const POPOVER_DIRECTIONS: readonly [
465
471
  "left"
466
472
  ];
467
473
  export declare type PopoverDirection = typeof POPOVER_DIRECTIONS[number];
468
- export declare type GradientColorTheme = "default" | "surface";
469
- export declare type ScrollToPosition = {
470
- scrollPosition: number;
471
- isSmooth?: boolean;
474
+ declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
475
+ "background-surface",
476
+ "background-default"
477
+ ];
478
+ export declare type SegmentedControlBackgroundColor = typeof SEGMENTED_CONTROL_BACKGROUND_COLORS[number];
479
+ export declare type SegmentedControlChangeEvent = {
480
+ value: string | number;
472
481
  };
473
- export declare type PrevNextButtonJssStyle = any;
474
482
  export declare type DropdownDirectionInternal = "down" | "up";
475
483
  export declare type DropdownDirection = DropdownDirectionInternal | "auto";
476
484
  declare const SPINNER_SIZES: readonly [
@@ -485,6 +493,10 @@ declare const SPINNER_ARIA_ATTRIBUTES: readonly [
485
493
  "aria-label"
486
494
  ];
487
495
  export declare type SpinnerAriaAttributes = typeof SPINNER_ARIA_ATTRIBUTES[number];
496
+ export declare type StepChangeEvent = {
497
+ activeStepIndex: number;
498
+ };
499
+ export declare type StepperState = "current" | "complete" | "warning";
488
500
  export declare type SwitchChangeEvent = {
489
501
  checked: boolean;
490
502
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-react",
3
- "version": "2.13.0-rc.1",
3
+ "version": "2.13.0-rc.4",
4
4
  "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.",
5
5
  "keywords": [
6
6
  "porsche",
@@ -17,7 +17,7 @@
17
17
  "license": "SEE LICENSE IN LICENSE",
18
18
  "homepage": "https://designsystem.porsche.com",
19
19
  "dependencies": {
20
- "@porsche-design-system/components-js": "2.13.0-rc.1"
20
+ "@porsche-design-system/components-js": "2.13.0-rc.4"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "react": ">=17.0.0 <19.0.0",
package/public-api.js CHANGED
@@ -491,6 +491,39 @@ const PRadioButtonWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false,
491
491
  return jsxRuntime.jsx(Tag, { ...props });
492
492
  });
493
493
 
494
+ const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'background-default', onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
495
+ const elementRef = react.useRef();
496
+ useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
497
+ const Tag = usePrefix('p-segmented-control');
498
+ const propsToSync = [backgroundColor, theme, value];
499
+ useBrowserLayoutEffect(() => {
500
+ const { current } = elementRef;
501
+ ['backgroundColor', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
502
+ }, propsToSync);
503
+ const props = {
504
+ ...rest,
505
+ class: useMergedClass(elementRef, className),
506
+ ref: syncRef(elementRef, ref)
507
+ };
508
+ return jsxRuntime.jsx(Tag, { ...props });
509
+ });
510
+
511
+ const PSegmentedControlItem = /*#__PURE__*/ react.forwardRef(({ disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
512
+ const elementRef = react.useRef();
513
+ const Tag = usePrefix('p-segmented-control-item');
514
+ const propsToSync = [disabled, icon, iconSource, label, value];
515
+ useBrowserLayoutEffect(() => {
516
+ const { current } = elementRef;
517
+ ['disabled', 'icon', 'iconSource', 'label', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
518
+ }, propsToSync);
519
+ const props = {
520
+ ...rest,
521
+ class: useMergedClass(elementRef, className),
522
+ ref: syncRef(elementRef, ref)
523
+ };
524
+ return jsxRuntime.jsx(Tag, { ...props });
525
+ });
526
+
494
527
  const PSelectWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
495
528
  const elementRef = react.useRef();
496
529
  const Tag = usePrefix('p-select-wrapper');
@@ -523,6 +556,37 @@ const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', theme =
523
556
  return jsxRuntime.jsx(Tag, { ...props });
524
557
  });
525
558
 
559
+ const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, theme = 'light', className, ...rest }, ref) => {
560
+ const elementRef = react.useRef();
561
+ useEventCallback(elementRef, 'stepChange', onStepChange);
562
+ const Tag = usePrefix('p-stepper-horizontal');
563
+ useBrowserLayoutEffect(() => {
564
+ elementRef.current.theme = theme;
565
+ }, [theme]);
566
+ const props = {
567
+ ...rest,
568
+ class: useMergedClass(elementRef, className),
569
+ ref: syncRef(elementRef, ref)
570
+ };
571
+ return jsxRuntime.jsx(Tag, { ...props });
572
+ });
573
+
574
+ const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
575
+ const elementRef = react.useRef();
576
+ const Tag = usePrefix('p-stepper-horizontal-item');
577
+ const propsToSync = [disabled, state];
578
+ useBrowserLayoutEffect(() => {
579
+ const { current } = elementRef;
580
+ ['disabled', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
581
+ }, propsToSync);
582
+ const props = {
583
+ ...rest,
584
+ class: useMergedClass(elementRef, className),
585
+ ref: syncRef(elementRef, ref)
586
+ };
587
+ return jsxRuntime.jsx(Tag, { ...props });
588
+ });
589
+
526
590
  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) => {
527
591
  const elementRef = react.useRef();
528
592
  useEventCallback(elementRef, 'switchChange', onSwitchChange);
@@ -826,8 +890,12 @@ exports.PModal = PModal;
826
890
  exports.PPagination = PPagination;
827
891
  exports.PPopover = PPopover;
828
892
  exports.PRadioButtonWrapper = PRadioButtonWrapper;
893
+ exports.PSegmentedControl = PSegmentedControl;
894
+ exports.PSegmentedControlItem = PSegmentedControlItem;
829
895
  exports.PSelectWrapper = PSelectWrapper;
830
896
  exports.PSpinner = PSpinner;
897
+ exports.PStepperHorizontal = PStepperHorizontal;
898
+ exports.PStepperHorizontalItem = PStepperHorizontalItem;
831
899
  exports.PSwitch = PSwitch;
832
900
  exports.PTable = PTable;
833
901
  exports.PTableBody = PTableBody;