@porsche-design-system/components-react 3.22.0 → 3.22.1

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 (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/OSS_NOTICE +7219 -82023
  3. package/package.json +2 -2
  4. package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +24 -19
  5. package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +24 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@porsche-design-system/components-react",
3
- "version": "3.22.0",
3
+ "version": "3.22.1",
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": "3.22.0"
20
+ "@porsche-design-system/components-js": "3.22.1"
21
21
  },
22
22
  "peerDependencies": {
23
23
  "ag-grid-community": ">= 32.0.0 <33.0.0",
package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs CHANGED
@@ -6228,6 +6228,12 @@ const easingOpen = 'in';
6228
6228
  const dialogDurationClose = 'short';
6229
6229
  const backdropDurationClose = 'moderate';
6230
6230
  const easingClose = 'out';
6231
+ // ensures that the scrollbar color is mostly set correctly
6232
+ const scrollerBackground = {
6233
+ light: 'rgba(255,255,255,.01)',
6234
+ dark: 'rgba(0,0,0,.01)',
6235
+ auto: 'rgba(255,255,255,.01)',
6236
+ };
6231
6237
  const getComponentCss$T = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
6232
6238
  const { backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
6233
6239
  const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
@@ -6405,17 +6411,21 @@ const getComponentCss$T = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
6405
6411
  },
6406
6412
  },
6407
6413
  scroller: {
6414
+ display: 'contents',
6415
+ overflow: 'hidden auto',
6416
+ // scrollBehavior: 'smooth', // when defined, `.scrollTo()` isn't applied immediately
6417
+ // overscrollBehaviorY: 'none', // when defined, rubber band scroll effect is getting lost on iOS Safari
6418
+ // WebkitOverflowScrolling: 'touch', // when defined, secondary scroller might not be show in iOS Safari on iPhone only
6419
+ background: scrollerBackground[theme],
6420
+ ...prefersColorSchemeDarkMediaQuery(theme, {
6421
+ background: scrollerBackground.dark,
6422
+ }),
6408
6423
  [mediaQueryMobile]: {
6409
- display: 'contents',
6410
6424
  ...(!isSecondaryScrollerVisible && {
6411
6425
  gridArea: '1/1/-1/-1',
6412
6426
  display: 'grid',
6413
6427
  gridTemplateRows: 'subgrid',
6414
6428
  gridTemplateColumns: 'subgrid',
6415
- overflow: 'hidden auto',
6416
- // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
6417
- scrollBehavior: 'smooth',
6418
- WebkitOverflowScrolling: 'touch',
6419
6429
  '&::before': {
6420
6430
  content: '""',
6421
6431
  position: 'sticky',
@@ -6434,10 +6444,6 @@ const getComponentCss$T = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
6434
6444
  display: 'grid',
6435
6445
  gridTemplateRows: 'subgrid',
6436
6446
  gridTemplateColumns: 'subgrid',
6437
- overflow: 'hidden auto',
6438
- // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
6439
- scrollBehavior: 'smooth',
6440
- WebkitOverflowScrolling: 'touch',
6441
6447
  },
6442
6448
  },
6443
6449
  'dismiss-mobile': {
@@ -6628,17 +6634,21 @@ const getComponentCss$S = (isPrimary, isSecondary, isCascade, theme) => {
6628
6634
  },
6629
6635
  },
6630
6636
  scroller: {
6637
+ display: 'none',
6638
+ overflow: 'hidden auto',
6639
+ // scrollBehavior: 'smooth', // when defined, `.scrollTo()` isn't applied immediately
6640
+ // overscrollBehaviorY: 'none', // when defined, rubber band scroll effect is getting lost on iOS Safari
6641
+ // WebkitOverflowScrolling: 'touch', // when defined, secondary scroller might not be show in iOS Safari on iPhone only
6642
+ background: scrollerBackground[theme],
6643
+ ...prefersColorSchemeDarkMediaQuery(theme, {
6644
+ background: scrollerBackground.dark,
6645
+ }),
6631
6646
  [mediaQueryMobile]: {
6632
- display: 'none',
6633
6647
  ...(isSecondary && {
6634
6648
  display: 'grid',
6635
6649
  gridTemplateRows: 'subgrid',
6636
6650
  gridTemplateColumns: 'subgrid',
6637
6651
  gridArea: '1/1/-1/-1',
6638
- overflow: 'hidden auto',
6639
- // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
6640
- scrollBehavior: 'smooth',
6641
- WebkitOverflowScrolling: 'touch',
6642
6652
  '&::before': {
6643
6653
  zIndex: 1,
6644
6654
  content: '""',
@@ -6656,16 +6666,11 @@ const getComponentCss$S = (isPrimary, isSecondary, isCascade, theme) => {
6656
6666
  }),
6657
6667
  },
6658
6668
  [mediaQueryDesktop]: {
6659
- display: 'none',
6660
6669
  ...(isSecondary && {
6661
6670
  gridArea: '1/1/-1/-1',
6662
6671
  display: 'grid',
6663
6672
  gridTemplateRows: 'subgrid',
6664
6673
  gridTemplateColumns: 'subgrid',
6665
- overflow: 'hidden auto',
6666
- // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
6667
- scrollBehavior: 'smooth',
6668
- WebkitOverflowScrolling: 'touch',
6669
6674
  }),
6670
6675
  ...((isPrimary || isCascade) && {
6671
6676
  display: 'contents',
package/ssr/esm/components/dist/styles/esm/styles-entry.mjs CHANGED
@@ -6226,6 +6226,12 @@ const easingOpen = 'in';
6226
6226
  const dialogDurationClose = 'short';
6227
6227
  const backdropDurationClose = 'moderate';
6228
6228
  const easingClose = 'out';
6229
+ // ensures that the scrollbar color is mostly set correctly
6230
+ const scrollerBackground = {
6231
+ light: 'rgba(255,255,255,.01)',
6232
+ dark: 'rgba(0,0,0,.01)',
6233
+ auto: 'rgba(255,255,255,.01)',
6234
+ };
6229
6235
  const getComponentCss$T = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
6230
6236
  const { backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
6231
6237
  const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
@@ -6403,17 +6409,21 @@ const getComponentCss$T = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
6403
6409
  },
6404
6410
  },
6405
6411
  scroller: {
6412
+ display: 'contents',
6413
+ overflow: 'hidden auto',
6414
+ // scrollBehavior: 'smooth', // when defined, `.scrollTo()` isn't applied immediately
6415
+ // overscrollBehaviorY: 'none', // when defined, rubber band scroll effect is getting lost on iOS Safari
6416
+ // WebkitOverflowScrolling: 'touch', // when defined, secondary scroller might not be show in iOS Safari on iPhone only
6417
+ background: scrollerBackground[theme],
6418
+ ...prefersColorSchemeDarkMediaQuery(theme, {
6419
+ background: scrollerBackground.dark,
6420
+ }),
6406
6421
  [mediaQueryMobile]: {
6407
- display: 'contents',
6408
6422
  ...(!isSecondaryScrollerVisible && {
6409
6423
  gridArea: '1/1/-1/-1',
6410
6424
  display: 'grid',
6411
6425
  gridTemplateRows: 'subgrid',
6412
6426
  gridTemplateColumns: 'subgrid',
6413
- overflow: 'hidden auto',
6414
- // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
6415
- scrollBehavior: 'smooth',
6416
- WebkitOverflowScrolling: 'touch',
6417
6427
  '&::before': {
6418
6428
  content: '""',
6419
6429
  position: 'sticky',
@@ -6432,10 +6442,6 @@ const getComponentCss$T = (isOpen, isPrimary, isSecondaryScrollerVisible, theme)
6432
6442
  display: 'grid',
6433
6443
  gridTemplateRows: 'subgrid',
6434
6444
  gridTemplateColumns: 'subgrid',
6435
- overflow: 'hidden auto',
6436
- // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
6437
- scrollBehavior: 'smooth',
6438
- WebkitOverflowScrolling: 'touch',
6439
6445
  },
6440
6446
  },
6441
6447
  'dismiss-mobile': {
@@ -6626,17 +6632,21 @@ const getComponentCss$S = (isPrimary, isSecondary, isCascade, theme) => {
6626
6632
  },
6627
6633
  },
6628
6634
  scroller: {
6635
+ display: 'none',
6636
+ overflow: 'hidden auto',
6637
+ // scrollBehavior: 'smooth', // when defined, `.scrollTo()` isn't applied immediately
6638
+ // overscrollBehaviorY: 'none', // when defined, rubber band scroll effect is getting lost on iOS Safari
6639
+ // WebkitOverflowScrolling: 'touch', // when defined, secondary scroller might not be show in iOS Safari on iPhone only
6640
+ background: scrollerBackground[theme],
6641
+ ...prefersColorSchemeDarkMediaQuery(theme, {
6642
+ background: scrollerBackground.dark,
6643
+ }),
6629
6644
  [mediaQueryMobile]: {
6630
- display: 'none',
6631
6645
  ...(isSecondary && {
6632
6646
  display: 'grid',
6633
6647
  gridTemplateRows: 'subgrid',
6634
6648
  gridTemplateColumns: 'subgrid',
6635
6649
  gridArea: '1/1/-1/-1',
6636
- overflow: 'hidden auto',
6637
- // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
6638
- scrollBehavior: 'smooth',
6639
- WebkitOverflowScrolling: 'touch',
6640
6650
  '&::before': {
6641
6651
  zIndex: 1,
6642
6652
  content: '""',
@@ -6654,16 +6664,11 @@ const getComponentCss$S = (isPrimary, isSecondary, isCascade, theme) => {
6654
6664
  }),
6655
6665
  },
6656
6666
  [mediaQueryDesktop]: {
6657
- display: 'none',
6658
6667
  ...(isSecondary && {
6659
6668
  gridArea: '1/1/-1/-1',
6660
6669
  display: 'grid',
6661
6670
  gridTemplateRows: 'subgrid',
6662
6671
  gridTemplateColumns: 'subgrid',
6663
- overflow: 'hidden auto',
6664
- // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
6665
- scrollBehavior: 'smooth',
6666
- WebkitOverflowScrolling: 'touch',
6667
6672
  }),
6668
6673
  ...((isPrimary || isCascade) && {
6669
6674
  display: 'contents',