@workday/canvas-kit-labs-react 15.0.0-alpha.0056-next.0 → 15.0.0-alpha.0064-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
|
@@ -26,20 +26,20 @@ const glowHappyHour = canvas_tokens_web_1.base.orange400; //'#FD7E00';
|
|
|
26
26
|
const glowThumbtack = canvas_tokens_web_1.base.coral500; //'#FC5B05';
|
|
27
27
|
exports.AIIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
28
28
|
extends: button_1.buttonStencil,
|
|
29
|
-
base: { name: "
|
|
29
|
+
base: { name: "40gf57", 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));}" },
|
|
30
30
|
modifiers: {
|
|
31
31
|
variant: {
|
|
32
|
-
inverse: { name: "
|
|
32
|
+
inverse: { name: "14mrxt", 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) ;}" }
|
|
33
33
|
},
|
|
34
34
|
toggled: {
|
|
35
|
-
true: { name: "
|
|
36
|
-
false: { name: "
|
|
35
|
+
true: { name: "2nxu8", 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) ;}" },
|
|
36
|
+
false: { name: "2vzmdb", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
39
|
compound: [
|
|
40
40
|
{
|
|
41
41
|
modifiers: { toggled: true, variant: 'inverse' },
|
|
42
|
-
styles: { name: "
|
|
42
|
+
styles: { name: "38c5ly", 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;}" }
|
|
43
43
|
}
|
|
44
44
|
]
|
|
45
45
|
}, "a-i-ingress-button-ea1953");
|
package/dist/commonjs/index.d.ts
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/commonjs/index.js
CHANGED
|
@@ -17,4 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
__exportStar(require("./ai-ingress-button"), exports);
|
|
18
18
|
__exportStar(require("./combobox"), exports);
|
|
19
19
|
__exportStar(require("./search-form"), exports);
|
|
20
|
+
__exportStar(require("./side-panel"), exports);
|
|
20
21
|
__exportStar(require("./version"), exports);
|
|
@@ -80,45 +80,45 @@ exports.searchFormStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
80
80
|
searchInput: 'search-form-input',
|
|
81
81
|
closeButtonPart: 'search-form-close-button',
|
|
82
82
|
},
|
|
83
|
-
base: { name: "
|
|
83
|
+
base: { name: "1mrk16", 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);}}}" },
|
|
84
84
|
modifiers: {
|
|
85
85
|
isHiddenSubmitSearchIcon: {
|
|
86
|
-
true: { name: "
|
|
86
|
+
true: { name: "2tiser", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
|
|
87
87
|
},
|
|
88
88
|
isHiddenOpenSeachIcon: {
|
|
89
|
-
true: { name: "
|
|
89
|
+
true: { name: "kt7od", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
|
|
90
90
|
},
|
|
91
91
|
isCollapsed: {
|
|
92
|
-
true: { name: "
|
|
93
|
-
false: { name: "
|
|
92
|
+
true: { name: "3uoohl", 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));}" },
|
|
93
|
+
false: { name: "2rvk1z", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
94
94
|
},
|
|
95
95
|
rightAlign: {
|
|
96
|
-
true: { name: "
|
|
96
|
+
true: { name: "1p9pc", styles: "text-align:right;" }
|
|
97
97
|
},
|
|
98
98
|
showForm: {
|
|
99
|
-
true: { name: "
|
|
100
|
-
false: { name: "
|
|
99
|
+
true: { name: "xqrko", styles: "" },
|
|
100
|
+
false: { name: "24uats", styles: "" }
|
|
101
101
|
},
|
|
102
102
|
grow: {
|
|
103
|
-
true: { name: "
|
|
103
|
+
true: { name: "y9f13", styles: "max-width:100%;[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]{max-width:100%;}" }
|
|
104
104
|
},
|
|
105
105
|
searchTheme: {
|
|
106
106
|
// Light theme
|
|
107
|
-
light: { name: "
|
|
107
|
+
light: { name: "69rcd", 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);}}" },
|
|
108
108
|
// Dark theme
|
|
109
|
-
dark: { name: "
|
|
109
|
+
dark: { name: "aibxi", 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;}}" },
|
|
110
110
|
//Transparent theme
|
|
111
|
-
transparent: { name: "
|
|
111
|
+
transparent: { name: "24hvnd", 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;}" }
|
|
112
112
|
}
|
|
113
113
|
},
|
|
114
114
|
compound: [
|
|
115
115
|
{
|
|
116
116
|
modifiers: { showForm: 'true', isCollapsed: 'true' },
|
|
117
|
-
styles: { name: "
|
|
117
|
+
styles: { name: "22tojy", 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;}}" }
|
|
118
118
|
},
|
|
119
119
|
{
|
|
120
120
|
modifiers: { isCollapsed: 'true', showForm: 'true' },
|
|
121
|
-
styles: { name: "
|
|
121
|
+
styles: { name: "2fo5n4", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
122
122
|
}
|
|
123
123
|
]
|
|
124
124
|
}, "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,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./lib/SidePanel"), exports);
|
|
18
|
+
__exportStar(require("./lib/SidePanelToggleButton"), exports);
|
|
19
|
+
__exportStar(require("./lib/useSidePanelModel"), exports);
|
|
@@ -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,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SidePanel = exports.panelStencil = exports.useSidePanelContainer = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
7
|
+
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
8
|
+
const useSidePanelModel_1 = require("./useSidePanelModel");
|
|
9
|
+
const SidePanelToggleButton_1 = require("./SidePanelToggleButton");
|
|
10
|
+
/**
|
|
11
|
+
* Adds the necessary props to the SidePanel container element.
|
|
12
|
+
* This includes the `id` and `aria-labelledby` attributes for accessibility.
|
|
13
|
+
*/
|
|
14
|
+
exports.useSidePanelContainer = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state, events }) => {
|
|
15
|
+
return {
|
|
16
|
+
id: state.panelId,
|
|
17
|
+
'aria-labelledby': state.labelId,
|
|
18
|
+
onTransitionEnd: events.handleAnimationEnd,
|
|
19
|
+
};
|
|
20
|
+
});
|
|
21
|
+
exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
22
|
+
vars: {
|
|
23
|
+
expandedWidth: '',
|
|
24
|
+
collapsedWidth: '',
|
|
25
|
+
},
|
|
26
|
+
base: { name: "3njsoc", 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;" },
|
|
27
|
+
modifiers: {
|
|
28
|
+
variant: {
|
|
29
|
+
alternate: { name: "25mca2", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
|
|
30
|
+
standard: { name: "g0xdu", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
|
|
31
|
+
},
|
|
32
|
+
expanded: {
|
|
33
|
+
expanded: { name: "ctxfd", styles: "width:var(--expandedWidth-panel-46751f);max-width:var(--expandedWidth-panel-46751f);" },
|
|
34
|
+
collapsed: { name: "1dpyaw", styles: "width:var(--collapsedWidth-panel-46751f);max-width:var(--collapsedWidth-panel-46751f);" },
|
|
35
|
+
expanding: { name: "fm5s5", styles: "width:var(--expandedWidth-panel-46751f);max-width:var(--expandedWidth-panel-46751f);" },
|
|
36
|
+
collapsing: { name: "46yv8h", styles: "width:var(--collapsedWidth-panel-46751f);max-width:var(--collapsedWidth-panel-46751f);" }
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}, "panel-46751f");
|
|
40
|
+
exports.SidePanel = (0, common_1.createContainer)('section')({
|
|
41
|
+
displayName: 'SidePanel',
|
|
42
|
+
modelHook: useSidePanelModel_1.useSidePanelModel,
|
|
43
|
+
elemPropsHook: exports.useSidePanelContainer,
|
|
44
|
+
subComponents: {
|
|
45
|
+
/**
|
|
46
|
+
* `SidePanel.ToggleButton` is a control that toggles between expanded and collapsed states.
|
|
47
|
+
* It must be used within the `SidePanel` component as a child. For accessibility purposes,
|
|
48
|
+
* it should be the first focusable element in the panel.
|
|
49
|
+
*
|
|
50
|
+
* The button automatically receives `aria-controls`, `aria-expanded`, and `aria-labelledby`
|
|
51
|
+
* attributes from the model.
|
|
52
|
+
*/
|
|
53
|
+
ToggleButton: SidePanelToggleButton_1.SidePanelToggleButton,
|
|
54
|
+
},
|
|
55
|
+
})(({ collapsedWidth = 64, expandedWidth = 320, variant = 'standard', children, ...elemProps }, Element, model) => {
|
|
56
|
+
return ((0, jsx_runtime_1.jsx)(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
|
|
57
|
+
(0, exports.panelStencil)({
|
|
58
|
+
expanded: model.state.transitionState,
|
|
59
|
+
variant,
|
|
60
|
+
expandedWidth: typeof expandedWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(expandedWidth) : expandedWidth,
|
|
61
|
+
collapsedWidth: typeof collapsedWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(collapsedWidth) : collapsedWidth,
|
|
62
|
+
}),
|
|
63
|
+
]), children: children }));
|
|
64
|
+
});
|
|
@@ -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,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SidePanelToggleButton = exports.useSidePanelToggleButtonElemProps = exports.sidePanelToggleButtonStencil = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
+
const button_1 = require("@workday/canvas-kit-react/button");
|
|
7
|
+
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
8
|
+
const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
|
|
9
|
+
const useSidePanelModel_1 = require("./useSidePanelModel");
|
|
10
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
|
+
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
12
|
+
exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
|
+
base: { name: "3wikts", 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);" },
|
|
14
|
+
modifiers: {
|
|
15
|
+
state: {
|
|
16
|
+
collapsing: { name: "3eb9uk", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
17
|
+
collapsed: { name: "2ofai2", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
18
|
+
expanded: { name: "3out8p", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
|
|
19
|
+
expanding: { name: "3qwjvd", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
20
|
+
},
|
|
21
|
+
origin: {
|
|
22
|
+
start: { name: "2lerhh", styles: "" },
|
|
23
|
+
end: { name: "pnohn", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
compound: [
|
|
27
|
+
{
|
|
28
|
+
modifiers: { state: 'collapsed', origin: 'end' },
|
|
29
|
+
styles: { name: "3sr1hm", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
modifiers: { state: 'collapsing', origin: 'end' },
|
|
33
|
+
styles: { name: "11vq8b", 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);}" }
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
modifiers: { state: 'expanded', origin: 'end' },
|
|
37
|
+
styles: { name: "1b6yg3", 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);}" }
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
modifiers: { state: 'expanding', origin: 'end' },
|
|
41
|
+
styles: { name: "aylr6", 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);}" }
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}, "side-panel-toggle-button-2c790f");
|
|
45
|
+
exports.useSidePanelToggleButtonElemProps = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state }) => {
|
|
46
|
+
return {
|
|
47
|
+
'aria-controls': state.panelId,
|
|
48
|
+
'aria-expanded': state.transitionState === 'expanded',
|
|
49
|
+
'aria-labelledby': state.labelId,
|
|
50
|
+
};
|
|
51
|
+
});
|
|
52
|
+
exports.SidePanelToggleButton = (0, common_1.createSubcomponent)('button')({
|
|
53
|
+
displayName: 'SidePanel.ToggleButton',
|
|
54
|
+
modelHook: useSidePanelModel_1.useSidePanelModel,
|
|
55
|
+
elemPropsHook: exports.useSidePanelToggleButtonElemProps,
|
|
56
|
+
})(({ variant = undefined, icon = canvas_system_icons_web_1.transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', tooltipProps, ...elemProps }, Element, model) => {
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { type: "muted", ...tooltipProps, title: model.state.transitionState === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon: icon, as: Element, variant: variant, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelToggleButtonStencil)({
|
|
58
|
+
state: model.state.transitionState,
|
|
59
|
+
origin: model.state.origin,
|
|
60
|
+
})), onClick: (event) => {
|
|
61
|
+
var _a;
|
|
62
|
+
(_a = elemProps.onClick) === null || _a === void 0 ? void 0 : _a.call(elemProps, event);
|
|
63
|
+
model.events.handleAnimationStart();
|
|
64
|
+
} }) }));
|
|
65
|
+
});
|