@porsche-design-system/components-react 3.19.0-rc.0 → 3.19.0-rc.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.
- package/CHANGELOG.md +8 -0
- package/cjs/lib/components/canvas.wrapper.cjs +3 -5
- package/esm/lib/components/canvas.wrapper.d.ts +13 -21
- package/esm/lib/components/canvas.wrapper.mjs +4 -6
- package/esm/lib/types.d.ts +2 -7
- package/package.json +2 -2
- package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +143 -38
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.cjs +4 -6
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.cjs +16 -21
- package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +143 -38
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.mjs +5 -7
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.mjs +16 -21
- package/ssr/esm/lib/components/canvas.wrapper.d.ts +13 -21
- package/ssr/esm/lib/dsr-components/canvas.d.ts +5 -4
- package/ssr/esm/lib/types.d.ts +2 -7
package/CHANGELOG.md
CHANGED
|
@@ -14,12 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
|
|
|
14
14
|
|
|
15
15
|
### [Unreleased]
|
|
16
16
|
|
|
17
|
+
### [3.19.0-rc.1] - 2024-09-06
|
|
18
|
+
|
|
19
|
+
#### Changed
|
|
20
|
+
|
|
21
|
+
- `Canvas`: Improve UX ([#3494](https://github.com/porsche-design-system/porsche-design-system/pull/3494))
|
|
22
|
+
|
|
17
23
|
### [3.19.0-rc.0] - 2024-09-03
|
|
18
24
|
|
|
19
25
|
#### Added
|
|
20
26
|
|
|
21
27
|
- `componentsReady()`: Introduce optional `readyState` parameter
|
|
22
28
|
([#3460](https://github.com/porsche-design-system/porsche-design-system/pull/3460))
|
|
29
|
+
- `Carousel`: introduce `focusOnCenterSlide` & `gradientColor` props
|
|
30
|
+
([#3488](https://github.com/porsche-design-system/porsche-design-system/pull/3488))
|
|
23
31
|
|
|
24
32
|
#### Changed
|
|
25
33
|
|
|
@@ -6,15 +6,13 @@ var react = require('react');
|
|
|
6
6
|
var hooks = require('../../hooks.cjs');
|
|
7
7
|
var utils = require('../../utils.cjs');
|
|
8
8
|
|
|
9
|
-
const PCanvas = react.forwardRef(({
|
|
9
|
+
const PCanvas = react.forwardRef(({ sidebarEndIcon = 'configurate', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, ...rest }, ref) => {
|
|
10
10
|
const elementRef = react.useRef();
|
|
11
|
-
hooks.useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
|
|
12
|
-
hooks.useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
|
|
13
11
|
const WebComponentTag = hooks.usePrefix('p-canvas');
|
|
14
|
-
const propsToSync = [sidebarEndOpen,
|
|
12
|
+
const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || hooks.useTheme()];
|
|
15
13
|
hooks.useBrowserLayoutEffect(() => {
|
|
16
14
|
const { current } = elementRef;
|
|
17
|
-
['sidebarEndOpen', '
|
|
15
|
+
['sidebarEndIcon', 'sidebarEndOpen', 'sidebarStartIcon', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
18
16
|
}, propsToSync);
|
|
19
17
|
const props = {
|
|
20
18
|
...rest,
|
|
@@ -1,56 +1,48 @@
|
|
|
1
1
|
import type { BaseProps } from '../../BaseProps';
|
|
2
|
-
import type {
|
|
2
|
+
import type { CanvasSidebarEndIcon, CanvasSidebarStartIcon, Theme } from '../types';
|
|
3
3
|
export type PCanvasProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* The icon to toggle the Sidebar on the end side
|
|
6
6
|
*/
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Emitted when the component requests to close the sidebar on the start side.
|
|
10
|
-
*/
|
|
11
|
-
onDismissSidebarStart?: (event: CustomEvent<void>) => void;
|
|
7
|
+
sidebarEndIcon?: CanvasSidebarEndIcon;
|
|
12
8
|
/**
|
|
13
9
|
* Open Sidebar on the end side
|
|
14
10
|
*/
|
|
15
11
|
sidebarEndOpen?: boolean;
|
|
16
12
|
/**
|
|
17
|
-
*
|
|
13
|
+
* The icon to toggle the Sidebar on the start side
|
|
18
14
|
*/
|
|
19
|
-
|
|
15
|
+
sidebarStartIcon?: CanvasSidebarStartIcon;
|
|
20
16
|
/**
|
|
21
17
|
* Open Sidebar on the start side
|
|
22
18
|
*/
|
|
23
19
|
sidebarStartOpen?: boolean;
|
|
24
20
|
/**
|
|
25
|
-
*
|
|
21
|
+
* Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
|
|
26
22
|
*/
|
|
27
|
-
|
|
23
|
+
theme?: Theme;
|
|
28
24
|
};
|
|
29
25
|
export declare const PCanvas: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
30
26
|
/**
|
|
31
|
-
*
|
|
32
|
-
*/
|
|
33
|
-
onDismissSidebarEnd?: (event: CustomEvent<void>) => void;
|
|
34
|
-
/**
|
|
35
|
-
* Emitted when the component requests to close the sidebar on the start side.
|
|
27
|
+
* The icon to toggle the Sidebar on the end side
|
|
36
28
|
*/
|
|
37
|
-
|
|
29
|
+
sidebarEndIcon?: CanvasSidebarEndIcon;
|
|
38
30
|
/**
|
|
39
31
|
* Open Sidebar on the end side
|
|
40
32
|
*/
|
|
41
33
|
sidebarEndOpen?: boolean;
|
|
42
34
|
/**
|
|
43
|
-
*
|
|
35
|
+
* The icon to toggle the Sidebar on the start side
|
|
44
36
|
*/
|
|
45
|
-
|
|
37
|
+
sidebarStartIcon?: CanvasSidebarStartIcon;
|
|
46
38
|
/**
|
|
47
39
|
* Open Sidebar on the start side
|
|
48
40
|
*/
|
|
49
41
|
sidebarStartOpen?: boolean;
|
|
50
42
|
/**
|
|
51
|
-
*
|
|
43
|
+
* Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
|
|
52
44
|
*/
|
|
53
|
-
|
|
45
|
+
theme?: Theme;
|
|
54
46
|
} & {
|
|
55
47
|
children?: import("react").ReactNode | undefined;
|
|
56
48
|
} & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef, useRef } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
|
|
5
5
|
import { syncRef } from '../../utils.mjs';
|
|
6
6
|
|
|
7
|
-
const PCanvas = forwardRef(({
|
|
7
|
+
const PCanvas = forwardRef(({ sidebarEndIcon = 'configurate', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, ...rest }, ref) => {
|
|
8
8
|
const elementRef = useRef();
|
|
9
|
-
useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
|
|
10
|
-
useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
|
|
11
9
|
const WebComponentTag = usePrefix('p-canvas');
|
|
12
|
-
const propsToSync = [sidebarEndOpen,
|
|
10
|
+
const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || useTheme()];
|
|
13
11
|
useBrowserLayoutEffect(() => {
|
|
14
12
|
const { current } = elementRef;
|
|
15
|
-
['sidebarEndOpen', '
|
|
13
|
+
['sidebarEndIcon', 'sidebarEndOpen', 'sidebarStartIcon', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
16
14
|
}, propsToSync);
|
|
17
15
|
const props = {
|
|
18
16
|
...rest,
|
package/esm/lib/types.d.ts
CHANGED
|
@@ -684,13 +684,8 @@ export type ButtonTileSize = TileSize;
|
|
|
684
684
|
export type ButtonTileBackground = TileBackground;
|
|
685
685
|
export type ButtonTileWeight = TileWeight;
|
|
686
686
|
export type ButtonTileAlign = TileAlign;
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
"large"
|
|
690
|
-
];
|
|
691
|
-
export type CanvasSidebarWidth = (typeof CANVAS_SIDEBAR_WIDTHS)[number];
|
|
692
|
-
export type CanvasSidebarStartWidth = CanvasSidebarWidth;
|
|
693
|
-
export type CanvasSidebarEndWidth = CanvasSidebarWidth;
|
|
687
|
+
export type CanvasSidebarStartIcon = IconName;
|
|
688
|
+
export type CanvasSidebarEndIcon = IconName;
|
|
694
689
|
declare const CAROUSEL_WIDTHS: readonly [
|
|
695
690
|
"basic",
|
|
696
691
|
"extended"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@porsche-design-system/components-react",
|
|
3
|
-
"version": "3.19.0-rc.
|
|
3
|
+
"version": "3.19.0-rc.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.19.0-rc.
|
|
20
|
+
"@porsche-design-system/components-js": "3.19.0-rc.1"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": ">=18.0.0 <19.0.0",
|
|
@@ -4708,16 +4708,14 @@ const getComponentCss$13 = (icon, iconSource, variant, hideLabel, disabled, load
|
|
|
4708
4708
|
}));
|
|
4709
4709
|
};
|
|
4710
4710
|
|
|
4711
|
-
const
|
|
4712
|
-
const
|
|
4713
|
-
// TODO: maybe default grid gap would also work
|
|
4711
|
+
const cssVarSidebarStartWidth = '--p-canvas-sidebar-start-width';
|
|
4712
|
+
const cssVarSidebarEndWidth = '--p-canvas-sidebar-end-width';
|
|
4714
4713
|
const gridProductiveGap = gridGap.replace('36px', '24px');
|
|
4715
4714
|
const mediaQueryDesktopView = getMediaQueryMin('m');
|
|
4716
|
-
const
|
|
4717
|
-
|
|
4718
|
-
|
|
4719
|
-
};
|
|
4720
|
-
const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
|
|
4715
|
+
const sidebarWidth = '320px';
|
|
4716
|
+
const headerHeight = 'calc(1.5rem + 28px)';
|
|
4717
|
+
const getComponentCss$12 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
|
|
4718
|
+
const { primaryColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
|
|
4721
4719
|
return getCss({
|
|
4722
4720
|
'@global': {
|
|
4723
4721
|
':host': {
|
|
@@ -4728,7 +4726,71 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
|
|
|
4728
4726
|
}),
|
|
4729
4727
|
},
|
|
4730
4728
|
...preventFoucOfNestedElementsStyles,
|
|
4731
|
-
'
|
|
4729
|
+
'::slotted': {
|
|
4730
|
+
'&([slot*="header"])': {
|
|
4731
|
+
display: 'flex',
|
|
4732
|
+
alignItems: 'center',
|
|
4733
|
+
gap: spacingStaticSmall,
|
|
4734
|
+
},
|
|
4735
|
+
'&([slot*="sidebar"])': {
|
|
4736
|
+
display: 'flex',
|
|
4737
|
+
flexDirection: 'column',
|
|
4738
|
+
gap: spacingStaticSmall,
|
|
4739
|
+
},
|
|
4740
|
+
// pre-defined utility classes
|
|
4741
|
+
'&(.p-module)': {
|
|
4742
|
+
gridColumn: '1/-1',
|
|
4743
|
+
},
|
|
4744
|
+
'&(.p-module--subgrid)': {
|
|
4745
|
+
display: 'grid',
|
|
4746
|
+
gridTemplateColumns: 'subgrid',
|
|
4747
|
+
rowGap: gridProductiveGap,
|
|
4748
|
+
},
|
|
4749
|
+
'&(.p-module--more-space-above-small)': {
|
|
4750
|
+
marginTop: spacingStaticSmall,
|
|
4751
|
+
},
|
|
4752
|
+
'&(.p-module--more-space-above-medium)': {
|
|
4753
|
+
marginTop: spacingStaticMedium,
|
|
4754
|
+
},
|
|
4755
|
+
'&(.p-module--more-space-above-large)': {
|
|
4756
|
+
marginTop: spacingStaticLarge,
|
|
4757
|
+
},
|
|
4758
|
+
'&(.p-module--less-space-above-small)': {
|
|
4759
|
+
marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticSmall}))`,
|
|
4760
|
+
},
|
|
4761
|
+
'&(.p-module--less-space-above-medium)': {
|
|
4762
|
+
marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticMedium}))`,
|
|
4763
|
+
},
|
|
4764
|
+
'&(.p-module--less-space-above-large)': {
|
|
4765
|
+
marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticLarge}))`,
|
|
4766
|
+
},
|
|
4767
|
+
'&(.p-flex)': {
|
|
4768
|
+
display: 'flex',
|
|
4769
|
+
},
|
|
4770
|
+
'&(.p-align-items--center)': {
|
|
4771
|
+
alignItems: 'center',
|
|
4772
|
+
},
|
|
4773
|
+
'&(.p-gap--small)': {
|
|
4774
|
+
gap: spacingStaticSmall,
|
|
4775
|
+
},
|
|
4776
|
+
'&(.p-gap--medium)': {
|
|
4777
|
+
gap: spacingStaticMedium,
|
|
4778
|
+
},
|
|
4779
|
+
'&(.p-gap--large)': {
|
|
4780
|
+
gap: spacingStaticLarge,
|
|
4781
|
+
},
|
|
4782
|
+
},
|
|
4783
|
+
'slot[name="title"]::slotted(a)': {
|
|
4784
|
+
textDecoration: 'none',
|
|
4785
|
+
color: 'inherit',
|
|
4786
|
+
},
|
|
4787
|
+
h2: {
|
|
4788
|
+
...textSmallStyle,
|
|
4789
|
+
color: primaryColor,
|
|
4790
|
+
textTransform: 'uppercase',
|
|
4791
|
+
letterSpacing: '2px',
|
|
4792
|
+
},
|
|
4793
|
+
'header, main, footer, aside': {
|
|
4732
4794
|
padding: gridProductiveGap,
|
|
4733
4795
|
boxSizing: 'border-box',
|
|
4734
4796
|
zIndex: 0,
|
|
@@ -4737,49 +4799,78 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
|
|
|
4737
4799
|
gridArea: 'header',
|
|
4738
4800
|
position: 'sticky',
|
|
4739
4801
|
top: 0,
|
|
4740
|
-
zIndex:
|
|
4802
|
+
zIndex: 9999999,
|
|
4803
|
+
height: headerHeight,
|
|
4804
|
+
display: 'grid',
|
|
4805
|
+
gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)',
|
|
4806
|
+
gap: gridProductiveGap,
|
|
4807
|
+
backgroundColor: backgroundSurfaceColor,
|
|
4808
|
+
alignItems: 'center',
|
|
4809
|
+
paddingBlock: 0,
|
|
4810
|
+
'&::before, &::after': {
|
|
4811
|
+
content: '""',
|
|
4812
|
+
position: 'absolute',
|
|
4813
|
+
backgroundColor: 'transparent',
|
|
4814
|
+
bottom: `calc(${borderRadiusLarge} * -2)`,
|
|
4815
|
+
height: `calc(${borderRadiusLarge} * 2)`,
|
|
4816
|
+
width: borderRadiusLarge,
|
|
4817
|
+
boxShadow: `0 -${borderRadiusLarge} 0 0 ${backgroundSurfaceColor}`,
|
|
4818
|
+
pointerEvents: 'none',
|
|
4819
|
+
},
|
|
4820
|
+
'&::before': {
|
|
4821
|
+
left: 0,
|
|
4822
|
+
borderTopLeftRadius: borderRadiusLarge,
|
|
4823
|
+
},
|
|
4824
|
+
'&::after': {
|
|
4825
|
+
right: 0,
|
|
4826
|
+
borderTopRightRadius: borderRadiusLarge,
|
|
4827
|
+
},
|
|
4741
4828
|
},
|
|
4742
4829
|
main: {
|
|
4743
4830
|
gridArea: 'main',
|
|
4744
|
-
'--
|
|
4745
|
-
'--
|
|
4746
|
-
'--
|
|
4747
|
-
'--
|
|
4831
|
+
'--p-canvas-grid-span-full': 'span 6',
|
|
4832
|
+
'--p-canvas-grid-span-one-half': 'span 3',
|
|
4833
|
+
'--p-canvas-grid-span-one-third': 'span 2',
|
|
4834
|
+
'--p-canvas-grid-span-two-thirds': 'span 4',
|
|
4748
4835
|
display: 'grid',
|
|
4749
4836
|
gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
|
|
4750
4837
|
gap: gridProductiveGap,
|
|
4751
4838
|
alignContent: 'flex-start',
|
|
4839
|
+
backgroundColor,
|
|
4752
4840
|
[mediaQueryDesktopView]: {
|
|
4753
|
-
'--
|
|
4754
|
-
'--
|
|
4755
|
-
'--
|
|
4756
|
-
'--
|
|
4841
|
+
'--p-canvas-grid-span-full': 'span 12',
|
|
4842
|
+
'--p-canvas-grid-span-one-half': 'span 6',
|
|
4843
|
+
'--p-canvas-grid-span-one-third': 'span 4',
|
|
4844
|
+
'--p-canvas-grid-span-two-thirds': 'span 8',
|
|
4757
4845
|
gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
|
|
4758
4846
|
},
|
|
4759
4847
|
},
|
|
4760
4848
|
footer: {
|
|
4761
4849
|
gridArea: 'footer',
|
|
4850
|
+
backgroundColor,
|
|
4762
4851
|
},
|
|
4763
4852
|
aside: {
|
|
4764
|
-
// TODO: box-shadows or colored surface must be defined, design is missing
|
|
4765
|
-
position: 'relative',
|
|
4766
4853
|
transition: getTransition('margin'),
|
|
4767
|
-
'
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
? 0
|
|
4772
|
-
: `calc(var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]}) * -1)`,
|
|
4773
|
-
},
|
|
4774
|
-
'&:last-of-type': {
|
|
4775
|
-
gridArea: 'sidebar-end',
|
|
4776
|
-
width: `var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]})`,
|
|
4777
|
-
marginInlineEnd: isSidebarEndOpen
|
|
4778
|
-
? 0
|
|
4779
|
-
: `calc(var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]}) * -1)`,
|
|
4780
|
-
},
|
|
4854
|
+
position: 'sticky',
|
|
4855
|
+
top: headerHeight,
|
|
4856
|
+
height: `calc(100dvh - ${headerHeight})`,
|
|
4857
|
+
overflow: 'hidden auto',
|
|
4781
4858
|
},
|
|
4782
4859
|
},
|
|
4860
|
+
'sidebar-start': {
|
|
4861
|
+
borderInlineEnd: `1px solid ${backgroundSurfaceColor}`,
|
|
4862
|
+
backgroundColor,
|
|
4863
|
+
gridArea: 'sidebar-start',
|
|
4864
|
+
width: `var(${cssVarSidebarStartWidth}, ${sidebarWidth})`,
|
|
4865
|
+
marginInlineStart: isSidebarStartOpen ? 0 : `calc(var(${cssVarSidebarStartWidth}, ${sidebarWidth}) * -1)`,
|
|
4866
|
+
},
|
|
4867
|
+
'sidebar-end': {
|
|
4868
|
+
borderInlineStart: `1px solid ${backgroundSurfaceColor}`,
|
|
4869
|
+
backgroundColor,
|
|
4870
|
+
gridArea: 'sidebar-end',
|
|
4871
|
+
width: `var(${cssVarSidebarEndWidth}, ${sidebarWidth})`,
|
|
4872
|
+
marginInlineEnd: isSidebarEndOpen ? 0 : `calc(var(${cssVarSidebarEndWidth}, ${sidebarWidth}) * -1)`,
|
|
4873
|
+
},
|
|
4783
4874
|
canvas: {
|
|
4784
4875
|
display: 'grid',
|
|
4785
4876
|
gridTemplateRows: 'auto minmax(0, 1fr) auto',
|
|
@@ -4791,10 +4882,24 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
|
|
|
4791
4882
|
gridTemplateAreas: '"header header header" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
|
|
4792
4883
|
},
|
|
4793
4884
|
},
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
|
|
4797
|
-
|
|
4885
|
+
crest: {
|
|
4886
|
+
[getMediaQueryMin('s')]: {
|
|
4887
|
+
display: 'none',
|
|
4888
|
+
},
|
|
4889
|
+
},
|
|
4890
|
+
wordmark: {
|
|
4891
|
+
height: '10px',
|
|
4892
|
+
[getMediaQueryMax('s')]: {
|
|
4893
|
+
display: 'none',
|
|
4894
|
+
},
|
|
4895
|
+
},
|
|
4896
|
+
header: {
|
|
4897
|
+
display: 'flex',
|
|
4898
|
+
gap: spacingStaticSmall,
|
|
4899
|
+
alignItems: 'center',
|
|
4900
|
+
'&:last-of-type': {
|
|
4901
|
+
justifyContent: 'end',
|
|
4902
|
+
},
|
|
4798
4903
|
},
|
|
4799
4904
|
});
|
|
4800
4905
|
};
|
package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.cjs
CHANGED
|
@@ -7,22 +7,20 @@ var hooks = require('../../hooks.cjs');
|
|
|
7
7
|
var utils = require('../../utils.cjs');
|
|
8
8
|
var canvas = require('../dsr-components/canvas.cjs');
|
|
9
9
|
|
|
10
|
-
const PCanvas = react.forwardRef(({
|
|
10
|
+
const PCanvas = react.forwardRef(({ sidebarEndIcon = 'configurate', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, children, ...rest }, ref) => {
|
|
11
11
|
const elementRef = react.useRef();
|
|
12
|
-
hooks.useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
|
|
13
|
-
hooks.useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
|
|
14
12
|
const WebComponentTag = hooks.usePrefix('p-canvas');
|
|
15
|
-
const propsToSync = [sidebarEndOpen,
|
|
13
|
+
const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || hooks.useTheme()];
|
|
16
14
|
hooks.useBrowserLayoutEffect(() => {
|
|
17
15
|
const { current } = elementRef;
|
|
18
|
-
['sidebarEndOpen', '
|
|
16
|
+
['sidebarEndIcon', 'sidebarEndOpen', 'sidebarStartIcon', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
19
17
|
}, propsToSync);
|
|
20
18
|
const props = {
|
|
21
19
|
...rest,
|
|
22
20
|
// @ts-ignore
|
|
23
21
|
...(!process.browser
|
|
24
22
|
? {
|
|
25
|
-
children: (jsxRuntime.jsx(canvas.DSRCanvas, { sidebarEndOpen,
|
|
23
|
+
children: (jsxRuntime.jsx(canvas.DSRCanvas, { sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme: theme || hooks.useTheme(), children })),
|
|
26
24
|
}
|
|
27
25
|
: {
|
|
28
26
|
children,
|
package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.cjs
CHANGED
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
require('../components/accordion.wrapper.cjs');
|
|
5
5
|
require('../components/banner.wrapper.cjs');
|
|
6
|
-
require('../components/button.wrapper.cjs');
|
|
6
|
+
var button_wrapper = require('../components/button.wrapper.cjs');
|
|
7
7
|
require('../components/button-group.wrapper.cjs');
|
|
8
|
-
|
|
8
|
+
require('../components/button-pure.wrapper.cjs');
|
|
9
9
|
require('../components/button-tile.wrapper.cjs');
|
|
10
10
|
require('../components/canvas.wrapper.cjs');
|
|
11
11
|
require('../components/carousel.wrapper.cjs');
|
|
12
12
|
require('../components/checkbox-wrapper.wrapper.cjs');
|
|
13
13
|
require('../components/content-wrapper.wrapper.cjs');
|
|
14
|
-
require('../components/crest.wrapper.cjs');
|
|
14
|
+
var crest_wrapper = require('../components/crest.wrapper.cjs');
|
|
15
15
|
require('../components/display.wrapper.cjs');
|
|
16
16
|
require('../components/divider.wrapper.cjs');
|
|
17
17
|
require('../components/fieldset.wrapper.cjs');
|
|
@@ -72,7 +72,7 @@ require('../components/text-list-item.wrapper.cjs');
|
|
|
72
72
|
require('../components/textarea.wrapper.cjs');
|
|
73
73
|
require('../components/textarea-wrapper.wrapper.cjs');
|
|
74
74
|
require('../components/toast.wrapper.cjs');
|
|
75
|
-
require('../components/wordmark.wrapper.cjs');
|
|
75
|
+
var wordmark_wrapper = require('../components/wordmark.wrapper.cjs');
|
|
76
76
|
var splitChildren = require('../../splitChildren.cjs');
|
|
77
77
|
var react = require('react');
|
|
78
78
|
var minifyCss = require('../../minifyCss.cjs');
|
|
@@ -80,40 +80,35 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
|
|
|
80
80
|
var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
|
|
81
81
|
|
|
82
82
|
/**
|
|
83
|
-
* @slot {"name": "header", "description": "Renders a **sticky** header section above the content area." }
|
|
83
|
+
* @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode)." }
|
|
84
|
+
* @slot {"name": "header-end", "description": "Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode)." }
|
|
84
85
|
* @slot {"name": "", "description": "Default slot for the main content" }
|
|
86
|
+
* @slot {"name": "title", "description": "Application name" }
|
|
85
87
|
* @slot {"name": "footer", "description": "Shows a footer section, flowing under the content area when scrollable." }
|
|
86
88
|
* @slot {"name": "sidebar-start", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
|
|
87
89
|
* @slot {"name": "sidebar-end", "description": "Shows a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
|
|
88
90
|
*
|
|
89
|
-
* @controlled {"props": ["sidebarStartOpen"], "event": "dismissSidebarStart"}
|
|
90
|
-
* @controlled {"props": ["sidebarEndOpen"], "event": "dismissSidebarEnd"}
|
|
91
|
-
*
|
|
92
91
|
* @experimental
|
|
93
92
|
*/
|
|
94
93
|
class DSRCanvas extends react.Component {
|
|
95
94
|
host;
|
|
96
95
|
isDesktopView = false;
|
|
96
|
+
hasSidebarStart;
|
|
97
|
+
hasSidebarEnd;
|
|
97
98
|
render() {
|
|
98
|
-
splitChildren.splitChildren(this.props.children);
|
|
99
|
-
const
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
/* @ts-ignore */
|
|
104
|
-
part: "sidebar-start",
|
|
99
|
+
const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
|
|
100
|
+
const hasSidebarStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-start').length > 0;
|
|
101
|
+
const hasSidebarEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end').length > 0;
|
|
102
|
+
const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getCanvasCss(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen)));
|
|
103
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "canvas", children: [jsxRuntime.jsxs("header", { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasSidebarStart && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: this.props.sidebarStartIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsxRuntime.jsx("h2", { children: jsxRuntime.jsx("slot", { name: "title" }) }), jsxRuntime.jsx("slot", { name: "header-start" })] }), jsxRuntime.jsx(crest_wrapper.PCrest, { className: "crest" }), jsxRuntime.jsx(wordmark_wrapper.PWordmark, { className: "wordmark", size: "inherit", theme: this.props.theme }), jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx("slot", { name: "header-end" }), hasSidebarEnd && (jsxRuntime.jsxs(button_wrapper.PButton, { theme: this.props.theme, icon: this.props.sidebarEndIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }))] })] }), jsxRuntime.jsx("main", { children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx("footer", { children: jsxRuntime.jsx("slot", { name: "footer" }) }), this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSidebarStart && (jsxRuntime.jsx("aside", { className: "sidebar-start",
|
|
105
104
|
// "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
|
|
106
105
|
// eslint-disable-next-line
|
|
107
106
|
/* @ts-ignore */
|
|
108
|
-
inert: this.props.sidebarStartOpen ? null : true,
|
|
109
|
-
// "part" is not valid in TS
|
|
110
|
-
// eslint-disable-next-line
|
|
111
|
-
/* @ts-ignore */
|
|
112
|
-
part: "sidebar-end",
|
|
107
|
+
inert: this.props.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })), hasSidebarEnd && (jsxRuntime.jsx("aside", { className: "sidebar-end",
|
|
113
108
|
// "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
|
|
114
109
|
// eslint-disable-next-line
|
|
115
110
|
/* @ts-ignore */
|
|
116
|
-
inert: this.props.sidebarEndOpen ? null : true,
|
|
111
|
+
inert: this.props.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] }))] }), !this.props.isDesktopView && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasSidebarStart && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: jsxRuntime.jsx("slot", { name: "sidebar-start" }) })), hasSidebarEnd && (jsxRuntime.jsx(flyout_wrapper.PFlyout, { theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsxRuntime.jsx("slot", { name: "sidebar-end" }) }))] }))] })] }), this.props.children] }));
|
|
117
112
|
}
|
|
118
113
|
}
|
|
119
114
|
|
|
@@ -4706,16 +4706,14 @@ const getComponentCss$13 = (icon, iconSource, variant, hideLabel, disabled, load
|
|
|
4706
4706
|
}));
|
|
4707
4707
|
};
|
|
4708
4708
|
|
|
4709
|
-
const
|
|
4710
|
-
const
|
|
4711
|
-
// TODO: maybe default grid gap would also work
|
|
4709
|
+
const cssVarSidebarStartWidth = '--p-canvas-sidebar-start-width';
|
|
4710
|
+
const cssVarSidebarEndWidth = '--p-canvas-sidebar-end-width';
|
|
4712
4711
|
const gridProductiveGap = gridGap.replace('36px', '24px');
|
|
4713
4712
|
const mediaQueryDesktopView = getMediaQueryMin('m');
|
|
4714
|
-
const
|
|
4715
|
-
|
|
4716
|
-
|
|
4717
|
-
};
|
|
4718
|
-
const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
|
|
4713
|
+
const sidebarWidth = '320px';
|
|
4714
|
+
const headerHeight = 'calc(1.5rem + 28px)';
|
|
4715
|
+
const getComponentCss$12 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
|
|
4716
|
+
const { primaryColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
|
|
4719
4717
|
return getCss({
|
|
4720
4718
|
'@global': {
|
|
4721
4719
|
':host': {
|
|
@@ -4726,7 +4724,71 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
|
|
|
4726
4724
|
}),
|
|
4727
4725
|
},
|
|
4728
4726
|
...preventFoucOfNestedElementsStyles,
|
|
4729
|
-
'
|
|
4727
|
+
'::slotted': {
|
|
4728
|
+
'&([slot*="header"])': {
|
|
4729
|
+
display: 'flex',
|
|
4730
|
+
alignItems: 'center',
|
|
4731
|
+
gap: spacingStaticSmall,
|
|
4732
|
+
},
|
|
4733
|
+
'&([slot*="sidebar"])': {
|
|
4734
|
+
display: 'flex',
|
|
4735
|
+
flexDirection: 'column',
|
|
4736
|
+
gap: spacingStaticSmall,
|
|
4737
|
+
},
|
|
4738
|
+
// pre-defined utility classes
|
|
4739
|
+
'&(.p-module)': {
|
|
4740
|
+
gridColumn: '1/-1',
|
|
4741
|
+
},
|
|
4742
|
+
'&(.p-module--subgrid)': {
|
|
4743
|
+
display: 'grid',
|
|
4744
|
+
gridTemplateColumns: 'subgrid',
|
|
4745
|
+
rowGap: gridProductiveGap,
|
|
4746
|
+
},
|
|
4747
|
+
'&(.p-module--more-space-above-small)': {
|
|
4748
|
+
marginTop: spacingStaticSmall,
|
|
4749
|
+
},
|
|
4750
|
+
'&(.p-module--more-space-above-medium)': {
|
|
4751
|
+
marginTop: spacingStaticMedium,
|
|
4752
|
+
},
|
|
4753
|
+
'&(.p-module--more-space-above-large)': {
|
|
4754
|
+
marginTop: spacingStaticLarge,
|
|
4755
|
+
},
|
|
4756
|
+
'&(.p-module--less-space-above-small)': {
|
|
4757
|
+
marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticSmall}))`,
|
|
4758
|
+
},
|
|
4759
|
+
'&(.p-module--less-space-above-medium)': {
|
|
4760
|
+
marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticMedium}))`,
|
|
4761
|
+
},
|
|
4762
|
+
'&(.p-module--less-space-above-large)': {
|
|
4763
|
+
marginTop: `max(calc(-1 * ${gridProductiveGap}), calc(-1 * ${spacingStaticLarge}))`,
|
|
4764
|
+
},
|
|
4765
|
+
'&(.p-flex)': {
|
|
4766
|
+
display: 'flex',
|
|
4767
|
+
},
|
|
4768
|
+
'&(.p-align-items--center)': {
|
|
4769
|
+
alignItems: 'center',
|
|
4770
|
+
},
|
|
4771
|
+
'&(.p-gap--small)': {
|
|
4772
|
+
gap: spacingStaticSmall,
|
|
4773
|
+
},
|
|
4774
|
+
'&(.p-gap--medium)': {
|
|
4775
|
+
gap: spacingStaticMedium,
|
|
4776
|
+
},
|
|
4777
|
+
'&(.p-gap--large)': {
|
|
4778
|
+
gap: spacingStaticLarge,
|
|
4779
|
+
},
|
|
4780
|
+
},
|
|
4781
|
+
'slot[name="title"]::slotted(a)': {
|
|
4782
|
+
textDecoration: 'none',
|
|
4783
|
+
color: 'inherit',
|
|
4784
|
+
},
|
|
4785
|
+
h2: {
|
|
4786
|
+
...textSmallStyle,
|
|
4787
|
+
color: primaryColor,
|
|
4788
|
+
textTransform: 'uppercase',
|
|
4789
|
+
letterSpacing: '2px',
|
|
4790
|
+
},
|
|
4791
|
+
'header, main, footer, aside': {
|
|
4730
4792
|
padding: gridProductiveGap,
|
|
4731
4793
|
boxSizing: 'border-box',
|
|
4732
4794
|
zIndex: 0,
|
|
@@ -4735,49 +4797,78 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
|
|
|
4735
4797
|
gridArea: 'header',
|
|
4736
4798
|
position: 'sticky',
|
|
4737
4799
|
top: 0,
|
|
4738
|
-
zIndex:
|
|
4800
|
+
zIndex: 9999999,
|
|
4801
|
+
height: headerHeight,
|
|
4802
|
+
display: 'grid',
|
|
4803
|
+
gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)',
|
|
4804
|
+
gap: gridProductiveGap,
|
|
4805
|
+
backgroundColor: backgroundSurfaceColor,
|
|
4806
|
+
alignItems: 'center',
|
|
4807
|
+
paddingBlock: 0,
|
|
4808
|
+
'&::before, &::after': {
|
|
4809
|
+
content: '""',
|
|
4810
|
+
position: 'absolute',
|
|
4811
|
+
backgroundColor: 'transparent',
|
|
4812
|
+
bottom: `calc(${borderRadiusLarge} * -2)`,
|
|
4813
|
+
height: `calc(${borderRadiusLarge} * 2)`,
|
|
4814
|
+
width: borderRadiusLarge,
|
|
4815
|
+
boxShadow: `0 -${borderRadiusLarge} 0 0 ${backgroundSurfaceColor}`,
|
|
4816
|
+
pointerEvents: 'none',
|
|
4817
|
+
},
|
|
4818
|
+
'&::before': {
|
|
4819
|
+
left: 0,
|
|
4820
|
+
borderTopLeftRadius: borderRadiusLarge,
|
|
4821
|
+
},
|
|
4822
|
+
'&::after': {
|
|
4823
|
+
right: 0,
|
|
4824
|
+
borderTopRightRadius: borderRadiusLarge,
|
|
4825
|
+
},
|
|
4739
4826
|
},
|
|
4740
4827
|
main: {
|
|
4741
4828
|
gridArea: 'main',
|
|
4742
|
-
'--
|
|
4743
|
-
'--
|
|
4744
|
-
'--
|
|
4745
|
-
'--
|
|
4829
|
+
'--p-canvas-grid-span-full': 'span 6',
|
|
4830
|
+
'--p-canvas-grid-span-one-half': 'span 3',
|
|
4831
|
+
'--p-canvas-grid-span-one-third': 'span 2',
|
|
4832
|
+
'--p-canvas-grid-span-two-thirds': 'span 4',
|
|
4746
4833
|
display: 'grid',
|
|
4747
4834
|
gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
|
|
4748
4835
|
gap: gridProductiveGap,
|
|
4749
4836
|
alignContent: 'flex-start',
|
|
4837
|
+
backgroundColor,
|
|
4750
4838
|
[mediaQueryDesktopView]: {
|
|
4751
|
-
'--
|
|
4752
|
-
'--
|
|
4753
|
-
'--
|
|
4754
|
-
'--
|
|
4839
|
+
'--p-canvas-grid-span-full': 'span 12',
|
|
4840
|
+
'--p-canvas-grid-span-one-half': 'span 6',
|
|
4841
|
+
'--p-canvas-grid-span-one-third': 'span 4',
|
|
4842
|
+
'--p-canvas-grid-span-two-thirds': 'span 8',
|
|
4755
4843
|
gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
|
|
4756
4844
|
},
|
|
4757
4845
|
},
|
|
4758
4846
|
footer: {
|
|
4759
4847
|
gridArea: 'footer',
|
|
4848
|
+
backgroundColor,
|
|
4760
4849
|
},
|
|
4761
4850
|
aside: {
|
|
4762
|
-
// TODO: box-shadows or colored surface must be defined, design is missing
|
|
4763
|
-
position: 'relative',
|
|
4764
4851
|
transition: getTransition('margin'),
|
|
4765
|
-
'
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
? 0
|
|
4770
|
-
: `calc(var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]}) * -1)`,
|
|
4771
|
-
},
|
|
4772
|
-
'&:last-of-type': {
|
|
4773
|
-
gridArea: 'sidebar-end',
|
|
4774
|
-
width: `var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]})`,
|
|
4775
|
-
marginInlineEnd: isSidebarEndOpen
|
|
4776
|
-
? 0
|
|
4777
|
-
: `calc(var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]}) * -1)`,
|
|
4778
|
-
},
|
|
4852
|
+
position: 'sticky',
|
|
4853
|
+
top: headerHeight,
|
|
4854
|
+
height: `calc(100dvh - ${headerHeight})`,
|
|
4855
|
+
overflow: 'hidden auto',
|
|
4779
4856
|
},
|
|
4780
4857
|
},
|
|
4858
|
+
'sidebar-start': {
|
|
4859
|
+
borderInlineEnd: `1px solid ${backgroundSurfaceColor}`,
|
|
4860
|
+
backgroundColor,
|
|
4861
|
+
gridArea: 'sidebar-start',
|
|
4862
|
+
width: `var(${cssVarSidebarStartWidth}, ${sidebarWidth})`,
|
|
4863
|
+
marginInlineStart: isSidebarStartOpen ? 0 : `calc(var(${cssVarSidebarStartWidth}, ${sidebarWidth}) * -1)`,
|
|
4864
|
+
},
|
|
4865
|
+
'sidebar-end': {
|
|
4866
|
+
borderInlineStart: `1px solid ${backgroundSurfaceColor}`,
|
|
4867
|
+
backgroundColor,
|
|
4868
|
+
gridArea: 'sidebar-end',
|
|
4869
|
+
width: `var(${cssVarSidebarEndWidth}, ${sidebarWidth})`,
|
|
4870
|
+
marginInlineEnd: isSidebarEndOpen ? 0 : `calc(var(${cssVarSidebarEndWidth}, ${sidebarWidth}) * -1)`,
|
|
4871
|
+
},
|
|
4781
4872
|
canvas: {
|
|
4782
4873
|
display: 'grid',
|
|
4783
4874
|
gridTemplateRows: 'auto minmax(0, 1fr) auto',
|
|
@@ -4789,10 +4880,24 @@ const getComponentCss$12 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndO
|
|
|
4789
4880
|
gridTemplateAreas: '"header header header" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
|
|
4790
4881
|
},
|
|
4791
4882
|
},
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
4795
|
-
|
|
4883
|
+
crest: {
|
|
4884
|
+
[getMediaQueryMin('s')]: {
|
|
4885
|
+
display: 'none',
|
|
4886
|
+
},
|
|
4887
|
+
},
|
|
4888
|
+
wordmark: {
|
|
4889
|
+
height: '10px',
|
|
4890
|
+
[getMediaQueryMax('s')]: {
|
|
4891
|
+
display: 'none',
|
|
4892
|
+
},
|
|
4893
|
+
},
|
|
4894
|
+
header: {
|
|
4895
|
+
display: 'flex',
|
|
4896
|
+
gap: spacingStaticSmall,
|
|
4897
|
+
alignItems: 'center',
|
|
4898
|
+
'&:last-of-type': {
|
|
4899
|
+
justifyContent: 'end',
|
|
4900
|
+
},
|
|
4796
4901
|
},
|
|
4797
4902
|
});
|
|
4798
4903
|
};
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.mjs
CHANGED
|
@@ -1,26 +1,24 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef, useRef } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
|
|
5
5
|
import { syncRef } from '../../utils.mjs';
|
|
6
6
|
import { DSRCanvas } from '../dsr-components/canvas.mjs';
|
|
7
7
|
|
|
8
|
-
const PCanvas = forwardRef(({
|
|
8
|
+
const PCanvas = forwardRef(({ sidebarEndIcon = 'configurate', sidebarEndOpen = false, sidebarStartIcon = 'menu-lines', sidebarStartOpen = false, theme, className, children, ...rest }, ref) => {
|
|
9
9
|
const elementRef = useRef();
|
|
10
|
-
useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
|
|
11
|
-
useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
|
|
12
10
|
const WebComponentTag = usePrefix('p-canvas');
|
|
13
|
-
const propsToSync = [sidebarEndOpen,
|
|
11
|
+
const propsToSync = [sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme || useTheme()];
|
|
14
12
|
useBrowserLayoutEffect(() => {
|
|
15
13
|
const { current } = elementRef;
|
|
16
|
-
['sidebarEndOpen', '
|
|
14
|
+
['sidebarEndIcon', 'sidebarEndOpen', 'sidebarStartIcon', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
17
15
|
}, propsToSync);
|
|
18
16
|
const props = {
|
|
19
17
|
...rest,
|
|
20
18
|
// @ts-ignore
|
|
21
19
|
...(!process.browser
|
|
22
20
|
? {
|
|
23
|
-
children: (jsx(DSRCanvas, { sidebarEndOpen,
|
|
21
|
+
children: (jsx(DSRCanvas, { sidebarEndIcon, sidebarEndOpen, sidebarStartIcon, sidebarStartOpen, theme: theme || useTheme(), children })),
|
|
24
22
|
}
|
|
25
23
|
: {
|
|
26
24
|
children,
|
package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.mjs
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import '../components/accordion.wrapper.mjs';
|
|
3
3
|
import '../components/banner.wrapper.mjs';
|
|
4
|
-
import '../components/button.wrapper.mjs';
|
|
4
|
+
import { PButton } from '../components/button.wrapper.mjs';
|
|
5
5
|
import '../components/button-group.wrapper.mjs';
|
|
6
|
-
import
|
|
6
|
+
import '../components/button-pure.wrapper.mjs';
|
|
7
7
|
import '../components/button-tile.wrapper.mjs';
|
|
8
8
|
import '../components/canvas.wrapper.mjs';
|
|
9
9
|
import '../components/carousel.wrapper.mjs';
|
|
10
10
|
import '../components/checkbox-wrapper.wrapper.mjs';
|
|
11
11
|
import '../components/content-wrapper.wrapper.mjs';
|
|
12
|
-
import '../components/crest.wrapper.mjs';
|
|
12
|
+
import { PCrest } from '../components/crest.wrapper.mjs';
|
|
13
13
|
import '../components/display.wrapper.mjs';
|
|
14
14
|
import '../components/divider.wrapper.mjs';
|
|
15
15
|
import '../components/fieldset.wrapper.mjs';
|
|
@@ -70,7 +70,7 @@ import '../components/text-list-item.wrapper.mjs';
|
|
|
70
70
|
import '../components/textarea.wrapper.mjs';
|
|
71
71
|
import '../components/textarea-wrapper.wrapper.mjs';
|
|
72
72
|
import '../components/toast.wrapper.mjs';
|
|
73
|
-
import '../components/wordmark.wrapper.mjs';
|
|
73
|
+
import { PWordmark } from '../components/wordmark.wrapper.mjs';
|
|
74
74
|
import { splitChildren } from '../../splitChildren.mjs';
|
|
75
75
|
import { Component } from 'react';
|
|
76
76
|
import { minifyCss } from '../../minifyCss.mjs';
|
|
@@ -78,40 +78,35 @@ import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
|
|
|
78
78
|
import { getCanvasCss as getComponentCss$12 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
|
|
79
79
|
|
|
80
80
|
/**
|
|
81
|
-
* @slot {"name": "header", "description": "Renders a **sticky** header section above the content area." }
|
|
81
|
+
* @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode)." }
|
|
82
|
+
* @slot {"name": "header-end", "description": "Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode)." }
|
|
82
83
|
* @slot {"name": "", "description": "Default slot for the main content" }
|
|
84
|
+
* @slot {"name": "title", "description": "Application name" }
|
|
83
85
|
* @slot {"name": "footer", "description": "Shows a footer section, flowing under the content area when scrollable." }
|
|
84
86
|
* @slot {"name": "sidebar-start", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
|
|
85
87
|
* @slot {"name": "sidebar-end", "description": "Shows a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
|
|
86
88
|
*
|
|
87
|
-
* @controlled {"props": ["sidebarStartOpen"], "event": "dismissSidebarStart"}
|
|
88
|
-
* @controlled {"props": ["sidebarEndOpen"], "event": "dismissSidebarEnd"}
|
|
89
|
-
*
|
|
90
89
|
* @experimental
|
|
91
90
|
*/
|
|
92
91
|
class DSRCanvas extends Component {
|
|
93
92
|
host;
|
|
94
93
|
isDesktopView = false;
|
|
94
|
+
hasSidebarStart;
|
|
95
|
+
hasSidebarEnd;
|
|
95
96
|
render() {
|
|
96
|
-
splitChildren(this.props.children);
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
/* @ts-ignore */
|
|
102
|
-
part: "sidebar-start",
|
|
97
|
+
const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
|
|
98
|
+
const hasSidebarStart = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-start').length > 0;
|
|
99
|
+
const hasSidebarEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end').length > 0;
|
|
100
|
+
const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$12(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen)));
|
|
101
|
+
return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "canvas", children: [jsxs("header", { children: [jsxs("div", { className: "header", children: [hasSidebarStart && (jsxs(PButton, { theme: this.props.theme, icon: this.props.sidebarStartIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsx("h2", { children: jsx("slot", { name: "title" }) }), jsx("slot", { name: "header-start" })] }), jsx(PCrest, { className: "crest" }), jsx(PWordmark, { className: "wordmark", size: "inherit", theme: this.props.theme }), jsxs("div", { className: "header", children: [jsx("slot", { name: "header-end" }), hasSidebarEnd && (jsxs(PButton, { theme: this.props.theme, icon: this.props.sidebarEndIcon, variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] }))] })] }), jsx("main", { children: jsx("slot", {}) }), jsx("footer", { children: jsx("slot", { name: "footer" }) }), this.props.isDesktopView && (jsxs(Fragment, { children: [hasSidebarStart && (jsx("aside", { className: "sidebar-start",
|
|
103
102
|
// "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
|
|
104
103
|
// eslint-disable-next-line
|
|
105
104
|
/* @ts-ignore */
|
|
106
|
-
inert: this.props.sidebarStartOpen ? null : true,
|
|
107
|
-
// "part" is not valid in TS
|
|
108
|
-
// eslint-disable-next-line
|
|
109
|
-
/* @ts-ignore */
|
|
110
|
-
part: "sidebar-end",
|
|
105
|
+
inert: this.props.sidebarStartOpen ? null : true, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, children: jsx("slot", { name: "sidebar-start" }) })), hasSidebarEnd && (jsx("aside", { className: "sidebar-end",
|
|
111
106
|
// "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
|
|
112
107
|
// eslint-disable-next-line
|
|
113
108
|
/* @ts-ignore */
|
|
114
|
-
inert: this.props.sidebarEndOpen ? null : true,
|
|
109
|
+
inert: this.props.sidebarEndOpen ? null : true, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, children: jsx("slot", { name: "sidebar-end" }) }))] }))] }), !this.props.isDesktopView && (jsxs(Fragment, { children: [hasSidebarStart && (jsx(PFlyout, { theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: jsx("slot", { name: "sidebar-start" }) })), hasSidebarEnd && (jsx(PFlyout, { theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: jsx("slot", { name: "sidebar-end" }) }))] }))] })] }), this.props.children] }));
|
|
115
110
|
}
|
|
116
111
|
}
|
|
117
112
|
|
|
@@ -1,56 +1,48 @@
|
|
|
1
1
|
import type { BaseProps } from '../../BaseProps';
|
|
2
|
-
import type {
|
|
2
|
+
import type { CanvasSidebarEndIcon, CanvasSidebarStartIcon, Theme } from '../types';
|
|
3
3
|
export type PCanvasProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* The icon to toggle the Sidebar on the end side
|
|
6
6
|
*/
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Emitted when the component requests to close the sidebar on the start side.
|
|
10
|
-
*/
|
|
11
|
-
onDismissSidebarStart?: (event: CustomEvent<void>) => void;
|
|
7
|
+
sidebarEndIcon?: CanvasSidebarEndIcon;
|
|
12
8
|
/**
|
|
13
9
|
* Open Sidebar on the end side
|
|
14
10
|
*/
|
|
15
11
|
sidebarEndOpen?: boolean;
|
|
16
12
|
/**
|
|
17
|
-
*
|
|
13
|
+
* The icon to toggle the Sidebar on the start side
|
|
18
14
|
*/
|
|
19
|
-
|
|
15
|
+
sidebarStartIcon?: CanvasSidebarStartIcon;
|
|
20
16
|
/**
|
|
21
17
|
* Open Sidebar on the start side
|
|
22
18
|
*/
|
|
23
19
|
sidebarStartOpen?: boolean;
|
|
24
20
|
/**
|
|
25
|
-
*
|
|
21
|
+
* Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
|
|
26
22
|
*/
|
|
27
|
-
|
|
23
|
+
theme?: Theme;
|
|
28
24
|
};
|
|
29
25
|
export declare const PCanvas: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
30
26
|
/**
|
|
31
|
-
*
|
|
32
|
-
*/
|
|
33
|
-
onDismissSidebarEnd?: (event: CustomEvent<void>) => void;
|
|
34
|
-
/**
|
|
35
|
-
* Emitted when the component requests to close the sidebar on the start side.
|
|
27
|
+
* The icon to toggle the Sidebar on the end side
|
|
36
28
|
*/
|
|
37
|
-
|
|
29
|
+
sidebarEndIcon?: CanvasSidebarEndIcon;
|
|
38
30
|
/**
|
|
39
31
|
* Open Sidebar on the end side
|
|
40
32
|
*/
|
|
41
33
|
sidebarEndOpen?: boolean;
|
|
42
34
|
/**
|
|
43
|
-
*
|
|
35
|
+
* The icon to toggle the Sidebar on the start side
|
|
44
36
|
*/
|
|
45
|
-
|
|
37
|
+
sidebarStartIcon?: CanvasSidebarStartIcon;
|
|
46
38
|
/**
|
|
47
39
|
* Open Sidebar on the start side
|
|
48
40
|
*/
|
|
49
41
|
sidebarStartOpen?: boolean;
|
|
50
42
|
/**
|
|
51
|
-
*
|
|
43
|
+
* Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
|
|
52
44
|
*/
|
|
53
|
-
|
|
45
|
+
theme?: Theme;
|
|
54
46
|
} & {
|
|
55
47
|
children?: import("react").ReactNode | undefined;
|
|
56
48
|
} & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import { Component } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* @slot {"name": "header", "description": "Renders a **sticky** header section above the content area." }
|
|
3
|
+
* @slot {"name": "header-start", "description": "Renders a **sticky** header section above the content area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode)." }
|
|
4
|
+
* @slot {"name": "header-end", "description": "Renders a **sticky** header section above the content area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode)." }
|
|
4
5
|
* @slot {"name": "", "description": "Default slot for the main content" }
|
|
6
|
+
* @slot {"name": "title", "description": "Application name" }
|
|
5
7
|
* @slot {"name": "footer", "description": "Shows a footer section, flowing under the content area when scrollable." }
|
|
6
8
|
* @slot {"name": "sidebar-start", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
|
|
7
9
|
* @slot {"name": "sidebar-end", "description": "Shows a sidebar area on the **end** side (**right** in **LTR** mode / **left** in **RTL** mode). On mobile view it transforms into a flyout." }
|
|
8
10
|
*
|
|
9
|
-
* @controlled {"props": ["sidebarStartOpen"], "event": "dismissSidebarStart"}
|
|
10
|
-
* @controlled {"props": ["sidebarEndOpen"], "event": "dismissSidebarEnd"}
|
|
11
|
-
*
|
|
12
11
|
* @experimental
|
|
13
12
|
*/
|
|
14
13
|
export declare class DSRCanvas extends Component<any> {
|
|
15
14
|
host: HTMLElement;
|
|
16
15
|
private isDesktopView;
|
|
16
|
+
private hasSidebarStart;
|
|
17
|
+
private hasSidebarEnd;
|
|
17
18
|
render(): JSX.Element;
|
|
18
19
|
}
|
package/ssr/esm/lib/types.d.ts
CHANGED
|
@@ -684,13 +684,8 @@ export type ButtonTileSize = TileSize;
|
|
|
684
684
|
export type ButtonTileBackground = TileBackground;
|
|
685
685
|
export type ButtonTileWeight = TileWeight;
|
|
686
686
|
export type ButtonTileAlign = TileAlign;
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
"large"
|
|
690
|
-
];
|
|
691
|
-
export type CanvasSidebarWidth = (typeof CANVAS_SIDEBAR_WIDTHS)[number];
|
|
692
|
-
export type CanvasSidebarStartWidth = CanvasSidebarWidth;
|
|
693
|
-
export type CanvasSidebarEndWidth = CanvasSidebarWidth;
|
|
687
|
+
export type CanvasSidebarStartIcon = IconName;
|
|
688
|
+
export type CanvasSidebarEndIcon = IconName;
|
|
694
689
|
declare const CAROUSEL_WIDTHS: readonly [
|
|
695
690
|
"basic",
|
|
696
691
|
"extended"
|