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

package/CHANGELOG.md

@@ -9,6 +9,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [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

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');
@@ -795,4 +828,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, PSwitch, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PTabs, PTabsBar, PTabsItem, PTag, PTagDismissible, PText, PTextFieldWrapper, PTextList, PTextListItem, PTextareaWrapper, PToast, PorscheDesignSystemProvider, skipCheckForPorscheDesignSystemProviderDuringTests, skipPorscheDesignSystemCDNRequestsDuringTests, useToastManager };