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

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 (12) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/esm/public-api.js +34 -1
  3. package/jsdom-polyfill/index.js +1 -1
  4. package/lib/components/index.d.ts +2 -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/tabs-item.wrapper.d.ts +2 -2
  10. package/lib/types.d.ts +8 -0
  11. package/package.json +2 -2
  12. package/public-api.js +35 -0
package/lib/components/index.d.ts CHANGED
@@ -22,6 +22,8 @@ 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';
27
29
  export * from './switch.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/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
@@ -471,6 +471,14 @@ export declare type ScrollToPosition = {
471
471
  isSmooth?: boolean;
472
472
  };
473
473
  export declare type PrevNextButtonJssStyle = any;
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;
481
+ };
474
482
  export declare type DropdownDirectionInternal = "down" | "up";
475
483
  export declare type DropdownDirection = DropdownDirectionInternal | "auto";
476
484
  declare const SPINNER_SIZES: readonly [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-react",
3
- "version": "2.13.0-rc.0",
3
+ "version": "2.13.0-rc.3",
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.0"
20
+ "@porsche-design-system/components-js": "2.13.0-rc.3"
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');
@@ -826,6 +859,8 @@ exports.PModal = PModal;
826
859
  exports.PPagination = PPagination;
827
860
  exports.PPopover = PPopover;
828
861
  exports.PRadioButtonWrapper = PRadioButtonWrapper;
862
+ exports.PSegmentedControl = PSegmentedControl;
863
+ exports.PSegmentedControlItem = PSegmentedControlItem;
829
864
  exports.PSelectWrapper = PSelectWrapper;
830
865
  exports.PSpinner = PSpinner;
831
866
  exports.PSwitch = PSwitch;