@workday/canvas-kit-labs-react 15.0.0-alpha.0056-next.0 → 15.0.0-alpha.0060-next.0
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/dist/commonjs/ai-ingress-button/lib/AIIngressButton.js +5 -5
- package/dist/commonjs/index.d.ts +1 -0
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +1 -0
- package/dist/commonjs/search-form/lib/SearchForm.js +14 -14
- package/dist/commonjs/side-panel/index.d.ts +4 -0
- package/dist/commonjs/side-panel/index.d.ts.map +1 -0
- package/dist/commonjs/side-panel/index.js +19 -0
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts +205 -0
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -0
- package/dist/commonjs/side-panel/lib/SidePanel.js +64 -0
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts +95 -0
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts.map +1 -0
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +65 -0
- package/dist/commonjs/side-panel/lib/useSidePanelModel.d.ts +514 -0
- package/dist/commonjs/side-panel/lib/useSidePanelModel.d.ts.map +1 -0
- package/dist/commonjs/side-panel/lib/useSidePanelModel.js +134 -0
- package/dist/commonjs/version/lib/version.js +1 -1
- package/dist/es6/ai-ingress-button/lib/AIIngressButton.js +5 -5
- package/dist/es6/index.d.ts +1 -0
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +1 -0
- package/dist/es6/search-form/lib/SearchForm.js +14 -14
- package/dist/es6/side-panel/index.d.ts +4 -0
- package/dist/es6/side-panel/index.d.ts.map +1 -0
- package/dist/es6/side-panel/index.js +3 -0
- package/dist/es6/side-panel/lib/SidePanel.d.ts +205 -0
- package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -0
- package/dist/es6/side-panel/lib/SidePanel.js +61 -0
- package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts +95 -0
- package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts.map +1 -0
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +62 -0
- package/dist/es6/side-panel/lib/useSidePanelModel.d.ts +514 -0
- package/dist/es6/side-panel/lib/useSidePanelModel.d.ts.map +1 -0
- package/dist/es6/side-panel/lib/useSidePanelModel.js +108 -0
- package/dist/es6/version/lib/version.js +1 -1
- package/index.ts +1 -0
- package/package.json +4 -4
- package/side-panel/index.ts +3 -0
- package/side-panel/lib/SidePanel.tsx +131 -0
- package/side-panel/lib/SidePanelToggleButton.tsx +177 -0
- package/side-panel/lib/useSidePanelModel.ts +128 -0
- package/side-panel/package.json +6 -0
|
@@ -23,20 +23,20 @@ const glowHappyHour = base.orange400; //'#FD7E00';
|
|
|
23
23
|
const glowThumbtack = base.coral500; //'#FC5B05';
|
|
24
24
|
export const AIIngressButtonStencil = createStencil({
|
|
25
25
|
extends: buttonStencil,
|
|
26
|
-
base: { name: "
|
|
26
|
+
base: { name: "x5h8s", styles: "box-sizing:border-box;--background-button-f6d2bd:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
27
27
|
modifiers: {
|
|
28
28
|
variant: {
|
|
29
|
-
inverse: { name: "
|
|
29
|
+
inverse: { name: "3k4bgg", styles: "--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
30
30
|
},
|
|
31
31
|
toggled: {
|
|
32
|
-
true: { name: "
|
|
33
|
-
false: { name: "
|
|
32
|
+
true: { name: "2lrnux", styles: "--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
33
|
+
false: { name: "3zpsys", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
compound: [
|
|
37
37
|
{
|
|
38
38
|
modifiers: { toggled: true, variant: 'inverse' },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "48m977", styles: "--background-button-f6d2bd:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "a-i-ingress-button-ea1953");
|
package/dist/es6/index.d.ts
CHANGED
package/dist/es6/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}
|
package/dist/es6/index.js
CHANGED
|
@@ -51,45 +51,45 @@ export const searchFormStencil = createStencil({
|
|
|
51
51
|
searchInput: 'search-form-input',
|
|
52
52
|
closeButtonPart: 'search-form-close-button',
|
|
53
53
|
},
|
|
54
|
-
base: { name: "
|
|
54
|
+
base: { name: "1fjv0v", styles: "box-sizing:border-box;position:relative;flex-grow:1;display:flex;align-items:center;margin-inline-start:var(--cnvs-sys-space-x6);min-width:var(--minWidth-search-form-bbb053, 7.5rem);max-width:var(--maxWidth-search-form-bbb053, 30rem);[data-part=\"search-form-container\"]{position:relative;display:flex;align-items:center;width:100%;text-align:left;min-height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));}[data-part=\"search-form-combobox\"]{width:100%;}[data-part=\"search-form-close-button\"]{position:absolute;top:0;bottom:0;right:0;margin:auto var(--cnvs-sys-space-x2);z-index:3;display:none;}[data-part=\"search-form-field\"]{width:100%;height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));max-width:var(--maxWidth-search-form-bbb053, 30rem);margin-bottom:0;display:inline-block;> div{display:block;}}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{position:absolute;margin:auto var(--cnvs-sys-space-x2);top:0;bottom:0;left:0;padding:0;z-index:3;:dir(rtl){right:0;left:auto;}}[data-part=\"search-form-input\"]{max-width:var(--maxWidth-search-form-bbb053);min-width:var(--minWidth-search-form-bbb053);padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));padding-inline-end:var(--cnvs-sys-space-x10);background-color:var(--background-search-form-bbb053, var(--cnvs-sys-color-bg-alt-soft));height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));font-size:var(--cnvs-sys-font-size-subtext-large);box-shadow:var(--boxShadow-search-form-bbb053);color:var(--color-search-form-bbb053, var(--cnvs-sys-color-text-default));border:none;-webkit-appearance:none;transition:background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms;z-index:2;width:100%;&::-webkit-search-cancel-button{display:none;}&::placeholder{color:var(--placeholderColor-search-form-bbb053, var(--cnvs-sys-color-text-hint));}&:placeholder-shown{text-overflow:ellipsis;}&:hover{background-color:var(--backgroundHover-search-form-bbb053, var(--background-search-form-bbb053, var(--cnvs-sys-color-bg-alt-default)));}&:is(:focus-visible, .focus):where(:not([disabled])){background:var(--backgroundFocus-search-form-bbb053, var(--cnvs-sys-color-bg-alt-soft));color:var(--colorFocus-search-form-bbb053);border-color:var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;box-shadow:var(--boxShadowFocus-search-form-bbb053, 0 0 0 0px var(--cnvs-sys-color-bg-default), 0 0 0 2px var(--cnvs-brand-common-focus-outline));::placeholder{color:var(--placeholderColorFocus-search-form-bbb053);}}}" },
|
|
55
55
|
modifiers: {
|
|
56
56
|
isHiddenSubmitSearchIcon: {
|
|
57
|
-
true: { name: "
|
|
57
|
+
true: { name: "3v29l6", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
|
|
58
58
|
},
|
|
59
59
|
isHiddenOpenSeachIcon: {
|
|
60
|
-
true: { name: "
|
|
60
|
+
true: { name: "2senwa", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
|
|
61
61
|
},
|
|
62
62
|
isCollapsed: {
|
|
63
|
-
true: { name: "
|
|
64
|
-
false: { name: "
|
|
63
|
+
true: { name: "2jx6j8", styles: "top:0;right:0;left:0;bottom:0;margin:0;position:relative;background-color:var(--cnvs-sys-color-bg-transparent-default);transition:background-color 120ms;max-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));min-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x3));overflow:hidden;z-index:1;[data-part=\"search-form-field\"]{display:none;max-width:100%;}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{margin:auto var(--cnvs-sys-space-x2);}[data-part=\"search-form-input\"]{font-size:20px;padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));padding-inline-end:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));max-width:none;min-width:0;background-color:var(--cnvs-sys-color-bg-transparent-default);height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));}" },
|
|
64
|
+
false: { name: "44ujzn", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
65
65
|
},
|
|
66
66
|
rightAlign: {
|
|
67
|
-
true: { name: "
|
|
67
|
+
true: { name: "uojir", styles: "text-align:right;" }
|
|
68
68
|
},
|
|
69
69
|
showForm: {
|
|
70
|
-
true: { name: "
|
|
71
|
-
false: { name: "
|
|
70
|
+
true: { name: "243qs8", styles: "" },
|
|
71
|
+
false: { name: "3n3vg2", styles: "" }
|
|
72
72
|
},
|
|
73
73
|
grow: {
|
|
74
|
-
true: { name: "
|
|
74
|
+
true: { name: "2vin71", styles: "max-width:100%;[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]{max-width:100%;}" }
|
|
75
75
|
},
|
|
76
76
|
searchTheme: {
|
|
77
77
|
// Light theme
|
|
78
|
-
light: { name: "
|
|
78
|
+
light: { name: "19tt2p", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-alt-soft);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover{background:var(--cnvs-sys-color-bg-alt-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-alt-soft);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}}" },
|
|
79
79
|
// Dark theme
|
|
80
|
-
dark: { name: "
|
|
80
|
+
dark: { name: "23pvsm", styles: "[data-part=\"search-form-input\"]{background-color:rgba(0, 0, 0, 0.2);color:var(--cnvs-sys-color-text-inverse);box-shadow:none;::placeholder{color:var(--cnvs-sys-color-text-inverse);}:hover{background:rgba(0, 0, 0, 0.2);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}box-shadow:none;}}" },
|
|
81
81
|
//Transparent theme
|
|
82
|
-
transparent: { name: "
|
|
82
|
+
transparent: { name: "z2xdw", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-transparent-default);background-focus:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-sys-color-text-default);color-focus:var(--cnvs-sys-color-text-default);placeholder-color:var(--cnvs-sys-color-text-hint);placeholder-color-focus:var(--cnvs-sys-color-text-hint);box-shadow:none;box-shadow-focus:none;}" }
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
compound: [
|
|
86
86
|
{
|
|
87
87
|
modifiers: { showForm: 'true', isCollapsed: 'true' },
|
|
88
|
-
styles: { name: "
|
|
88
|
+
styles: { name: "c5ps8", styles: "position:absolute;background-color:var(--cnvs-sys-color-bg-default);max-width:none;overflow:visible;& [data-part=\"search-form-close-button\"]{display:inline-block;}& [data-part=\"search-form-field\"]{display:inline-block;}& [data-part=\"search-form-input\"]{box-shadow:none;background:var(--cnvs-sys-color-bg-transparent-default);:hover{background:var(--cnvs-sys-color-bg-transparent-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-transparent-default);box-shadow:none;}}" }
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
91
|
modifiers: { isCollapsed: 'true', showForm: 'true' },
|
|
92
|
-
styles: { name: "
|
|
92
|
+
styles: { name: "3gvimb", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
93
93
|
}
|
|
94
94
|
]
|
|
95
95
|
}, "search-form-bbb053");
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Adds the necessary props to the SidePanel container element.
|
|
4
|
+
* This includes the `id` and `aria-labelledby` attributes for accessibility.
|
|
5
|
+
*/
|
|
6
|
+
export declare const useSidePanelContainer: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
7
|
+
state: {
|
|
8
|
+
panelId: string;
|
|
9
|
+
labelId: string;
|
|
10
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
11
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
12
|
+
origin: "end" | "start";
|
|
13
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
14
|
+
};
|
|
15
|
+
events: {
|
|
16
|
+
expand(): void;
|
|
17
|
+
collapse(): void;
|
|
18
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
19
|
+
handleAnimationStart(): undefined;
|
|
20
|
+
};
|
|
21
|
+
}, {
|
|
22
|
+
readonly id: string;
|
|
23
|
+
readonly 'aria-labelledby': string;
|
|
24
|
+
readonly onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => React.TransitionEvent<HTMLDivElement>;
|
|
25
|
+
}>;
|
|
26
|
+
export type SidePanelVariant = 'standard' | 'alternate';
|
|
27
|
+
export interface SidePanelProps {
|
|
28
|
+
/**
|
|
29
|
+
* The width of the component (in `px` if it's a `number`) when it is collapsed.
|
|
30
|
+
*
|
|
31
|
+
* @default 64
|
|
32
|
+
*/
|
|
33
|
+
collapsedWidth?: number | string;
|
|
34
|
+
/**
|
|
35
|
+
* The width of the component (in `px` if it's a `number`) when it is expanded.
|
|
36
|
+
*
|
|
37
|
+
* @default 320
|
|
38
|
+
*/
|
|
39
|
+
expandedWidth?: number | string;
|
|
40
|
+
/**
|
|
41
|
+
* The style variant of the side panel. 'standard' uses a lighter gray background (`system.color.bg.alt.softer`), no depth. 'alternate' uses a white background with depth (`system.color.bg.default` and level 5 depth).
|
|
42
|
+
*
|
|
43
|
+
* @default 'standard'
|
|
44
|
+
*/
|
|
45
|
+
variant?: SidePanelVariant;
|
|
46
|
+
children?: React.ReactNode;
|
|
47
|
+
}
|
|
48
|
+
export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
49
|
+
variant: {
|
|
50
|
+
alternate: {
|
|
51
|
+
backgroundColor: "--cnvs-sys-color-bg-default";
|
|
52
|
+
boxShadow: "--cnvs-sys-depth-5";
|
|
53
|
+
};
|
|
54
|
+
standard: {
|
|
55
|
+
backgroundColor: "--cnvs-sys-color-bg-alt-softer";
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
expanded: {
|
|
59
|
+
expanded: ({ expandedWidth }: {
|
|
60
|
+
expandedWidth: `--${string}`;
|
|
61
|
+
collapsedWidth: `--${string}`;
|
|
62
|
+
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
63
|
+
width: `--${string}`;
|
|
64
|
+
maxWidth: `--${string}`;
|
|
65
|
+
};
|
|
66
|
+
collapsed: ({ collapsedWidth }: {
|
|
67
|
+
expandedWidth: `--${string}`;
|
|
68
|
+
collapsedWidth: `--${string}`;
|
|
69
|
+
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
70
|
+
width: `--${string}`;
|
|
71
|
+
maxWidth: `--${string}`;
|
|
72
|
+
};
|
|
73
|
+
expanding: ({ expandedWidth }: {
|
|
74
|
+
expandedWidth: `--${string}`;
|
|
75
|
+
collapsedWidth: `--${string}`;
|
|
76
|
+
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
77
|
+
width: `--${string}`;
|
|
78
|
+
maxWidth: `--${string}`;
|
|
79
|
+
};
|
|
80
|
+
collapsing: ({ collapsedWidth }: {
|
|
81
|
+
expandedWidth: `--${string}`;
|
|
82
|
+
collapsedWidth: `--${string}`;
|
|
83
|
+
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
|
|
84
|
+
width: `--${string}`;
|
|
85
|
+
maxWidth: `--${string}`;
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
}, {}, {
|
|
89
|
+
expandedWidth: string;
|
|
90
|
+
collapsedWidth: string;
|
|
91
|
+
}, never, never>;
|
|
92
|
+
export declare const SidePanel: import("@workday/canvas-kit-react/common").ElementComponentM<"section", SidePanelProps & Partial<{
|
|
93
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
94
|
+
origin: "end" | "start";
|
|
95
|
+
panelId: string;
|
|
96
|
+
labelId: string;
|
|
97
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
98
|
+
}> & {
|
|
99
|
+
onExpand?: ((data: undefined, prevState: {
|
|
100
|
+
panelId: string;
|
|
101
|
+
labelId: string;
|
|
102
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
103
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
104
|
+
origin: "end" | "start";
|
|
105
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
106
|
+
}) => void) | undefined;
|
|
107
|
+
onCollapse?: ((data: undefined, prevState: {
|
|
108
|
+
panelId: string;
|
|
109
|
+
labelId: string;
|
|
110
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
111
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
112
|
+
origin: "end" | "start";
|
|
113
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
114
|
+
}) => void) | undefined;
|
|
115
|
+
onHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, prevState: {
|
|
116
|
+
panelId: string;
|
|
117
|
+
labelId: string;
|
|
118
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
119
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
120
|
+
origin: "end" | "start";
|
|
121
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
122
|
+
}) => void) | undefined;
|
|
123
|
+
onHandleAnimationStart?: ((data: undefined, prevState: {
|
|
124
|
+
panelId: string;
|
|
125
|
+
labelId: string;
|
|
126
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
127
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
128
|
+
origin: "end" | "start";
|
|
129
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
130
|
+
}) => void) | undefined;
|
|
131
|
+
} & {
|
|
132
|
+
shouldExpand?: ((data: undefined, state: {
|
|
133
|
+
panelId: string;
|
|
134
|
+
labelId: string;
|
|
135
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
136
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
137
|
+
origin: "end" | "start";
|
|
138
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
139
|
+
}) => boolean) | undefined;
|
|
140
|
+
shouldCollapse?: ((data: undefined, state: {
|
|
141
|
+
panelId: string;
|
|
142
|
+
labelId: string;
|
|
143
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
144
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
145
|
+
origin: "end" | "start";
|
|
146
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
147
|
+
}) => boolean) | undefined;
|
|
148
|
+
shouldHandleAnimationEnd?: ((data: React.TransitionEvent<HTMLDivElement>, state: {
|
|
149
|
+
panelId: string;
|
|
150
|
+
labelId: string;
|
|
151
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
152
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
153
|
+
origin: "end" | "start";
|
|
154
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
155
|
+
}) => boolean) | undefined;
|
|
156
|
+
shouldHandleAnimationStart?: ((data: undefined, state: {
|
|
157
|
+
panelId: string;
|
|
158
|
+
labelId: string;
|
|
159
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
160
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
161
|
+
origin: "end" | "start";
|
|
162
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
163
|
+
}) => boolean) | undefined;
|
|
164
|
+
}, {
|
|
165
|
+
state: {
|
|
166
|
+
panelId: string;
|
|
167
|
+
labelId: string;
|
|
168
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
169
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
170
|
+
origin: "end" | "start";
|
|
171
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
172
|
+
};
|
|
173
|
+
events: {
|
|
174
|
+
expand(): void;
|
|
175
|
+
collapse(): void;
|
|
176
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
177
|
+
handleAnimationStart(): undefined;
|
|
178
|
+
};
|
|
179
|
+
}> & {
|
|
180
|
+
/**
|
|
181
|
+
* `SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.
|
|
182
|
+
* It must be used within the `SidePanel` component as a child. For accessibility purposes,
|
|
183
|
+
* it should be the first focusable element in the panel.
|
|
184
|
+
*
|
|
185
|
+
* The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
|
|
186
|
+
* attributes from the model.
|
|
187
|
+
*/
|
|
188
|
+
ToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./SidePanelToggleButton").SidePanelToggleButtonProps, {
|
|
189
|
+
state: {
|
|
190
|
+
panelId: string;
|
|
191
|
+
labelId: string;
|
|
192
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
193
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
194
|
+
origin: "end" | "start";
|
|
195
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
196
|
+
};
|
|
197
|
+
events: {
|
|
198
|
+
expand(): void;
|
|
199
|
+
collapse(): void;
|
|
200
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
201
|
+
handleAnimationStart(): undefined;
|
|
202
|
+
};
|
|
203
|
+
}>;
|
|
204
|
+
};
|
|
205
|
+
//# sourceMappingURL=SidePanel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AAExD,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyCvB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKlB;;;;;;;OAOG;;;;;;;;;;;;;;;;;CAgCN,CAAC"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContainer, createElemPropsHook } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
4
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
5
|
+
import { useSidePanelModel } from './useSidePanelModel';
|
|
6
|
+
import { SidePanelToggleButton } from './SidePanelToggleButton';
|
|
7
|
+
/**
|
|
8
|
+
* Adds the necessary props to the SidePanel container element.
|
|
9
|
+
* This includes the `id` and `aria-labelledby` attributes for accessibility.
|
|
10
|
+
*/
|
|
11
|
+
export const useSidePanelContainer = createElemPropsHook(useSidePanelModel)(({ state, events }) => {
|
|
12
|
+
return {
|
|
13
|
+
id: state.panelId,
|
|
14
|
+
'aria-labelledby': state.labelId,
|
|
15
|
+
onTransitionEnd: events.handleAnimationEnd,
|
|
16
|
+
};
|
|
17
|
+
});
|
|
18
|
+
export const panelStencil = createStencil({
|
|
19
|
+
vars: {
|
|
20
|
+
expandedWidth: '',
|
|
21
|
+
collapsedWidth: '',
|
|
22
|
+
},
|
|
23
|
+
base: { name: "23943w", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
|
|
24
|
+
modifiers: {
|
|
25
|
+
variant: {
|
|
26
|
+
alternate: { name: "2bjjfl", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
|
|
27
|
+
standard: { name: "1lsdyl", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
|
|
28
|
+
},
|
|
29
|
+
expanded: {
|
|
30
|
+
expanded: { name: "i9o5v", styles: "width:var(--expandedWidth-panel-46751f);max-width:var(--expandedWidth-panel-46751f);" },
|
|
31
|
+
collapsed: { name: "3tfzp8", styles: "width:var(--collapsedWidth-panel-46751f);max-width:var(--collapsedWidth-panel-46751f);" },
|
|
32
|
+
expanding: { name: "42gyid", styles: "width:var(--expandedWidth-panel-46751f);max-width:var(--expandedWidth-panel-46751f);" },
|
|
33
|
+
collapsing: { name: "mk8xq", styles: "width:var(--collapsedWidth-panel-46751f);max-width:var(--collapsedWidth-panel-46751f);" }
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}, "panel-46751f");
|
|
37
|
+
export const SidePanel = createContainer('section')({
|
|
38
|
+
displayName: 'SidePanel',
|
|
39
|
+
modelHook: useSidePanelModel,
|
|
40
|
+
elemPropsHook: useSidePanelContainer,
|
|
41
|
+
subComponents: {
|
|
42
|
+
/**
|
|
43
|
+
* `SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.
|
|
44
|
+
* It must be used within the `SidePanel` component as a child. For accessibility purposes,
|
|
45
|
+
* it should be the first focusable element in the panel.
|
|
46
|
+
*
|
|
47
|
+
* The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
|
|
48
|
+
* attributes from the model.
|
|
49
|
+
*/
|
|
50
|
+
ToggleButton: SidePanelToggleButton,
|
|
51
|
+
},
|
|
52
|
+
})(({ collapsedWidth = 64, expandedWidth = 320, variant = 'standard', children, ...elemProps }, Element, model) => {
|
|
53
|
+
return (_jsx(Element, { ...handleCsProp(elemProps, [
|
|
54
|
+
panelStencil({
|
|
55
|
+
expanded: model.state.transitionState,
|
|
56
|
+
variant,
|
|
57
|
+
expandedWidth: typeof expandedWidth === 'number' ? px2rem(expandedWidth) : expandedWidth,
|
|
58
|
+
collapsedWidth: typeof collapsedWidth === 'number' ? px2rem(collapsedWidth) : collapsedWidth,
|
|
59
|
+
}),
|
|
60
|
+
]), children: children }));
|
|
61
|
+
});
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { TertiaryButton } from '@workday/canvas-kit-react/button';
|
|
4
|
+
import { TooltipProps } from '@workday/canvas-kit-react/tooltip';
|
|
5
|
+
export interface SidePanelToggleButtonProps extends ExtractProps<typeof TertiaryButton> {
|
|
6
|
+
/**
|
|
7
|
+
* The tooltip text to expand the side panel
|
|
8
|
+
*/
|
|
9
|
+
tooltipTextExpand?: string;
|
|
10
|
+
/**
|
|
11
|
+
* The tooltip text to collapse the side panel
|
|
12
|
+
*/
|
|
13
|
+
tooltipTextCollapse?: string;
|
|
14
|
+
tooltipProps?: Omit<TooltipProps, 'children'>;
|
|
15
|
+
}
|
|
16
|
+
export declare const sidePanelToggleButtonStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
17
|
+
state: {
|
|
18
|
+
collapsing: {
|
|
19
|
+
margin: number;
|
|
20
|
+
transform: string;
|
|
21
|
+
':dir(rtl)': {
|
|
22
|
+
transform: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
collapsed: {
|
|
26
|
+
margin: string;
|
|
27
|
+
insetInlineStart: number;
|
|
28
|
+
insetInlineEnd: number;
|
|
29
|
+
transform: string;
|
|
30
|
+
':dir(rtl)': {
|
|
31
|
+
transform: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
expanded: {
|
|
35
|
+
margin: number;
|
|
36
|
+
transform: string;
|
|
37
|
+
':dir(rtl)': {
|
|
38
|
+
transform: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
expanding: {
|
|
42
|
+
margin: number;
|
|
43
|
+
transform: string;
|
|
44
|
+
':dir(rtl)': {
|
|
45
|
+
transform: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
origin: {
|
|
50
|
+
start: {};
|
|
51
|
+
end: {
|
|
52
|
+
transform: string;
|
|
53
|
+
':dir(rtl)': {
|
|
54
|
+
transform: string;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
}, {}, {}, never, never>;
|
|
59
|
+
export declare const useSidePanelToggleButtonElemProps: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
60
|
+
state: {
|
|
61
|
+
panelId: string;
|
|
62
|
+
labelId: string;
|
|
63
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
64
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
65
|
+
origin: "end" | "start";
|
|
66
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
67
|
+
};
|
|
68
|
+
events: {
|
|
69
|
+
expand(): void;
|
|
70
|
+
collapse(): void;
|
|
71
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
72
|
+
handleAnimationStart(): undefined;
|
|
73
|
+
};
|
|
74
|
+
}, {
|
|
75
|
+
readonly 'aria-controls': string;
|
|
76
|
+
readonly 'aria-expanded': boolean;
|
|
77
|
+
readonly 'aria-labelledby': string;
|
|
78
|
+
}>;
|
|
79
|
+
export declare const SidePanelToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", SidePanelToggleButtonProps, {
|
|
80
|
+
state: {
|
|
81
|
+
panelId: string;
|
|
82
|
+
labelId: string;
|
|
83
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
84
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
85
|
+
origin: "end" | "start";
|
|
86
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
87
|
+
};
|
|
88
|
+
events: {
|
|
89
|
+
expand(): void;
|
|
90
|
+
collapse(): void;
|
|
91
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
92
|
+
handleAnimationStart(): undefined;
|
|
93
|
+
};
|
|
94
|
+
}>;
|
|
95
|
+
//# sourceMappingURL=SidePanelToggleButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhE,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAKxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA+FvC,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;;;;;;;EAQ7C,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EA4CjC,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { TertiaryButton } from '@workday/canvas-kit-react/button';
|
|
4
|
+
import { transformationImportIcon } from '@workday/canvas-system-icons-web';
|
|
5
|
+
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
|
|
6
|
+
import { useSidePanelModel } from './useSidePanelModel';
|
|
7
|
+
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
8
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
9
|
+
export const sidePanelToggleButtonStencil = createStencil({
|
|
10
|
+
base: { name: "1etqp8", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
|
|
11
|
+
modifiers: {
|
|
12
|
+
state: {
|
|
13
|
+
collapsing: { name: "30y959", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
14
|
+
collapsed: { name: "xhos1", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
15
|
+
expanded: { name: "1ksb21", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
|
|
16
|
+
expanding: { name: "2ew0xk", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
17
|
+
},
|
|
18
|
+
origin: {
|
|
19
|
+
start: { name: "3x19g6", styles: "" },
|
|
20
|
+
end: { name: "1x1y4h", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
compound: [
|
|
24
|
+
{
|
|
25
|
+
modifiers: { state: 'collapsed', origin: 'end' },
|
|
26
|
+
styles: { name: "2lkeu7", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
modifiers: { state: 'collapsing', origin: 'end' },
|
|
30
|
+
styles: { name: "42drd4", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
modifiers: { state: 'expanded', origin: 'end' },
|
|
34
|
+
styles: { name: "16e0u", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
modifiers: { state: 'expanding', origin: 'end' },
|
|
38
|
+
styles: { name: "1qlm4j", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}, "side-panel-toggle-button-2c790f");
|
|
42
|
+
export const useSidePanelToggleButtonElemProps = createElemPropsHook(useSidePanelModel)(({ state }) => {
|
|
43
|
+
return {
|
|
44
|
+
'aria-controls': state.panelId,
|
|
45
|
+
'aria-expanded': state.transitionState === 'expanded',
|
|
46
|
+
'aria-labelledby': state.labelId,
|
|
47
|
+
};
|
|
48
|
+
});
|
|
49
|
+
export const SidePanelToggleButton = createSubcomponent('button')({
|
|
50
|
+
displayName: 'SidePanel.ToggleButton',
|
|
51
|
+
modelHook: useSidePanelModel,
|
|
52
|
+
elemPropsHook: useSidePanelToggleButtonElemProps,
|
|
53
|
+
})(({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', tooltipProps, ...elemProps }, Element, model) => {
|
|
54
|
+
return (_jsx(Tooltip, { type: "muted", ...tooltipProps, title: model.state.transitionState === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, children: _jsx(TertiaryButton, { icon: icon, as: Element, variant: variant, ...handleCsProp(elemProps, sidePanelToggleButtonStencil({
|
|
55
|
+
state: model.state.transitionState,
|
|
56
|
+
origin: model.state.origin,
|
|
57
|
+
})), onClick: (event) => {
|
|
58
|
+
var _a;
|
|
59
|
+
(_a = elemProps.onClick) === null || _a === void 0 ? void 0 : _a.call(elemProps, event);
|
|
60
|
+
model.events.handleAnimationStart();
|
|
61
|
+
} }) }));
|
|
62
|
+
});
|