no-frills-ui 0.0.14-alpha.8 → 0.0.14-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (150) hide show
  1. package/README.md +2 -3
  2. package/dist/index.js +841 -710
  3. package/dist/index.js.map +1 -1
  4. package/lib-esm/components/Accordion/Accordion.d.ts +9 -13
  5. package/lib-esm/components/Accordion/Accordion.js +3 -10
  6. package/lib-esm/components/Accordion/Accordion.js.map +1 -1
  7. package/lib-esm/components/Accordion/AccordionStep.d.ts +22 -22
  8. package/lib-esm/components/Accordion/AccordionStep.js +33 -28
  9. package/lib-esm/components/Accordion/AccordionStep.js.map +1 -1
  10. package/lib-esm/components/Badge/Badge.d.ts +13 -16
  11. package/lib-esm/components/Badge/Badge.js +10 -20
  12. package/lib-esm/components/Badge/Badge.js.map +1 -1
  13. package/lib-esm/components/Button/ActionButton.d.ts +9 -5
  14. package/lib-esm/components/Button/ActionButton.js +18 -3
  15. package/lib-esm/components/Button/ActionButton.js.map +1 -1
  16. package/lib-esm/components/Button/Button.d.ts +9 -5
  17. package/lib-esm/components/Button/Button.js +17 -5
  18. package/lib-esm/components/Button/Button.js.map +1 -1
  19. package/lib-esm/components/Button/IconButton.d.ts +9 -5
  20. package/lib-esm/components/Button/IconButton.js +18 -3
  21. package/lib-esm/components/Button/IconButton.js.map +1 -1
  22. package/lib-esm/components/Button/LinkButton.d.ts +9 -5
  23. package/lib-esm/components/Button/LinkButton.js +18 -3
  24. package/lib-esm/components/Button/LinkButton.js.map +1 -1
  25. package/lib-esm/components/Button/RaisedButton.d.ts +9 -5
  26. package/lib-esm/components/Button/RaisedButton.js +18 -3
  27. package/lib-esm/components/Button/RaisedButton.js.map +1 -1
  28. package/lib-esm/components/Card/Card.d.ts +4 -6
  29. package/lib-esm/components/Card/Card.js +16 -3
  30. package/lib-esm/components/Card/Card.js.map +1 -1
  31. package/lib-esm/components/Chip/Chip.d.ts +2 -2
  32. package/lib-esm/components/Chip/Chip.js +14 -8
  33. package/lib-esm/components/Chip/Chip.js.map +1 -1
  34. package/lib-esm/components/ChipInput/ChipInput.d.ts +28 -39
  35. package/lib-esm/components/ChipInput/ChipInput.js +35 -36
  36. package/lib-esm/components/ChipInput/ChipInput.js.map +1 -1
  37. package/lib-esm/components/Dialog/AlertDialog.d.ts +11 -12
  38. package/lib-esm/components/Dialog/AlertDialog.js +4 -11
  39. package/lib-esm/components/Dialog/AlertDialog.js.map +1 -1
  40. package/lib-esm/components/Dialog/ConfirmDialog.d.ts +13 -14
  41. package/lib-esm/components/Dialog/ConfirmDialog.js +4 -12
  42. package/lib-esm/components/Dialog/ConfirmDialog.js.map +1 -1
  43. package/lib-esm/components/Dialog/Dialog.d.ts +8 -14
  44. package/lib-esm/components/Dialog/Dialog.js +11 -9
  45. package/lib-esm/components/Dialog/Dialog.js.map +1 -1
  46. package/lib-esm/components/Dialog/PromptDialog.d.ts +18 -19
  47. package/lib-esm/components/Dialog/PromptDialog.js +10 -18
  48. package/lib-esm/components/Dialog/PromptDialog.js.map +1 -1
  49. package/lib-esm/components/DragAndDrop/DragAndDrop.d.ts +37 -59
  50. package/lib-esm/components/DragAndDrop/DragAndDrop.js +23 -26
  51. package/lib-esm/components/DragAndDrop/DragAndDrop.js.map +1 -1
  52. package/lib-esm/components/DragAndDrop/DragItem.d.ts +2 -2
  53. package/lib-esm/components/DragAndDrop/DragItem.js +40 -38
  54. package/lib-esm/components/DragAndDrop/DragItem.js.map +1 -1
  55. package/lib-esm/components/DragAndDrop/types.d.ts +3 -3
  56. package/lib-esm/components/DragAndDrop/types.js.map +1 -1
  57. package/lib-esm/components/Drawer/Drawer.d.ts +24 -31
  58. package/lib-esm/components/Drawer/Drawer.js +49 -45
  59. package/lib-esm/components/Drawer/Drawer.js.map +1 -1
  60. package/lib-esm/components/Groups/Group.d.ts +6 -8
  61. package/lib-esm/components/Groups/Group.js +12 -10
  62. package/lib-esm/components/Groups/Group.js.map +1 -1
  63. package/lib-esm/components/Input/Checkbox.d.ts +12 -15
  64. package/lib-esm/components/Input/Checkbox.js +30 -26
  65. package/lib-esm/components/Input/Checkbox.js.map +1 -1
  66. package/lib-esm/components/Input/Dropdown.d.ts +8 -18
  67. package/lib-esm/components/Input/Dropdown.js +42 -17
  68. package/lib-esm/components/Input/Dropdown.js.map +1 -1
  69. package/lib-esm/components/Input/Input.d.ts +8 -3
  70. package/lib-esm/components/Input/Input.js +20 -19
  71. package/lib-esm/components/Input/Input.js.map +1 -1
  72. package/lib-esm/components/Input/Radio.d.ts +4 -8
  73. package/lib-esm/components/Input/Radio.js +16 -13
  74. package/lib-esm/components/Input/Radio.js.map +1 -1
  75. package/lib-esm/components/Input/RadioButton.d.ts +4 -8
  76. package/lib-esm/components/Input/RadioButton.js +15 -12
  77. package/lib-esm/components/Input/RadioButton.js.map +1 -1
  78. package/lib-esm/components/Input/Select.d.ts +6 -13
  79. package/lib-esm/components/Input/Select.js +21 -18
  80. package/lib-esm/components/Input/Select.js.map +1 -1
  81. package/lib-esm/components/Input/TextArea.d.ts +6 -13
  82. package/lib-esm/components/Input/TextArea.js +29 -24
  83. package/lib-esm/components/Input/TextArea.js.map +1 -1
  84. package/lib-esm/components/Input/Toggle.d.ts +4 -9
  85. package/lib-esm/components/Input/Toggle.js +12 -10
  86. package/lib-esm/components/Input/Toggle.js.map +1 -1
  87. package/lib-esm/components/Menu/Menu.d.ts +4 -14
  88. package/lib-esm/components/Menu/Menu.js +24 -16
  89. package/lib-esm/components/Menu/Menu.js.map +1 -1
  90. package/lib-esm/components/Menu/MenuContext.d.ts +4 -4
  91. package/lib-esm/components/Menu/MenuContext.js +1 -0
  92. package/lib-esm/components/Menu/MenuContext.js.map +1 -1
  93. package/lib-esm/components/Menu/MenuItem.d.ts +10 -4
  94. package/lib-esm/components/Menu/MenuItem.js +19 -5
  95. package/lib-esm/components/Menu/MenuItem.js.map +1 -1
  96. package/lib-esm/components/Modal/Modal.d.ts +17 -23
  97. package/lib-esm/components/Modal/Modal.js +37 -34
  98. package/lib-esm/components/Modal/Modal.js.map +1 -1
  99. package/lib-esm/components/Notification/Notification.d.ts +39 -34
  100. package/lib-esm/components/Notification/Notification.js +16 -39
  101. package/lib-esm/components/Notification/Notification.js.map +1 -1
  102. package/lib-esm/components/Notification/NotificationManager.d.ts +4 -4
  103. package/lib-esm/components/Notification/NotificationManager.js +18 -14
  104. package/lib-esm/components/Notification/NotificationManager.js.map +1 -1
  105. package/lib-esm/components/Notification/index.d.ts +1 -0
  106. package/lib-esm/components/Notification/style.d.ts +2 -3
  107. package/lib-esm/components/Notification/style.js +11 -11
  108. package/lib-esm/components/Notification/style.js.map +1 -1
  109. package/lib-esm/components/Popover/Popover.d.ts +21 -20
  110. package/lib-esm/components/Popover/Popover.js +42 -44
  111. package/lib-esm/components/Popover/Popover.js.map +1 -1
  112. package/lib-esm/components/Spinner/Spinner.d.ts +14 -15
  113. package/lib-esm/components/Spinner/Spinner.js +12 -13
  114. package/lib-esm/components/Spinner/Spinner.js.map +1 -1
  115. package/lib-esm/components/Stepper/Step.d.ts +15 -12
  116. package/lib-esm/components/Stepper/Step.js +10 -8
  117. package/lib-esm/components/Stepper/Step.js.map +1 -1
  118. package/lib-esm/components/Stepper/Stepper.d.ts +11 -17
  119. package/lib-esm/components/Stepper/Stepper.js +25 -23
  120. package/lib-esm/components/Stepper/Stepper.js.map +1 -1
  121. package/lib-esm/components/Tabs/Tab.d.ts +10 -16
  122. package/lib-esm/components/Tabs/Tab.js +0 -8
  123. package/lib-esm/components/Tabs/Tab.js.map +1 -1
  124. package/lib-esm/components/Tabs/Tabs.d.ts +11 -22
  125. package/lib-esm/components/Tabs/Tabs.js +39 -31
  126. package/lib-esm/components/Tabs/Tabs.js.map +1 -1
  127. package/lib-esm/components/Toast/Toast.d.ts +7 -7
  128. package/lib-esm/components/Toast/Toast.js +13 -12
  129. package/lib-esm/components/Toast/Toast.js.map +1 -1
  130. package/lib-esm/components/Toast/ToastStory.d.ts +21 -24
  131. package/lib-esm/components/Tooltip/Tooltip.d.ts +11 -14
  132. package/lib-esm/components/Tooltip/Tooltip.js +11 -21
  133. package/lib-esm/components/Tooltip/Tooltip.js.map +1 -1
  134. package/lib-esm/icons/CheckCircle.js +2 -2
  135. package/lib-esm/icons/CheckCircle.js.map +1 -1
  136. package/lib-esm/icons/ErrorOutline.js +2 -2
  137. package/lib-esm/icons/ErrorOutline.js.map +1 -1
  138. package/lib-esm/icons/Info.js +2 -2
  139. package/lib-esm/icons/Info.js.map +1 -1
  140. package/lib-esm/icons/ReportProblem.js +2 -2
  141. package/lib-esm/icons/ReportProblem.js.map +1 -1
  142. package/lib-esm/index.js +43 -0
  143. package/lib-esm/shared/LayerManager.d.ts +5 -4
  144. package/lib-esm/shared/LayerManager.js +123 -111
  145. package/lib-esm/shared/LayerManager.js.map +1 -1
  146. package/lib-esm/shared/styles.js +4 -4
  147. package/lib-esm/shared/styles.js.map +1 -1
  148. package/package.json +66 -31
  149. package/lib-esm/components/index.js +0 -43
  150. /package/lib-esm/{components/index.js.map → index.js.map} +0 -0
@@ -1,30 +1,33 @@
1
1
  import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
2
- import { useState, Children, useEffect, isValidElement } from 'react';
3
- import PropTypes from 'prop-types';
2
+ import { forwardRef, useState, Children, useEffect, isValidElement } from 'react';
4
3
  import styled from '@emotion/styled';
5
4
  import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
6
5
 
7
6
  const Button = /*#__PURE__*/ styled("button", {
8
- target: "e6iym3a0",
7
+ target: "ewz2woa0",
9
8
  label: "Button"
10
9
  })("background-color:transparent;border:none;padding:8px 12px;font-size:14px;border-radius:3px 3px 0 0;border-bottom:", (props)=>props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none', ";color:", (props)=>props.active ? getThemeValue(THEME_NAME.PRIMARY) : getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";cursor:pointer;&:hover,&:focus{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHTER), ";border-bottom:", (props)=>props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`, ";}&[disabled]{background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";color:", getThemeValue(THEME_NAME.DISABLED), ";border-bottom:3px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}");
11
10
  const ButtonContainer = /*#__PURE__*/ styled("div", {
12
- target: "e6iym3a1",
11
+ target: "ewz2woa1",
13
12
  label: "ButtonContainer"
14
13
  })("border-bottom:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";margin-bottom:5px;position:relative;");
15
14
  const TabBody = /*#__PURE__*/ styled("div", {
16
- target: "e6iym3a2",
15
+ target: "ewz2woa2",
17
16
  label: "TabBody"
18
17
  })("min-height:150px;");
19
- function Tabs(props) {
20
- const [active, setActive] = useState(props.active);
21
- const { children } = props;
18
+ /**
19
+ * Tabs Component
20
+ * @param props - Component props
21
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
22
+ */ function TabsComponent(props, ref) {
23
+ const { active: propsActive = 0, onChange, bodyProps, children, ...rest } = props;
24
+ const [active, setActive] = useState(propsActive);
22
25
  const tabRefs = [];
23
26
  const childrenArray = Children.toArray(children);
24
27
  const switchTab = (index)=>()=>{
25
28
  setActive(index);
26
29
  tabRefs[index]?.focus();
27
- props.onChange?.(index);
30
+ onChange?.(index);
28
31
  };
29
32
  // Keyboard navigation for tab buttons
30
33
  const onTabKeyDown = (index)=>(e)=>{
@@ -39,29 +42,41 @@ function Tabs(props) {
39
42
  }
40
43
  };
41
44
  useEffect(()=>{
42
- setActive(props.active);
43
- props.onChange?.(props.active);
45
+ if (propsActive !== undefined) {
46
+ setActive(propsActive);
47
+ onChange?.(propsActive);
48
+ }
44
49
  }, [
45
- props
50
+ propsActive,
51
+ onChange
46
52
  ]);
47
53
  // Generate unique IDs for tabs and panels using sanitized tab name and index
48
54
  const sanitize = (str)=>str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();
49
55
  const tabIds = childrenArray.map((child, i)=>{
50
56
  const name = /*#__PURE__*/ isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
51
- return `nfui-tab-${sanitize(name)}-${i}`;
57
+ return `nfui-tab-${sanitize(name || '')}-${i}`;
52
58
  });
53
59
  const panelIds = childrenArray.map((child, i)=>{
54
60
  const name = /*#__PURE__*/ isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
55
- return `nfui-tabpanel-${sanitize(name)}-${i}`;
61
+ return `nfui-tabpanel-${sanitize(name || '')}-${i}`;
56
62
  });
63
+ // Sanity check for active index
64
+ if (active === undefined || active < 0 || active >= childrenArray.length) {
65
+ return null;
66
+ }
57
67
  return /*#__PURE__*/ jsxs(Fragment, {
58
68
  children: [
59
69
  /*#__PURE__*/ jsx(ButtonContainer, {
60
70
  role: "tablist",
61
71
  "aria-label": "Tabs",
62
- ...props.props,
63
- children: childrenArray.map((child, index)=>/*#__PURE__*/ jsx(Button, {
64
- ref: (el)=>tabRefs[index] = el,
72
+ ref: ref,
73
+ ...rest,
74
+ children: childrenArray.map((child, index)=>{
75
+ const reactElement = child;
76
+ return /*#__PURE__*/ jsx(Button, {
77
+ ref: (el)=>{
78
+ tabRefs[index] = el;
79
+ },
65
80
  id: tabIds[index],
66
81
  type: "button",
67
82
  role: "tab",
@@ -71,31 +86,24 @@ function Tabs(props) {
71
86
  active: active === index,
72
87
  onClick: switchTab(index),
73
88
  onKeyDown: onTabKeyDown(index),
74
- disabled: /*#__PURE__*/ isValidElement(child) ? child.props.disabled : false,
75
- "aria-disabled": /*#__PURE__*/ isValidElement(child) ? child.props.disabled : false,
76
- children: /*#__PURE__*/ isValidElement(child) ? child.props.name : ''
77
- }, tabIds[index]))
89
+ disabled: /*#__PURE__*/ isValidElement(child) ? reactElement.props.disabled : false,
90
+ "aria-disabled": /*#__PURE__*/ isValidElement(child) ? reactElement.props.disabled : false,
91
+ children: /*#__PURE__*/ isValidElement(child) ? reactElement.props.name : ''
92
+ }, tabIds[index]);
93
+ })
78
94
  }),
79
95
  /*#__PURE__*/ jsx(TabBody, {
96
+ ...bodyProps,
80
97
  id: panelIds[active],
81
98
  role: "tabpanel",
82
99
  "aria-labelledby": tabIds[active],
83
100
  tabIndex: 0,
84
- ...props.bodyProps,
85
101
  children: childrenArray[active]
86
102
  })
87
103
  ]
88
104
  });
89
105
  }
90
- Tabs.propTypes = {
91
- /** Active Tab Index */ active: PropTypes.number,
92
- /** OnChange event handler */ onChange: PropTypes.func,
93
- /** Props for div that contains tab buttons */ props: PropTypes.object,
94
- /** Props for div that contains tab body */ bodyProps: PropTypes.object
95
- };
96
- Tabs.defaultProps = {
97
- active: 0
98
- };
106
+ const Tabs = /*#__PURE__*/ forwardRef(TabsComponent);
99
107
 
100
108
  export { Tabs as default };
101
109
  //# sourceMappingURL=Tabs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"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"],"names":["Button","styled","props","active","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_DARK","PRIMARY_LIGHTER","DISABLED_BACKGROUND","DISABLED","DISABLED_BORDER","ButtonContainer","TabBody","Tabs","setActive","useState","children","tabRefs","childrenArray","Children","toArray","switchTab","index","focus","onChange","onTabKeyDown","e","key","preventDefault","next","length","prev","useEffect","sanitize","str","replace","toLowerCase","tabIds","map","child","i","name","isValidElement","panelIds","_jsxs","_Fragment","_jsx","role","aria-label","ref","el","id","type","aria-selected","aria-controls","tabIndex","onClick","onKeyDown","disabled","aria-disabled","aria-labelledby","bodyProps","propTypes","PropTypes","number","func","object","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import {\n useState,\n Children,\n useEffect,\n PropsWithChildren,\n isValidElement,\n forwardRef,\n} from 'react';\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 /**\n * Active Tab Index\n * @default 0\n */\n active?: number;\n /** OnChange event handler */\n onChange?: (index: number) => void;\n /** Props for div that contains tab body */\n bodyProps?: React.HTMLAttributes<HTMLDivElement>;\n}>;\n\n/**\n * Tabs Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction TabsComponent(props: ITabsProps, ref: React.Ref<HTMLDivElement>) {\n const { active: propsActive = 0, onChange, bodyProps, children, ...rest } = props;\n const [active, setActive] = useState(propsActive);\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 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 if (propsActive !== undefined) {\n setActive(propsActive);\n onChange?.(propsActive);\n }\n }, [propsActive, onChange]);\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 =\n isValidElement(child) && (child as React.ReactElement<{ name?: string }>).props.name\n ? (child as React.ReactElement<{ name?: string }>).props.name\n : `tab${i}`;\n return `nfui-tab-${sanitize(name || '')}-${i}`;\n });\n const panelIds = childrenArray.map((child, i) => {\n const name =\n isValidElement(child) && (child as React.ReactElement<{ name?: string }>).props.name\n ? (child as React.ReactElement<{ name?: string }>).props.name\n : `tab${i}`;\n return `nfui-tabpanel-${sanitize(name || '')}-${i}`;\n });\n\n // Sanity check for active index\n if (active === undefined || active < 0 || active >= childrenArray.length) {\n return null;\n }\n\n return (\n <>\n <ButtonContainer role=\"tablist\" aria-label=\"Tabs\" ref={ref} {...rest}>\n {childrenArray.map((child, index) => {\n const reactElement = child as React.ReactElement<{\n disabled?: boolean;\n name?: string;\n }>;\n return (\n <Button\n key={tabIds[index]}\n ref={(el) => {\n tabRefs[index] = el;\n }}\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) ? reactElement.props.disabled : false}\n aria-disabled={\n isValidElement(child) ? reactElement.props.disabled : false\n }\n >\n {isValidElement(child) ? reactElement.props.name : ''}\n </Button>\n );\n })}\n </ButtonContainer>\n <TabBody\n {...bodyProps}\n id={panelIds[active]}\n role=\"tabpanel\"\n aria-labelledby={tabIds[active]}\n tabIndex={0}\n >\n {childrenArray[active]}\n </TabBody>\n </>\n );\n}\n\nconst Tabs = forwardRef(TabsComponent);\nexport default Tabs;\n"],"names":["Button","styled","props","active","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_DARK","PRIMARY_LIGHTER","DISABLED_BACKGROUND","DISABLED","DISABLED_BORDER","ButtonContainer","TabBody","TabsComponent","ref","propsActive","onChange","bodyProps","children","rest","setActive","useState","tabRefs","childrenArray","Children","toArray","switchTab","index","focus","onTabKeyDown","e","key","preventDefault","next","length","prev","useEffect","undefined","sanitize","str","replace","toLowerCase","tabIds","map","child","i","name","isValidElement","panelIds","_jsxs","_Fragment","_jsx","role","aria-label","reactElement","el","id","type","aria-selected","aria-controls","tabIndex","onClick","onKeyDown","disabled","aria-disabled","aria-labelledby","Tabs","forwardRef"],"mappings":"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"}
@@ -13,13 +13,13 @@ export declare enum TOAST_TYPE {
13
13
  DANGER = "DANGER"
14
14
  }
15
15
  declare class Toast {
16
- private element;
17
- private ariaLiveContainer;
18
- private toast;
19
- private timeout;
20
- private root;
21
- private politeRegion;
22
- private assertiveRegion;
16
+ private element?;
17
+ private ariaLiveContainer?;
18
+ private toast?;
19
+ private timeout?;
20
+ private root?;
21
+ private politeRegion?;
22
+ private assertiveRegion?;
23
23
  private isPaused;
24
24
  private currentOptions;
25
25
  constructor();
@@ -28,15 +28,15 @@ const getBackgroundColor = (type)=>{
28
28
  }
29
29
  };
30
30
  const ToastContainer = /*#__PURE__*/ styled(Card, {
31
- target: "ei8ihm80",
31
+ target: "e1bc14ug0",
32
32
  label: "ToastContainer"
33
33
  })("box-sizing:border-box;border-radius:3px;padding:12px;background-color:", (props)=>getBackgroundColor(props.type), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";margin:20px;font-size:14px;line-height:20px;transform:translateY(100%);transition:transform 0.3s ease;width:344px;display:flex;align-items:center;position:relative;& svg{width:20px;height:20px;fill:currentColor;}@media (max-width:480px){&{margin:0;width:100vw;border-radius:0;}}.nf-layer-enter &{transform:translateY(0%);}");
34
34
  const TextContainer = /*#__PURE__*/ styled("div", {
35
- target: "ei8ihm81",
35
+ target: "e1bc14ug1",
36
36
  label: "TextContainer"
37
37
  })("flex:1;");
38
38
  const CloseContainer = /*#__PURE__*/ styled("button", {
39
- target: "ei8ihm82",
39
+ target: "e1bc14ug2",
40
40
  label: "CloseContainer"
41
41
  })("background-color:transparent;color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";padding:6px 10px;border:none;border-radius:3px;text-transform:uppercase;cursor:pointer;&:focus{background-color:rgba(255,255,255,0.1);}");
42
42
  const DEFAULT_DURATION = 2000;
@@ -59,6 +59,7 @@ const createAriaLiveRegion = (id, ariaLive)=>{
59
59
  };
60
60
  class Toast {
61
61
  add(options) {
62
+ if (!this.element) return;
62
63
  const { text, buttonText, buttonClick, duration, type = "NORMAL" } = options;
63
64
  this.currentOptions = options;
64
65
  this.isPaused = false;
@@ -117,9 +118,9 @@ class Toast {
117
118
  if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {
118
119
  document.body.removeChild(this.ariaLiveContainer);
119
120
  }
120
- this.politeRegion = null;
121
- this.assertiveRegion = null;
122
- this.ariaLiveContainer = null;
121
+ this.politeRegion = undefined;
122
+ this.assertiveRegion = undefined;
123
+ this.ariaLiveContainer = undefined;
123
124
  };
124
125
  /**
125
126
  * Set up keyboard listener for dismissing toast with Escape key
@@ -148,8 +149,8 @@ class Toast {
148
149
  * Update the appropriate live region with toast content
149
150
  */ this.updateLiveRegion = (content, isAssertive)=>{
150
151
  const region = isAssertive ? this.assertiveRegion : this.politeRegion;
151
- region.textContent = '';
152
152
  if (region) {
153
+ region.textContent = '';
153
154
  // Add content after delay
154
155
  setTimeout(()=>{
155
156
  if (region) {
@@ -163,16 +164,16 @@ class Toast {
163
164
  this.toast[1]();
164
165
  if (this.timeout) {
165
166
  clearTimeout(this.timeout);
166
- this.timeout = null;
167
+ this.timeout = undefined;
167
168
  }
168
169
  }
169
- this.toast = null;
170
+ this.toast = undefined;
170
171
  this.currentOptions = null;
171
172
  this.isPaused = false;
172
173
  setTimeout(()=>{
173
174
  if (!this.toast && this.root) {
174
175
  this.root.unmount();
175
- this.root = null;
176
+ this.root = undefined;
176
177
  }
177
178
  }, 300);
178
179
  };
@@ -217,7 +218,7 @@ class Toast {
217
218
  this.setupKeyboardListeners();
218
219
  }
219
220
  }
220
- var Toast$1 = new Toast();
221
+ var Toast_default = new Toast();
221
222
 
222
- export { TOAST_TYPE, Toast$1 as default };
223
+ export { TOAST_TYPE, Toast_default as default };
223
224
  //# sourceMappingURL=Toast.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"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 * Clean up event listeners and DOM elements\n * Call this when the app is tearing down (useful for tests)\n */\n public destroy = () => {\n if (typeof document !== 'undefined') {\n document.removeEventListener('keydown', this.handleKeyDown);\n }\n this.remove();\n if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {\n document.body.removeChild(this.ariaLiveContainer);\n }\n this.politeRegion = null;\n this.assertiveRegion = null;\n this.ariaLiveContainer = null;\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 if (this.timeout) {\n clearTimeout(this.timeout);\n this.timeout = null;\n }\n }\n this.toast = null;\n this.currentOptions = null;\n this.isPaused = false;\n\n setTimeout(() => {\n if (!this.toast && this.root) {\n this.root.unmount();\n this.root = null;\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"],"names":["TOAST_TYPE","getBackgroundColor","type","getThemeValue","THEME_NAME","INFO","SUCCESS","WARNING","ERROR","TOAST","ToastContainer","styled","Card","props","TEXT_COLOR_LIGHT","TextContainer","CloseContainer","PRIMARY_LIGHT","DEFAULT_DURATION","createAriaLiveRegion","id","ariaLive","region","document","createElement","style","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","setAttribute","Toast","add","options","text","buttonText","buttonClick","duration","currentOptions","isPaused","remove","isAssertive","announcement","updateLiveRegion","toast","LayerManager","renderLayer","exitDelay","closeOnEsc","closeOnOverlayClick","alwaysOnTop","LAYER_POSITION","BOTTOM_LEFT","component","_jsx","_Fragment","_jsxs","elevated","onMouseEnter","pause","onMouseLeave","resume","aria-hidden","onClick","aria-label","Component","root","createRoot","element","render","timeout","setTimeout","destroy","removeEventListener","handleKeyDown","ariaLiveContainer","body","contains","removeChild","politeRegion","assertiveRegion","setupKeyboardListeners","addEventListener","event","key","preventDefault","resumeTimeout","pauseTimeout","content","textContent","clearTimeout","unmount","appendChild"],"mappings":"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"}
1
+ {"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"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 * Clean up event listeners and DOM elements\n * Call this when the app is tearing down (useful for tests)\n */\n public destroy = () => {\n if (typeof document !== 'undefined') {\n document.removeEventListener('keydown', this.handleKeyDown);\n }\n this.remove();\n if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {\n document.body.removeChild(this.ariaLiveContainer);\n }\n this.politeRegion = undefined;\n this.assertiveRegion = undefined;\n this.ariaLiveContainer = undefined;\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\n if (region) {\n region.textContent = '';\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 if (this.timeout) {\n clearTimeout(this.timeout);\n this.timeout = undefined;\n }\n }\n this.toast = undefined;\n this.currentOptions = null;\n this.isPaused = false;\n\n setTimeout(() => {\n if (!this.toast && this.root) {\n this.root.unmount();\n this.root = undefined;\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 if (!this.element) return;\n\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"],"names":["TOAST_TYPE","getBackgroundColor","type","getThemeValue","THEME_NAME","INFO","SUCCESS","WARNING","ERROR","TOAST","ToastContainer","styled","Card","props","TEXT_COLOR_LIGHT","TextContainer","CloseContainer","PRIMARY_LIGHT","DEFAULT_DURATION","createAriaLiveRegion","id","ariaLive","region","document","createElement","style","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","setAttribute","Toast","add","options","element","text","buttonText","buttonClick","duration","currentOptions","isPaused","remove","isAssertive","announcement","updateLiveRegion","toast","LayerManager","renderLayer","exitDelay","closeOnEsc","closeOnOverlayClick","alwaysOnTop","LAYER_POSITION","BOTTOM_LEFT","component","_jsx","_Fragment","_jsxs","elevated","onMouseEnter","pause","onMouseLeave","resume","aria-hidden","onClick","aria-label","Component","root","createRoot","render","timeout","setTimeout","destroy","removeEventListener","handleKeyDown","ariaLiveContainer","body","contains","removeChild","politeRegion","undefined","assertiveRegion","setupKeyboardListeners","addEventListener","event","key","preventDefault","resumeTimeout","pauseTimeout","content","textContent","clearTimeout","unmount","appendChild"],"mappings":"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"}
@@ -1,27 +1,24 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
1
  import { TOAST_TYPE } from './Toast';
4
- type ToastOptions = PropTypes.InferProps<typeof ToastStory.propTypes>;
2
+ type ToastOptions = {
3
+ /** Text of the toast */
4
+ text: string;
5
+ /** Id for the notification, helps in de-duplication. */
6
+ id?: string;
7
+ /**
8
+ * Duration for the toast in milliseconds
9
+ * @default 2000
10
+ */
11
+ duration?: number;
12
+ /**
13
+ * Type of toast
14
+ * @default TOAST_TYPE.NORMAL
15
+ */
16
+ type?: TOAST_TYPE;
17
+ /** Action button text */
18
+ buttonText?: string;
19
+ /** Action button click callback */
20
+ buttonClick?: () => void;
21
+ };
5
22
  /** This component is only used for storybook documentation */
6
- export default class ToastStory extends React.Component<ToastOptions> {
7
- static propTypes: {
8
- /** Text of the toast */
9
- text: PropTypes.Validator<string>;
10
- /** Id for the notification, helps in de-duplication. */
11
- id: PropTypes.Requireable<string>;
12
- /** Duration for the toast in milliseconds */
13
- duration: PropTypes.Requireable<number>;
14
- /** Type of toast */
15
- type: PropTypes.Requireable<TOAST_TYPE>;
16
- /** Action button text */
17
- buttonText: PropTypes.Requireable<string>;
18
- /** Action button click callback */
19
- buttonClick: PropTypes.Requireable<(...args: any[]) => any>;
20
- };
21
- static defaultProps: {
22
- duration: number;
23
- type: TOAST_TYPE;
24
- };
25
- render(): React.ReactNode;
26
- }
23
+ export default function ToastStory(props: ToastOptions): null;
27
24
  export {};
@@ -1,22 +1,19 @@
1
1
  import React from 'react';
2
- import PropTypes from 'prop-types';
3
2
  export declare enum TOOLTIP_POSITION {
4
3
  TOP = "TOP",
5
4
  BOTTOM = "BOTTOM",
6
5
  LEFT = "LEFT",
7
6
  RIGHT = "RIGHT"
8
7
  }
9
- declare function Tooltip(props: React.PropsWithChildren<TooltipProps>): import("@emotion/react/jsx-runtime").JSX.Element;
10
- declare namespace Tooltip {
11
- var propTypes: {
12
- /** Text to show in the tooltip */
13
- tooltipText: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
14
- /** Position of the tooltip */
15
- position: PropTypes.Requireable<TOOLTIP_POSITION>;
16
- };
17
- var defaultProps: {
18
- position: TOOLTIP_POSITION;
19
- };
20
- }
8
+ declare const Tooltip: React.ForwardRefExoticComponent<{
9
+ /** Text to show in the tooltip */
10
+ tooltipText: string | React.ReactNode;
11
+ /**
12
+ * Position of the tooltip
13
+ * @default TOOLTIP_POSITION.BOTTOM
14
+ */
15
+ position?: TOOLTIP_POSITION;
16
+ } & {
17
+ children?: React.ReactNode | undefined;
18
+ } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
21
19
  export default Tooltip;
22
- type TooltipProps = PropTypes.InferProps<typeof Tooltip.propTypes>;
@@ -1,6 +1,5 @@
1
1
  import { jsxs, jsx } from '@emotion/react/jsx-runtime';
2
2
  import React, { useId } from 'react';
3
- import PropTypes from 'prop-types';
4
3
  import styled from '@emotion/styled';
5
4
  import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
6
5
 
@@ -44,15 +43,19 @@ const positionHoverStyle = {
44
43
  `
45
44
  };
46
45
  const TooltipDiv = /*#__PURE__*/ styled("div", {
47
- target: "es4cffs0",
46
+ target: "e1dfj1r70",
48
47
  label: "TooltipDiv"
49
48
  })("position:absolute;background-color:", getThemeValue(THEME_NAME.TOOLTIP_COLOR), ";padding:5px;color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-radius:3px;transition:transform 0.3s ease;font-size:12px;z-index:1;", (props)=>positionStyle[props.position]);
50
49
  const TooltipContainer = /*#__PURE__*/ styled("div", {
51
- target: "es4cffs1",
50
+ target: "e1dfj1r71",
52
51
  label: "TooltipContainer"
53
52
  })("position:relative;display:inline-flex;justify-content:center;align-items:center;&:hover ", TooltipDiv, ",&:focus-within ", TooltipDiv, "{", (props)=>positionHoverStyle[props.position], "}");
54
- function Tooltip(props) {
55
- const { children, position, ...rest } = props;
53
+ /**
54
+ * Tooltip Component
55
+ * @param props - Component props
56
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
57
+ */ function TooltipComponent(props, ref) {
58
+ const { children, position = "BOTTOM", ...rest } = props;
56
59
  const tooltipId = useId();
57
60
  // Clone the child to inject aria-describedby and tabIndex if possible
58
61
  const trigger = /*#__PURE__*/ React.isValidElement(children) ? /*#__PURE__*/ React.cloneElement(children, {
@@ -60,8 +63,9 @@ function Tooltip(props) {
60
63
  tabIndex: children.props && typeof children.props.tabIndex !== 'undefined' ? children.props.tabIndex : 0
61
64
  }) : children;
62
65
  return /*#__PURE__*/ jsxs(TooltipContainer, {
63
- position: position,
64
66
  ...rest,
67
+ ref: ref,
68
+ position: position,
65
69
  children: [
66
70
  trigger,
67
71
  /*#__PURE__*/ jsx(TooltipDiv, {
@@ -74,21 +78,7 @@ function Tooltip(props) {
74
78
  ]
75
79
  });
76
80
  }
77
- Tooltip.propTypes = {
78
- /** Text to show in the tooltip */ tooltipText: PropTypes.oneOfType([
79
- PropTypes.string,
80
- PropTypes.node
81
- ]).isRequired,
82
- /** Position of the tooltip */ position: PropTypes.oneOf([
83
- "TOP",
84
- "LEFT",
85
- "RIGHT",
86
- "BOTTOM"
87
- ])
88
- };
89
- Tooltip.defaultProps = {
90
- position: "BOTTOM"
91
- };
81
+ const Tooltip = /*#__PURE__*/ React.forwardRef(TooltipComponent);
92
82
 
93
83
  export { TOOLTIP_POSITION, Tooltip as default };
94
84
  //# sourceMappingURL=Tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"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"],"names":["TOOLTIP_POSITION","positionStyle","positionHoverStyle","TooltipDiv","styled","getThemeValue","THEME_NAME","TOOLTIP_COLOR","TEXT_COLOR_LIGHT","props","position","TooltipContainer","Tooltip","children","rest","tooltipId","useId","trigger","React","isValidElement","cloneElement","tabIndex","_jsxs","_jsx","id","aria-hidden","role","tooltipText","propTypes","PropTypes","oneOfType","string","node","isRequired","oneOf","defaultProps"],"mappings":";;;;;;AAKO,IAAA,gBAAKA,iBAAAA,SAAAA,gBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,gBAAAA;AAKX,CAAA,CAAA,EAAA;AAED,MAAMC,aAAAA,GAAgB;AAClB,IAAA,CAAA,MAAA,GAAyB;;;IAGzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;;IAG1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;;IAGxB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;;IAG3B;AACJ,CAAA;AAEA,MAAMC,kBAAAA,GAAqB;AACvB,IAAA,CAAA,MAAA,GAAyB;;IAEzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;IAE1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;IAExB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;IAE3B;AACJ,CAAA;AAEA,MAAMC,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEKC,CAAAA,CAAAA,CAAAA,qCAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,aAAa,CAAA,EAAA,qBAAA,EAEjDF,aAAAA,CAAcC,UAAAA,CAAWE,gBAAgB,CAAA,EAAA,6EAAA,EAKhD,CAACC,KAAAA,GAAUR,aAAa,CAACQ,KAAAA,CAAMC,QAAQ,CAAC,CAAA;AAG9C,MAAMC,gBAAAA,iBAAmBP,MAAAA,CAAAA,KAAAA,EAAAA;;;AAMXD,CAAAA,CAAAA,CAAAA,0FAAAA,EAAAA,UAAAA,EAAAA,kBAAAA,EAA8BA,iBAClC,CAACM,KAAAA,GAAUP,kBAAkB,CAACO,KAAAA,CAAMC,QAAQ,CAAC,EAAA,GAAA,CAAA;AAIxC,SAASE,QAAQH,KAA4C,EAAA;AACxE,IAAA,MAAM,EAAEI,QAAQ,EAAEH,QAAQ,EAAE,GAAGI,MAAM,GAAGL,KAAAA;AACxC,IAAA,MAAMM,SAAAA,GAAYC,KAAAA,EAAAA;;IAGlB,MAAMC,OAAAA,iBAAUC,MAAMC,cAAc,CAACN,0BAC/BK,KAAAA,CAAME,YAAY,CAACP,QAAAA,EAAgC;QAC/C,kBAAA,EAAoBE,SAAAA;AACpBM,QAAAA,QAAAA,EACIR,QAAAA,CAASJ,KAAK,IAAI,OAAOI,SAASJ,KAAK,CAACY,QAAQ,KAAK,WAAA,GAC/CR,QAAAA,CAASJ,KAAK,CAACY,QAAQ,GACvB;KACd,CAAA,GACAR,QAAAA;AAEN,IAAA,qBACIS,IAAA,CAACX,gBAAAA,EAAAA;QAAiBD,QAAAA,EAAUA,QAAAA;AAAW,QAAA,GAAGI,IAAI;;AACzCG,YAAAA,OAAAA;0BACDM,GAAA,CAACpB,UAAAA,EAAAA;gBAAWqB,EAAAA,EAAIT,SAAAA;gBAAWU,aAAAA,EAAY,MAAA;gBAAOC,IAAAA,EAAK,SAAA;gBAAUhB,QAAAA,EAAUA,QAAAA;AAClEI,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKa;;;;AAItB;AAIAf,OAAAA,CAAQgB,SAAS,GAAG;AAChB,uCACAD,WAAAA,EAAaE,SAAAA,CAAUC,SAAS,CAAC;AAACD,QAAAA,SAAAA,CAAUE,MAAM;AAAEF,QAAAA,SAAAA,CAAUG;AAAK,KAAA,CAAA,CAAEC,UAAU;AAC/E,mCACAvB,QAAAA,EAAUmB,SAAAA,CAAUK,KAAK,CAAC;;;;;AAKzB,KAAA;AACL,CAAA;AAEAtB,OAAAA,CAAQuB,YAAY,GAAG;IACnBzB,QAAQ,EAAA;AACZ,CAAA;;;;"}
1
+ {"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useId } from 'react';\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\ntype TooltipProps = React.PropsWithChildren<{\n /** Text to show in the tooltip */\n tooltipText: string | React.ReactNode;\n /**\n * Position of the tooltip\n * @default TOOLTIP_POSITION.BOTTOM\n */\n position?: TOOLTIP_POSITION;\n}> &\n React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Tooltip Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction TooltipComponent(props: TooltipProps, ref: React.Ref<HTMLDivElement>) {\n const { children, position = TOOLTIP_POSITION.BOTTOM, ...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(\n children as React.ReactElement<{ tabIndex?: number; 'aria-describedby'?: string }>,\n {\n 'aria-describedby': tooltipId,\n tabIndex:\n (\n children as React.ReactElement<{\n tabIndex?: number;\n 'aria-describedby'?: string;\n }>\n ).props &&\n typeof (\n children as React.ReactElement<{\n tabIndex?: number;\n 'aria-describedby'?: string;\n }>\n ).props.tabIndex !== 'undefined'\n ? (\n children as React.ReactElement<{\n tabIndex?: number;\n 'aria-describedby'?: string;\n }>\n ).props.tabIndex\n : 0,\n },\n )\n : children;\n\n return (\n <TooltipContainer {...rest} ref={ref} position={position}>\n {trigger}\n <TooltipDiv id={tooltipId} aria-hidden=\"true\" role=\"tooltip\" position={position}>\n {rest.tooltipText as React.ReactNode}\n </TooltipDiv>\n </TooltipContainer>\n );\n}\n\nconst Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(TooltipComponent);\nexport default Tooltip;\n"],"names":["TOOLTIP_POSITION","positionStyle","positionHoverStyle","TooltipDiv","styled","getThemeValue","THEME_NAME","TOOLTIP_COLOR","TEXT_COLOR_LIGHT","props","position","TooltipContainer","TooltipComponent","ref","children","rest","tooltipId","useId","trigger","React","isValidElement","cloneElement","tabIndex","_jsxs","_jsx","id","aria-hidden","role","tooltipText","Tooltip","forwardRef"],"mappings":";;;;;AAIO,IAAA,gBAAKA,iBAAAA,SAAAA,gBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,gBAAAA;AAKX,CAAA,CAAA,EAAA;AAED,MAAMC,aAAAA,GAAgB;AAClB,IAAA,CAAA,MAAA,GAAyB;;;IAGzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;;IAG1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;;IAGxB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;;IAG3B;AACJ,CAAA;AAEA,MAAMC,kBAAAA,GAAqB;AACvB,IAAA,CAAA,MAAA,GAAyB;;IAEzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;IAE1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;IAExB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;IAE3B;AACJ,CAAA;AAEA,MAAMC,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEKC,CAAAA,CAAAA,CAAAA,qCAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,aAAa,CAAA,EAAA,qBAAA,EAEjDF,aAAAA,CAAcC,UAAAA,CAAWE,gBAAgB,CAAA,EAAA,6EAAA,EAKhD,CAACC,KAAAA,GAAUR,aAAa,CAACQ,KAAAA,CAAMC,QAAQ,CAAC,CAAA;AAG9C,MAAMC,gBAAAA,iBAAmBP,MAAAA,CAAAA,KAAAA,EAAAA;;;AAMXD,CAAAA,CAAAA,CAAAA,0FAAAA,EAAAA,UAAAA,EAAAA,kBAAAA,EAA8BA,iBAClC,CAACM,KAAAA,GAAUP,kBAAkB,CAACO,KAAAA,CAAMC,QAAQ,CAAC,EAAA,GAAA,CAAA;AAevD;;;;AAIC,IACD,SAASE,gBAAAA,CAAiBH,KAAmB,EAAEI,GAA8B,EAAA;AACzE,IAAA,MAAM,EAAEC,QAAQ,EAAEJ,mBAAkC,EAAE,GAAGK,MAAM,GAAGN,KAAAA;AAClE,IAAA,MAAMO,SAAAA,GAAYC,KAAAA,EAAAA;;IAGlB,MAAMC,OAAAA,iBAAUC,MAAMC,cAAc,CAACN,0BAC/BK,KAAAA,CAAME,YAAY,CACdP,QAAAA,EACA;QACI,kBAAA,EAAoBE,SAAAA;AACpBM,QAAAA,QAAAA,EACI,QACIR,CAIFL,KAAK,IACP,OAAO,QACHK,CAIFL,KAAK,CAACa,QAAQ,KAAK,WAAA,GAEXR,SAIFL,KAAK,CAACa,QAAQ,GAChB;KACd,CAAA,GAEJR,QAAAA;AAEN,IAAA,qBACIS,IAAA,CAACZ,gBAAAA,EAAAA;AAAkB,QAAA,GAAGI,IAAI;QAAEF,GAAAA,EAAKA,GAAAA;QAAKH,QAAAA,EAAUA,QAAAA;;AAC3CQ,YAAAA,OAAAA;0BACDM,GAAA,CAACrB,UAAAA,EAAAA;gBAAWsB,EAAAA,EAAIT,SAAAA;gBAAWU,aAAAA,EAAY,MAAA;gBAAOC,IAAAA,EAAK,SAAA;gBAAUjB,QAAAA,EAAUA,QAAAA;AAClEK,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKa;;;;AAItB;AAEA,MAAMC,OAAAA,iBAAUV,KAAAA,CAAMW,UAAU,CAA+BlB,gBAAAA;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from '@emotion/react/jsx-runtime';
2
2
 
3
- function CheckCircle(props) {
3
+ function CheckCircle$4(props) {
4
4
  return /*#__PURE__*/ jsxs("svg", {
5
5
  height: "24",
6
6
  viewBox: "0 0 24 24",
@@ -19,5 +19,5 @@ function CheckCircle(props) {
19
19
  });
20
20
  }
21
21
 
22
- export { CheckCircle as default };
22
+ export { CheckCircle$4 as default };
23
23
  //# sourceMappingURL=CheckCircle.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CheckCircle.js","sources":["../../src/icons/CheckCircle.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n return (\n <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n <path d=\"M0 0h24v24H0V0zm0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" />\n </svg>\n );\n}\n"],"names":["CheckCircle","props","_jsxs","svg","height","viewBox","width","fill","_jsx","path","d"],"mappings":";;AAAe,SAASA,YAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,IAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;;0BACzEO,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE,gCAAA;gBAAiCH,IAAAA,EAAK;;0BAC9CC,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE;;;;AAGpB;;;;"}
1
+ {"version":3,"file":"CheckCircle.js","sources":["../../src/icons/CheckCircle.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n return (\n <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n <path d=\"M0 0h24v24H0V0zm0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" />\n </svg>\n );\n}\n"],"names":["CheckCircle","props","_jsxs","svg","height","viewBox","width","fill","_jsx","path","d"],"mappings":";;AAAe,SAASA,cAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,IAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;;0BACzEO,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE,gCAAA;gBAAiCH,IAAAA,EAAK;;0BAC9CC,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE;;;;AAGpB;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { jsx } from '@emotion/react/jsx-runtime';
2
2
 
3
- function CheckCircle(props) {
3
+ function CheckCircle$1(props) {
4
4
  return /*#__PURE__*/ jsx("svg", {
5
5
  height: "24",
6
6
  viewBox: "0 0 24 24",
@@ -13,5 +13,5 @@ function CheckCircle(props) {
13
13
  });
14
14
  }
15
15
 
16
- export { CheckCircle as default };
16
+ export { CheckCircle$1 as default };
17
17
  //# sourceMappingURL=ErrorOutline.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ErrorOutline.js","sources":["../../src/icons/ErrorOutline.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n return (\n <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n <path d=\"M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" />\n </svg>\n );\n}\n"],"names":["CheckCircle","props","_jsx","svg","height","viewBox","width","fill","path","d"],"mappings":";;AAAe,SAASA,YAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,GAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;AACzE,QAAA,QAAA,gBAAAC,GAAA,CAACM,MAAAA,EAAAA;YAAKC,CAAAA,EAAE;;;AAGpB;;;;"}
1
+ {"version":3,"file":"ErrorOutline.js","sources":["../../src/icons/ErrorOutline.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n return (\n <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n <path d=\"M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" />\n </svg>\n );\n}\n"],"names":["CheckCircle","props","_jsx","svg","height","viewBox","width","fill","path","d"],"mappings":";;AAAe,SAASA,cAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,GAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;AACzE,QAAA,QAAA,gBAAAC,GAAA,CAACM,MAAAA,EAAAA;YAAKC,CAAAA,EAAE;;;AAGpB;;;;"}