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.
Files changed (132) hide show
  1. package/dist/index.js +1335 -493
  2. package/dist/index.js.map +1 -1
  3. package/lib-esm/components/Accordion/AccordionStep.d.ts.map +1 -1
  4. package/lib-esm/components/Accordion/AccordionStep.js +11 -29
  5. package/lib-esm/components/Accordion/AccordionStep.js.map +1 -1
  6. package/lib-esm/components/Badge/Badge.js +7 -7
  7. package/lib-esm/components/Badge/Badge.js.map +1 -1
  8. package/lib-esm/components/Button/ActionButton.d.ts.map +1 -1
  9. package/lib-esm/components/Button/ActionButton.js +12 -11
  10. package/lib-esm/components/Button/ActionButton.js.map +1 -1
  11. package/lib-esm/components/Button/Button.d.ts.map +1 -1
  12. package/lib-esm/components/Button/Button.js +14 -13
  13. package/lib-esm/components/Button/Button.js.map +1 -1
  14. package/lib-esm/components/Button/IconButton.d.ts.map +1 -1
  15. package/lib-esm/components/Button/IconButton.js +15 -14
  16. package/lib-esm/components/Button/IconButton.js.map +1 -1
  17. package/lib-esm/components/Button/LinkButton.d.ts.map +1 -1
  18. package/lib-esm/components/Button/LinkButton.js +7 -6
  19. package/lib-esm/components/Button/LinkButton.js.map +1 -1
  20. package/lib-esm/components/Button/RaisedButton.d.ts.map +1 -1
  21. package/lib-esm/components/Button/RaisedButton.js +15 -14
  22. package/lib-esm/components/Button/RaisedButton.js.map +1 -1
  23. package/lib-esm/components/Card/Card.d.ts.map +1 -1
  24. package/lib-esm/components/Card/Card.js +4 -4
  25. package/lib-esm/components/Card/Card.js.map +1 -1
  26. package/lib-esm/components/Chip/Chip.js +8 -8
  27. package/lib-esm/components/Chip/Chip.js.map +1 -1
  28. package/lib-esm/components/ChipInput/ChipInput.js +20 -20
  29. package/lib-esm/components/ChipInput/ChipInput.js.map +1 -1
  30. package/lib-esm/components/Dialog/AlertDialog.d.ts.map +1 -1
  31. package/lib-esm/components/Dialog/AlertDialog.js +4 -1
  32. package/lib-esm/components/Dialog/AlertDialog.js.map +1 -1
  33. package/lib-esm/components/Dialog/Dialog.d.ts +26 -1
  34. package/lib-esm/components/Dialog/Dialog.d.ts.map +1 -1
  35. package/lib-esm/components/Dialog/Dialog.js +84 -1
  36. package/lib-esm/components/Dialog/Dialog.js.map +1 -1
  37. package/lib-esm/components/DragAndDrop/DragItem.js +8 -8
  38. package/lib-esm/components/DragAndDrop/DragItem.js.map +1 -1
  39. package/lib-esm/components/Drawer/Drawer.d.ts +76 -1
  40. package/lib-esm/components/Drawer/Drawer.d.ts.map +1 -1
  41. package/lib-esm/components/Drawer/Drawer.js +158 -24
  42. package/lib-esm/components/Drawer/Drawer.js.map +1 -1
  43. package/lib-esm/components/Groups/Group.d.ts.map +1 -1
  44. package/lib-esm/components/Groups/Group.js +10 -8
  45. package/lib-esm/components/Groups/Group.js.map +1 -1
  46. package/lib-esm/components/Groups/GroupLabel.d.ts.map +1 -1
  47. package/lib-esm/components/Groups/GroupLabel.js +3 -3
  48. package/lib-esm/components/Groups/GroupLabel.js.map +1 -1
  49. package/lib-esm/components/Input/Checkbox.d.ts.map +1 -1
  50. package/lib-esm/components/Input/Checkbox.js +63 -58
  51. package/lib-esm/components/Input/Checkbox.js.map +1 -1
  52. package/lib-esm/components/Input/Dropdown.d.ts +8 -0
  53. package/lib-esm/components/Input/Dropdown.d.ts.map +1 -1
  54. package/lib-esm/components/Input/Dropdown.js +54 -31
  55. package/lib-esm/components/Input/Dropdown.js.map +1 -1
  56. package/lib-esm/components/Input/Input.d.ts.map +1 -1
  57. package/lib-esm/components/Input/Input.js +27 -21
  58. package/lib-esm/components/Input/Input.js.map +1 -1
  59. package/lib-esm/components/Input/Radio.d.ts.map +1 -1
  60. package/lib-esm/components/Input/Radio.js +58 -42
  61. package/lib-esm/components/Input/Radio.js.map +1 -1
  62. package/lib-esm/components/Input/RadioButton.d.ts.map +1 -1
  63. package/lib-esm/components/Input/RadioButton.js +12 -12
  64. package/lib-esm/components/Input/RadioButton.js.map +1 -1
  65. package/lib-esm/components/Input/Select.d.ts.map +1 -1
  66. package/lib-esm/components/Input/Select.js +27 -21
  67. package/lib-esm/components/Input/Select.js.map +1 -1
  68. package/lib-esm/components/Input/TextArea.d.ts.map +1 -1
  69. package/lib-esm/components/Input/TextArea.js +27 -21
  70. package/lib-esm/components/Input/TextArea.js.map +1 -1
  71. package/lib-esm/components/Input/Toggle.d.ts.map +1 -1
  72. package/lib-esm/components/Input/Toggle.js +17 -14
  73. package/lib-esm/components/Input/Toggle.js.map +1 -1
  74. package/lib-esm/components/Menu/Menu.d.ts +13 -1
  75. package/lib-esm/components/Menu/Menu.d.ts.map +1 -1
  76. package/lib-esm/components/Menu/Menu.js +98 -3
  77. package/lib-esm/components/Menu/Menu.js.map +1 -1
  78. package/lib-esm/components/Menu/MenuItem.d.ts +6 -3
  79. package/lib-esm/components/Menu/MenuItem.d.ts.map +1 -1
  80. package/lib-esm/components/Menu/MenuItem.js +10 -10
  81. package/lib-esm/components/Menu/MenuItem.js.map +1 -1
  82. package/lib-esm/components/Modal/Modal.d.ts +70 -1
  83. package/lib-esm/components/Modal/Modal.d.ts.map +1 -1
  84. package/lib-esm/components/Modal/Modal.js +145 -11
  85. package/lib-esm/components/Modal/Modal.js.map +1 -1
  86. package/lib-esm/components/Notification/Notification.d.ts +3 -1
  87. package/lib-esm/components/Notification/Notification.d.ts.map +1 -1
  88. package/lib-esm/components/Notification/Notification.js +4 -2
  89. package/lib-esm/components/Notification/Notification.js.map +1 -1
  90. package/lib-esm/components/Notification/NotificationManager.d.ts +11 -1
  91. package/lib-esm/components/Notification/NotificationManager.d.ts.map +1 -1
  92. package/lib-esm/components/Notification/NotificationManager.js +43 -8
  93. package/lib-esm/components/Notification/NotificationManager.js.map +1 -1
  94. package/lib-esm/components/Notification/style.d.ts +4 -0
  95. package/lib-esm/components/Notification/style.d.ts.map +1 -1
  96. package/lib-esm/components/Notification/style.js +30 -15
  97. package/lib-esm/components/Notification/style.js.map +1 -1
  98. package/lib-esm/components/Notification/types.d.ts +2 -0
  99. package/lib-esm/components/Notification/types.d.ts.map +1 -1
  100. package/lib-esm/components/Notification/types.js.map +1 -1
  101. package/lib-esm/components/Popover/Popover.d.ts.map +1 -1
  102. package/lib-esm/components/Popover/Popover.js +17 -2
  103. package/lib-esm/components/Popover/Popover.js.map +1 -1
  104. package/lib-esm/components/Spinner/Spinner.d.ts +3 -0
  105. package/lib-esm/components/Spinner/Spinner.d.ts.map +1 -1
  106. package/lib-esm/components/Spinner/Spinner.js +19 -4
  107. package/lib-esm/components/Spinner/Spinner.js.map +1 -1
  108. package/lib-esm/components/Stepper/Stepper.d.ts.map +1 -1
  109. package/lib-esm/components/Stepper/Stepper.js +29 -10
  110. package/lib-esm/components/Stepper/Stepper.js.map +1 -1
  111. package/lib-esm/components/Tabs/Tabs.d.ts.map +1 -1
  112. package/lib-esm/components/Tabs/Tabs.js +45 -12
  113. package/lib-esm/components/Tabs/Tabs.js.map +1 -1
  114. package/lib-esm/components/Toast/Toast.d.ts +25 -4
  115. package/lib-esm/components/Toast/Toast.d.ts.map +1 -1
  116. package/lib-esm/components/Toast/Toast.js +114 -18
  117. package/lib-esm/components/Toast/Toast.js.map +1 -1
  118. package/lib-esm/components/Tooltip/Tooltip.d.ts.map +1 -1
  119. package/lib-esm/components/Tooltip/Tooltip.js +16 -5
  120. package/lib-esm/components/Tooltip/Tooltip.js.map +1 -1
  121. package/lib-esm/shared/LayerManager.d.ts.map +1 -1
  122. package/lib-esm/shared/LayerManager.js +63 -1
  123. package/lib-esm/shared/LayerManager.js.map +1 -1
  124. package/lib-esm/shared/constants.d.ts +58 -27
  125. package/lib-esm/shared/constants.d.ts.map +1 -1
  126. package/lib-esm/shared/constants.js +88 -25
  127. package/lib-esm/shared/constants.js.map +1 -1
  128. package/lib-esm/shared/styles.d.ts +1 -1
  129. package/lib-esm/shared/styles.d.ts.map +1 -1
  130. package/lib-esm/shared/styles.js +5 -3
  131. package/lib-esm/shared/styles.js.map +1 -1
  132. 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 constants from '../../shared/constants';
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 var(--primary, ${constants.PRIMARY})` : 'none'};
13
- color: ${(props) => (props.active ? `var(--primary, ${constants.PRIMARY})` : '#000')};
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: var(--primary-lighter, #cfe9ff);
20
+ background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};
19
21
  border-bottom: ${(props) => props.active
20
- ? `3px solid var(--primary, ${constants.PRIMARY})`
21
- : `3px solid var(--primary, ${constants.PRIMARY})`};
22
+ ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`
23
+ : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};
22
24
  }
23
25
 
24
26
  &[disabled] {
25
- background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
26
- color: var(--disabled, ${constants.DISABLED});
27
- border-bottom: 3px solid var(--disabled-border, ${constants.DISABLED_BORDER});
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 var(--disabled-border, ${constants.DISABLED_BORDER});
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
- return (_jsxs(_Fragment, { children: [_jsx(ButtonContainer, Object.assign({}, props.props, { children: Children.map(children, (child, index) => (_jsx(Button, { type: "button", active: active === index, onClick: switchTab(index), disabled: isValidElement(child) ? child.props.disabled : false, children: isValidElement(child) ? child.props.name : '' }))) })), _jsx(TabBody, Object.assign({}, props.bodyProps, { children: Children.toArray(children)[active] }))] }));
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,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAqB;;;;;;qBAM5B,CAAC,KAAK,EAAE,EAAE,CACvB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,4BAA4B,SAAS,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM;aACnE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,SAAS,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;;yBAM/D,CAAC,KAAK,EAAE,EAAE,CACvB,KAAK,CAAC,MAAM;IACR,CAAC,CAAC,4BAA4B,SAAS,CAAC,OAAO,GAAG;IAClD,CAAC,CAAC,4BAA4B,SAAS,CAAC,OAAO,GAAG;;;;uDAIX,SAAS,CAAC,mBAAmB;iCACnD,SAAS,CAAC,QAAQ;0DACO,SAAS,CAAC,eAAe;;CAElF,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;sDACoB,SAAS,CAAC,eAAe;;;CAG9E,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEzB,CAAC;AASF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAiB;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;;QACX,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxB,MAAA,KAAK,CAAC,QAAQ,sDAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACH,8BACI,KAAC,eAAe,oBAAK,KAAK,CAAC,KAAK,cAC3B,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,MAAM,KAAK,KAAK,EACxB,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,EACzB,QAAQ,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,YAE7D,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GACzC,CACZ,CAAC,IACY,EAClB,KAAC,OAAO,oBAAK,KAAK,CAAC,SAAS,cAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,IAAW,IAC7E,CACN,CAAC;AACN,CAAC;AAED,IAAI,CAAC,SAAS,GAAG;IACb,uBAAuB;IACvB,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,2CAA2C;IAC3C,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAC;AAEF,IAAI,CAAC,YAAY,GAAG;IAChB,MAAM,EAAE,CAAC;CACZ,CAAC","sourcesContent":["import { useState, Children, useEffect, PropsWithChildren, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants 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 var(--primary, ${constants.PRIMARY})` : 'none'};\n color: ${(props) => (props.active ? `var(--primary, ${constants.PRIMARY})` : '#000')};\n cursor: pointer;\n\n &:hover,\n &:focus {\n background-color: var(--primary-lighter, #cfe9ff);\n border-bottom: ${(props) =>\n props.active\n ? `3px solid var(--primary, ${constants.PRIMARY})`\n : `3px solid var(--primary, ${constants.PRIMARY})`};\n }\n\n &[disabled] {\n background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});\n color: var(--disabled, ${constants.DISABLED});\n border-bottom: 3px solid var(--disabled-border, ${constants.DISABLED_BORDER});\n }\n`;\n\nconst ButtonContainer = styled.div`\n border-bottom: 1px solid var(--disabled-border, ${constants.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 switchTab = (index: number) => () => setActive(index);\n const { children } = props;\n\n useEffect(() => {\n setActive(props.active);\n props.onChange?.(props.active);\n }, [props]);\n\n return (\n <>\n <ButtonContainer {...props.props}>\n {Children.map(children, (child, index) => (\n <Button\n type=\"button\"\n active={active === index}\n onClick={switchTab(index)}\n disabled={isValidElement(child) ? child.props.disabled : false}\n >\n {isValidElement(child) ? child.props.name : ''}\n </Button>\n ))}\n </ButtonContainer>\n <TabBody {...props.bodyProps}>{Children.toArray(children)[active]}</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"]}
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;AAuED,cAAM,KAAK;IACP,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,KAAK,CAA8C;IAC3D,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,IAAI,CAAO;;IAMZ,MAAM,aAaX;IAEF;;;;OAIG;IACI,KAAK,aAEV;IAEF;;;;OAIG;IACI,MAAM,YAAa,YAAY,gBAIpC;IAEK,GAAG,CAAC,OAAO,EAAE,YAAY;CAkCnC;;AAED,wBAA2B"}
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 constants from '../../shared/constants';
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 `var(--info, ${constants.INFO})`;
18
+ return getThemeValue(THEME_NAME.INFO);
19
19
  case TOAST_TYPE.SUCCESS:
20
- return `var(--success, ${constants.SUCCESS})`;
20
+ return getThemeValue(THEME_NAME.SUCCESS);
21
21
  case TOAST_TYPE.WARNING:
22
- return `var(--warning, ${constants.WARNING})`;
22
+ return getThemeValue(THEME_NAME.WARNING);
23
23
  case TOAST_TYPE.DANGER:
24
- return `var(--error, ${constants.ERROR})`;
24
+ return getThemeValue(THEME_NAME.ERROR);
25
25
  case TOAST_TYPE.NORMAL:
26
- return `var(--toast, ${constants.TOAST})`;
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: #fff;
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: var(--primary, ${constants.PRIMARY_LIGHT});
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
- clearTimeout(this.timeout);
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.timeout = setTimeout(() => {
109
- this.remove();
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,KAAK,MAAM,OAAO,CAAC;AAC1B,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,oDAS3E;kBATuB,OAAO;;QAc3B,kCAAkC;;QAElC,8BAA8B;;;;;;;eAhBV,OAAO;AAW/B,KAAK,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC"}
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 constants from '../../shared/constants';
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: var(--tooltip-color, ${constants.TOOLTIP_COLOR});
58
+ background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};
58
59
  padding: 5px;
59
- color: #fff;
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
- return (_jsxs(TooltipContainer, Object.assign({ position: position }, rest, { children: [children, _jsx(TooltipDiv, { position: position, children: rest.tooltipText })] })));
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":";;;;;;;;;;;;AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IACxB,+BAAW,CAAA;IACX,qCAAiB,CAAA;IACjB,iCAAa,CAAA;IACb,mCAAe,CAAA;AACnB,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B;AAED,MAAM,aAAa,GAAG;IAClB,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;;;KAGxB;IACD,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE;;;KAGzB;IACD,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE;;;KAGvB;IACD,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE;;;KAG1B;CACJ,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACvB,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;;KAExB;IACD,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE;;KAEzB;IACD,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE;;KAEvB;IACD,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE;;KAE1B;CACJ,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAgC;;6CAEhB,SAAS,CAAC,aAAa;;;;;;;MAO9D,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC;CAC7C,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAgC;;;;;;cAMrD,UAAU;UACd,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC;;CAEtD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAA4C;IACxE,MAAM,EAAE,QAAQ,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAvC,wBAA+B,CAAQ,CAAC;IAE9C,OAAO,CACH,MAAC,gBAAgB,kBAAC,QAAQ,EAAE,QAAQ,IAAM,IAAI,eACzC,QAAQ,EACT,KAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,YAAG,IAAI,CAAC,WAAW,GAAc,KAChD,CACtB,CAAC;AACN,CAAC;AAID,OAAO,CAAC,SAAS,GAAG;IAChB,kCAAkC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU;IAC/E,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC,KAAK,CAAC;QACtB,gBAAgB,CAAC,GAAG;QACpB,gBAAgB,CAAC,IAAI;QACrB,gBAAgB,CAAC,KAAK;QACtB,gBAAgB,CAAC,MAAM;KAC1B,CAAC;CACL,CAAC;AAEF,OAAO,CAAC,YAAY,GAAG;IACnB,QAAQ,EAAE,gBAAgB,CAAC,MAAM;CACpC,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport constants 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: var(--tooltip-color, ${constants.TOOLTIP_COLOR});\n padding: 5px;\n color: #fff;\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} {\n ${(props) => positionHoverStyle[props.position]}\n }\n`;\n\nexport default function Tooltip(props: React.PropsWithChildren<TooltipProps>) {\n const { children, position, ...rest } = props;\n\n return (\n <TooltipContainer position={position} {...rest}>\n {children}\n <TooltipDiv position={position}>{rest.tooltipText}</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
+ {"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;AAItD,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,CAmF3D;CACL;;AAGD,wBAAkC"}
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"}