@stack-spot/portal-components 1.0.1 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/components/SelectionList.d.ts +8 -0
- package/dist/components/SelectionList.d.ts.map +1 -1
- package/dist/components/SelectionList.js +8 -7
- package/dist/components/SelectionList.js.map +1 -1
- package/dist/components/Tour/StepNavigation.d.ts.map +1 -1
- package/dist/components/Tour/StepNavigation.js +18 -4
- package/dist/components/Tour/StepNavigation.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -2
- package/src/components/SelectionList.tsx +18 -6
- package/src/components/Tour/StepNavigation.tsx +20 -4
- package/src/index.ts +1 -3
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## [1.1.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v1.1.0...portal-components@v1.1.1) (2024-06-06)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* Improve tour navigation texts and layout ([2c3ce04](https://github.com/stack-spot/portal-commons/commit/2c3ce0448fa998d3a2859d4df8d98d40278e5cdb))
|
|
9
|
+
|
|
10
|
+
## [1.1.0](https://github.com/stack-spot/portal-commons/compare/portal-components-v1.0.1...portal-components@v1.1.0) (2024-06-05)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* Add singleton for handling user menu outside of the component ([6720095](https://github.com/stack-spot/portal-commons/commit/67200959d763eaa6f73fc2eb40b84949dd1194eb))
|
|
16
|
+
* update component and layout ([0d72e00](https://github.com/stack-spot/portal-commons/commit/0d72e00968cf3b3cbb196dec66eedc42c75aacbf))
|
|
17
|
+
* update components and layout ([b82260f](https://github.com/stack-spot/portal-commons/commit/b82260f701d7f0115d9fcda8fec4e310cbc42998))
|
|
18
|
+
* update components and layout ([c1ba398](https://github.com/stack-spot/portal-commons/commit/c1ba398fdfc51aac0b0d8b1b7d5258c6ae857e51))
|
|
@@ -47,6 +47,10 @@ export interface ListAction extends ItemWithIcon, Action {
|
|
|
47
47
|
* Icon to render when this option is active.
|
|
48
48
|
*/
|
|
49
49
|
iconActive?: React.ReactElement;
|
|
50
|
+
/**
|
|
51
|
+
* A class to be added to this item.
|
|
52
|
+
*/
|
|
53
|
+
className?: string;
|
|
50
54
|
}
|
|
51
55
|
interface ListGroup {
|
|
52
56
|
/**
|
|
@@ -57,6 +61,10 @@ interface ListGroup {
|
|
|
57
61
|
* The items of this group.
|
|
58
62
|
*/
|
|
59
63
|
children: ListItem[];
|
|
64
|
+
/**
|
|
65
|
+
* A class to be added to this item.
|
|
66
|
+
*/
|
|
67
|
+
className?: string;
|
|
60
68
|
}
|
|
61
69
|
interface ListSection extends ListGroup {
|
|
62
70
|
type: 'section';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAA;AAK/E,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;CAClE;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAA;AAK/E,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;CAClE;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,SAAS;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACpB;;MAEE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA2HD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,wFAEvB,kBAAkB,4CAsFpB,CAAA"}
|
|
@@ -64,24 +64,24 @@ const SelectionBox = styled.div `
|
|
|
64
64
|
transition: ${MAX_HEIGHT_TRANSITION};
|
|
65
65
|
}
|
|
66
66
|
`;
|
|
67
|
-
function renderAction({ label, href, onClick, icon, iconRight, active, target, iconActive = _jsx(Check, {}), }, { onClose, Link }) {
|
|
67
|
+
function renderAction({ label, href, onClick, icon, iconRight, active, target, iconActive = _jsx(Check, {}), className = '', }, { onClose, Link }) {
|
|
68
68
|
function handleClick() {
|
|
69
69
|
onClick?.();
|
|
70
70
|
onClose?.();
|
|
71
71
|
}
|
|
72
72
|
const isTextLabel = typeof label === 'string';
|
|
73
|
-
return (_jsx("li", { className: "action", children: _jsxs(Link, { href: href, onClick: handleClick, target: target, tabIndex: 0, "aria-selected": active, children: [icon && _jsx(IconBox, { children: icon }), isTextLabel ? _jsx(Text, { appearance: "body2", className: "label", children: label }) : label.element, iconRight && _jsx(IconBox, { children: iconRight }), active && _jsx(IconBox, { children: iconActive })] }) }, isTextLabel ? label : label.id));
|
|
73
|
+
return (_jsx("li", { className: "action", children: _jsxs(Link, { href: href, onClick: handleClick, target: target, tabIndex: 0, "aria-selected": active, className: className, children: [icon && _jsx(IconBox, { children: icon }), isTextLabel ? _jsx(Text, { appearance: "body2", className: "label", children: label }) : label.element, iconRight && _jsx(IconBox, { children: iconRight }), active && _jsx(IconBox, { children: iconActive })] }) }, isTextLabel ? label : label.id));
|
|
74
74
|
}
|
|
75
|
-
function renderCollapsible({ label, icon, iconRight, children }, { setCurrent, controllerId, Link }) {
|
|
75
|
+
function renderCollapsible({ label, icon, iconRight, className = '', children }, { setCurrent, controllerId, Link }) {
|
|
76
76
|
function handleClick(ev) {
|
|
77
77
|
// accessibility: this will tell the screen reader the section was expanded before this link is removed from the DOM.
|
|
78
78
|
ev.target?.setAttribute?.('aria-expanded', 'true');
|
|
79
79
|
setCurrent({ items: children, label });
|
|
80
80
|
}
|
|
81
|
-
return (_jsx("li", { className: "collapsible", children: _jsxs(Link, { onClick: handleClick, tabIndex: 0, "aria-expanded": false, "aria-controls": controllerId, children: [icon && _jsx(IconBox, { children: icon }), _jsx(Text, { appearance: "body2", className: "label", children: label }), iconRight && _jsx(IconBox, { children: iconRight }), _jsx(IconBox, { children: _jsx(ChevronRight, {}) })] }) }, label));
|
|
81
|
+
return (_jsx("li", { className: "collapsible", children: _jsxs(Link, { onClick: handleClick, tabIndex: 0, className: className, "aria-expanded": false, "aria-controls": controllerId, children: [icon && _jsx(IconBox, { children: icon }), _jsx(Text, { appearance: "body2", className: "label", children: label }), iconRight && _jsx(IconBox, { children: iconRight }), _jsx(IconBox, { children: _jsx(ChevronRight, {}) })] }) }, label));
|
|
82
82
|
}
|
|
83
|
-
function renderSection({ label, children }, options) {
|
|
84
|
-
return (_jsxs("li", { className:
|
|
83
|
+
function renderSection({ label, className = '', children }, options) {
|
|
84
|
+
return (_jsxs("li", { className: `${className} section`, children: [label && _jsx(Text, { appearance: "overheader2", colorScheme: "primary", className: "section-title", children: label }), _jsx("ul", { children: children.map(i => renderItem(i, options)) })] }, label ?? children.map(c => c.label).join('-')));
|
|
85
85
|
}
|
|
86
86
|
function renderItem(item, options) {
|
|
87
87
|
if ('children' in item) {
|
|
@@ -114,7 +114,8 @@ export const SelectionList = ({ id, items, className, style, visible = true, max
|
|
|
114
114
|
// if the element is not in the DOM anymore, we'll consider the click was inside the selection list
|
|
115
115
|
const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target);
|
|
116
116
|
const isAction = target?.classList?.contains('action') || !!target?.closest('.action');
|
|
117
|
-
|
|
117
|
+
const isInsideTour = !!target?.closest('#___reactour');
|
|
118
|
+
if (!isInsideTour && (!isClickInsideSelectionList || isAction))
|
|
118
119
|
onHide?.();
|
|
119
120
|
}, []);
|
|
120
121
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAmB,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/Tour/StepNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAA;AAKhD,UAAU,sBAAsB;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,wCAAyC,eAAe,
|
|
1
|
+
{"version":3,"file":"StepNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/Tour/StepNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,yCAAyC,CAAA;AAKhD,UAAU,sBAAsB;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,wCAAyC,eAAe,4CAuBlF,CAAA"}
|
|
@@ -10,15 +10,29 @@ import { finishTourStep } from './utils.js';
|
|
|
10
10
|
*/
|
|
11
11
|
export const StepNavigation = ({ stepKey, nextButton, prevButton }) => {
|
|
12
12
|
const { currentStep, steps, nextStep, prevStep } = useTour();
|
|
13
|
-
const t = useTranslate(
|
|
14
|
-
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 &&
|
|
13
|
+
const t = useTranslate(translations);
|
|
14
|
+
return _jsxs(Flex, { w: 12, px: 5, py: 2, mt: "-1px", bg: "inverse.500", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Text, { appearance: "microtext1", colorScheme: "inverse.contrastText", children: [currentStep + 1, " ", t.of, " ", steps.length] }), _jsxs(Flex, { sx: { gap: '8px' }, children: [currentStep >= 1 &&
|
|
15
15
|
_jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
|
|
16
16
|
prevStep?.();
|
|
17
17
|
prevButton?.onClick?.();
|
|
18
|
-
}, size: "sm", colorScheme: "light", children: prevButton?.text || t.back }), _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
|
|
18
|
+
}, size: "sm", appearance: "text", colorScheme: "light", children: prevButton?.text || t.back }), _jsx(Button, { sx: { paddingInline: '20px' }, onClick: () => {
|
|
19
19
|
nextButton?.onClick?.();
|
|
20
20
|
nextStep?.();
|
|
21
21
|
finishTourStep(stepKey);
|
|
22
|
-
}, size: "sm", colorScheme: "light", children: nextButton?.text ||
|
|
22
|
+
}, size: "sm", colorScheme: "light", children: nextButton?.text || (currentStep < steps.length - 1 ? t.next : t.done) })] })] });
|
|
23
|
+
};
|
|
24
|
+
const translations = {
|
|
25
|
+
en: {
|
|
26
|
+
of: 'of',
|
|
27
|
+
back: 'Back',
|
|
28
|
+
next: 'Next',
|
|
29
|
+
done: 'Done',
|
|
30
|
+
},
|
|
31
|
+
pt: {
|
|
32
|
+
of: 'de',
|
|
33
|
+
back: 'Voltar',
|
|
34
|
+
next: 'Próximo',
|
|
35
|
+
done: 'Finalizado',
|
|
36
|
+
},
|
|
23
37
|
};
|
|
24
38
|
//# sourceMappingURL=StepNavigation.js.map
|
|
@@ -1 +1 @@
|
|
|
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;AAyBxC;;;GAGG;AACH,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,
|
|
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;AAyBxC;;;GAGG;AACH,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,YAAY,CAAC,CAAA;IAEpC,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,EAAC,UAAU,EAAC,QAAQ,aAC7G,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,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,OAAO,YAC/C,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,CAAC,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAChE,IACJ,IACF,CAAA;AACT,CAAC,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE;QACF,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,YAAY;KACnB;CACF,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { BannerWarning } from './components/BannerWarning.js';
|
|
2
2
|
export { ChatBot } from './components/ChatBot.js';
|
|
3
3
|
export { useKeyboardControls } from './hooks/keyboard.js';
|
|
4
|
-
export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect
|
|
4
|
+
export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect } from './hooks/service-now.js';
|
|
5
5
|
export { useCheckTextOverflow } from './hooks/text.js';
|
|
6
6
|
export { titleEffect, useTitleEffect } from './hooks/title.js';
|
|
7
7
|
export { useEffectOnce } from './hooks/use-effect-once.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { BannerWarning } from './components/BannerWarning.js';
|
|
2
2
|
export { ChatBot } from './components/ChatBot.js';
|
|
3
3
|
export { useKeyboardControls } from './hooks/keyboard.js';
|
|
4
|
-
export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect
|
|
4
|
+
export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect } from './hooks/service-now.js';
|
|
5
5
|
export { useCheckTextOverflow } from './hooks/text.js';
|
|
6
6
|
export { titleEffect, useTitleEffect } from './hooks/title.js';
|
|
7
7
|
export { useEffectOnce } from './hooks/use-effect-once.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/portal-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -46,7 +46,9 @@
|
|
|
46
46
|
"rimraf": "^5.0.7",
|
|
47
47
|
"styled-components": "6.1.10",
|
|
48
48
|
"tsc-esm-fix": "^2.20.26",
|
|
49
|
-
"typescript": "^5.2.2"
|
|
49
|
+
"typescript": "^5.2.2",
|
|
50
|
+
"react": "18.2.0",
|
|
51
|
+
"react-dom": "18.2.0"
|
|
50
52
|
},
|
|
51
53
|
"dependencies": {
|
|
52
54
|
"lodash": "^4.17.21",
|
|
@@ -58,6 +58,10 @@ export interface ListAction extends ItemWithIcon, Action {
|
|
|
58
58
|
* Icon to render when this option is active.
|
|
59
59
|
*/
|
|
60
60
|
iconActive?: React.ReactElement,
|
|
61
|
+
/**
|
|
62
|
+
* A class to be added to this item.
|
|
63
|
+
*/
|
|
64
|
+
className?: string,
|
|
61
65
|
}
|
|
62
66
|
|
|
63
67
|
interface ListGroup {
|
|
@@ -69,6 +73,10 @@ interface ListGroup {
|
|
|
69
73
|
* The items of this group.
|
|
70
74
|
*/
|
|
71
75
|
children: ListItem[],
|
|
76
|
+
/**
|
|
77
|
+
* A class to be added to this item.
|
|
78
|
+
*/
|
|
79
|
+
className?: string,
|
|
72
80
|
}
|
|
73
81
|
|
|
74
82
|
interface ListSection extends ListGroup {
|
|
@@ -199,6 +207,7 @@ const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
|
|
|
199
207
|
|
|
200
208
|
function renderAction({
|
|
201
209
|
label, href, onClick, icon, iconRight, active, target, iconActive = <Check />,
|
|
210
|
+
className='',
|
|
202
211
|
}: ListAction, { onClose, Link }: RenderOptions) {
|
|
203
212
|
function handleClick() {
|
|
204
213
|
onClick?.()
|
|
@@ -209,7 +218,8 @@ function renderAction({
|
|
|
209
218
|
|
|
210
219
|
return (
|
|
211
220
|
<li key={isTextLabel ? label : label.id} className="action">
|
|
212
|
-
<Link href={href} onClick={handleClick} target={target} tabIndex={0} aria-selected={active}
|
|
221
|
+
<Link href={href} onClick={handleClick} target={target} tabIndex={0} aria-selected={active}
|
|
222
|
+
className={className}>
|
|
213
223
|
{icon && <IconBox>{icon}</IconBox>}
|
|
214
224
|
{isTextLabel ? <Text appearance="body2" className="label">{label}</Text> : label.element}
|
|
215
225
|
{iconRight && <IconBox>{iconRight}</IconBox>}
|
|
@@ -219,7 +229,8 @@ function renderAction({
|
|
|
219
229
|
)
|
|
220
230
|
}
|
|
221
231
|
|
|
222
|
-
function renderCollapsible({ label, icon, iconRight,
|
|
232
|
+
function renderCollapsible({ label, icon, iconRight, className='', children }:
|
|
233
|
+
ListCollapsible, { setCurrent, controllerId, Link }: RenderOptions) {
|
|
223
234
|
function handleClick(ev: React.MouseEvent) {
|
|
224
235
|
// accessibility: this will tell the screen reader the section was expanded before this link is removed from the DOM.
|
|
225
236
|
(ev.target as HTMLElement)?.setAttribute?.('aria-expanded', 'true')
|
|
@@ -227,7 +238,7 @@ function renderCollapsible({ label, icon, iconRight, children }: ListCollapsible
|
|
|
227
238
|
}
|
|
228
239
|
return (
|
|
229
240
|
<li key={label} className="collapsible">
|
|
230
|
-
<Link onClick={handleClick} tabIndex={0} aria-expanded={false} aria-controls={controllerId}>
|
|
241
|
+
<Link onClick={handleClick} tabIndex={0} className={className} aria-expanded={false} aria-controls={controllerId}>
|
|
231
242
|
{icon && <IconBox>{icon}</IconBox>}
|
|
232
243
|
<Text appearance="body2" className="label">{label}</Text>
|
|
233
244
|
{iconRight && <IconBox>{iconRight}</IconBox>}
|
|
@@ -237,9 +248,9 @@ function renderCollapsible({ label, icon, iconRight, children }: ListCollapsible
|
|
|
237
248
|
)
|
|
238
249
|
}
|
|
239
250
|
|
|
240
|
-
function renderSection({ label, children }: ListSection, options: RenderOptions) {
|
|
251
|
+
function renderSection({ label, className = '', children }: ListSection, options: RenderOptions) {
|
|
241
252
|
return (
|
|
242
|
-
<li key={label ?? children.map(c => c.label).join('-')} className=
|
|
253
|
+
<li key={label ?? children.map(c => c.label).join('-')} className={`${className} section`}>
|
|
243
254
|
{label && <Text appearance="overheader2" colorScheme="primary" className="section-title">{label}</Text>}
|
|
244
255
|
<ul>{children.map(i => renderItem(i, options))}</ul>
|
|
245
256
|
</li>
|
|
@@ -290,7 +301,8 @@ export const SelectionList = ({
|
|
|
290
301
|
// if the element is not in the DOM anymore, we'll consider the click was inside the selection list
|
|
291
302
|
const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
|
|
292
303
|
const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
|
|
293
|
-
|
|
304
|
+
const isInsideTour = !!target?.closest('#___reactour')
|
|
305
|
+
if (!isInsideTour && (!isClickInsideSelectionList || isAction)) onHide?.()
|
|
294
306
|
}, [])
|
|
295
307
|
|
|
296
308
|
useEffect(() => {
|
|
@@ -33,15 +33,16 @@ export interface NavigationProps {
|
|
|
33
33
|
*/
|
|
34
34
|
export const StepNavigation = ({ stepKey, nextButton, prevButton }: NavigationProps) => {
|
|
35
35
|
const { currentStep, steps, nextStep, prevStep } = useTour()
|
|
36
|
-
const t = useTranslate(
|
|
37
|
-
|
|
36
|
+
const t = useTranslate(translations)
|
|
37
|
+
|
|
38
|
+
return <Flex w={12} px={5} py={2} mt="-1px" bg="inverse.500" justifyContent="space-between" alignItems="center">
|
|
38
39
|
<Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
|
|
39
40
|
<Flex sx={{ gap: '8px' }}>
|
|
40
41
|
{currentStep >= 1 &&
|
|
41
42
|
<Button sx={{ paddingInline: '20px' }} onClick={() => {
|
|
42
43
|
prevStep?.()
|
|
43
44
|
prevButton?.onClick?.()
|
|
44
|
-
}} size="sm" colorScheme="light">
|
|
45
|
+
}} size="sm" appearance="text" colorScheme="light">
|
|
45
46
|
{prevButton?.text || t.back}
|
|
46
47
|
</Button>}
|
|
47
48
|
<Button sx={{ paddingInline: '20px' }} onClick={() => {
|
|
@@ -49,8 +50,23 @@ export const StepNavigation = ({ stepKey, nextButton, prevButton }: NavigationPr
|
|
|
49
50
|
nextStep?.()
|
|
50
51
|
finishTourStep(stepKey)
|
|
51
52
|
}} size="sm" colorScheme="light">
|
|
52
|
-
{nextButton?.text ||
|
|
53
|
+
{nextButton?.text || (currentStep < steps.length - 1 ? t.next : t.done)}
|
|
53
54
|
</Button>
|
|
54
55
|
</Flex>
|
|
55
56
|
</Flex>
|
|
56
57
|
}
|
|
58
|
+
|
|
59
|
+
const translations = {
|
|
60
|
+
en: {
|
|
61
|
+
of: 'of',
|
|
62
|
+
back: 'Back',
|
|
63
|
+
next: 'Next',
|
|
64
|
+
done: 'Done',
|
|
65
|
+
},
|
|
66
|
+
pt: {
|
|
67
|
+
of: 'de',
|
|
68
|
+
back: 'Voltar',
|
|
69
|
+
next: 'Próximo',
|
|
70
|
+
done: 'Finalizado',
|
|
71
|
+
},
|
|
72
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
export { BannerWarning } from './components/BannerWarning'
|
|
2
2
|
export { ChatBot } from './components/ChatBot'
|
|
3
3
|
export { useKeyboardControls } from './hooks/keyboard'
|
|
4
|
-
export {
|
|
5
|
-
openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect,
|
|
6
|
-
} from './hooks/service-now'
|
|
4
|
+
export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect } from './hooks/service-now'
|
|
7
5
|
export { useCheckTextOverflow } from './hooks/text'
|
|
8
6
|
export { titleEffect, useTitleEffect } from './hooks/title'
|
|
9
7
|
export { useEffectOnce } from './hooks/use-effect-once'
|