@stack-spot/portal-layout 0.0.63 → 0.0.64
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/LayoutOverlayManager.d.ts +9 -0
- package/dist/LayoutOverlayManager.d.ts.map +1 -1
- package/dist/LayoutOverlayManager.js +21 -1
- package/dist/LayoutOverlayManager.js.map +1 -1
- package/dist/components/error/ErrorDescriptor.d.ts +12 -0
- package/dist/components/error/ErrorDescriptor.d.ts.map +1 -0
- package/dist/components/error/ErrorDescriptor.js +17 -0
- package/dist/components/error/ErrorDescriptor.js.map +1 -0
- package/dist/components/menu/useCheckTextOverflow.d.ts +6 -0
- package/dist/components/menu/useCheckTextOverflow.d.ts.map +1 -0
- package/dist/components/menu/useCheckTextOverflow.js +20 -0
- package/dist/components/menu/useCheckTextOverflow.js.map +1 -0
- package/dist/components/tour/Navigation.d.ts +8 -0
- package/dist/components/tour/Navigation.d.ts.map +1 -0
- package/dist/components/tour/Navigation.js +15 -0
- package/dist/components/tour/Navigation.js.map +1 -0
- package/dist/components/tour/config.d.ts +2 -2
- package/dist/components/tour/config.d.ts.map +1 -1
- package/dist/components/tour/config.js +14 -5
- package/dist/components/tour/config.js.map +1 -1
- package/dist/components/tour/steps/PortalSwitcherStep.d.ts +2 -1
- package/dist/components/tour/steps/PortalSwitcherStep.d.ts.map +1 -1
- package/dist/components/tour/steps/PortalSwitcherStep.js +16 -15
- package/dist/components/tour/steps/PortalSwitcherStep.js.map +1 -1
- package/dist/components/tour/utils.d.ts +8 -12
- package/dist/components/tour/utils.d.ts.map +1 -1
- package/dist/components/tour/utils.js +33 -28
- package/dist/components/tour/utils.js.map +1 -1
- package/dist/utils.d.ts +27 -0
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +50 -0
- package/dist/utils.js.map +1 -1
- package/package.json +5 -5
- package/src/LayoutOverlayManager.tsx +17 -1
- package/src/utils.ts +48 -0
- package/dist/components/tour/StepContainer.d.ts +0 -13
- package/dist/components/tour/StepContainer.d.ts.map +0 -1
- package/dist/components/tour/StepContainer.js +0 -48
- package/dist/components/tour/StepContainer.js.map +0 -1
- package/dist/components/tour/StepNavigation.d.ts +0 -13
- package/dist/components/tour/StepNavigation.d.ts.map +0 -1
- package/dist/components/tour/StepNavigation.js +0 -20
- package/dist/components/tour/StepNavigation.js.map +0 -1
- package/dist/components/tour/StepTitle.d.ts +0 -7
- package/dist/components/tour/StepTitle.d.ts.map +0 -1
- package/dist/components/tour/StepTitle.js +0 -5
- package/dist/components/tour/StepTitle.js.map +0 -1
- package/dist/components/tour/context.d.ts +0 -17
- package/dist/components/tour/context.d.ts.map +0 -1
- package/dist/components/tour/context.js +0 -48
- package/dist/components/tour/context.js.map +0 -1
- package/dist/components/tour/index.d.ts +0 -4
- package/dist/components/tour/index.d.ts.map +0 -1
- package/dist/components/tour/index.js +0 -4
- package/dist/components/tour/index.js.map +0 -1
|
@@ -21,6 +21,10 @@ declare class LayoutOverlayManager {
|
|
|
21
21
|
private setContent;
|
|
22
22
|
private elements?;
|
|
23
23
|
private onModalClose?;
|
|
24
|
+
/**
|
|
25
|
+
* Last element with focus before an overlay is shown.
|
|
26
|
+
*/
|
|
27
|
+
private lastActiveElement;
|
|
24
28
|
private setupElements;
|
|
25
29
|
private useOverlays;
|
|
26
30
|
private setInteractivity;
|
|
@@ -42,6 +46,11 @@ declare class LayoutOverlayManager {
|
|
|
42
46
|
showRightPanel({ size, ...props }: OverlayContentProps & {
|
|
43
47
|
size?: OverlaySize;
|
|
44
48
|
}): void;
|
|
49
|
+
/**
|
|
50
|
+
* Focus the element that had focus before the last overlay was opened. If the element is not visible anymore, another one that makes
|
|
51
|
+
* sense (accessibility-wise) is focused.
|
|
52
|
+
*/
|
|
53
|
+
private focusLastActiveElement;
|
|
45
54
|
closeModal(runCloseListener?: boolean): void;
|
|
46
55
|
closeRightPanel(runCloseListener?: boolean): void;
|
|
47
56
|
closeBottomDialog(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutOverlayManager.d.ts","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAU,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAoC,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAInG,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAG3D,UAAU,YAAa,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;AACvD,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC/C,KAAK,SAAS,GAAG,aAAa,GAAG,WAAW,CAAA;AAS5C,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,cAAM,oBAAoB;IACxB,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAA;IAC/C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,QAAQ,CAAC,CAAgB;IACjC,OAAO,CAAC,YAAY,CAAC,CAAY;
|
|
1
|
+
{"version":3,"file":"LayoutOverlayManager.d.ts","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAU,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAoC,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAInG,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAG3D,UAAU,YAAa,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;AACvD,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC/C,KAAK,SAAS,GAAG,aAAa,GAAG,WAAW,CAAA;AAS5C,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAWD,cAAM,oBAAoB;IACxB,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAA;IAC/C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,QAAQ,CAAC,CAAgB;IACjC,OAAO,CAAC,YAAY,CAAC,CAAY;IACjC;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAAuB;IAEhD,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,WAAW;IAMnB,WAAW;IAIX,gBAAgB;IAIhB,kBAAkB;IAIlB,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,EAAE,EAAE,IAAe,EAAE,OAAO,EAAE,GAAE,kBAAuB;IAQlG,SAAS,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG;QAAE,IAAI,CAAC,EAAE,SAAS,CAAA;KAAE;IAIxE,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAKnE,KAAK,CAAC,EAAE,OAAO,EAAE,UAAiB,EAAE,GAAG,OAAO,EAAE,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC;IAKpF,gBAAgB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,GAAG,OAAO,CAAC,OAAO,CAAC;IAiBrF,oBAAoB,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE,IAAe,EAAE,OAAO,EAAE,GAAE,uBAA4B;IAWtG,cAAc,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE;IAO/E;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAK9B,UAAU,CAAC,gBAAgB,UAAO;IAyBlC,eAAe,CAAC,gBAAgB,UAAO;IAyBvC,iBAAiB;IAIjB,aAAa,CAAC,OAAO,EAAE,WAAW;IAIlC,kBAAkB,CAAC,OAAO,EAAE,WAAW;IAIvC,WAAW,0BAAmB;CAC/B;AAED,eAAO,MAAM,OAAO,sBAA6B,CAAA"}
|
|
@@ -8,7 +8,7 @@ import { getDictionary } from './dictionary.js';
|
|
|
8
8
|
import { elementIds, getLayoutElements } from './elements.js';
|
|
9
9
|
import { ElementNotFound, LayoutError } from './errors.js';
|
|
10
10
|
import { showToaster as showReactToaster } from './toaster.js';
|
|
11
|
-
import { focusFirstChild, valueOfLayoutVar } from './utils.js';
|
|
11
|
+
import { focusAccessibleElement, focusFirstChild, valueOfLayoutVar } from './utils.js';
|
|
12
12
|
function multipleCallsWarning(type, timeMS) {
|
|
13
13
|
return `
|
|
14
14
|
Attempted to show a modal or rightPanel while a ${type} was still being closed. Closing a ${type} takes only ${timeMS}ms, so this action
|
|
@@ -37,6 +37,15 @@ class LayoutOverlayManager {
|
|
|
37
37
|
writable: true,
|
|
38
38
|
value: void 0
|
|
39
39
|
});
|
|
40
|
+
/**
|
|
41
|
+
* Last element with focus before an overlay is shown.
|
|
42
|
+
*/
|
|
43
|
+
Object.defineProperty(this, "lastActiveElement", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
configurable: true,
|
|
46
|
+
writable: true,
|
|
47
|
+
value: null
|
|
48
|
+
});
|
|
40
49
|
Object.defineProperty(this, "showToaster", {
|
|
41
50
|
enumerable: true,
|
|
42
51
|
configurable: true,
|
|
@@ -101,6 +110,7 @@ class LayoutOverlayManager {
|
|
|
101
110
|
this.elements?.backdrop?.setAttribute('class', interactive ? '' : 'visible');
|
|
102
111
|
}
|
|
103
112
|
showOverlay(element, extraClasses = [], blockMainContent = true) {
|
|
113
|
+
this.lastActiveElement = document.activeElement;
|
|
104
114
|
element?.classList.add('visible', ...extraClasses);
|
|
105
115
|
this.setInteractivity(element, true);
|
|
106
116
|
if (blockMainContent)
|
|
@@ -180,6 +190,14 @@ class LayoutOverlayManager {
|
|
|
180
190
|
showRightPanel({ size, ...props }) {
|
|
181
191
|
this.showCustomRightPanel(_jsx(OverlayContent, { ...props, onClose: () => this.closeRightPanel(), type: "panel" }), { size, onClose: props.onClose });
|
|
182
192
|
}
|
|
193
|
+
/**
|
|
194
|
+
* Focus the element that had focus before the last overlay was opened. If the element is not visible anymore, another one that makes
|
|
195
|
+
* sense (accessibility-wise) is focused.
|
|
196
|
+
*/
|
|
197
|
+
focusLastActiveElement() {
|
|
198
|
+
focusAccessibleElement(this.lastActiveElement);
|
|
199
|
+
this.lastActiveElement = null;
|
|
200
|
+
}
|
|
183
201
|
closeModal(runCloseListener = true) {
|
|
184
202
|
this.elements?.modal?.classList.remove('visible');
|
|
185
203
|
this.elements?.backdrop?.setAttribute('class', '');
|
|
@@ -199,6 +217,7 @@ class LayoutOverlayManager {
|
|
|
199
217
|
if (this.setContent.modal)
|
|
200
218
|
this.setContent.modal(undefined);
|
|
201
219
|
this.hideOverlay(this.elements?.modal);
|
|
220
|
+
this.focusLastActiveElement();
|
|
202
221
|
}, animationMS);
|
|
203
222
|
}
|
|
204
223
|
closeRightPanel(runCloseListener = true) {
|
|
@@ -220,6 +239,7 @@ class LayoutOverlayManager {
|
|
|
220
239
|
if (this.setContent.rightPanel)
|
|
221
240
|
this.setContent.rightPanel(undefined);
|
|
222
241
|
this.hideOverlay(this.elements?.rightPanel);
|
|
242
|
+
this.focusLastActiveElement();
|
|
223
243
|
}, animationMS);
|
|
224
244
|
}
|
|
225
245
|
closeBottomDialog() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutOverlayManager.js","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":";AAAA,+CAA+C;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAgB,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAiB,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAuB,MAAM,6BAA6B,CAAA;AACnG,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAkB,UAAU,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAC1E,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACvD,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"LayoutOverlayManager.js","sourceRoot":"","sources":["../src/LayoutOverlayManager.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export interface ErrorDescription {
|
|
2
|
+
code?: number;
|
|
3
|
+
message?: string;
|
|
4
|
+
debug?: boolean;
|
|
5
|
+
}
|
|
6
|
+
export type DescriptionFn = (error: any) => ErrorDescription;
|
|
7
|
+
export declare class ErrorDescriptor {
|
|
8
|
+
private static descriptionFunction;
|
|
9
|
+
static setDescriptionFunction(fn: DescriptionFn): void;
|
|
10
|
+
static describe(error: any): ErrorDescription;
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=ErrorDescriptor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ErrorDescriptor.d.ts","sourceRoot":"","sources":["../../../src/components/error/ErrorDescriptor.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,gBAAgB,CAAA;AAE5D,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAEhC;IAEF,MAAM,CAAC,sBAAsB,CAAC,EAAE,EAAE,aAAa;IAI/C,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG;CAG3B"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export class ErrorDescriptor {
|
|
2
|
+
static setDescriptionFunction(fn) {
|
|
3
|
+
this.descriptionFunction = fn;
|
|
4
|
+
}
|
|
5
|
+
static describe(error) {
|
|
6
|
+
return this.descriptionFunction(error);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(ErrorDescriptor, "descriptionFunction", {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
configurable: true,
|
|
12
|
+
writable: true,
|
|
13
|
+
value: error => ({
|
|
14
|
+
message: error.message || `${error}`,
|
|
15
|
+
})
|
|
16
|
+
});
|
|
17
|
+
//# sourceMappingURL=ErrorDescriptor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ErrorDescriptor.js","sourceRoot":"","sources":["../../../src/components/error/ErrorDescriptor.ts"],"names":[],"mappings":"AAQA,MAAM,OAAO,eAAe;IAK1B,MAAM,CAAC,sBAAsB,CAAC,EAAiB;QAC7C,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAA;IAC/B,CAAC;IAED,MAAM,CAAC,QAAQ,CAAC,KAAU;QACxB,OAAO,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;;AAVc;;;;WAAqC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC5D,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,GAAG,KAAK,EAAE;KACrC,CAAC;GAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCheckTextOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":";AAEA,wBAAgB,oBAAoB;;;EAuBnC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useState, useRef, useEffect } from 'react';
|
|
2
|
+
export function useCheckTextOverflow() {
|
|
3
|
+
const [overflow, setOverflow] = useState(false);
|
|
4
|
+
const ref = useRef(null);
|
|
5
|
+
const checkOverflow = () => {
|
|
6
|
+
if (!ref.current) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth;
|
|
10
|
+
if (hasOverflow === overflow) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
setOverflow(hasOverflow);
|
|
14
|
+
};
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
checkOverflow();
|
|
17
|
+
}, [ref.current]);
|
|
18
|
+
return { overflow, ref };
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=useCheckTextOverflow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCheckTextOverflow.js","sourceRoot":"","sources":["../../../src/components/menu/useCheckTextOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,UAAU,oBAAoB;IAClC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACxD,MAAM,GAAG,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAA;IAE9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAM;SACP;QAED,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,WAAW,CAAA;QAErE,IAAI,WAAW,KAAK,QAAQ,EAAE;YAC5B,OAAM;SACP;QAED,WAAW,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAA;IACjB,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEjB,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAC1B,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ProviderProps } from '@reactour/tour';
|
|
2
|
+
import '@stack-spot/portal-theme/dist/theme.css';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
type ComponentsDict = Exclude<ProviderProps['components'], undefined>;
|
|
5
|
+
type NavigationProps = React.ComponentProps<Exclude<ComponentsDict['Navigation'], undefined>>;
|
|
6
|
+
export declare const CustomNavigation: ({ currentStep, steps, setCurrentStep }: NavigationProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=Navigation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../src/components/tour/Navigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,yCAAyC,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAA;AACrE,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC,CAAA;AAE7F,eAAO,MAAM,gBAAgB,2CAA4C,eAAe,4CAiBvF,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Button, Flex, Text } from '@citric/core';
|
|
3
|
+
import '@stack-spot/portal-theme/dist/theme.css';
|
|
4
|
+
import { useTranslate } from '@stack-spot/portal-translate';
|
|
5
|
+
import { finishTour } from './utils.js';
|
|
6
|
+
export const CustomNavigation = ({ currentStep, steps, setCurrentStep }) => {
|
|
7
|
+
const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } });
|
|
8
|
+
return _jsxs(Flex, { w: 12, px: 5, py: 2, mt: "-1px", bg: "inverse.500", justifyContent: "space-between", children: [_jsxs(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: [currentStep + 1, " ", t.of, " ", steps.length] }), _jsxs(Flex, { sx: { gap: '8px' }, children: [currentStep > 1 &&
|
|
9
|
+
_jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => setCurrentStep(currentStep - 1), size: "sm", colorScheme: "light", children: t.back }), _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
|
|
10
|
+
if (currentStep + 1 == steps.length)
|
|
11
|
+
finishTour();
|
|
12
|
+
setCurrentStep(currentStep + 1);
|
|
13
|
+
}, size: "sm", colorScheme: "light", children: "ok" })] })] });
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=Navigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/components/tour/Navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEjD,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAMpC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAmB,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;IAC5F,OAAO,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,cAAc,EAAC,eAAe,aACzF,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,aAAE,WAAW,GAAG,CAAC,OAAG,CAAC,CAAC,EAAE,OAAG,KAAK,CAAC,MAAM,IAAQ,EAC/G,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,aACrB,WAAW,GAAG,CAAC;wBACd,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YACjH,CAAC,CAAC,IAAI,GACA,EACX,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;4BACnD,IAAI,WAAW,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM;gCAAE,UAAU,EAAE,CAAA;4BACjD,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;wBACjC,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,mBAEvB,IACJ,IACF,CAAA;AACT,CAAC,CAAA"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const defaultTourConfig: () => Omit<
|
|
1
|
+
import { ProviderProps } from '@reactour/tour';
|
|
2
|
+
export declare const defaultTourConfig: () => Omit<ProviderProps, 'children'>;
|
|
3
3
|
//# sourceMappingURL=config.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/components/tour/config.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/components/tour/config.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAI9C,eAAO,MAAM,iBAAiB,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,UAAU,CAkBlE,CAAA"}
|
|
@@ -1,13 +1,22 @@
|
|
|
1
|
+
import { CustomNavigation } from './Navigation.js';
|
|
2
|
+
import { hasFinishedTour } from './utils.js';
|
|
1
3
|
export const defaultTourConfig = () => ({
|
|
2
4
|
steps: [],
|
|
3
|
-
|
|
4
|
-
onRequestClose: console.log,
|
|
5
|
+
defaultOpen: !hasFinishedTour(),
|
|
5
6
|
showBadge: false,
|
|
6
7
|
showDots: false,
|
|
7
8
|
showPrevNextButtons: false,
|
|
8
9
|
showCloseButton: false,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
styles: {
|
|
11
|
+
popover: (props) => ({
|
|
12
|
+
...props,
|
|
13
|
+
boxShadow: 'unset',
|
|
14
|
+
backgroundColor: 'transparent',
|
|
15
|
+
padding: '0px 14px', // TODO: find a way to make paddings on y axis so it's possible to use the the pointing arrow.
|
|
16
|
+
}),
|
|
17
|
+
},
|
|
18
|
+
components: {
|
|
19
|
+
Navigation: CustomNavigation,
|
|
20
|
+
},
|
|
12
21
|
});
|
|
13
22
|
//# sourceMappingURL=config.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../src/components/tour/config.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../src/components/tour/config.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,CAAC,MAAM,iBAAiB,GAA0C,GAAG,EAAE,CAAC,CAAC;IAC7E,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,CAAC,eAAe,EAAE;IAC/B,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;IACf,mBAAmB,EAAE,KAAK;IAC1B,eAAe,EAAE,KAAK;IACtB,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACnB,GAAG,KAAK;YACR,SAAS,EAAE,OAAO;YAClB,eAAe,EAAE,aAAa;YAC9B,OAAO,EAAE,UAAU,EAAE,8FAA8F;SACpH,CAAC;KACH;IACD,UAAU,EAAE;QACV,UAAU,EAAE,gBAAgB;KAC7B;CACF,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PortalSwitcherStep.d.ts","sourceRoot":"","sources":["../../../../src/components/tour/steps/PortalSwitcherStep.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PortalSwitcherStep.d.ts","sourceRoot":"","sources":["../../../../src/components/tour/steps/PortalSwitcherStep.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAW,MAAM,gBAAgB,CAAA;AA6BlD,eAAO,MAAM,kBAAkB,EAAE,QAIhC,CAAA"}
|
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Box, Image, Text } from '@citric/core';
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Button, Flex, IconBox, Image, Text } from '@citric/core';
|
|
3
|
+
import { TimesMini } from '@citric/icons';
|
|
4
|
+
import { useTour } from '@reactour/tour';
|
|
3
5
|
import { useTranslate } from '@stack-spot/portal-translate';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
+
import { TextWithPointingArrow, finishTour } from '../utils.js';
|
|
7
|
+
const PortalSwitcherStep = () => {
|
|
6
8
|
const t = useTranslate(translations);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
const { setIsOpen } = useTour();
|
|
10
|
+
return _jsxs(Box, { bg: "inverse.500", children: [_jsx(TextWithPointingArrow, { "$position": "right", children: _jsxs(Flex, { w: 12, pl: 5, py: 3, flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Text, { appearance: "body2", colorScheme: "inverse.contrastText", weight: "medium", children: [" ", t.title, " "] }), _jsx(Button, { appearance: "text", size: "sm", onClick: () => {
|
|
11
|
+
finishTour();
|
|
12
|
+
setIsOpen(false);
|
|
13
|
+
}, children: _jsx(IconBox, { size: "xs", colorIcon: "inverse.contrastText", children: _jsx(TimesMini, {}) }) })] }) }), _jsx(Image, { src: "https://marketing.stackspot.com/switch-v2.gif", alt: "GIF showing how to move from one portal to another" }), _jsx(Box, { px: 5, py: 3, children: _jsx(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: t.description }) })] });
|
|
14
|
+
};
|
|
15
|
+
export const portalSwitcherStep = {
|
|
16
|
+
selector: '.portal-switcher',
|
|
17
|
+
content: PortalSwitcherStep,
|
|
18
|
+
position: 'right',
|
|
16
19
|
};
|
|
17
20
|
const translations = {
|
|
18
21
|
en: {
|
|
19
22
|
title: 'Expand Your Horizons with Stackspot',
|
|
20
23
|
description: 'Easily switch between EDP and AI to enhance your projects. Access a wide range of resources with just one click and take your projects to a new level of efficiency. Start your journey now!',
|
|
21
|
-
imageAlt: 'GIF describing how to use product switcher and navigate between AI and EDP portals',
|
|
22
24
|
},
|
|
23
25
|
pt: {
|
|
24
26
|
title: 'Expanda Seus Horizontes com Stackspot',
|
|
25
27
|
description: 'Troque facilmente entre EDP e AI para aprimorar seus projetos. Acesse uma ampla gama de recursos com apenas um clique e leve seus projetos para um novo nível de eficiência. Comece sua jornada agora!',
|
|
26
|
-
imageAlt: 'GIF mostrando como usar o alternador de produtos e navegar entre os portais AI e EDP',
|
|
27
28
|
},
|
|
28
29
|
};
|
|
29
30
|
//# sourceMappingURL=PortalSwitcherStep.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PortalSwitcherStep.js","sourceRoot":"","sources":["../../../../src/components/tour/steps/PortalSwitcherStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"PortalSwitcherStep.js","sourceRoot":"","sources":["../../../../src/components/tour/steps/PortalSwitcherStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAY,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,CAAA;IACpC,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAA;IAC/B,OAAO,MAAC,GAAG,IAAC,EAAE,EAAC,aAAa,aAC1B,KAAC,qBAAqB,iBAAW,OAAO,YACtC,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC7F,MAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,kBAAG,CAAC,CAAC,KAAK,SAAS,EAC9F,KAAC,MAAM,IAAC,UAAU,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,GAAG,EAAE;gCAChD,UAAU,EAAE,CAAA;gCACZ,SAAS,CAAC,KAAK,CAAC,CAAA;4BAClB,CAAC,YACC,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,YACjD,KAAC,SAAS,KAAG,GACL,GACH,IACJ,GACe,EACxB,KAAC,KAAK,IAAC,GAAG,EAAC,+CAA+C,EACxD,GAAG,EAAC,oDAAoD,GAAG,EAC7D,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YACf,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,YAAE,CAAC,CAAC,WAAW,GAAQ,GACnF,IACD,CAAA;AACT,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAa;IAC1C,QAAQ,EAAE,kBAAkB;IAC5B,OAAO,EAAE,kBAAkB;IAC3B,QAAQ,EAAE,OAAO;CAClB,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE;QACF,KAAK,EAAE,qCAAqC;QAC5C,WAAW,EAAE,8LAA8L;KAC5M;IACD,EAAE,EAAE;QACF,KAAK,EAAE,uCAAuC;QAC9C,WAAW,EAAE,wMAAwM;KACtN;CACF,CAAA"}
|
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export declare const
|
|
8
|
-
|
|
9
|
-
selector: string;
|
|
10
|
-
content: ReactNode;
|
|
11
|
-
customNavigation?: NavigationProps | undefined;
|
|
12
|
-
}) => ReactourStep;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const TextWithPointingArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
3
|
+
$position: 'right' | 'top' | 'left';
|
|
4
|
+
$top?: string | undefined;
|
|
5
|
+
$right?: string | undefined;
|
|
6
|
+
}>> & string;
|
|
7
|
+
export declare const finishTour: () => void;
|
|
8
|
+
export declare const hasFinishedTour: () => boolean;
|
|
13
9
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":";AAGA,eAAO,MAAM,qBAAqB;eACrB,OAAO,GAAG,KAAK,GAAG,MAAM;;;YAgCpC,CAAA;AAmBD,eAAO,MAAM,UAAU,YAAyC,CAAA;AAEhE,eAAO,MAAM,eAAe,eAAmC,CAAA"}
|
|
@@ -1,7 +1,35 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
import { theme } from '@stack-spot/portal-theme';
|
|
3
|
-
import
|
|
4
|
-
const
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
export const TextWithPointingArrow = styled.div `
|
|
4
|
+
position: relative;
|
|
5
|
+
width: 100%;
|
|
6
|
+
&::after {
|
|
7
|
+
content: '';
|
|
8
|
+
position: absolute;
|
|
9
|
+
border-width: 10px;
|
|
10
|
+
border-style: solid;
|
|
11
|
+
border-color: transparent;
|
|
12
|
+
margin-top: -5px;
|
|
13
|
+
border-right-color: ${theme.color.inverse[500]};
|
|
14
|
+
${({ $position, $top }) => $position === 'right' ?
|
|
15
|
+
`
|
|
16
|
+
top: ${$top || '16px'};
|
|
17
|
+
left: -18px;
|
|
18
|
+
` : ''}
|
|
19
|
+
${({ $position, $right }) => $position === 'top' ?
|
|
20
|
+
`
|
|
21
|
+
bottom: 96%;
|
|
22
|
+
right: ${$right || '16px'};
|
|
23
|
+
transform: rotate(90deg);
|
|
24
|
+
` : ''}
|
|
25
|
+
${({ $position, $top }) => $position === 'left' ?
|
|
26
|
+
`
|
|
27
|
+
top: ${$top || '16px'};
|
|
28
|
+
right: -18px;
|
|
29
|
+
transform: rotate(180deg);
|
|
30
|
+
` : ''}
|
|
31
|
+
}
|
|
32
|
+
`;
|
|
5
33
|
const DOMAIN_REGEX = new RegExp(/(\.*(prd|stg|dev)*.stackspot.com)|localhost/);
|
|
6
34
|
const portalUrl = new URL(location.href);
|
|
7
35
|
const cookieDomain = DOMAIN_REGEX.exec(portalUrl.host)?.[0];
|
|
@@ -15,29 +43,6 @@ const setCookie = (key, value) => {
|
|
|
15
43
|
document.cookie = `${key}=${value}; ${defaultCookieAttributes}`;
|
|
16
44
|
};
|
|
17
45
|
const getCookie = (key) => getCookies()[key];
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
return currentTourObject ? currentTourObject.split(',') : [];
|
|
21
|
-
};
|
|
22
|
-
export const finishTourStep = (key) => {
|
|
23
|
-
const tourObject = getTourCookie();
|
|
24
|
-
if (!tourObject.includes(key))
|
|
25
|
-
tourObject.push(key);
|
|
26
|
-
setCookie(TOUR_COOKIE, tourObject.toString());
|
|
27
|
-
};
|
|
28
|
-
export const isNewTourStep = (step) => !hasFinishedTourStep(`${step.selector}`);
|
|
29
|
-
export const hasFinishedTourStep = (key) => getTourCookie().includes(key);
|
|
30
|
-
export const tourStepBuilder = ({ selector, position, title, content, style, customNavigation, ...rest }) => ({
|
|
31
|
-
selector,
|
|
32
|
-
content: (_jsx(StepContainer, { stepKey: selector, position: position, title: title, customNavigation: customNavigation, children: content })),
|
|
33
|
-
position,
|
|
34
|
-
style: {
|
|
35
|
-
backgroundColor: theme.color.inverse[500],
|
|
36
|
-
width: '256px',
|
|
37
|
-
padding: 0,
|
|
38
|
-
top: ['right', 'left'].includes(position) ? '-3px' : '0',
|
|
39
|
-
...(style || {}),
|
|
40
|
-
},
|
|
41
|
-
...(rest || {}),
|
|
42
|
-
});
|
|
46
|
+
export const finishTour = () => setCookie('welcomeTour', 'done');
|
|
47
|
+
export const hasFinishedTour = () => !!getCookie('welcomeTour');
|
|
43
48
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAI3C;;;;;;;;;;0BAUsB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;MAC5C,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC;IAClD;aACS,IAAI,IAAI,MAAM;;KAEtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC;IAClD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC;IACjD;aACS,IAAI,IAAI,MAAM;;;KAGtB,CAAC,CAAC,CAAC,EAAE;;CAET,CAAA;AAED,MAAM,YAAY,GAAG,IAAI,MAAM,CAAC,6CAA6C,CAAC,CAAA;AAC9E,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;AACxC,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAC3D,MAAM,uBAAuB,GAAG,UAAU,YAAY,oBAAoB,CAAA;AAE1E,MAAM,UAAU,GAAG,GAA2B,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;IACpG,MAAM,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAC3C,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC5B,OAAO,IAAI,CAAA;AACb,CAAC,EAAE,EAA4B,CAAC,CAAA;AAEhC,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,KAAa,EAAE,EAAE;IAC/C,QAAQ,CAAC,MAAM,GAAG,GAAG,GAAG,IAAI,KAAK,KAAK,uBAAuB,EAAE,CAAA;AACjE,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,CAAA;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;AAEhE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA"}
|
package/dist/utils.d.ts
CHANGED
|
@@ -22,6 +22,33 @@ interface FocusOptions {
|
|
|
22
22
|
*/
|
|
23
23
|
ignore?: string;
|
|
24
24
|
}
|
|
25
|
+
/**
|
|
26
|
+
* Checks if an element can receive focus.
|
|
27
|
+
*
|
|
28
|
+
* Elements can receive focus only if:
|
|
29
|
+
* - they exist;
|
|
30
|
+
* - they're visible;
|
|
31
|
+
* - they're not disabled;
|
|
32
|
+
* - they are a focusable tag name or have a positive tab index;
|
|
33
|
+
* - they don't have a negative tab index.
|
|
34
|
+
* @param element the element to check.
|
|
35
|
+
* @returns true if the element is focusable, false otherwise.
|
|
36
|
+
*/
|
|
37
|
+
export declare function isFocusable(element?: Element | null): boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Focus the element passed as parameter if it can receive focus. Otherwise, decides on another element to focus based on the HTML tree
|
|
40
|
+
* and accessibility attributes.
|
|
41
|
+
*
|
|
42
|
+
* Decision making:
|
|
43
|
+
* - If the element is focusable, focus it.
|
|
44
|
+
* - If the element is not focusable, check if it has an id and if another element controls it (aria-controls).
|
|
45
|
+
* - If the element is controlled by another, try to focus the controller, based in this same algorithm.
|
|
46
|
+
* - Otherwise, try to focus its parent.
|
|
47
|
+
*
|
|
48
|
+
* If no focusable element is found. Nothing happens.
|
|
49
|
+
* @param element the element to focus.
|
|
50
|
+
*/
|
|
51
|
+
export declare function focusAccessibleElement(element?: Element | null): void;
|
|
25
52
|
/**
|
|
26
53
|
* Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
|
|
27
54
|
*
|
package/dist/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAIxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAWrE;AAED,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC7E,KAAK,kBAAkB,GAAG,WAAW,GAAG,WAAW,EAAE,CAAA;AAErD,UAAU,YAAY;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAWD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,IAAI,GAAG,SAAS,EAAE,EAAE,QAAa,EAAE,MAAM,EAAE,GAAE,YAAiB,QA0B/H;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,QAKpC"}
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAIxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAWrE;AAED,KAAK,WAAW,GAAG,GAAG,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC7E,KAAK,kBAAkB,GAAG,WAAW,GAAG,WAAW,EAAE,CAAA;AAErD,UAAU,YAAY;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAWD;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,WAYnD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,QAO9D;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,GAAG,IAAI,GAAG,SAAS,EAAE,EAAE,QAAa,EAAE,MAAM,EAAE,GAAE,YAAiB,QA0B/H;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,QAKpC"}
|
package/dist/utils.js
CHANGED
|
@@ -38,6 +38,56 @@ const selectors = {
|
|
|
38
38
|
textarea: 'select:not(:disabled)',
|
|
39
39
|
other: '[tabindex]:not([tabindex="-1"])',
|
|
40
40
|
};
|
|
41
|
+
/**
|
|
42
|
+
* Checks if an element can receive focus.
|
|
43
|
+
*
|
|
44
|
+
* Elements can receive focus only if:
|
|
45
|
+
* - they exist;
|
|
46
|
+
* - they're visible;
|
|
47
|
+
* - they're not disabled;
|
|
48
|
+
* - they are a focusable tag name or have a positive tab index;
|
|
49
|
+
* - they don't have a negative tab index.
|
|
50
|
+
* @param element the element to check.
|
|
51
|
+
* @returns true if the element is focusable, false otherwise.
|
|
52
|
+
*/
|
|
53
|
+
export function isFocusable(element) {
|
|
54
|
+
if (!element)
|
|
55
|
+
return false;
|
|
56
|
+
// is disabled: return false
|
|
57
|
+
if (element.ariaDisabled || element.getAttribute('disabled') !== null)
|
|
58
|
+
return false;
|
|
59
|
+
// is invisible: return false
|
|
60
|
+
if (!element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true }))
|
|
61
|
+
return false;
|
|
62
|
+
// has tab index: return false if negative, true otherwise
|
|
63
|
+
const tabIndexStr = element.getAttribute('tabindex');
|
|
64
|
+
const tabIndex = tabIndexStr ? parseInt(tabIndexStr) : undefined;
|
|
65
|
+
if (tabIndex !== undefined)
|
|
66
|
+
return tabIndex >= 0;
|
|
67
|
+
// check the tag name
|
|
68
|
+
return ['a', 'button', 'input', 'iframe', 'select', 'textarea'].includes(element.tagName.toLowerCase() ?? '');
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Focus the element passed as parameter if it can receive focus. Otherwise, decides on another element to focus based on the HTML tree
|
|
72
|
+
* and accessibility attributes.
|
|
73
|
+
*
|
|
74
|
+
* Decision making:
|
|
75
|
+
* - If the element is focusable, focus it.
|
|
76
|
+
* - If the element is not focusable, check if it has an id and if another element controls it (aria-controls).
|
|
77
|
+
* - If the element is controlled by another, try to focus the controller, based in this same algorithm.
|
|
78
|
+
* - Otherwise, try to focus its parent.
|
|
79
|
+
*
|
|
80
|
+
* If no focusable element is found. Nothing happens.
|
|
81
|
+
* @param element the element to focus.
|
|
82
|
+
*/
|
|
83
|
+
export function focusAccessibleElement(element) {
|
|
84
|
+
let elementToFocus = element;
|
|
85
|
+
while (elementToFocus && !isFocusable(elementToFocus)) {
|
|
86
|
+
const controlledBy = elementToFocus.id ? document.querySelector(`[aria-controls=${elementToFocus.id}]`) : undefined;
|
|
87
|
+
elementToFocus = (controlledBy ?? elementToFocus.parentElement);
|
|
88
|
+
}
|
|
89
|
+
elementToFocus?.focus?.();
|
|
90
|
+
}
|
|
41
91
|
/**
|
|
42
92
|
* Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
|
|
43
93
|
*
|
package/dist/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/portal-layout",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.64",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
|
|
9
|
-
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
10
|
-
},
|
|
11
7
|
"peerDependencies": {
|
|
12
8
|
"@citric/core": ">=6.0.0",
|
|
13
9
|
"@citric/icons": ">=5.7.1",
|
|
@@ -38,5 +34,9 @@
|
|
|
38
34
|
},
|
|
39
35
|
"dependencies": {
|
|
40
36
|
"react-toastify": "^9.1.3"
|
|
37
|
+
},
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "tsc && tsc-esm-fix --target='dist' && cpy src/layout.css dist --flat",
|
|
40
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
|
41
41
|
}
|
|
42
42
|
}
|
|
@@ -8,7 +8,7 @@ import { getDictionary } from './dictionary'
|
|
|
8
8
|
import { LayoutElements, elementIds, getLayoutElements } from './elements'
|
|
9
9
|
import { ElementNotFound, LayoutError } from './errors'
|
|
10
10
|
import { showToaster as showReactToaster } from './toaster'
|
|
11
|
-
import { focusFirstChild, valueOfLayoutVar } from './utils'
|
|
11
|
+
import { focusAccessibleElement, focusFirstChild, valueOfLayoutVar } from './utils'
|
|
12
12
|
|
|
13
13
|
interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
|
|
14
14
|
showButton?: boolean,
|
|
@@ -49,6 +49,10 @@ class LayoutOverlayManager {
|
|
|
49
49
|
private setContent: OverlayContentSetter = {}
|
|
50
50
|
private elements?: LayoutElements
|
|
51
51
|
private onModalClose?: () => void
|
|
52
|
+
/**
|
|
53
|
+
* Last element with focus before an overlay is shown.
|
|
54
|
+
*/
|
|
55
|
+
private lastActiveElement: Element | null = null
|
|
52
56
|
|
|
53
57
|
private setupElements() {
|
|
54
58
|
this.elements = getLayoutElements()
|
|
@@ -102,6 +106,7 @@ class LayoutOverlayManager {
|
|
|
102
106
|
}
|
|
103
107
|
|
|
104
108
|
private showOverlay(element: HTMLElement | null | undefined, extraClasses: string[] = [], blockMainContent = true) {
|
|
109
|
+
this.lastActiveElement = document.activeElement
|
|
105
110
|
element?.classList.add('visible', ...extraClasses)
|
|
106
111
|
this.setInteractivity(element, true)
|
|
107
112
|
if (blockMainContent) this.setMainContentInteractivity(false)
|
|
@@ -207,6 +212,15 @@ class LayoutOverlayManager {
|
|
|
207
212
|
)
|
|
208
213
|
}
|
|
209
214
|
|
|
215
|
+
/**
|
|
216
|
+
* Focus the element that had focus before the last overlay was opened. If the element is not visible anymore, another one that makes
|
|
217
|
+
* sense (accessibility-wise) is focused.
|
|
218
|
+
*/
|
|
219
|
+
private focusLastActiveElement() {
|
|
220
|
+
focusAccessibleElement(this.lastActiveElement)
|
|
221
|
+
this.lastActiveElement = null
|
|
222
|
+
}
|
|
223
|
+
|
|
210
224
|
closeModal(runCloseListener = true) {
|
|
211
225
|
this.elements?.modal?.classList.remove('visible')
|
|
212
226
|
this.elements?.backdrop?.setAttribute('class', '')
|
|
@@ -226,6 +240,7 @@ class LayoutOverlayManager {
|
|
|
226
240
|
}
|
|
227
241
|
if (this.setContent.modal) this.setContent.modal(undefined)
|
|
228
242
|
this.hideOverlay(this.elements?.modal)
|
|
243
|
+
this.focusLastActiveElement()
|
|
229
244
|
},
|
|
230
245
|
animationMS,
|
|
231
246
|
)
|
|
@@ -250,6 +265,7 @@ class LayoutOverlayManager {
|
|
|
250
265
|
}
|
|
251
266
|
if (this.setContent.rightPanel) this.setContent.rightPanel(undefined)
|
|
252
267
|
this.hideOverlay(this.elements?.rightPanel)
|
|
268
|
+
this.focusLastActiveElement()
|
|
253
269
|
},
|
|
254
270
|
animationMS,
|
|
255
271
|
)
|
package/src/utils.ts
CHANGED
|
@@ -53,6 +53,54 @@ const selectors: Record<TagPriority, string> = {
|
|
|
53
53
|
other: '[tabindex]:not([tabindex="-1"])',
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
+
/**
|
|
57
|
+
* Checks if an element can receive focus.
|
|
58
|
+
*
|
|
59
|
+
* Elements can receive focus only if:
|
|
60
|
+
* - they exist;
|
|
61
|
+
* - they're visible;
|
|
62
|
+
* - they're not disabled;
|
|
63
|
+
* - they are a focusable tag name or have a positive tab index;
|
|
64
|
+
* - they don't have a negative tab index.
|
|
65
|
+
* @param element the element to check.
|
|
66
|
+
* @returns true if the element is focusable, false otherwise.
|
|
67
|
+
*/
|
|
68
|
+
export function isFocusable(element?: Element | null) {
|
|
69
|
+
if (!element) return false
|
|
70
|
+
// is disabled: return false
|
|
71
|
+
if (element.ariaDisabled || element.getAttribute('disabled') !== null) return false
|
|
72
|
+
// is invisible: return false
|
|
73
|
+
if (!element.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })) return false
|
|
74
|
+
// has tab index: return false if negative, true otherwise
|
|
75
|
+
const tabIndexStr = element.getAttribute('tabindex')
|
|
76
|
+
const tabIndex = tabIndexStr ? parseInt(tabIndexStr) : undefined
|
|
77
|
+
if (tabIndex !== undefined) return tabIndex >= 0
|
|
78
|
+
// check the tag name
|
|
79
|
+
return ['a', 'button', 'input', 'iframe', 'select', 'textarea'].includes(element.tagName.toLowerCase() ?? '')
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Focus the element passed as parameter if it can receive focus. Otherwise, decides on another element to focus based on the HTML tree
|
|
84
|
+
* and accessibility attributes.
|
|
85
|
+
*
|
|
86
|
+
* Decision making:
|
|
87
|
+
* - If the element is focusable, focus it.
|
|
88
|
+
* - If the element is not focusable, check if it has an id and if another element controls it (aria-controls).
|
|
89
|
+
* - If the element is controlled by another, try to focus the controller, based in this same algorithm.
|
|
90
|
+
* - Otherwise, try to focus its parent.
|
|
91
|
+
*
|
|
92
|
+
* If no focusable element is found. Nothing happens.
|
|
93
|
+
* @param element the element to focus.
|
|
94
|
+
*/
|
|
95
|
+
export function focusAccessibleElement(element?: Element | null) {
|
|
96
|
+
let elementToFocus = element as HTMLElement | null | undefined
|
|
97
|
+
while (elementToFocus && !isFocusable(elementToFocus)) {
|
|
98
|
+
const controlledBy = elementToFocus.id ? document.querySelector(`[aria-controls=${elementToFocus.id}]`) : undefined
|
|
99
|
+
elementToFocus = (controlledBy ?? elementToFocus.parentElement) as HTMLElement | null | undefined
|
|
100
|
+
}
|
|
101
|
+
elementToFocus?.focus?.()
|
|
102
|
+
}
|
|
103
|
+
|
|
56
104
|
/**
|
|
57
105
|
* Focus the first focusable child of the element provided. If the element has no focusable child, nothing happens.
|
|
58
106
|
*
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { NavigationProps } from './StepNavigation.js';
|
|
3
|
-
interface StepContainerProps {
|
|
4
|
-
children: ReactNode;
|
|
5
|
-
stepKey: string;
|
|
6
|
-
title: string;
|
|
7
|
-
position: PointingArrowPosition;
|
|
8
|
-
customNavigation?: Omit<NavigationProps, 'stepKey'>;
|
|
9
|
-
}
|
|
10
|
-
export declare const StepContainer: ({ title, stepKey, customNavigation, position, children }: StepContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
export type PointingArrowPosition = 'right' | 'top' | 'left' | 'bottom';
|
|
12
|
-
export {};
|
|
13
|
-
//# sourceMappingURL=StepContainer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepContainer.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepContainer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAkB,MAAM,kBAAkB,CAAA;AAIlE,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,qBAAqB,CAAC;IAChC,gBAAgB,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,aAAa,6DAA8D,kBAAkB,4CAOzG,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAA"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { theme } from '@stack-spot/portal-theme';
|
|
3
|
-
import styled from 'styled-components';
|
|
4
|
-
import { StepNavigation } from './StepNavigation.js';
|
|
5
|
-
import { StepTitle } from './StepTitle.js';
|
|
6
|
-
import { useTour } from './context.js';
|
|
7
|
-
export const StepContainer = ({ title, stepKey, customNavigation, position, children }) => {
|
|
8
|
-
const { finishStep } = useTour();
|
|
9
|
-
return _jsxs(BoxWithPointingArrow, { "$position": position, children: [_jsx(StepTitle, { title: title, onClose: () => finishStep(stepKey) }), children, _jsx(StepNavigation, { stepKey: stepKey, ...(customNavigation || {}) })] });
|
|
10
|
-
};
|
|
11
|
-
const BoxWithPointingArrow = styled.div `
|
|
12
|
-
position: relative;
|
|
13
|
-
width: 100%;
|
|
14
|
-
background-color: ${theme.color.inverse[500]};
|
|
15
|
-
&::after {
|
|
16
|
-
content: '';
|
|
17
|
-
position: absolute;
|
|
18
|
-
border-width: 10px;
|
|
19
|
-
border-style: solid;
|
|
20
|
-
border-color: transparent;
|
|
21
|
-
margin-top: -5px;
|
|
22
|
-
border-right-color: ${theme.color.inverse[500]};
|
|
23
|
-
${({ $position, $top }) => $position === 'right' ?
|
|
24
|
-
`
|
|
25
|
-
top: ${$top || '16px'};
|
|
26
|
-
left: -18px;
|
|
27
|
-
` : ''}
|
|
28
|
-
${({ $position, $right }) => $position === 'top' ?
|
|
29
|
-
`
|
|
30
|
-
bottom: 96%;
|
|
31
|
-
right: ${$right || '16px'};
|
|
32
|
-
transform: rotate(90deg);
|
|
33
|
-
` : ''}
|
|
34
|
-
${({ $position, $top }) => $position === 'left' ?
|
|
35
|
-
`
|
|
36
|
-
top: ${$top || '16px'};
|
|
37
|
-
right: -18px;
|
|
38
|
-
transform: rotate(180deg);
|
|
39
|
-
` : ''}
|
|
40
|
-
${({ $position, $right }) => $position === 'bottom' ?
|
|
41
|
-
`
|
|
42
|
-
top: -13px;
|
|
43
|
-
right: ${$right || '16px'};
|
|
44
|
-
transform: rotate(90deg);
|
|
45
|
-
` : ''}
|
|
46
|
-
}
|
|
47
|
-
`;
|
|
48
|
-
//# sourceMappingURL=StepContainer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepContainer.js","sourceRoot":"","sources":["../../../src/components/tour/StepContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAmB,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAUnC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC5G,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,EAAE,CAAA;IAChC,OAAO,MAAC,oBAAoB,iBAAY,QAAQ,aAC9C,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,GAAI,EAC9D,QAAQ,EACT,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,KAAM,CAAC,gBAAgB,IAAI,EAAE,CAAC,GAAI,IAC7C,CAAA;AACzB,CAAC,CAAA;AAID,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAInC;;;sBAGkB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;;;;0BAQpB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;MAC5C,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC;IAClD;aACS,IAAI,IAAI,MAAM;;KAEtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC;IAClD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC;IACjD;aACS,IAAI,IAAI,MAAM;;;KAGtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC;IACrD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;;CAET,CAAA"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import '@stack-spot/portal-theme/dist/theme.css';
|
|
2
|
-
type CustomNavigationButton = {
|
|
3
|
-
text: string;
|
|
4
|
-
onClick?: () => void;
|
|
5
|
-
};
|
|
6
|
-
export type NavigationProps = {
|
|
7
|
-
stepKey: string;
|
|
8
|
-
nextButton?: CustomNavigationButton;
|
|
9
|
-
prevButton?: CustomNavigationButton;
|
|
10
|
-
};
|
|
11
|
-
export declare const StepNavigation: ({ stepKey, nextButton, prevButton }: NavigationProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export {};
|
|
13
|
-
//# sourceMappingURL=StepNavigation.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAA;AAKhD,KAAK,sBAAsB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAA;AACpE,MAAM,MAAM,eAAe,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,sBAAsB,CAAC;IAAC,UAAU,CAAC,EAAE,sBAAsB,CAAA;CAAE,CAAA;AAE3H,eAAO,MAAM,cAAc,wCAAyC,eAAe,4CAsBlF,CAAA"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Button, Flex, Text } from '@citric/core';
|
|
3
|
-
import '@stack-spot/portal-theme/dist/theme.css';
|
|
4
|
-
import { useTranslate } from '@stack-spot/portal-translate';
|
|
5
|
-
import { useTour } from './context.js';
|
|
6
|
-
import { finishTourStep } from './utils.js';
|
|
7
|
-
export const StepNavigation = ({ stepKey, nextButton, prevButton }) => {
|
|
8
|
-
const { currentStep, steps, nextStep, prevStep } = useTour();
|
|
9
|
-
const t = useTranslate({ en: { of: 'of', back: 'back' }, pt: { of: 'de', back: 'voltar' } });
|
|
10
|
-
return _jsxs(Flex, { w: 12, px: 5, py: 2, mt: "-1px", bg: "inverse.500", justifyContent: "space-between", children: [_jsxs(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: [currentStep + 1, " ", t.of, " ", steps.length] }), _jsxs(Flex, { sx: { gap: '8px' }, children: [currentStep >= 1 &&
|
|
11
|
-
_jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
|
|
12
|
-
prevStep?.();
|
|
13
|
-
prevButton?.onClick?.();
|
|
14
|
-
}, size: "sm", colorScheme: "light", children: prevButton?.text || t.back }), _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
|
|
15
|
-
nextButton?.onClick?.();
|
|
16
|
-
nextStep?.();
|
|
17
|
-
finishTourStep(stepKey);
|
|
18
|
-
}, size: "sm", colorScheme: "light", children: nextButton?.text || 'ok' })] })] });
|
|
19
|
-
};
|
|
20
|
-
//# sourceMappingURL=StepNavigation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepNavigation.js","sourceRoot":"","sources":["../../../src/components/tour/StepNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAKxC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAmB,EAAE,EAAE;IACrF,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,CAAA;IAC5D,MAAM,CAAC,GAAG,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;IAC5F,OAAO,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,aAAa,EAAC,cAAc,EAAC,eAAe,aACzF,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,sBAAsB,aAAE,WAAW,GAAG,CAAC,OAAG,CAAC,CAAC,EAAE,OAAG,KAAK,CAAC,MAAM,IAAQ,EAC/G,MAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,aACrB,WAAW,IAAI,CAAC;wBACf,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;gCACnD,QAAQ,EAAE,EAAE,CAAA;gCACZ,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,CAAC,CAAC,IAAI,GACpB,EACX,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;4BACnD,UAAU,EAAE,OAAO,EAAE,EAAE,CAAA;4BACvB,QAAQ,EAAE,EAAE,CAAA;4BACZ,cAAc,CAAC,OAAO,CAAC,CAAA;wBACzB,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,OAAO,YAC7B,UAAU,EAAE,IAAI,IAAI,IAAI,GAClB,IACJ,IACF,CAAA;AACT,CAAC,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepTitle.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepTitle.tsx"],"names":[],"mappings":"AAGA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA;AAED,eAAO,MAAM,SAAS,uBAAwB,cAAc,4CAQnD,CAAA"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Button, Flex, IconBox, Text } from '@citric/core';
|
|
3
|
-
import { TimesMini } from '@citric/icons';
|
|
4
|
-
export const StepTitle = ({ title, onClose }) => _jsxs(Flex, { w: 12, pl: 5, py: 3, flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Text, { appearance: "body2", colorScheme: "inverse.contrastText", weight: "medium", children: [" ", title, " "] }), _jsx(Button, { appearance: "text", size: "sm", onClick: () => onClose?.(), sx: { ':hover': { borderColor: 'transparent !important' } }, children: _jsx(IconBox, { size: "xs", colorIcon: "inverse.contrastText", children: _jsx(TimesMini, {}) }) })] });
|
|
5
|
-
//# sourceMappingURL=StepTitle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StepTitle.js","sourceRoot":"","sources":["../../../src/components/tour/StepTitle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAOzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAkB,EAAE,EAAE,CAC9D,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC7F,MAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,kBAAG,KAAK,SAAS,EAC5F,KAAC,MAAM,IAAC,UAAU,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,wBAAwB,EAAE,EAAE,YACzH,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,YACjD,KAAC,SAAS,KAAG,GACL,GACH,IACJ,CAAA"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { ReactourProps } from 'reactour';
|
|
3
|
-
type TourConfig = Omit<ReactourProps, 'children'>;
|
|
4
|
-
export declare const defaultTourConfig: TourConfig;
|
|
5
|
-
export declare const TourProvider: ({ config, children }: {
|
|
6
|
-
config: TourConfig;
|
|
7
|
-
children: ReactNode;
|
|
8
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export declare const useTour: () => {
|
|
10
|
-
currentStep: number;
|
|
11
|
-
nextStep: (() => void) | undefined;
|
|
12
|
-
prevStep: (() => void) | undefined;
|
|
13
|
-
steps: import("reactour").ReactourStep[];
|
|
14
|
-
finishStep: (stepKey: string) => void;
|
|
15
|
-
};
|
|
16
|
-
export {};
|
|
17
|
-
//# sourceMappingURL=context.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/tour/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuC,MAAM,OAAO,CAAA;AACtE,OAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAG9C,KAAK,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;AAEjD,eAAO,MAAM,iBAAiB,EAAE,UAU9B,CAAA;AAOF,eAAO,MAAM,YAAY;YAAoC,UAAU;cAAY,SAAS;6CAkB3F,CAAA;AAED,eAAO,MAAM,OAAO;;;;;0BAOM,MAAM;CAK/B,CAAA"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, useContext, useState } from 'react';
|
|
3
|
-
import Tour from 'reactour';
|
|
4
|
-
import { finishTourStep } from './utils.js';
|
|
5
|
-
export const defaultTourConfig = Object.freeze({
|
|
6
|
-
steps: [],
|
|
7
|
-
isOpen: true,
|
|
8
|
-
onRequestClose: () => '',
|
|
9
|
-
showButtons: false,
|
|
10
|
-
showNavigation: false,
|
|
11
|
-
showNavigationNumber: false,
|
|
12
|
-
showNumber: false,
|
|
13
|
-
showCloseButton: false,
|
|
14
|
-
disableFocusLock: true,
|
|
15
|
-
});
|
|
16
|
-
const TourContext = createContext({
|
|
17
|
-
tourConfig: defaultTourConfig,
|
|
18
|
-
currentStep: 0,
|
|
19
|
-
});
|
|
20
|
-
export const TourProvider = ({ config, children }) => {
|
|
21
|
-
const [currentStep, setCurrentStep] = useState(0);
|
|
22
|
-
const tourConfig = {
|
|
23
|
-
...config,
|
|
24
|
-
goToStep: currentStep,
|
|
25
|
-
update: `${currentStep}`,
|
|
26
|
-
nextStep: () => setCurrentStep(currentStep + 1),
|
|
27
|
-
prevStep: () => setCurrentStep(currentStep - 1),
|
|
28
|
-
isOpen: !!config.steps.length && (currentStep < config.steps.length),
|
|
29
|
-
};
|
|
30
|
-
return _jsxs(TourContext.Provider, { value: {
|
|
31
|
-
currentStep,
|
|
32
|
-
tourConfig,
|
|
33
|
-
}, children: [_jsx(Tour, { ...tourConfig }), children] });
|
|
34
|
-
};
|
|
35
|
-
export const useTour = () => {
|
|
36
|
-
const { currentStep, tourConfig: { nextStep, prevStep, steps } } = useContext(TourContext);
|
|
37
|
-
return {
|
|
38
|
-
currentStep,
|
|
39
|
-
nextStep,
|
|
40
|
-
prevStep,
|
|
41
|
-
steps,
|
|
42
|
-
finishStep: (stepKey) => {
|
|
43
|
-
finishTourStep(stepKey);
|
|
44
|
-
nextStep?.();
|
|
45
|
-
},
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
//# sourceMappingURL=context.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/tour/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtE,OAAO,IAAuB,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAIxC,MAAM,CAAC,MAAM,iBAAiB,GAAe,MAAM,CAAC,MAAM,CAAC;IACzD,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,IAAI;IACZ,cAAc,EAAE,GAAG,EAAE,CAAC,EAAE;IACxB,WAAW,EAAE,KAAK;IAClB,cAAc,EAAE,KAAK;IACrB,oBAAoB,EAAE,KAAK;IAC3B,UAAU,EAAE,KAAK;IACjB,eAAe,EAAE,KAAK;IACtB,gBAAgB,EAAE,IAAI;CACvB,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,aAAa,CAAkD;IACjF,UAAU,EAAE,iBAAiB;IAC7B,WAAW,EAAE,CAAC;CACf,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAA+C,EAAE,EAAE;IAChG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IACzD,MAAM,UAAU,GAAe;QAC7B,GAAG,MAAM;QACT,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,GAAG,WAAW,EAAE;QACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC;QAC/C,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC;QAC/C,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;KACrE,CAAA;IAED,OAAO,MAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE;YAClC,WAAW;YACX,UAAU;SACX,aACC,KAAC,IAAI,OAAK,UAAU,GAAI,EACvB,QAAQ,IACY,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAC1F,OAAO;QACL,WAAW;QACX,QAAQ;QACR,QAAQ;QACR,KAAK;QACL,UAAU,EAAE,CAAC,OAAe,EAAE,EAAE;YAC9B,cAAc,CAAC,OAAO,CAAC,CAAA;YACvB,QAAQ,EAAE,EAAE,CAAA;QACd,CAAC;KACF,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tour/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tour/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA"}
|