no-frills-ui 0.0.14-alpha.4 → 0.0.14-alpha.5
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/index.js +1335 -493
- package/dist/index.js.map +1 -1
- package/lib-esm/components/Accordion/AccordionStep.d.ts.map +1 -1
- package/lib-esm/components/Accordion/AccordionStep.js +11 -29
- package/lib-esm/components/Accordion/AccordionStep.js.map +1 -1
- package/lib-esm/components/Badge/Badge.js +7 -7
- package/lib-esm/components/Badge/Badge.js.map +1 -1
- package/lib-esm/components/Button/ActionButton.d.ts.map +1 -1
- package/lib-esm/components/Button/ActionButton.js +12 -11
- package/lib-esm/components/Button/ActionButton.js.map +1 -1
- package/lib-esm/components/Button/Button.d.ts.map +1 -1
- package/lib-esm/components/Button/Button.js +14 -13
- package/lib-esm/components/Button/Button.js.map +1 -1
- package/lib-esm/components/Button/IconButton.d.ts.map +1 -1
- package/lib-esm/components/Button/IconButton.js +15 -14
- package/lib-esm/components/Button/IconButton.js.map +1 -1
- package/lib-esm/components/Button/LinkButton.d.ts.map +1 -1
- package/lib-esm/components/Button/LinkButton.js +7 -6
- package/lib-esm/components/Button/LinkButton.js.map +1 -1
- package/lib-esm/components/Button/RaisedButton.d.ts.map +1 -1
- package/lib-esm/components/Button/RaisedButton.js +15 -14
- package/lib-esm/components/Button/RaisedButton.js.map +1 -1
- package/lib-esm/components/Card/Card.d.ts.map +1 -1
- package/lib-esm/components/Card/Card.js +4 -4
- package/lib-esm/components/Card/Card.js.map +1 -1
- package/lib-esm/components/Chip/Chip.js +8 -8
- package/lib-esm/components/Chip/Chip.js.map +1 -1
- package/lib-esm/components/ChipInput/ChipInput.js +20 -20
- package/lib-esm/components/ChipInput/ChipInput.js.map +1 -1
- package/lib-esm/components/Dialog/AlertDialog.d.ts.map +1 -1
- package/lib-esm/components/Dialog/AlertDialog.js +4 -1
- package/lib-esm/components/Dialog/AlertDialog.js.map +1 -1
- package/lib-esm/components/Dialog/Dialog.d.ts +26 -1
- package/lib-esm/components/Dialog/Dialog.d.ts.map +1 -1
- package/lib-esm/components/Dialog/Dialog.js +84 -1
- package/lib-esm/components/Dialog/Dialog.js.map +1 -1
- package/lib-esm/components/DragAndDrop/DragItem.js +8 -8
- package/lib-esm/components/DragAndDrop/DragItem.js.map +1 -1
- package/lib-esm/components/Drawer/Drawer.d.ts +76 -1
- package/lib-esm/components/Drawer/Drawer.d.ts.map +1 -1
- package/lib-esm/components/Drawer/Drawer.js +158 -24
- package/lib-esm/components/Drawer/Drawer.js.map +1 -1
- package/lib-esm/components/Groups/Group.d.ts.map +1 -1
- package/lib-esm/components/Groups/Group.js +10 -8
- package/lib-esm/components/Groups/Group.js.map +1 -1
- package/lib-esm/components/Groups/GroupLabel.d.ts.map +1 -1
- package/lib-esm/components/Groups/GroupLabel.js +3 -3
- package/lib-esm/components/Groups/GroupLabel.js.map +1 -1
- package/lib-esm/components/Input/Checkbox.d.ts.map +1 -1
- package/lib-esm/components/Input/Checkbox.js +63 -58
- package/lib-esm/components/Input/Checkbox.js.map +1 -1
- package/lib-esm/components/Input/Dropdown.d.ts +8 -0
- package/lib-esm/components/Input/Dropdown.d.ts.map +1 -1
- package/lib-esm/components/Input/Dropdown.js +54 -31
- package/lib-esm/components/Input/Dropdown.js.map +1 -1
- package/lib-esm/components/Input/Input.d.ts.map +1 -1
- package/lib-esm/components/Input/Input.js +27 -21
- package/lib-esm/components/Input/Input.js.map +1 -1
- package/lib-esm/components/Input/Radio.d.ts.map +1 -1
- package/lib-esm/components/Input/Radio.js +58 -42
- package/lib-esm/components/Input/Radio.js.map +1 -1
- package/lib-esm/components/Input/RadioButton.d.ts.map +1 -1
- package/lib-esm/components/Input/RadioButton.js +12 -12
- package/lib-esm/components/Input/RadioButton.js.map +1 -1
- package/lib-esm/components/Input/Select.d.ts.map +1 -1
- package/lib-esm/components/Input/Select.js +27 -21
- package/lib-esm/components/Input/Select.js.map +1 -1
- package/lib-esm/components/Input/TextArea.d.ts.map +1 -1
- package/lib-esm/components/Input/TextArea.js +27 -21
- package/lib-esm/components/Input/TextArea.js.map +1 -1
- package/lib-esm/components/Input/Toggle.d.ts.map +1 -1
- package/lib-esm/components/Input/Toggle.js +17 -14
- package/lib-esm/components/Input/Toggle.js.map +1 -1
- package/lib-esm/components/Menu/Menu.d.ts +13 -1
- package/lib-esm/components/Menu/Menu.d.ts.map +1 -1
- package/lib-esm/components/Menu/Menu.js +98 -3
- package/lib-esm/components/Menu/Menu.js.map +1 -1
- package/lib-esm/components/Menu/MenuItem.d.ts +6 -3
- package/lib-esm/components/Menu/MenuItem.d.ts.map +1 -1
- package/lib-esm/components/Menu/MenuItem.js +10 -10
- package/lib-esm/components/Menu/MenuItem.js.map +1 -1
- package/lib-esm/components/Modal/Modal.d.ts +70 -1
- package/lib-esm/components/Modal/Modal.d.ts.map +1 -1
- package/lib-esm/components/Modal/Modal.js +145 -11
- package/lib-esm/components/Modal/Modal.js.map +1 -1
- package/lib-esm/components/Notification/Notification.d.ts +3 -1
- package/lib-esm/components/Notification/Notification.d.ts.map +1 -1
- package/lib-esm/components/Notification/Notification.js +4 -2
- package/lib-esm/components/Notification/Notification.js.map +1 -1
- package/lib-esm/components/Notification/NotificationManager.d.ts +11 -1
- package/lib-esm/components/Notification/NotificationManager.d.ts.map +1 -1
- package/lib-esm/components/Notification/NotificationManager.js +43 -8
- package/lib-esm/components/Notification/NotificationManager.js.map +1 -1
- package/lib-esm/components/Notification/style.d.ts +4 -0
- package/lib-esm/components/Notification/style.d.ts.map +1 -1
- package/lib-esm/components/Notification/style.js +30 -15
- package/lib-esm/components/Notification/style.js.map +1 -1
- package/lib-esm/components/Notification/types.d.ts +2 -0
- package/lib-esm/components/Notification/types.d.ts.map +1 -1
- package/lib-esm/components/Notification/types.js.map +1 -1
- package/lib-esm/components/Popover/Popover.d.ts.map +1 -1
- package/lib-esm/components/Popover/Popover.js +17 -2
- package/lib-esm/components/Popover/Popover.js.map +1 -1
- package/lib-esm/components/Spinner/Spinner.d.ts +3 -0
- package/lib-esm/components/Spinner/Spinner.d.ts.map +1 -1
- package/lib-esm/components/Spinner/Spinner.js +19 -4
- package/lib-esm/components/Spinner/Spinner.js.map +1 -1
- package/lib-esm/components/Stepper/Stepper.d.ts.map +1 -1
- package/lib-esm/components/Stepper/Stepper.js +29 -10
- package/lib-esm/components/Stepper/Stepper.js.map +1 -1
- package/lib-esm/components/Tabs/Tabs.d.ts.map +1 -1
- package/lib-esm/components/Tabs/Tabs.js +45 -12
- package/lib-esm/components/Tabs/Tabs.js.map +1 -1
- package/lib-esm/components/Toast/Toast.d.ts +25 -4
- package/lib-esm/components/Toast/Toast.d.ts.map +1 -1
- package/lib-esm/components/Toast/Toast.js +114 -18
- package/lib-esm/components/Toast/Toast.js.map +1 -1
- package/lib-esm/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/lib-esm/components/Tooltip/Tooltip.js +16 -5
- package/lib-esm/components/Tooltip/Tooltip.js.map +1 -1
- package/lib-esm/shared/LayerManager.d.ts.map +1 -1
- package/lib-esm/shared/LayerManager.js +63 -1
- package/lib-esm/shared/LayerManager.js.map +1 -1
- package/lib-esm/shared/constants.d.ts +58 -27
- package/lib-esm/shared/constants.d.ts.map +1 -1
- package/lib-esm/shared/constants.js +88 -25
- package/lib-esm/shared/constants.js.map +1 -1
- package/lib-esm/shared/styles.d.ts +1 -1
- package/lib-esm/shared/styles.d.ts.map +1 -1
- package/lib-esm/shared/styles.js +5 -3
- package/lib-esm/shared/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,33 +2,35 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/reac
|
|
|
2
2
|
import { useState, Children, useEffect, isValidElement } from 'react';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import styled from '@emotion/styled';
|
|
5
|
-
import
|
|
5
|
+
import { getThemeValue, THEME_NAME } from '../../shared/constants';
|
|
6
6
|
const Button = styled.button `
|
|
7
7
|
background-color: transparent;
|
|
8
8
|
border: none;
|
|
9
9
|
padding: 8px 12px;
|
|
10
10
|
font-size: 14px;
|
|
11
11
|
border-radius: 3px 3px 0 0;
|
|
12
|
-
border-bottom: ${(props) => props.active ? `3px solid
|
|
13
|
-
color: ${(props) =>
|
|
12
|
+
border-bottom: ${(props) => props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};
|
|
13
|
+
color: ${(props) => props.active
|
|
14
|
+
? getThemeValue(THEME_NAME.PRIMARY)
|
|
15
|
+
: getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};
|
|
14
16
|
cursor: pointer;
|
|
15
17
|
|
|
16
18
|
&:hover,
|
|
17
19
|
&:focus {
|
|
18
|
-
background-color:
|
|
20
|
+
background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};
|
|
19
21
|
border-bottom: ${(props) => props.active
|
|
20
|
-
? `3px solid
|
|
21
|
-
: `3px solid
|
|
22
|
+
? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`
|
|
23
|
+
: `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
&[disabled] {
|
|
25
|
-
background-color:
|
|
26
|
-
color:
|
|
27
|
-
border-bottom: 3px solid
|
|
27
|
+
background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};
|
|
28
|
+
color: ${getThemeValue(THEME_NAME.DISABLED)};
|
|
29
|
+
border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
|
|
28
30
|
}
|
|
29
31
|
`;
|
|
30
32
|
const ButtonContainer = styled.div `
|
|
31
|
-
border-bottom: 1px solid
|
|
33
|
+
border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};
|
|
32
34
|
margin-bottom: 5px;
|
|
33
35
|
position: relative;
|
|
34
36
|
`;
|
|
@@ -37,14 +39,45 @@ const TabBody = styled.div `
|
|
|
37
39
|
`;
|
|
38
40
|
export default function Tabs(props) {
|
|
39
41
|
const [active, setActive] = useState(props.active);
|
|
40
|
-
const switchTab = (index) => () => setActive(index);
|
|
41
42
|
const { children } = props;
|
|
43
|
+
const tabRefs = [];
|
|
44
|
+
const childrenArray = Children.toArray(children);
|
|
45
|
+
const switchTab = (index) => () => {
|
|
46
|
+
var _a, _b;
|
|
47
|
+
setActive(index);
|
|
48
|
+
(_a = tabRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
49
|
+
(_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, index);
|
|
50
|
+
};
|
|
51
|
+
// Keyboard navigation for tab buttons
|
|
52
|
+
const onTabKeyDown = (index) => (e) => {
|
|
53
|
+
var _a, _b;
|
|
54
|
+
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
|
|
55
|
+
e.preventDefault();
|
|
56
|
+
const next = (index + 1) % childrenArray.length;
|
|
57
|
+
(_a = tabRefs[next]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
58
|
+
}
|
|
59
|
+
else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
|
60
|
+
e.preventDefault();
|
|
61
|
+
const prev = (index - 1 + childrenArray.length) % childrenArray.length;
|
|
62
|
+
(_b = tabRefs[prev]) === null || _b === void 0 ? void 0 : _b.focus();
|
|
63
|
+
}
|
|
64
|
+
};
|
|
42
65
|
useEffect(() => {
|
|
43
66
|
var _a;
|
|
44
67
|
setActive(props.active);
|
|
45
68
|
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, props.active);
|
|
46
69
|
}, [props]);
|
|
47
|
-
|
|
70
|
+
// Generate unique IDs for tabs and panels using sanitized tab name and index
|
|
71
|
+
const sanitize = (str) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();
|
|
72
|
+
const tabIds = childrenArray.map((child, i) => {
|
|
73
|
+
const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
|
|
74
|
+
return `nfui-tab-${sanitize(name)}-${i}`;
|
|
75
|
+
});
|
|
76
|
+
const panelIds = childrenArray.map((child, i) => {
|
|
77
|
+
const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
|
|
78
|
+
return `nfui-tabpanel-${sanitize(name)}-${i}`;
|
|
79
|
+
});
|
|
80
|
+
return (_jsxs(_Fragment, { children: [_jsx(ButtonContainer, Object.assign({ role: "tablist", "aria-label": "Tabs" }, props.props, { children: childrenArray.map((child, index) => (_jsx(Button, { ref: (el) => (tabRefs[index] = el), id: tabIds[index], type: "button", role: "tab", "aria-selected": active === index, "aria-controls": panelIds[index], tabIndex: active === index ? 0 : -1, active: active === index, onClick: switchTab(index), onKeyDown: onTabKeyDown(index), disabled: isValidElement(child) ? child.props.disabled : false, "aria-disabled": isValidElement(child) ? child.props.disabled : false, children: isValidElement(child) ? child.props.name : '' }, tabIds[index]))) })), _jsx(TabBody, Object.assign({ id: panelIds[active], role: "tabpanel", "aria-labelledby": tabIds[active], tabIndex: 0 }, props.bodyProps, { children: childrenArray[active] }))] }));
|
|
48
81
|
}
|
|
49
82
|
Tabs.propTypes = {
|
|
50
83
|
/** Active Tab Index */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAqB,cAAc,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, Children, useEffect, PropsWithChildren, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Button = styled.button<{ active: boolean }>`\n background-color: transparent;\n border: none;\n padding: 8px 12px;\n font-size: 14px;\n border-radius: 3px 3px 0 0;\n border-bottom: ${(props) =>\n props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};\n color: ${(props) =>\n props.active\n ? getThemeValue(THEME_NAME.PRIMARY)\n : getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n border-bottom: ${(props) =>\n props.active\n ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`\n : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};\n }\n\n &[disabled] {\n background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n color: ${getThemeValue(THEME_NAME.DISABLED)};\n border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n }\n`;\n\nconst ButtonContainer = styled.div`\n border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n margin-bottom: 5px;\n position: relative;\n`;\n\nconst TabBody = styled.div`\n min-height: 150px;\n`;\n\ntype ITabsProps = PropsWithChildren<{\n active?: number;\n onChange?: (index: number) => void;\n props?: object;\n bodyProps?: object;\n}>;\n\nexport default function Tabs(props: ITabsProps) {\n const [active, setActive] = useState(props.active);\n const { children } = props;\n const tabRefs = [] as Array<HTMLButtonElement | null>;\n const childrenArray = Children.toArray(children);\n\n const switchTab = (index: number) => () => {\n setActive(index);\n tabRefs[index]?.focus();\n props.onChange?.(index);\n };\n\n // Keyboard navigation for tab buttons\n const onTabKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n e.preventDefault();\n const next = (index + 1) % childrenArray.length;\n tabRefs[next]?.focus();\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n e.preventDefault();\n const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n tabRefs[prev]?.focus();\n }\n };\n\n useEffect(() => {\n setActive(props.active);\n props.onChange?.(props.active);\n }, [props]);\n\n // Generate unique IDs for tabs and panels using sanitized tab name and index\n const sanitize = (str: string) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();\n const tabIds = childrenArray.map((child, i) => {\n const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n return `nfui-tab-${sanitize(name)}-${i}`;\n });\n const panelIds = childrenArray.map((child, i) => {\n const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n return `nfui-tabpanel-${sanitize(name)}-${i}`;\n });\n\n return (\n <>\n <ButtonContainer role=\"tablist\" aria-label=\"Tabs\" {...props.props}>\n {childrenArray.map((child, index) => (\n <Button\n key={tabIds[index]}\n ref={(el) => (tabRefs[index] = el)}\n id={tabIds[index]}\n type=\"button\"\n role=\"tab\"\n aria-selected={active === index}\n aria-controls={panelIds[index]}\n tabIndex={active === index ? 0 : -1}\n active={active === index}\n onClick={switchTab(index)}\n onKeyDown={onTabKeyDown(index)}\n disabled={isValidElement(child) ? child.props.disabled : false}\n aria-disabled={isValidElement(child) ? child.props.disabled : false}\n >\n {isValidElement(child) ? child.props.name : ''}\n </Button>\n ))}\n </ButtonContainer>\n <TabBody\n id={panelIds[active]}\n role=\"tabpanel\"\n aria-labelledby={tabIds[active]}\n tabIndex={0}\n {...props.bodyProps}\n >\n {childrenArray[active]}\n </TabBody>\n </>\n );\n}\n\nTabs.propTypes = {\n /** Active Tab Index */\n active: PropTypes.number,\n /** OnChange event handler */\n onChange: PropTypes.func,\n /** Props for div that contains tab buttons */\n props: PropTypes.object,\n /** Props for div that contains tab body */\n bodyProps: PropTypes.object,\n};\n\nTabs.defaultProps = {\n active: 0,\n};\n"]}
|
|
@@ -14,21 +14,42 @@ export declare enum TOAST_TYPE {
|
|
|
14
14
|
}
|
|
15
15
|
declare class Toast {
|
|
16
16
|
private element;
|
|
17
|
+
private ariaLiveContainer;
|
|
17
18
|
private toast;
|
|
18
19
|
private timeout;
|
|
19
20
|
private root;
|
|
21
|
+
private politeRegion;
|
|
22
|
+
private assertiveRegion;
|
|
23
|
+
private isPaused;
|
|
24
|
+
private currentOptions;
|
|
20
25
|
constructor();
|
|
26
|
+
/**
|
|
27
|
+
* Set up keyboard listener for dismissing toast with Escape key
|
|
28
|
+
*/
|
|
29
|
+
private setupKeyboardListeners;
|
|
30
|
+
/**
|
|
31
|
+
* Handle keyboard events for toast interaction
|
|
32
|
+
*/
|
|
33
|
+
private handleKeyDown;
|
|
34
|
+
/**
|
|
35
|
+
* Update the appropriate live region with toast content
|
|
36
|
+
*/
|
|
37
|
+
private updateLiveRegion;
|
|
21
38
|
remove: () => void;
|
|
39
|
+
/**
|
|
40
|
+
* Pause toast auto-dismiss
|
|
41
|
+
*/
|
|
42
|
+
private pauseTimeout;
|
|
43
|
+
/**
|
|
44
|
+
* Resume toast auto-dismiss
|
|
45
|
+
*/
|
|
46
|
+
private resumeTimeout;
|
|
22
47
|
/**
|
|
23
48
|
* Pause toast when user is hovering over it.
|
|
24
|
-
*
|
|
25
|
-
* @param id
|
|
26
49
|
*/
|
|
27
50
|
pause: () => void;
|
|
28
51
|
/**
|
|
29
52
|
* Restart the removal of toast.
|
|
30
|
-
*
|
|
31
|
-
* @param id
|
|
32
53
|
*/
|
|
33
54
|
resume: (options: ToastOptions) => () => void;
|
|
34
55
|
add(options: ToastOptions): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,oBAAY,UAAU;IAClB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,MAAM,WAAW;CACpB;
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,oBAAY,UAAU;IAClB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,MAAM,WAAW;CACpB;AA0FD,cAAM,KAAK;IACP,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,iBAAiB,CAAiB;IAC1C,OAAO,CAAC,KAAK,CAA8C;IAC3D,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,IAAI,CAAO;IACnB,OAAO,CAAC,YAAY,CAAiB;IACrC,OAAO,CAAC,eAAe,CAAiB;IACxC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,cAAc,CAA6B;;IAkBnD;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAI5B;IAEF;;OAEG;IACH,OAAO,CAAC,aAAa,CAgBnB;IAEF;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAYtB;IAEK,MAAM,aAaX;IAEF;;OAEG;IACH,OAAO,CAAC,YAAY,CAKlB;IAEF;;OAEG;IACH,OAAO,CAAC,aAAa,CAOnB;IAEF;;OAEG;IACI,KAAK,aAEV;IAEF;;OAEG;IACI,MAAM,YAAa,YAAY,gBAGpC;IAEK,GAAG,CAAC,OAAO,EAAE,YAAY;CAoDnC;;AAED,wBAA2B"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { createRoot } from 'react-dom/client';
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
|
-
import
|
|
4
|
+
import { getThemeValue, THEME_NAME } from '../../shared/constants';
|
|
5
5
|
import LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';
|
|
6
6
|
import { Card } from '../Card';
|
|
7
7
|
export var TOAST_TYPE;
|
|
@@ -15,15 +15,15 @@ export var TOAST_TYPE;
|
|
|
15
15
|
const getBackgroundColor = (type) => {
|
|
16
16
|
switch (type) {
|
|
17
17
|
case TOAST_TYPE.INFO:
|
|
18
|
-
return
|
|
18
|
+
return getThemeValue(THEME_NAME.INFO);
|
|
19
19
|
case TOAST_TYPE.SUCCESS:
|
|
20
|
-
return
|
|
20
|
+
return getThemeValue(THEME_NAME.SUCCESS);
|
|
21
21
|
case TOAST_TYPE.WARNING:
|
|
22
|
-
return
|
|
22
|
+
return getThemeValue(THEME_NAME.WARNING);
|
|
23
23
|
case TOAST_TYPE.DANGER:
|
|
24
|
-
return
|
|
24
|
+
return getThemeValue(THEME_NAME.ERROR);
|
|
25
25
|
case TOAST_TYPE.NORMAL:
|
|
26
|
-
return
|
|
26
|
+
return getThemeValue(THEME_NAME.TOAST);
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
const ToastContainer = styled(Card) `
|
|
@@ -31,7 +31,7 @@ const ToastContainer = styled(Card) `
|
|
|
31
31
|
border-radius: 3px;
|
|
32
32
|
padding: 12px;
|
|
33
33
|
background-color: ${(props) => getBackgroundColor(props.type)};
|
|
34
|
-
color:
|
|
34
|
+
color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
|
|
35
35
|
margin: 20px;
|
|
36
36
|
font-size: 14px;
|
|
37
37
|
line-height: 20px;
|
|
@@ -40,6 +40,7 @@ const ToastContainer = styled(Card) `
|
|
|
40
40
|
width: 344px;
|
|
41
41
|
display: flex;
|
|
42
42
|
align-items: center;
|
|
43
|
+
position: relative;
|
|
43
44
|
|
|
44
45
|
& svg {
|
|
45
46
|
width: 20px;
|
|
@@ -64,7 +65,7 @@ const TextContainer = styled.div `
|
|
|
64
65
|
`;
|
|
65
66
|
const CloseContainer = styled.button `
|
|
66
67
|
background-color: transparent;
|
|
67
|
-
color:
|
|
68
|
+
color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};
|
|
68
69
|
padding: 6px 10px;
|
|
69
70
|
border: none;
|
|
70
71
|
border-radius: 3px;
|
|
@@ -76,8 +77,71 @@ const CloseContainer = styled.button `
|
|
|
76
77
|
}
|
|
77
78
|
`;
|
|
78
79
|
const DEFAULT_DURATION = 2000;
|
|
80
|
+
const createAriaLiveRegion = (id, ariaLive) => {
|
|
81
|
+
const region = document.createElement('div');
|
|
82
|
+
region.id = id;
|
|
83
|
+
region.style.position = 'absolute';
|
|
84
|
+
region.style.width = '1px';
|
|
85
|
+
region.style.height = '1px';
|
|
86
|
+
region.style.padding = '0';
|
|
87
|
+
region.style.margin = '-1px';
|
|
88
|
+
region.style.overflow = 'hidden';
|
|
89
|
+
region.style.clip = 'rect(0, 0, 0, 0)';
|
|
90
|
+
region.style.whiteSpace = 'nowrap';
|
|
91
|
+
region.style.borderWidth = '0';
|
|
92
|
+
region.setAttribute('role', ariaLive === 'assertive' ? 'alert' : 'log');
|
|
93
|
+
region.setAttribute('aria-live', ariaLive);
|
|
94
|
+
region.setAttribute('aria-atomic', 'true');
|
|
95
|
+
return region;
|
|
96
|
+
};
|
|
79
97
|
class Toast {
|
|
80
98
|
constructor() {
|
|
99
|
+
this.isPaused = false;
|
|
100
|
+
this.currentOptions = null;
|
|
101
|
+
/**
|
|
102
|
+
* Set up keyboard listener for dismissing toast with Escape key
|
|
103
|
+
*/
|
|
104
|
+
this.setupKeyboardListeners = () => {
|
|
105
|
+
if (typeof document !== 'undefined') {
|
|
106
|
+
document.addEventListener('keydown', this.handleKeyDown);
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
/**
|
|
110
|
+
* Handle keyboard events for toast interaction
|
|
111
|
+
*/
|
|
112
|
+
this.handleKeyDown = (event) => {
|
|
113
|
+
if (!this.toast)
|
|
114
|
+
return;
|
|
115
|
+
// Escape key dismisses the toast
|
|
116
|
+
if (event.key === 'Escape') {
|
|
117
|
+
this.remove();
|
|
118
|
+
}
|
|
119
|
+
// Space key pauses/resumes auto-dismiss
|
|
120
|
+
else if (event.key === ' ' && this.currentOptions) {
|
|
121
|
+
event.preventDefault();
|
|
122
|
+
if (this.isPaused) {
|
|
123
|
+
this.resumeTimeout();
|
|
124
|
+
}
|
|
125
|
+
else {
|
|
126
|
+
this.pauseTimeout();
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
/**
|
|
131
|
+
* Update the appropriate live region with toast content
|
|
132
|
+
*/
|
|
133
|
+
this.updateLiveRegion = (content, isAssertive) => {
|
|
134
|
+
const region = isAssertive ? this.assertiveRegion : this.politeRegion;
|
|
135
|
+
region.textContent = '';
|
|
136
|
+
if (region) {
|
|
137
|
+
// Add content after delay
|
|
138
|
+
setTimeout(() => {
|
|
139
|
+
if (region) {
|
|
140
|
+
region.textContent = content;
|
|
141
|
+
}
|
|
142
|
+
}, 200);
|
|
143
|
+
}
|
|
144
|
+
};
|
|
81
145
|
this.remove = () => {
|
|
82
146
|
if (this.toast) {
|
|
83
147
|
this.toast[1]();
|
|
@@ -91,36 +155,68 @@ class Toast {
|
|
|
91
155
|
}
|
|
92
156
|
}, 300);
|
|
93
157
|
};
|
|
158
|
+
/**
|
|
159
|
+
* Pause toast auto-dismiss
|
|
160
|
+
*/
|
|
161
|
+
this.pauseTimeout = () => {
|
|
162
|
+
if (this.timeout) {
|
|
163
|
+
clearTimeout(this.timeout);
|
|
164
|
+
this.isPaused = true;
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
/**
|
|
168
|
+
* Resume toast auto-dismiss
|
|
169
|
+
*/
|
|
170
|
+
this.resumeTimeout = () => {
|
|
171
|
+
if (this.currentOptions && this.isPaused) {
|
|
172
|
+
this.timeout = setTimeout(() => {
|
|
173
|
+
this.remove();
|
|
174
|
+
}, this.currentOptions.duration || DEFAULT_DURATION);
|
|
175
|
+
this.isPaused = false;
|
|
176
|
+
}
|
|
177
|
+
};
|
|
94
178
|
/**
|
|
95
179
|
* Pause toast when user is hovering over it.
|
|
96
|
-
*
|
|
97
|
-
* @param id
|
|
98
180
|
*/
|
|
99
181
|
this.pause = () => {
|
|
100
|
-
|
|
182
|
+
this.pauseTimeout();
|
|
101
183
|
};
|
|
102
184
|
/**
|
|
103
185
|
* Restart the removal of toast.
|
|
104
|
-
*
|
|
105
|
-
* @param id
|
|
106
186
|
*/
|
|
107
187
|
this.resume = (options) => () => {
|
|
108
|
-
this.
|
|
109
|
-
|
|
110
|
-
}, options.duration || DEFAULT_DURATION);
|
|
188
|
+
this.currentOptions = options;
|
|
189
|
+
this.resumeTimeout();
|
|
111
190
|
};
|
|
191
|
+
if (typeof document === 'undefined')
|
|
192
|
+
return;
|
|
112
193
|
this.element = document === null || document === void 0 ? void 0 : document.createElement('div');
|
|
194
|
+
this.ariaLiveContainer = document === null || document === void 0 ? void 0 : document.createElement('div');
|
|
195
|
+
this.ariaLiveContainer.id = 'nf-toast-container';
|
|
196
|
+
document.body.appendChild(this.ariaLiveContainer);
|
|
197
|
+
this.politeRegion = createAriaLiveRegion('nf-toast-polite-region', 'polite');
|
|
198
|
+
this.assertiveRegion = createAriaLiveRegion('nf-toast-assertive-region', 'assertive');
|
|
199
|
+
this.ariaLiveContainer.appendChild(this.politeRegion);
|
|
200
|
+
this.ariaLiveContainer.appendChild(this.assertiveRegion);
|
|
201
|
+
this.setupKeyboardListeners();
|
|
113
202
|
}
|
|
114
203
|
add(options) {
|
|
115
204
|
const { text, buttonText, buttonClick, duration, type = TOAST_TYPE.NORMAL } = options;
|
|
205
|
+
this.currentOptions = options;
|
|
206
|
+
this.isPaused = false;
|
|
116
207
|
this.remove();
|
|
208
|
+
// Determine if this is an assertive message (warning/danger)
|
|
209
|
+
const isAssertive = type === TOAST_TYPE.WARNING || type === TOAST_TYPE.DANGER;
|
|
210
|
+
// Announce to screen readers
|
|
211
|
+
const announcement = buttonText ? `${text} ${buttonText} button available` : text;
|
|
212
|
+
this.updateLiveRegion(announcement, isAssertive);
|
|
117
213
|
this.toast = LayerManager.renderLayer({
|
|
118
214
|
exitDelay: 300,
|
|
119
215
|
closeOnEsc: false,
|
|
120
216
|
closeOnOverlayClick: false,
|
|
121
217
|
alwaysOnTop: true,
|
|
122
218
|
position: LAYER_POSITION.BOTTOM_LEFT,
|
|
123
|
-
component: (_jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), children: [_jsx(TextContainer, { children: text }), buttonText && (_jsx(CloseContainer, { onClick: buttonClick, type: "button", children: buttonText }))] }))),
|
|
219
|
+
component: (_jsx(_Fragment, { children: _jsxs(ToastContainer, Object.assign({}, options, { type: type, elevated: true, onMouseEnter: this.pause, onMouseLeave: this.resume(options), "aria-hidden": "true", children: [_jsx(TextContainer, { children: text }), buttonText && (_jsx(CloseContainer, { onClick: buttonClick, type: "button", "aria-label": `${buttonText} - Press Space to pause auto-dismiss, Escape to close`, children: buttonText }))] })) })),
|
|
124
220
|
});
|
|
125
221
|
const Component = this.toast[0];
|
|
126
222
|
this.root = createRoot(this.element);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createRoot, type Root } from 'react-dom/client';\nimport styled from '@emotion/styled';\nimport constants from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport { Card } from '../Card';\n\nexport interface ToastOptions {\n text: string;\n buttonText?: string;\n buttonClick?: () => void;\n duration?: number;\n type?: TOAST_TYPE;\n}\n\nexport enum TOAST_TYPE {\n NORMAL = 'NORMAL',\n INFO = 'INFO',\n SUCCESS = 'SUCCESS',\n WARNING = 'WARNING',\n DANGER = 'DANGER',\n}\n\nconst getBackgroundColor = (type: TOAST_TYPE) => {\n switch (type) {\n case TOAST_TYPE.INFO:\n return `var(--info, ${constants.INFO})`;\n case TOAST_TYPE.SUCCESS:\n return `var(--success, ${constants.SUCCESS})`;\n case TOAST_TYPE.WARNING:\n return `var(--warning, ${constants.WARNING})`;\n case TOAST_TYPE.DANGER:\n return `var(--error, ${constants.ERROR})`;\n case TOAST_TYPE.NORMAL:\n return `var(--toast, ${constants.TOAST})`;\n }\n};\n\nconst ToastContainer = styled(Card)<{ type: TOAST_TYPE }>`\n box-sizing: border-box;\n border-radius: 3px;\n padding: 12px;\n background-color: ${(props) => getBackgroundColor(props.type)};\n color: #fff;\n margin: 20px;\n font-size: 14px;\n line-height: 20px;\n transform: translateY(100%);\n transition: transform 0.3s ease;\n width: 344px;\n display: flex;\n align-items: center;\n\n & svg {\n width: 20px;\n height: 20px;\n fill: currentColor;\n }\n\n @media (max-width: 480px) {\n & {\n margin: 0;\n width: 100vw;\n border-radius: 0;\n }\n }\n\n .nf-layer-enter & {\n transform: translateY(0%);\n }\n`;\n\nconst TextContainer = styled.div`\n flex: 1;\n`;\n\nconst CloseContainer = styled.button`\n background-color: transparent;\n color: var(--primary, ${constants.PRIMARY_LIGHT});\n padding: 6px 10px;\n border: none;\n border-radius: 3px;\n text-transform: uppercase;\n cursor: pointer;\n\n &:focus {\n background-color: rgba(255, 255, 255, 0.1);\n }\n`;\n\nconst DEFAULT_DURATION = 2000;\n\nclass Toast {\n private element: HTMLDivElement;\n private toast: ReturnType<typeof LayerManager.renderLayer>;\n private timeout: NodeJS.Timeout;\n private root: Root;\n\n constructor() {\n this.element = document?.createElement('div');\n }\n\n public remove = () => {\n if (this.toast) {\n this.toast[1]();\n clearTimeout(this.timeout);\n this.timeout = null;\n }\n this.toast = null;\n\n setTimeout(() => {\n if (!this.toast) {\n this.root.unmount();\n }\n }, 300);\n };\n\n /**\n * Pause toast when user is hovering over it.\n *\n * @param id\n */\n public pause = () => {\n clearTimeout(this.timeout);\n };\n\n /**\n * Restart the removal of toast.\n *\n * @param id\n */\n public resume = (options: ToastOptions) => () => {\n this.timeout = setTimeout(() => {\n this.remove();\n }, options.duration || DEFAULT_DURATION);\n };\n\n public add(options: ToastOptions) {\n const { text, buttonText, buttonClick, duration, type = TOAST_TYPE.NORMAL } = options;\n this.remove();\n this.toast = LayerManager.renderLayer({\n exitDelay: 300,\n closeOnEsc: false,\n closeOnOverlayClick: false,\n alwaysOnTop: true,\n position: LAYER_POSITION.BOTTOM_LEFT,\n component: (\n <ToastContainer\n {...options}\n type={type}\n elevated\n onMouseEnter={this.pause}\n onMouseLeave={this.resume(options)}\n >\n <TextContainer>{text}</TextContainer>\n {buttonText && (\n <CloseContainer onClick={buttonClick} type=\"button\">\n {buttonText}\n </CloseContainer>\n )}\n </ToastContainer>\n ),\n });\n const Component = this.toast[0];\n this.root = createRoot(this.element);\n this.root.render(<Component />);\n\n this.timeout = setTimeout(() => {\n this.remove();\n }, duration || DEFAULT_DURATION);\n }\n}\n\nexport default new Toast();\n"]}
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createRoot, type Root } from 'react-dom/client';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport { Card } from '../Card';\n\nexport interface ToastOptions {\n text: string;\n buttonText?: string;\n buttonClick?: () => void;\n duration?: number;\n type?: TOAST_TYPE;\n}\n\nexport enum TOAST_TYPE {\n NORMAL = 'NORMAL',\n INFO = 'INFO',\n SUCCESS = 'SUCCESS',\n WARNING = 'WARNING',\n DANGER = 'DANGER',\n}\n\nconst getBackgroundColor = (type: TOAST_TYPE) => {\n switch (type) {\n case TOAST_TYPE.INFO:\n return getThemeValue(THEME_NAME.INFO);\n case TOAST_TYPE.SUCCESS:\n return getThemeValue(THEME_NAME.SUCCESS);\n case TOAST_TYPE.WARNING:\n return getThemeValue(THEME_NAME.WARNING);\n case TOAST_TYPE.DANGER:\n return getThemeValue(THEME_NAME.ERROR);\n case TOAST_TYPE.NORMAL:\n return getThemeValue(THEME_NAME.TOAST);\n }\n};\n\nconst ToastContainer = styled(Card)<{ type: TOAST_TYPE }>`\n box-sizing: border-box;\n border-radius: 3px;\n padding: 12px;\n background-color: ${(props) => getBackgroundColor(props.type)};\n color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n margin: 20px;\n font-size: 14px;\n line-height: 20px;\n transform: translateY(100%);\n transition: transform 0.3s ease;\n width: 344px;\n display: flex;\n align-items: center;\n position: relative;\n\n & svg {\n width: 20px;\n height: 20px;\n fill: currentColor;\n }\n\n @media (max-width: 480px) {\n & {\n margin: 0;\n width: 100vw;\n border-radius: 0;\n }\n }\n\n .nf-layer-enter & {\n transform: translateY(0%);\n }\n`;\n\nconst TextContainer = styled.div`\n flex: 1;\n`;\n\nconst CloseContainer = styled.button`\n background-color: transparent;\n color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n padding: 6px 10px;\n border: none;\n border-radius: 3px;\n text-transform: uppercase;\n cursor: pointer;\n\n &:focus {\n background-color: rgba(255, 255, 255, 0.1);\n }\n`;\n\nconst DEFAULT_DURATION = 2000;\n\nconst createAriaLiveRegion = (id: string, ariaLive: 'polite' | 'assertive') => {\n const region = document.createElement('div');\n region.id = id;\n region.style.position = 'absolute';\n region.style.width = '1px';\n region.style.height = '1px';\n region.style.padding = '0';\n region.style.margin = '-1px';\n region.style.overflow = 'hidden';\n region.style.clip = 'rect(0, 0, 0, 0)';\n region.style.whiteSpace = 'nowrap';\n region.style.borderWidth = '0';\n region.setAttribute('role', ariaLive === 'assertive' ? 'alert' : 'log');\n region.setAttribute('aria-live', ariaLive);\n region.setAttribute('aria-atomic', 'true');\n return region;\n};\n\nclass Toast {\n private element: HTMLDivElement;\n private ariaLiveContainer: HTMLDivElement;\n private toast: ReturnType<typeof LayerManager.renderLayer>;\n private timeout: NodeJS.Timeout;\n private root: Root;\n private politeRegion: HTMLDivElement;\n private assertiveRegion: HTMLDivElement;\n private isPaused: boolean = false;\n private currentOptions: ToastOptions | null = null;\n\n constructor() {\n if (typeof document === 'undefined') return;\n\n this.element = document?.createElement('div');\n this.ariaLiveContainer = document?.createElement('div');\n this.ariaLiveContainer.id = 'nf-toast-container';\n document.body.appendChild(this.ariaLiveContainer);\n\n this.politeRegion = createAriaLiveRegion('nf-toast-polite-region', 'polite');\n this.assertiveRegion = createAriaLiveRegion('nf-toast-assertive-region', 'assertive');\n this.ariaLiveContainer.appendChild(this.politeRegion);\n this.ariaLiveContainer.appendChild(this.assertiveRegion);\n\n this.setupKeyboardListeners();\n }\n\n /**\n * Set up keyboard listener for dismissing toast with Escape key\n */\n private setupKeyboardListeners = () => {\n if (typeof document !== 'undefined') {\n document.addEventListener('keydown', this.handleKeyDown);\n }\n };\n\n /**\n * Handle keyboard events for toast interaction\n */\n private handleKeyDown = (event: KeyboardEvent) => {\n if (!this.toast) return;\n\n // Escape key dismisses the toast\n if (event.key === 'Escape') {\n this.remove();\n }\n // Space key pauses/resumes auto-dismiss\n else if (event.key === ' ' && this.currentOptions) {\n event.preventDefault();\n if (this.isPaused) {\n this.resumeTimeout();\n } else {\n this.pauseTimeout();\n }\n }\n };\n\n /**\n * Update the appropriate live region with toast content\n */\n private updateLiveRegion = (content: string, isAssertive: boolean) => {\n const region = isAssertive ? this.assertiveRegion : this.politeRegion;\n region.textContent = '';\n\n if (region) {\n // Add content after delay\n setTimeout(() => {\n if (region) {\n region.textContent = content;\n }\n }, 200);\n }\n };\n\n public remove = () => {\n if (this.toast) {\n this.toast[1]();\n clearTimeout(this.timeout);\n this.timeout = null;\n }\n this.toast = null;\n\n setTimeout(() => {\n if (!this.toast) {\n this.root.unmount();\n }\n }, 300);\n };\n\n /**\n * Pause toast auto-dismiss\n */\n private pauseTimeout = () => {\n if (this.timeout) {\n clearTimeout(this.timeout);\n this.isPaused = true;\n }\n };\n\n /**\n * Resume toast auto-dismiss\n */\n private resumeTimeout = () => {\n if (this.currentOptions && this.isPaused) {\n this.timeout = setTimeout(() => {\n this.remove();\n }, this.currentOptions.duration || DEFAULT_DURATION);\n this.isPaused = false;\n }\n };\n\n /**\n * Pause toast when user is hovering over it.\n */\n public pause = () => {\n this.pauseTimeout();\n };\n\n /**\n * Restart the removal of toast.\n */\n public resume = (options: ToastOptions) => () => {\n this.currentOptions = options;\n this.resumeTimeout();\n };\n\n public add(options: ToastOptions) {\n const { text, buttonText, buttonClick, duration, type = TOAST_TYPE.NORMAL } = options;\n this.currentOptions = options;\n this.isPaused = false;\n this.remove();\n\n // Determine if this is an assertive message (warning/danger)\n const isAssertive = type === TOAST_TYPE.WARNING || type === TOAST_TYPE.DANGER;\n\n // Announce to screen readers\n const announcement = buttonText ? `${text} ${buttonText} button available` : text;\n this.updateLiveRegion(announcement, isAssertive);\n\n this.toast = LayerManager.renderLayer({\n exitDelay: 300,\n closeOnEsc: false,\n closeOnOverlayClick: false,\n alwaysOnTop: true,\n position: LAYER_POSITION.BOTTOM_LEFT,\n component: (\n <>\n {/* Visual toast (hidden from screen readers) */}\n <ToastContainer\n {...options}\n type={type}\n elevated\n onMouseEnter={this.pause}\n onMouseLeave={this.resume(options)}\n aria-hidden=\"true\"\n >\n <TextContainer>{text}</TextContainer>\n {buttonText && (\n <CloseContainer\n onClick={buttonClick}\n type=\"button\"\n aria-label={`${buttonText} - Press Space to pause auto-dismiss, Escape to close`}\n >\n {buttonText}\n </CloseContainer>\n )}\n </ToastContainer>\n </>\n ),\n });\n const Component = this.toast[0];\n this.root = createRoot(this.element);\n this.root.render(<Component />);\n\n this.timeout = setTimeout(() => {\n this.remove();\n }, duration || DEFAULT_DURATION);\n }\n}\n\nexport default new Toast();\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,oBAAY,gBAAgB;IACxB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAClB;AA2DD,iBAAwB,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,oDAuB3E;kBAvBuB,OAAO;;QA4B3B,kCAAkC;;QAElC,8BAA8B;;;;;;;eA9BV,OAAO;AAyB/B,KAAK,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC"}
|
|
@@ -10,9 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
13
|
+
import React, { useId } from 'react';
|
|
13
14
|
import PropTypes from 'prop-types';
|
|
14
15
|
import styled from '@emotion/styled';
|
|
15
|
-
import
|
|
16
|
+
import { getThemeValue, THEME_NAME } from '../../shared/constants';
|
|
16
17
|
export var TOOLTIP_POSITION;
|
|
17
18
|
(function (TOOLTIP_POSITION) {
|
|
18
19
|
TOOLTIP_POSITION["TOP"] = "TOP";
|
|
@@ -54,9 +55,9 @@ const positionHoverStyle = {
|
|
|
54
55
|
};
|
|
55
56
|
const TooltipDiv = styled.div `
|
|
56
57
|
position: absolute;
|
|
57
|
-
background-color:
|
|
58
|
+
background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};
|
|
58
59
|
padding: 5px;
|
|
59
|
-
color:
|
|
60
|
+
color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};
|
|
60
61
|
border-radius: 3px;
|
|
61
62
|
transition: transform 0.3s ease;
|
|
62
63
|
font-size: 12px;
|
|
@@ -69,13 +70,23 @@ const TooltipContainer = styled.div `
|
|
|
69
70
|
justify-content: center;
|
|
70
71
|
align-items: center;
|
|
71
72
|
|
|
72
|
-
&:hover ${TooltipDiv} {
|
|
73
|
+
&:hover ${TooltipDiv}, &:focus-within ${TooltipDiv} {
|
|
73
74
|
${(props) => positionHoverStyle[props.position]}
|
|
74
75
|
}
|
|
75
76
|
`;
|
|
76
77
|
export default function Tooltip(props) {
|
|
77
78
|
const { children, position } = props, rest = __rest(props, ["children", "position"]);
|
|
78
|
-
|
|
79
|
+
const tooltipId = useId();
|
|
80
|
+
// Clone the child to inject aria-describedby and tabIndex if possible
|
|
81
|
+
const trigger = React.isValidElement(children)
|
|
82
|
+
? React.cloneElement(children, {
|
|
83
|
+
'aria-describedby': tooltipId,
|
|
84
|
+
tabIndex: children.props && typeof children.props.tabIndex !== 'undefined'
|
|
85
|
+
? children.props.tabIndex
|
|
86
|
+
: 0,
|
|
87
|
+
})
|
|
88
|
+
: children;
|
|
89
|
+
return (_jsxs(TooltipContainer, Object.assign({ position: position }, rest, { children: [trigger, _jsx(TooltipDiv, { id: tooltipId, "aria-hidden": "true", role: "tooltip", position: position, children: rest.tooltipText })] })));
|
|
79
90
|
}
|
|
80
91
|
Tooltip.propTypes = {
|
|
81
92
|
/** Text to show in the tooltip */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useId } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport enum TOOLTIP_POSITION {\n TOP = 'TOP',\n BOTTOM = 'BOTTOM',\n LEFT = 'LEFT',\n RIGHT = 'RIGHT',\n}\n\nconst positionStyle = {\n [TOOLTIP_POSITION.LEFT]: `\n left: 0;\n transform: translateX(-50%) scale(0);\n `,\n [TOOLTIP_POSITION.RIGHT]: `\n right: 0;\n transform: translateX(50%) scale(0);\n `,\n [TOOLTIP_POSITION.TOP]: `\n top: 0;\n transform: translateY(-10px) scale(0);\n `,\n [TOOLTIP_POSITION.BOTTOM]: `\n bottom: 0;\n transform: translateY(10px) scale(0);\n `,\n};\n\nconst positionHoverStyle = {\n [TOOLTIP_POSITION.LEFT]: `\n transform: translateX(-100%) scale(1);\n `,\n [TOOLTIP_POSITION.RIGHT]: `\n transform: translateX(100%) scale(1);\n `,\n [TOOLTIP_POSITION.TOP]: `\n transform: translateY(-25px) scale(1);\n `,\n [TOOLTIP_POSITION.BOTTOM]: `\n transform: translateY(25px) scale(1);\n `,\n};\n\nconst TooltipDiv = styled.div<{ position: TOOLTIP_POSITION }>`\n position: absolute;\n background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};\n padding: 5px;\n color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n border-radius: 3px;\n transition: transform 0.3s ease;\n font-size: 12px;\n z-index: 1;\n ${(props) => positionStyle[props.position]}\n`;\n\nconst TooltipContainer = styled.div<{ position: TOOLTIP_POSITION }>`\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n &:hover ${TooltipDiv}, &:focus-within ${TooltipDiv} {\n ${(props) => positionHoverStyle[props.position]}\n }\n`;\n\nexport default function Tooltip(props: React.PropsWithChildren<TooltipProps>) {\n const { children, position, ...rest } = props;\n const tooltipId = useId();\n\n // Clone the child to inject aria-describedby and tabIndex if possible\n const trigger = React.isValidElement(children)\n ? React.cloneElement(children as React.ReactElement, {\n 'aria-describedby': tooltipId,\n tabIndex:\n children.props && typeof children.props.tabIndex !== 'undefined'\n ? children.props.tabIndex\n : 0,\n })\n : children;\n\n return (\n <TooltipContainer position={position} {...rest}>\n {trigger}\n <TooltipDiv id={tooltipId} aria-hidden=\"true\" role=\"tooltip\" position={position}>\n {rest.tooltipText}\n </TooltipDiv>\n </TooltipContainer>\n );\n}\n\ntype TooltipProps = PropTypes.InferProps<typeof Tooltip.propTypes>;\n\nTooltip.propTypes = {\n /** Text to show in the tooltip */\n tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n /** Position of the tooltip */\n position: PropTypes.oneOf([\n TOOLTIP_POSITION.TOP,\n TOOLTIP_POSITION.LEFT,\n TOOLTIP_POSITION.RIGHT,\n TOOLTIP_POSITION.BOTTOM,\n ]),\n};\n\nTooltip.defaultProps = {\n position: TOOLTIP_POSITION.BOTTOM,\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayerManager.d.ts","sourceRoot":"","sources":["../../src/shared/LayerManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"LayerManager.d.ts","sourceRoot":"","sources":["../../src/shared/LayerManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAKtD,0CAA0C;AAC1C,oBAAY,cAAc;IACtB,QAAQ,IAAA;IACR,UAAU,IAAA;IACV,SAAS,IAAA;IACT,WAAW,IAAA;IACX,aAAa,IAAA;IACb,YAAY,IAAA;IACZ,MAAM,IAAA;CACT;AAED,UAAU,WAAW;IACjB,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAgED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,cAAM,YAAY;IACd,kBAAkB;IAClB,OAAO,CAAC,MAAM,CAAe;IAC7B,gCAAgC;IAChC,OAAO,CAAC,SAAS,CAAS;IAE1B;;;OAGG;;IAcH;;;;;;;;OAQG;IACH,OAAO,CAAC,OAAO,CAeb;IAEF;;;OAGG;IACI,WAAW,WACN,WAAW,KACpB,CAAC,MAAM,KAAK,CAAC,WAAW,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CA4J3D;CACL;;AAGD,wBAAkC"}
|