@porsche-design-system/components-react 2.15.0 → 2.16.0

package/CHANGELOG.md

@@ -9,6 +9,28 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [2.16.0] - 2022-09-08
+
+### [2.15.1-rc.1] - 2022-09-08
+
+#### Added
+
+- `Carousel`
+- `Scroller`
+
+#### Changed
+
+- `Stepper Horizontal` now has `size` property
+- `Stepper Horizontal` uses improved focus behavior in case it becomes scrollable and scroll indicators are centered
+  correctly.
+- `Tabs Bar` uses improved focus behavior in case it becomes scrollable and scroll indicators are centered correctly.
+
+### [2.15.1-rc.0] - 2022-08-24
+
+#### Fixed
+
+- `Radio Button Wrapper` visual selection change bug in Safari >= 15.5
+
 ### [2.15.0] - 2022-08-22
 
 ### [2.15.0-rc.1] - 2022-08-18

package/esm/public-api.js

@@ -180,6 +180,23 @@ const PButtonPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'ri
     return jsx(Tag, { ...props });
 });
 
+const PCarousel = /*#__PURE__*/ forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'carouselChange', onCarouselChange);
+    const Tag = usePrefix('p-carousel');
+    const propsToSync = [description, disablePagination, heading, intl, slidesPerPage, theme, wrapContent];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disablePagination', 'heading', 'intl', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(Tag, { ...props });
+});
+
 const PCheckboxWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', className, ...rest }, ref) => {
     const elementRef = useRef();
     const Tag = usePrefix('p-checkbox-wrapper');
@@ -488,6 +505,22 @@ const PRadioButtonWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label
     return jsx(Tag, { ...props });
 });
 
+const PScroller = /*#__PURE__*/ forwardRef(({ gradientColorScheme = 'default', scrollIndicatorPosition = 'center', scrollToPosition, theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const Tag = usePrefix('p-scroller');
+    const propsToSync = [gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    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);
@@ -553,13 +586,15 @@ const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = 'small', theme = 'ligh
     return jsx(Tag, { ...props });
 });
 
-const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, theme = 'light', className, ...rest }, ref) => {
+const PStepperHorizontal = /*#__PURE__*/ forwardRef(({ onStepChange, size = 'small', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'stepChange', onStepChange);
     const Tag = usePrefix('p-stepper-horizontal');
+    const propsToSync = [size, theme];
     useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme;
-    }, [theme]);
+        const { current } = elementRef;
+        ['size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
     const props = {
         ...rest,
         class: useMergedClass(elementRef, className),
@@ -860,4 +895,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, 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 };
+export { PAccordion, PBanner, PButton, PButtonGroup, PButtonPure, PCarousel, PCheckboxWrapper, PContentWrapper, PDivider, PFieldsetWrapper, PFlex, PFlexItem, PGrid, PGridItem, PHeadline, PIcon, PInlineNotification, PLink, PLinkPure, PLinkSocial, PMarque, PModal, PPagination, PPopover, PRadioButtonWrapper, PScroller, 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 };