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

package/CHANGELOG.md

@@ -9,6 +9,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [2.13.0-rc.4] - 2022-06-22
+
+#### Added
+
+- `Stepper Horizontal`
+
+### [2.13.0-rc.3] - 2022-06-22
+
+#### Added
+
+- `Segmented Control`
+
+### [2.13.0-rc.2] - 2022-06-21
+
 ### [2.13.0-rc.1] - 2022-06-21
 
 ### [2.13.0-rc.0] - 2022-06-21

package/esm/public-api.js

@@ -488,6 +488,39 @@ const PRadioButtonWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label
     return jsx(Tag, { ...props });
 });
 
+const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor = 'background-default', onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
+    const Tag = usePrefix('p-segmented-control');
+    const propsToSync = [backgroundColor, theme, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['backgroundColor', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(Tag, { ...props });
+});
+
+const PSegmentedControlItem = /*#__PURE__*/ forwardRef(({ disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const Tag = usePrefix('p-segmented-control-item');
+    const propsToSync = [disabled, icon, iconSource, label, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['disabled', 'icon', 'iconSource', 'label', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(Tag, { ...props });
+});
+
 const PSelectWrapper = /*#__PURE__*/ forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const Tag = usePrefix('p-select-wrapper');
@@ -520,6 +553,37 @@ const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', theme = 'ligh
     return jsx(Tag, { ...props });
 });
 
+const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, theme = 'light', className, ...rest }, ref) => {
+    const elementRef = 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 jsx(Tag, { ...props });
+});
+
+const PStepperHorizontalItem = /*#__PURE__*/ forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
+    const elementRef = 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 jsx(Tag, { ...props });
+});
+
 const PSwitch = /*#__PURE__*/ forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, stretch = false, tabbable = true, theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'switchChange', onSwitchChange);
@@ -795,4 +859,4 @@ const PToast = /*#__PURE__*/ forwardRef(({ theme = 'light', className, ...rest }
     return jsx(Tag, { ...props });
 });
 
-export { PAccordion, PBanner, PButton, PButtonGroup, PButtonPure, PCheckboxWrapper, PContentWrapper, PDivider, PFieldsetWrapper, PFlex, PFlexItem, PGrid, PGridItem, PHeadline, PIcon, PInlineNotification, PLink, PLinkPure, PLinkSocial, PMarque, PModal, PPagination, PPopover, PRadioButtonWrapper, PSelectWrapper, PSpinner, PSwitch, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PTabs, PTabsBar, PTabsItem, PTag, PTagDismissible, PText, PTextFieldWrapper, PTextList, PTextListItem, PTextareaWrapper, PToast, PorscheDesignSystemProvider, skipCheckForPorscheDesignSystemProviderDuringTests, skipPorscheDesignSystemCDNRequestsDuringTests, useToastManager };
+export { PAccordion, PBanner, PButton, PButtonGroup, PButtonPure, PCheckboxWrapper, PContentWrapper, PDivider, PFieldsetWrapper, PFlex, PFlexItem, PGrid, PGridItem, PHeadline, PIcon, PInlineNotification, PLink, PLinkPure, PLinkSocial, PMarque, PModal, PPagination, PPopover, PRadioButtonWrapper, PSegmentedControl, PSegmentedControlItem, PSelectWrapper, PSpinner, PStepperHorizontal, PStepperHorizontalItem, PSwitch, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PTabs, PTabsBar, PTabsItem, PTag, PTagDismissible, PText, PTextFieldWrapper, PTextList, PTextListItem, PTextareaWrapper, PToast, PorscheDesignSystemProvider, skipCheckForPorscheDesignSystemProviderDuringTests, skipPorscheDesignSystemCDNRequestsDuringTests, useToastManager };