@pega/cosmos-react-core 5.0.0-dev.2.1 → 5.0.0-dev.3.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 (229) hide show
  1. package/lib/components/AIButton/AIButton.d.ts +1 -1
  2. package/lib/components/Actions/Actions.d.ts +1 -1
  3. package/lib/components/AdditionalInfo/AdditionalInfo.d.ts +1 -1
  4. package/lib/components/AppShell/AppShell.styles.d.ts +2 -2
  5. package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
  6. package/lib/components/AppShell/AppShell.styles.js +2 -1
  7. package/lib/components/AppShell/AppShell.styles.js.map +1 -1
  8. package/lib/components/AppShell/NavigationList.js +2 -2
  9. package/lib/components/AppShell/NavigationList.js.map +1 -1
  10. package/lib/components/Avatar/Avatar.d.ts +1 -1
  11. package/lib/components/Avatar/Avatar.d.ts.map +1 -1
  12. package/lib/components/Avatar/Avatar.js +4 -10
  13. package/lib/components/Avatar/Avatar.js.map +1 -1
  14. package/lib/components/Backdrop/Backdrop.d.ts +2 -2
  15. package/lib/components/Badges/Alert.d.ts +1 -1
  16. package/lib/components/Badges/Count.d.ts +1 -1
  17. package/lib/components/Badges/Keyboard.d.ts +1 -1
  18. package/lib/components/Badges/Status.d.ts +1 -1
  19. package/lib/components/Banner/Banner.d.ts +1 -1
  20. package/lib/components/Boolean/BooleanDisplay.d.ts +1 -1
  21. package/lib/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  22. package/lib/components/Breadcrumbs/Breadcrumbs.js +27 -16
  23. package/lib/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
  24. package/lib/components/ComboBox/ComboBox.d.ts +2 -2
  25. package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
  26. package/lib/components/ComboBox/ComboBox.js +47 -29
  27. package/lib/components/ComboBox/ComboBox.js.map +1 -1
  28. package/lib/components/ComboBox/ComboBoxInput.d.ts.map +1 -1
  29. package/lib/components/ComboBox/ComboBoxInput.js +1 -7
  30. package/lib/components/ComboBox/ComboBoxInput.js.map +1 -1
  31. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
  32. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +1 -5
  33. package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
  34. package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts.map +1 -1
  35. package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js +2 -10
  36. package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js.map +1 -1
  37. package/lib/components/CompositeInput/CompositeInput.d.ts.map +1 -1
  38. package/lib/components/CompositeInput/CompositeInput.js +1 -12
  39. package/lib/components/CompositeInput/CompositeInput.js.map +1 -1
  40. package/lib/components/Configuration/Configuration.d.ts +19 -9
  41. package/lib/components/Configuration/Configuration.d.ts.map +1 -1
  42. package/lib/components/Configuration/Configuration.js +49 -27
  43. package/lib/components/Configuration/Configuration.js.map +1 -1
  44. package/lib/components/Currency/CurrencyInput.d.ts.map +1 -1
  45. package/lib/components/Currency/CurrencyInput.js +2 -13
  46. package/lib/components/Currency/CurrencyInput.js.map +1 -1
  47. package/lib/components/DangerButton/DangerButton.d.ts +1 -1
  48. package/lib/components/DateTime/Input/DateInput.d.ts.map +1 -1
  49. package/lib/components/DateTime/Input/DateInput.js +1 -12
  50. package/lib/components/DateTime/Input/DateInput.js.map +1 -1
  51. package/lib/components/DateTime/Input/DateTime.styles.d.ts.map +1 -1
  52. package/lib/components/DateTime/Input/DateTime.styles.js +26 -20
  53. package/lib/components/DateTime/Input/DateTime.styles.js.map +1 -1
  54. package/lib/components/DateTime/Input/DateTimeInput.d.ts.map +1 -1
  55. package/lib/components/DateTime/Input/DateTimeInput.js +1 -12
  56. package/lib/components/DateTime/Input/DateTimeInput.js.map +1 -1
  57. package/lib/components/DateTime/Input/Duration/DurationInput.d.ts.map +1 -1
  58. package/lib/components/DateTime/Input/Duration/DurationInput.js +2 -11
  59. package/lib/components/DateTime/Input/Duration/DurationInput.js.map +1 -1
  60. package/lib/components/DateTime/Input/MonthInput.d.ts.map +1 -1
  61. package/lib/components/DateTime/Input/MonthInput.js +1 -11
  62. package/lib/components/DateTime/Input/MonthInput.js.map +1 -1
  63. package/lib/components/DateTime/Input/QuarterInput.d.ts.map +1 -1
  64. package/lib/components/DateTime/Input/QuarterInput.js +1 -11
  65. package/lib/components/DateTime/Input/QuarterInput.js.map +1 -1
  66. package/lib/components/DateTime/Input/TimeInput.d.ts.map +1 -1
  67. package/lib/components/DateTime/Input/TimeInput.js +1 -12
  68. package/lib/components/DateTime/Input/TimeInput.js.map +1 -1
  69. package/lib/components/DateTime/Input/WeekInput.d.ts.map +1 -1
  70. package/lib/components/DateTime/Input/WeekInput.js +1 -11
  71. package/lib/components/DateTime/Input/WeekInput.js.map +1 -1
  72. package/lib/components/Drawer/Drawer.js +1 -1
  73. package/lib/components/Drawer/Drawer.js.map +1 -1
  74. package/lib/components/File/FileDisplay.d.ts.map +1 -1
  75. package/lib/components/File/FileDisplay.js +1 -5
  76. package/lib/components/File/FileDisplay.js.map +1 -1
  77. package/lib/components/File/FileInput.d.ts.map +1 -1
  78. package/lib/components/File/FileInput.js +1 -11
  79. package/lib/components/File/FileInput.js.map +1 -1
  80. package/lib/components/File/FileVisual.d.ts +1 -1
  81. package/lib/components/File/FileVisual.d.ts.map +1 -1
  82. package/lib/components/File/FileVisual.js +15 -11
  83. package/lib/components/File/FileVisual.js.map +1 -1
  84. package/lib/components/Form/Form.d.ts +6 -4
  85. package/lib/components/Form/Form.d.ts.map +1 -1
  86. package/lib/components/Form/Form.js +7 -4
  87. package/lib/components/Form/Form.js.map +1 -1
  88. package/lib/components/Form/Form.test-ids.d.ts +2 -0
  89. package/lib/components/Form/Form.test-ids.d.ts.map +1 -0
  90. package/lib/components/Form/Form.test-ids.js +3 -0
  91. package/lib/components/Form/Form.test-ids.js.map +1 -0
  92. package/lib/components/HTML/HTML.d.ts +6 -4
  93. package/lib/components/HTML/HTML.d.ts.map +1 -1
  94. package/lib/components/HTML/HTML.js +7 -4
  95. package/lib/components/HTML/HTML.js.map +1 -1
  96. package/lib/components/HTML/HTML.test-ids.d.ts +2 -0
  97. package/lib/components/HTML/HTML.test-ids.d.ts.map +1 -0
  98. package/lib/components/HTML/HTML.test-ids.js +3 -0
  99. package/lib/components/HTML/HTML.test-ids.js.map +1 -0
  100. package/lib/components/Icon/Icon.d.ts +37 -8
  101. package/lib/components/Icon/Icon.d.ts.map +1 -1
  102. package/lib/components/Icon/Icon.js +97 -11
  103. package/lib/components/Icon/Icon.js.map +1 -1
  104. package/lib/components/Input/Input.d.ts.map +1 -1
  105. package/lib/components/Input/Input.js +2 -27
  106. package/lib/components/Input/Input.js.map +1 -1
  107. package/lib/components/Lightbox/Lightbox.d.ts +4 -2
  108. package/lib/components/Lightbox/Lightbox.d.ts.map +1 -1
  109. package/lib/components/Lightbox/Lightbox.js +11 -9
  110. package/lib/components/Lightbox/Lightbox.js.map +1 -1
  111. package/lib/components/Lightbox/Lightbox.styles.d.ts +1 -1
  112. package/lib/components/Lightbox/Lightbox.styles.d.ts.map +1 -1
  113. package/lib/components/Lightbox/Lightbox.test-ids.d.ts +2 -0
  114. package/lib/components/Lightbox/Lightbox.test-ids.d.ts.map +1 -0
  115. package/lib/components/Lightbox/Lightbox.test-ids.js +12 -0
  116. package/lib/components/Lightbox/Lightbox.test-ids.js.map +1 -0
  117. package/lib/components/Lightbox/Lightbox.types.d.ts +2 -2
  118. package/lib/components/Lightbox/Lightbox.types.d.ts.map +1 -1
  119. package/lib/components/Lightbox/Lightbox.types.js.map +1 -1
  120. package/lib/components/Link/Link.d.ts +6 -4
  121. package/lib/components/Link/Link.d.ts.map +1 -1
  122. package/lib/components/Link/Link.js +8 -6
  123. package/lib/components/Link/Link.js.map +1 -1
  124. package/lib/components/Link/Link.test-ids.d.ts +2 -0
  125. package/lib/components/Link/Link.test-ids.d.ts.map +1 -0
  126. package/lib/components/Link/Link.test-ids.js +7 -0
  127. package/lib/components/Link/Link.test-ids.js.map +1 -0
  128. package/lib/components/ListToolbar/ListToolbar.d.ts +1 -1
  129. package/lib/components/ListToolbar/ListToolbar.d.ts.map +1 -1
  130. package/lib/components/ListToolbar/ListToolbar.js +10 -8
  131. package/lib/components/ListToolbar/ListToolbar.js.map +1 -1
  132. package/lib/components/ListToolbar/ListToolbar.styles.d.ts +1 -1
  133. package/lib/components/ListToolbar/ListToolbar.styles.d.ts.map +1 -1
  134. package/lib/components/Location/LocationDisplay.d.ts.map +1 -1
  135. package/lib/components/Location/LocationDisplay.js +1 -6
  136. package/lib/components/Location/LocationDisplay.js.map +1 -1
  137. package/lib/components/Location/LocationInput.d.ts.map +1 -1
  138. package/lib/components/Location/LocationInput.js +3 -30
  139. package/lib/components/Location/LocationInput.js.map +1 -1
  140. package/lib/components/Location/LocationView.d.ts +1 -1
  141. package/lib/components/Location/LocationView.d.ts.map +1 -1
  142. package/lib/components/Menu/Menu.styles.d.ts +1 -1
  143. package/lib/components/Menu/Menu.styles.d.ts.map +1 -1
  144. package/lib/components/Menu/Menu.styles.js +2 -2
  145. package/lib/components/Menu/Menu.styles.js.map +1 -1
  146. package/lib/components/Menu/MenuItem.d.ts.map +1 -1
  147. package/lib/components/Menu/MenuItem.js +1 -1
  148. package/lib/components/Menu/MenuItem.js.map +1 -1
  149. package/lib/components/Modal/Modal.js +1 -1
  150. package/lib/components/Modal/Modal.js.map +1 -1
  151. package/lib/components/MultiStepForm/FormProgress.styles.d.ts +1 -1
  152. package/lib/components/MultiStepForm/FormProgress.styles.d.ts.map +1 -1
  153. package/lib/components/MultiStepForm/FormProgress.styles.js +1 -2
  154. package/lib/components/MultiStepForm/FormProgress.styles.js.map +1 -1
  155. package/lib/components/Number/NumberInput.d.ts.map +1 -1
  156. package/lib/components/Number/NumberInput.js +3 -15
  157. package/lib/components/Number/NumberInput.js.map +1 -1
  158. package/lib/components/Phone/PhoneInput.d.ts.map +1 -1
  159. package/lib/components/Phone/PhoneInput.js +1 -12
  160. package/lib/components/Phone/PhoneInput.js.map +1 -1
  161. package/lib/components/Progress/Progress.styles.d.ts +1 -1
  162. package/lib/components/Progress/Progress.styles.d.ts.map +1 -1
  163. package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts.map +1 -1
  164. package/lib/components/RadioCheckGroup/RadioCheckGroup.js +1 -8
  165. package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map +1 -1
  166. package/lib/components/SearchInput/SearchInput.d.ts +2 -2
  167. package/lib/components/SearchInput/SearchInput.d.ts.map +1 -1
  168. package/lib/components/SearchInput/SearchInput.js +69 -19
  169. package/lib/components/SearchInput/SearchInput.js.map +1 -1
  170. package/lib/components/SearchInput/SearchInput.styles.d.ts.map +1 -1
  171. package/lib/components/SearchInput/SearchInput.styles.js +4 -0
  172. package/lib/components/SearchInput/SearchInput.styles.js.map +1 -1
  173. package/lib/components/Select/Select.d.ts.map +1 -1
  174. package/lib/components/Select/Select.js +1 -14
  175. package/lib/components/Select/Select.js.map +1 -1
  176. package/lib/components/Slider/Slider.d.ts.map +1 -1
  177. package/lib/components/Slider/Slider.js +2 -12
  178. package/lib/components/Slider/Slider.js.map +1 -1
  179. package/lib/components/TextArea/TextArea.d.ts.map +1 -1
  180. package/lib/components/TextArea/TextArea.js +2 -30
  181. package/lib/components/TextArea/TextArea.js.map +1 -1
  182. package/lib/components/Toaster/Toaster.d.ts +4 -2
  183. package/lib/components/Toaster/Toaster.d.ts.map +1 -1
  184. package/lib/components/Toaster/Toaster.js +18 -16
  185. package/lib/components/Toaster/Toaster.js.map +1 -1
  186. package/lib/components/Toaster/Toaster.test-ids.d.ts +2 -0
  187. package/lib/components/Toaster/Toaster.test-ids.d.ts.map +1 -0
  188. package/lib/components/Toaster/Toaster.test-ids.js +3 -0
  189. package/lib/components/Toaster/Toaster.test-ids.js.map +1 -0
  190. package/lib/components/Toaster/Toaster.types.d.ts +2 -1
  191. package/lib/components/Toaster/Toaster.types.d.ts.map +1 -1
  192. package/lib/components/Toaster/Toaster.types.js.map +1 -1
  193. package/lib/components/Tooltip/Tooltip.d.ts +6 -4
  194. package/lib/components/Tooltip/Tooltip.d.ts.map +1 -1
  195. package/lib/components/Tooltip/Tooltip.js +7 -5
  196. package/lib/components/Tooltip/Tooltip.js.map +1 -1
  197. package/lib/components/Tooltip/Tooltip.test-ids.d.ts +2 -0
  198. package/lib/components/Tooltip/Tooltip.test-ids.d.ts.map +1 -0
  199. package/lib/components/Tooltip/Tooltip.test-ids.js +3 -0
  200. package/lib/components/Tooltip/Tooltip.test-ids.js.map +1 -0
  201. package/lib/components/Tree/StandardTree.styles.d.ts +5 -3
  202. package/lib/components/Tree/StandardTree.styles.d.ts.map +1 -1
  203. package/lib/components/Tree/Tree.d.ts +6 -4
  204. package/lib/components/Tree/Tree.d.ts.map +1 -1
  205. package/lib/components/Tree/Tree.js +7 -3
  206. package/lib/components/Tree/Tree.js.map +1 -1
  207. package/lib/components/Tree/Tree.test-ids.d.ts +3 -0
  208. package/lib/components/Tree/Tree.test-ids.d.ts.map +1 -0
  209. package/lib/components/Tree/Tree.test-ids.js +4 -0
  210. package/lib/components/Tree/Tree.test-ids.js.map +1 -0
  211. package/lib/hooks/useActiveDescendant.d.ts.map +1 -1
  212. package/lib/hooks/useActiveDescendant.js +4 -1
  213. package/lib/hooks/useActiveDescendant.js.map +1 -1
  214. package/lib/hooks/useI18n.d.ts +35 -0
  215. package/lib/hooks/useI18n.d.ts.map +1 -1
  216. package/lib/i18n/default.d.ts +35 -0
  217. package/lib/i18n/default.d.ts.map +1 -1
  218. package/lib/i18n/default.js +37 -1
  219. package/lib/i18n/default.js.map +1 -1
  220. package/lib/i18n/i18n.d.ts +35 -0
  221. package/lib/i18n/i18n.d.ts.map +1 -1
  222. package/lib/theme/theme.d.ts +37 -6
  223. package/lib/theme/theme.d.ts.map +1 -1
  224. package/lib/theme/themeDefinition.json +12 -4
  225. package/lib/theme/themeOverrides.schema.json +22 -3
  226. package/lib/theme/themes/aries2023DarkTheme.json +1 -3
  227. package/lib/theme/themes/aries2023Theme.json +1 -1
  228. package/lib/theme/themes/darkTheme.json +1 -3
  229. package/package.json +6 -6
@@ -38,36 +38,8 @@ const TextArea = forwardRef(function TextArea(props, ref) {
38
38
  resizeTextArea();
39
39
  }
40
40
  }, [onChangeProp, resizeTextArea, hardStop, maxLength]);
41
- const Comp = (_jsx(StyledFormControl, { ...{
42
- 'data-testid': testIds.control,
43
- ref: autoResize ? consolidatedRef : ref,
44
- id,
45
- required,
46
- disabled,
47
- status,
48
- readOnly,
49
- resizable,
50
- maxLength: hardStop ? maxLength : undefined,
51
- hasSuggestion: status === 'pending' && !!onResolveSuggestion,
52
- ...controlProp,
53
- ...restProps,
54
- onChange,
55
- as: StyledTextArea
56
- } }));
57
- return label || displayCharCount ? (_jsx(FormField, { ...{
58
- testId: testIds,
59
- additionalInfo,
60
- label,
61
- labelHidden,
62
- id,
63
- readOnly,
64
- info,
65
- status,
66
- charLimitDisplay: displayCharCount && typeof maxLength === 'number' ? (_jsx(Text, { readOnly: readOnly, variant: 'secondary', "aria-live": maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off', children: maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount })) : undefined,
67
- required,
68
- disabled,
69
- onResolveSuggestion
70
- }, children: Comp })) : (Comp);
41
+ const Comp = (_jsx(StyledFormControl, { "data-testid": testIds.control, ref: autoResize ? consolidatedRef : ref, id: id, required: required, disabled: disabled, status: status, readOnly: readOnly, resizable: resizable, maxLength: hardStop ? maxLength : undefined, hasSuggestion: status === 'pending' && !!onResolveSuggestion, ...controlProp, ...restProps, onChange: onChange, as: StyledTextArea }));
42
+ return label || displayCharCount ? (_jsx(FormField, { testId: testIds, additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, readOnly: readOnly, info: info, status: status, charLimitDisplay: displayCharCount && typeof maxLength === 'number' ? (_jsx(Text, { readOnly: readOnly, variant: 'secondary', "aria-live": maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off', children: maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount })) : undefined, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, children: Comp })) : (Comp);
71
43
  });
72
44
  export default withTestIds(TextArea, getTextAreaTestIds);
73
45
  //# sourceMappingURL=TextArea.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n Ref,\n forwardRef,\n PropsWithoutRef,\n ChangeEvent,\n useCallback,\n useState,\n ChangeEventHandler,\n useEffect\n} from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp, withTestIds } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /** Minimum length of characters that can be input. */\n minLength?: number;\n /** Maximum length of characters that can be input. */\n maxLength?: number;\n /**\n * Allows the user to resize the Text Area.\n * @default false\n */\n resizable?: boolean;\n /**\n * Enables the Text Area to resize itself automatically.\n * @default true\n */\n autoResize?: boolean;\n /**\n * Display a live character count in relation to the maxLength.\n * @default false\n */\n displayCharCount?: boolean;\n /**\n * Allow or disallow a value beyond the maxLength.\n * @default true\n */\n hardStop?: boolean;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(function TextArea(\n props: PropsWithoutRef<TextAreaProps>,\n ref: Ref<HTMLTextAreaElement>\n) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n id = uid,\n value,\n defaultValue,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n labelHidden,\n info,\n status,\n resizable = false,\n autoResize = true,\n maxLength,\n displayCharCount = false,\n hardStop = true,\n onChange: onChangeProp,\n onResolveSuggestion,\n ...restProps\n } = props;\n const t = useI18n();\n\n const testIds = useTestIds(testId, getTextAreaTestIds);\n\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>();\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const [charCount, setCharCount] = useState(0);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n useEffect(() => {\n if ('value' in props) {\n setCharCount(props.value ? props.value.length : 0);\n } else if ('defaultValue' in props) {\n setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n }\n }, [props]);\n\n // Conditionally render component as controlled/uncontrolled\n if (hasProp(props, 'value')) {\n controlProp.value = value ?? '';\n } else if (hasProp(props, 'defaultValue')) {\n controlProp.defaultValue = defaultValue ?? '';\n }\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n resizeTextArea();\n }\n },\n [onChangeProp, resizeTextArea, hardStop, maxLength]\n );\n\n const Comp = (\n <StyledFormControl\n {...{\n 'data-testid': testIds.control,\n ref: autoResize ? consolidatedRef : ref,\n id,\n required,\n disabled,\n status,\n readOnly,\n resizable,\n maxLength: hardStop ? maxLength : undefined,\n hasSuggestion: status === 'pending' && !!onResolveSuggestion,\n ...controlProp,\n ...restProps,\n onChange,\n as: StyledTextArea\n }}\n />\n );\n\n return label || displayCharCount ? (\n <FormField\n {...{\n testId: testIds,\n additionalInfo,\n label,\n labelHidden,\n id,\n readOnly,\n info,\n status,\n charLimitDisplay:\n displayCharCount && typeof maxLength === 'number' ? (\n <Text\n readOnly={readOnly}\n variant='secondary'\n aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n >\n {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n </Text>\n ) : undefined,\n required,\n disabled,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}
1
+ {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n Ref,\n forwardRef,\n PropsWithoutRef,\n ChangeEvent,\n useCallback,\n useState,\n ChangeEventHandler,\n useEffect\n} from 'react';\n\nimport { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp, withTestIds } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /** Minimum length of characters that can be input. */\n minLength?: number;\n /** Maximum length of characters that can be input. */\n maxLength?: number;\n /**\n * Allows the user to resize the Text Area.\n * @default false\n */\n resizable?: boolean;\n /**\n * Enables the Text Area to resize itself automatically.\n * @default true\n */\n autoResize?: boolean;\n /**\n * Display a live character count in relation to the maxLength.\n * @default false\n */\n displayCharCount?: boolean;\n /**\n * Allow or disallow a value beyond the maxLength.\n * @default true\n */\n hardStop?: boolean;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(function TextArea(\n props: PropsWithoutRef<TextAreaProps>,\n ref: Ref<HTMLTextAreaElement>\n) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n id = uid,\n value,\n defaultValue,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n labelHidden,\n info,\n status,\n resizable = false,\n autoResize = true,\n maxLength,\n displayCharCount = false,\n hardStop = true,\n onChange: onChangeProp,\n onResolveSuggestion,\n ...restProps\n } = props;\n const t = useI18n();\n\n const testIds = useTestIds(testId, getTextAreaTestIds);\n\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>();\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const [charCount, setCharCount] = useState(0);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n useEffect(() => {\n if ('value' in props) {\n setCharCount(props.value ? props.value.length : 0);\n } else if ('defaultValue' in props) {\n setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n }\n }, [props]);\n\n // Conditionally render component as controlled/uncontrolled\n if (hasProp(props, 'value')) {\n controlProp.value = value ?? '';\n } else if (hasProp(props, 'defaultValue')) {\n controlProp.defaultValue = defaultValue ?? '';\n }\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n resizeTextArea();\n }\n },\n [onChangeProp, resizeTextArea, hardStop, maxLength]\n );\n\n const Comp = (\n <StyledFormControl\n data-testid={testIds.control}\n ref={autoResize ? consolidatedRef : ref}\n id={id}\n required={required}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n resizable={resizable}\n maxLength={hardStop ? maxLength : undefined}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n {...controlProp}\n {...restProps}\n onChange={onChange}\n as={StyledTextArea}\n />\n );\n\n return label || displayCharCount ? (\n <FormField\n testId={testIds}\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n readOnly={readOnly}\n info={info}\n status={status}\n charLimitDisplay={\n displayCharCount && typeof maxLength === 'number' ? (\n <Text\n readOnly={readOnly}\n variant='secondary'\n aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n >\n {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n </Text>\n ) : undefined\n }\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}
@@ -7,6 +7,8 @@ declare module '../../init' {
7
7
  toasterContext?: Context<ToasterContextValue>;
8
8
  }
9
9
  }
10
- declare const Toaster: FunctionComponent<ToasterProps>;
11
- export default Toaster;
10
+ declare const _default: FunctionComponent<ToasterProps> & {
11
+ getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["toast"]>;
12
+ };
13
+ export default _default;
12
14
  //# sourceMappingURL=Toaster.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAGjB,OAAO,EAQR,MAAM,OAAO,CAAC;AAWf,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAgB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAkB,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAmBhE,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KAC/C;CACF;AAuJD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAiF5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAGjB,OAAO,EAQR,MAAM,OAAO,CAAC;AAWf,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAgB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAkB,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAoBhE,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KAC/C;CACF;;;;AAuPD,wBAAuD"}
@@ -6,12 +6,13 @@ import styled, { css } from 'styled-components';
6
6
  import Button from '../Button';
7
7
  import Icon, { registerIcon } from '../Icon';
8
8
  import * as timesIcon from '../Icon/icons/times.icon';
9
- import { createUID, windowIsAvailable } from '../../utils';
10
- import { useConfiguration, useI18n, useLiveLog } from '../../hooks';
9
+ import { createUID, windowIsAvailable, withTestIds } from '../../utils';
10
+ import { useConfiguration, useI18n, useLiveLog, useTestIds } from '../../hooks';
11
11
  import { defaultThemeProp } from '../../theme';
12
12
  import Flex from '../Flex';
13
13
  import '../../init';
14
14
  import { ToasterContext } from './Context';
15
+ import { getToasterTestIds } from './Toaster.test-ids';
15
16
  registerIcon(timesIcon);
16
17
  const StyledToastButton = styled.button(({ theme }) => css `
17
18
  border: none;
@@ -82,46 +83,47 @@ function reducer(current, action) {
82
83
  return current;
83
84
  }
84
85
  }
85
- const Toast = forwardRef(function Toast({ dispatch, topLevelDismiss, dismissAfter, ...message }, ref) {
86
- const { content, translateY } = message;
86
+ const Toast = forwardRef(function Toast({ id, dispatch, topLevelDismiss, dismissAfter, content, translateY, onDismiss, ...restProps }, ref) {
87
87
  const [dismissed, setDismissed] = useState(false);
88
88
  const timeoutRef = useRef(NaN);
89
89
  const t = useI18n();
90
90
  const { announcePolite } = useLiveLog();
91
91
  useEffect(() => {
92
- announcePolite({ message: message.content, type: 'acknowledgement' });
92
+ announcePolite({ message: content, type: 'acknowledgement' });
93
93
  }, []);
94
94
  const onTransitionEnd = (e) => {
95
95
  if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {
96
- dispatch({ type: 'unmount', payload: message.id });
96
+ dispatch({ type: 'unmount', payload: id });
97
97
  }
98
98
  };
99
- const dismiss = () => {
99
+ const dismiss = (timeout) => () => {
100
100
  clearTimeout(timeoutRef.current);
101
101
  if (dismissed)
102
102
  return;
103
103
  setDismissed(true);
104
- topLevelDismiss?.({ id: message.id, timeout: false });
104
+ onDismiss?.({ id, timeout });
105
+ topLevelDismiss?.({ id, timeout });
105
106
  };
106
107
  useEffect(() => {
107
108
  if (Number.isFinite(dismissAfter)) {
108
- timeoutRef.current = window.setTimeout(dismiss, dismissAfter);
109
+ timeoutRef.current = window.setTimeout(dismiss(true), dismissAfter);
109
110
  }
110
111
  return () => {
111
112
  window.clearTimeout(timeoutRef.current);
112
113
  };
113
114
  }, []);
114
- return (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.25 }, as: StyledToast, ref: ref, style: {
115
+ return (_jsxs(Flex, { ...restProps, container: { alignItems: 'center', gap: 0.25 }, as: StyledToast, ref: ref, style: {
115
116
  '--translateY': `${-translateY}px`,
116
117
  '--opacity': dismissed ? '0' : '1',
117
118
  '--scale': dismissed ? '0' : '1'
118
- }, onTransitionEnd: onTransitionEnd, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledToastContent, children: content }), _jsx(Button, { as: StyledToastButton, variant: 'simple', onClick: dismiss, icon: true, "aria-label": t('dismiss_label'), children: _jsx(Icon, { name: 'times' }) })] }));
119
+ }, onTransitionEnd: onTransitionEnd, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledToastContent, children: content }), _jsx(Button, { as: StyledToastButton, variant: 'simple', onClick: dismiss(false), icon: true, "aria-label": t('dismiss_label'), children: _jsx(Icon, { name: 'times' }) })] }));
119
120
  });
120
- const Toaster = ({ children, dismissAfter = Infinity, onDismiss }) => {
121
+ const Toaster = ({ testId, children, dismissAfter = Infinity, onDismiss }) => {
121
122
  const { portalTarget } = useConfiguration();
122
123
  const [messages, dispatch] = useReducer(reducer, []);
123
124
  const [yOffsets, setYOffsets] = useState([]);
124
125
  const heightHashRef = useRef({});
126
+ const testIds = useTestIds(testId, getToasterTestIds);
125
127
  // This effect will cause a re-render with a translateY value set for each toast.
126
128
  useLayoutEffect(() => {
127
129
  const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);
@@ -141,7 +143,7 @@ const Toaster = ({ children, dismissAfter = Infinity, onDismiss }) => {
141
143
  });
142
144
  },
143
145
  initialized: true
144
- }), [onDismiss, dismissAfter]);
146
+ }), []);
145
147
  // Don't create additional ToasterContext.Providers.
146
148
  const context = windowIsAvailable
147
149
  ? window.cosmos.toasterContext ?? ToasterContext
@@ -152,8 +154,8 @@ const Toaster = ({ children, dismissAfter = Infinity, onDismiss }) => {
152
154
  }
153
155
  return (_jsxs(_Fragment, { children: [_jsx(context.Provider, { value: providerValue, children: children }), !!messages.length &&
154
156
  portalTarget &&
155
- createPortal(_jsx(StyledToaster, { children: messages.map((message, i) => {
156
- return (_createElement(Toast, { ...message, translateY: yOffsets[i] ?? 0, topLevelDismiss: onDismiss, dismissAfter: message.dismissAfter ?? dismissAfter, key: message.id, dispatch: dispatch, ref: el => {
157
+ createPortal(_jsx(StyledToaster, { "data-testid": testIds.root, children: messages.map((message, i) => {
158
+ return (_createElement(Toast, { "data-testid": testIds.toast, ...message, translateY: yOffsets[i] ?? 0, topLevelDismiss: onDismiss, dismissAfter: message.dismissAfter ?? dismissAfter, key: message.id, dispatch: dispatch, ref: el => {
157
159
  if (el) {
158
160
  heightHashRef.current[message.id] = el.offsetHeight;
159
161
  }
@@ -163,5 +165,5 @@ const Toaster = ({ children, dismissAfter = Infinity, onDismiss }) => {
163
165
  } }));
164
166
  }) }), portalTarget)] }));
165
167
  };
166
- export default Toaster;
168
+ export default withTestIds(Toaster, getToasterTestIds);
167
169
  //# sourceMappingURL=Toaster.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useContext,\n useReducer,\n useMemo,\n useLayoutEffect,\n FunctionComponent,\n CSSProperties,\n TransitionEvent,\n Context,\n useRef,\n useState,\n forwardRef,\n PropsWithoutRef,\n Ref,\n useEffect,\n Dispatch\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { createUID, windowIsAvailable } from '../../utils';\nimport { useConfiguration, useI18n, useLiveLog } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport '../../init';\n\nimport { ToastMessage, ToasterProps } from './Toaster.types';\nimport { ToasterContext, ToasterContextValue } from './Context';\n\nregisterIcon(timesIcon);\n\ninterface ToastState extends ToastMessage {\n id: NonNullable<ToastMessage['id']>;\n}\n\ntype ToastReducerAction =\n | { type: 'push'; payload: ToastState }\n | { type: 'unmount'; payload: ToastState['id'] };\n\ninterface ToastProps extends ToastState {\n topLevelDismiss: ToasterProps['onDismiss'];\n translateY: number;\n dispatch: Dispatch<ToastReducerAction>;\n ref: Ref<HTMLDivElement>;\n}\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n toasterContext?: Context<ToasterContextValue>;\n }\n}\n\nconst StyledToastButton = styled.button(\n ({ theme }) => css`\n border: none;\n color: inherit;\n padding: 0;\n font-size: 1rem;\n\n &:enabled:hover {\n background: #ffffff19;\n }\n\n &:enabled:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledToastButton.defaultProps = defaultThemeProp;\n\nconst StyledToastContent = styled.div(({ theme }) => {\n return css`\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: ${theme.base['font-size']};\n margin-inline-start: calc(${theme.base['border-radius']} / 2);\n `;\n});\n\nStyledToastContent.defaultProps = defaultThemeProp;\n\nconst StyledToast = styled.div(({ theme }) => {\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n padding: calc(${theme.base.spacing} / 2);\n background: ${theme.base.colors.slate['extra-dark']};\n color: ${theme.base.colors.white};\n border-radius: calc(${theme.base['border-radius']} / 2);\n opacity: var(--opacity);\n transform: translateY(var(--translateY)) scale(var(--scale));\n transition-property: transform, opacity;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledToast.defaultProps = defaultThemeProp;\n\nconst StyledToaster = styled.div`\n position: fixed;\n z-index: ${({ theme }) => theme.base['z-index'].toast};\n width: min(40ch, calc(100% - 1rem));\n inset-inline-start: 50%;\n transform: translateX(-50%);\n top: 100%;\n`;\n\nStyledToaster.defaultProps = defaultThemeProp;\n\nfunction reducer(current: ToastState[], action: ToastReducerAction) {\n switch (action.type) {\n case 'push':\n return [\n ...current,\n {\n ...action.payload\n }\n ];\n\n case 'unmount':\n return current.filter(m => m.id !== action.payload);\n\n default:\n return current;\n }\n}\n\nconst Toast: FunctionComponent<ToastProps> = forwardRef(function Toast(\n { dispatch, topLevelDismiss, dismissAfter, ...message }: PropsWithoutRef<ToastProps>,\n ref: ToastProps['ref']\n) {\n const { content, translateY } = message;\n const [dismissed, setDismissed] = useState(false);\n const timeoutRef = useRef(NaN);\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n\n useEffect(() => {\n announcePolite({ message: message.content, type: 'acknowledgement' });\n }, []);\n\n const onTransitionEnd = (e: TransitionEvent<HTMLDivElement>) => {\n if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {\n dispatch({ type: 'unmount', payload: message.id });\n }\n };\n\n const dismiss = () => {\n clearTimeout(timeoutRef.current);\n if (dismissed) return;\n setDismissed(true);\n topLevelDismiss?.({ id: message.id, timeout: false });\n };\n\n useEffect(() => {\n if (Number.isFinite(dismissAfter)) {\n timeoutRef.current = window.setTimeout(dismiss, dismissAfter);\n }\n\n return () => {\n window.clearTimeout(timeoutRef.current);\n };\n }, []);\n\n return (\n <Flex\n container={{ alignItems: 'center', gap: 0.25 }}\n as={StyledToast}\n ref={ref}\n style={\n {\n '--translateY': `${-translateY}px`,\n '--opacity': dismissed ? '0' : '1',\n '--scale': dismissed ? '0' : '1'\n } as CSSProperties\n }\n onTransitionEnd={onTransitionEnd}\n >\n <Flex item={{ grow: 1 }} as={StyledToastContent}>\n {content}\n </Flex>\n <Button\n as={StyledToastButton}\n variant='simple'\n onClick={dismiss}\n icon\n aria-label={t('dismiss_label')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n );\n});\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n children,\n dismissAfter = Infinity,\n onDismiss\n}: ToasterProps) => {\n const { portalTarget } = useConfiguration();\n const [messages, dispatch] = useReducer(reducer, []);\n const [yOffsets, setYOffsets] = useState<number[]>([]);\n const heightHashRef = useRef<{\n [id: string]: number;\n }>({});\n\n // This effect will cause a re-render with a translateY value set for each toast.\n useLayoutEffect(() => {\n const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);\n\n setYOffsets(\n heights\n .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))\n .reverse()\n );\n }, [messages.length]);\n\n const providerValue = useMemo(\n () => ({\n push(incoming: ToastMessage) {\n const message: ToastState = {\n ...incoming,\n id: incoming.id ?? createUID()\n };\n\n dispatch({\n type: 'push',\n payload: message\n });\n },\n initialized: true\n }),\n [onDismiss, dismissAfter]\n );\n\n // Don't create additional ToasterContext.Providers.\n const context = windowIsAvailable\n ? window.cosmos.toasterContext ?? ToasterContext\n : ToasterContext;\n const priorCtx = useContext(context);\n if (priorCtx.initialized) {\n return <context.Provider value={priorCtx}>{children}</context.Provider>;\n }\n\n return (\n <>\n <context.Provider value={providerValue}>{children}</context.Provider>\n {!!messages.length &&\n portalTarget &&\n createPortal(\n <StyledToaster>\n {messages.map((message, i) => {\n return (\n <Toast\n {...message}\n translateY={yOffsets[i] ?? 0}\n topLevelDismiss={onDismiss}\n dismissAfter={message.dismissAfter ?? dismissAfter}\n key={message.id}\n dispatch={dispatch}\n ref={el => {\n if (el) {\n heightHashRef.current[message.id] = el.offsetHeight;\n } else {\n delete heightHashRef.current[message.id];\n }\n }}\n />\n );\n })}\n </StyledToaster>,\n portalTarget\n )}\n </>\n );\n};\n\nexport default Toaster;\n"]}
1
+ {"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useContext,\n useReducer,\n useMemo,\n useLayoutEffect,\n FunctionComponent,\n CSSProperties,\n TransitionEvent,\n Context,\n useRef,\n useState,\n forwardRef,\n PropsWithoutRef,\n Ref,\n useEffect,\n Dispatch\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { createUID, windowIsAvailable, withTestIds } from '../../utils';\nimport { useConfiguration, useI18n, useLiveLog, useTestIds } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport '../../init';\n\nimport { ToastMessage, ToasterProps } from './Toaster.types';\nimport { ToasterContext, ToasterContextValue } from './Context';\nimport { getToasterTestIds } from './Toaster.test-ids';\n\nregisterIcon(timesIcon);\n\ninterface ToastState extends ToastMessage {\n id: NonNullable<ToastMessage['id']>;\n}\n\ntype ToastReducerAction =\n | { type: 'push'; payload: ToastState }\n | { type: 'unmount'; payload: ToastState['id'] };\n\ninterface ToastProps extends ToastState {\n topLevelDismiss: ToasterProps['onDismiss'];\n translateY: number;\n dispatch: Dispatch<ToastReducerAction>;\n ref: Ref<HTMLDivElement>;\n}\n\ndeclare module '../../init' {\n export interface CosmosGlobals {\n toasterContext?: Context<ToasterContextValue>;\n }\n}\n\nconst StyledToastButton = styled.button(\n ({ theme }) => css`\n border: none;\n color: inherit;\n padding: 0;\n font-size: 1rem;\n\n &:enabled:hover {\n background: #ffffff19;\n }\n\n &:enabled:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledToastButton.defaultProps = defaultThemeProp;\n\nconst StyledToastContent = styled.div(({ theme }) => {\n return css`\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: ${theme.base['font-size']};\n margin-inline-start: calc(${theme.base['border-radius']} / 2);\n `;\n});\n\nStyledToastContent.defaultProps = defaultThemeProp;\n\nconst StyledToast = styled.div(({ theme }) => {\n return css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n width: 100%;\n padding: calc(${theme.base.spacing} / 2);\n background: ${theme.base.colors.slate['extra-dark']};\n color: ${theme.base.colors.white};\n border-radius: calc(${theme.base['border-radius']} / 2);\n opacity: var(--opacity);\n transform: translateY(var(--translateY)) scale(var(--scale));\n transition-property: transform, opacity;\n transition-duration: ${theme.base.animation.speed};\n transition-timing-function: ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledToast.defaultProps = defaultThemeProp;\n\nconst StyledToaster = styled.div`\n position: fixed;\n z-index: ${({ theme }) => theme.base['z-index'].toast};\n width: min(40ch, calc(100% - 1rem));\n inset-inline-start: 50%;\n transform: translateX(-50%);\n top: 100%;\n`;\n\nStyledToaster.defaultProps = defaultThemeProp;\n\nfunction reducer(current: ToastState[], action: ToastReducerAction) {\n switch (action.type) {\n case 'push':\n return [\n ...current,\n {\n ...action.payload\n }\n ];\n\n case 'unmount':\n return current.filter(m => m.id !== action.payload);\n\n default:\n return current;\n }\n}\n\nconst Toast: FunctionComponent<ToastProps> = forwardRef(function Toast(\n {\n id,\n dispatch,\n topLevelDismiss,\n dismissAfter,\n content,\n translateY,\n onDismiss,\n ...restProps\n }: PropsWithoutRef<ToastProps>,\n ref: ToastProps['ref']\n) {\n const [dismissed, setDismissed] = useState(false);\n const timeoutRef = useRef(NaN);\n const t = useI18n();\n const { announcePolite } = useLiveLog();\n\n useEffect(() => {\n announcePolite({ message: content, type: 'acknowledgement' });\n }, []);\n\n const onTransitionEnd = (e: TransitionEvent<HTMLDivElement>) => {\n if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {\n dispatch({ type: 'unmount', payload: id });\n }\n };\n\n const dismiss = (timeout: boolean) => () => {\n clearTimeout(timeoutRef.current);\n if (dismissed) return;\n setDismissed(true);\n onDismiss?.({ id, timeout });\n topLevelDismiss?.({ id, timeout });\n };\n\n useEffect(() => {\n if (Number.isFinite(dismissAfter)) {\n timeoutRef.current = window.setTimeout(dismiss(true), dismissAfter);\n }\n\n return () => {\n window.clearTimeout(timeoutRef.current);\n };\n }, []);\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'center', gap: 0.25 }}\n as={StyledToast}\n ref={ref}\n style={\n {\n '--translateY': `${-translateY}px`,\n '--opacity': dismissed ? '0' : '1',\n '--scale': dismissed ? '0' : '1'\n } as CSSProperties\n }\n onTransitionEnd={onTransitionEnd}\n >\n <Flex item={{ grow: 1 }} as={StyledToastContent}>\n {content}\n </Flex>\n <Button\n as={StyledToastButton}\n variant='simple'\n onClick={dismiss(false)}\n icon\n aria-label={t('dismiss_label')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n );\n});\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n testId,\n children,\n dismissAfter = Infinity,\n onDismiss\n}: ToasterProps) => {\n const { portalTarget } = useConfiguration();\n const [messages, dispatch] = useReducer(reducer, []);\n const [yOffsets, setYOffsets] = useState<number[]>([]);\n const heightHashRef = useRef<{\n [id: string]: number;\n }>({});\n const testIds = useTestIds(testId, getToasterTestIds);\n\n // This effect will cause a re-render with a translateY value set for each toast.\n useLayoutEffect(() => {\n const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);\n\n setYOffsets(\n heights\n .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))\n .reverse()\n );\n }, [messages.length]);\n\n const providerValue = useMemo(\n () => ({\n push(incoming: ToastMessage) {\n const message: ToastState = {\n ...incoming,\n id: incoming.id ?? createUID()\n };\n\n dispatch({\n type: 'push',\n payload: message\n });\n },\n initialized: true\n }),\n []\n );\n\n // Don't create additional ToasterContext.Providers.\n const context = windowIsAvailable\n ? window.cosmos.toasterContext ?? ToasterContext\n : ToasterContext;\n const priorCtx = useContext(context);\n if (priorCtx.initialized) {\n return <context.Provider value={priorCtx}>{children}</context.Provider>;\n }\n\n return (\n <>\n <context.Provider value={providerValue}>{children}</context.Provider>\n {!!messages.length &&\n portalTarget &&\n createPortal(\n <StyledToaster data-testid={testIds.root}>\n {messages.map((message, i) => {\n return (\n <Toast\n data-testid={testIds.toast}\n {...message}\n translateY={yOffsets[i] ?? 0}\n topLevelDismiss={onDismiss}\n dismissAfter={message.dismissAfter ?? dismissAfter}\n key={message.id}\n dispatch={dispatch}\n ref={el => {\n if (el) {\n heightHashRef.current[message.id] = el.offsetHeight;\n } else {\n delete heightHashRef.current[message.id];\n }\n }}\n />\n );\n })}\n </StyledToaster>,\n portalTarget\n )}\n </>\n );\n};\n\nexport default withTestIds(Toaster, getToasterTestIds);\n"]}
@@ -0,0 +1,2 @@
1
+ export declare const getToasterTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["toast"]>;
2
+ //# sourceMappingURL=Toaster.test-ids.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toaster.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,wFAA+C,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { createTestIds } from '../../utils';
2
+ export const getToasterTestIds = createTestIds('toaster', ['toast']);
3
+ //# sourceMappingURL=Toaster.test-ids.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toaster.test-ids.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,SAAS,EAAE,CAAC,OAAO,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getToasterTestIds = createTestIds('toaster', ['toast'] as const);\n"]}
@@ -1,4 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
+ import { TestIdProp } from '../../types';
2
3
  export interface ToastMessage {
3
4
  /** String to identify the specific message. Used as onDismiss callback arg. */
4
5
  id?: string;
@@ -16,7 +17,7 @@ export interface ToastMessage {
16
17
  timeout: boolean;
17
18
  }) => void;
18
19
  }
19
- export interface ToasterProps {
20
+ export interface ToasterProps extends TestIdProp {
20
21
  /** The element(s) responsible for handling the Toaster state. */
21
22
  children: ReactNode;
22
23
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"Toaster.types.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,YAAY;IAC3B,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uIAAuI;IACvI,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE;QAAE,EAAE,EAAE,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAClG;AAED,MAAM,WAAW,YAAY;IAC3B,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C,uIAAuI;IACvI,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC"}
1
+ {"version":3,"file":"Toaster.types.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,YAAY;IAC3B,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uIAAuI;IACvI,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE;QAAE,EAAE,EAAE,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAClG;AAED,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C,uIAAuI;IACvI,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Toaster.types.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nexport interface ToastMessage {\n /** String to identify the specific message. Used as onDismiss callback arg. */\n id?: string;\n /** A short message to provide feedback based upon a user action. */\n content: string;\n /**\n * Time in milliseconds to automatically dismiss toast.\n * Can be set globally on Toaster and overridden individually at a message level.\n * @default Infinity\n */\n dismissAfter?: number;\n /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n onDismiss?: ({ id, timeout }: { id: NonNullable<ToastMessage['id']>; timeout: boolean }) => void;\n}\n\nexport interface ToasterProps {\n /** The element(s) responsible for handling the Toaster state. */\n children: ReactNode;\n /**\n * Time in milliseconds to automatically dismiss Toast.\n * Can be set globally on Toaster and overridden individually at a message level.\n * @default Infinity\n */\n dismissAfter?: ToastMessage['dismissAfter'];\n /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n onDismiss?: ToastMessage['onDismiss'];\n}\n"]}
1
+ {"version":3,"file":"Toaster.types.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { TestIdProp } from '../../types';\n\nexport interface ToastMessage {\n /** String to identify the specific message. Used as onDismiss callback arg. */\n id?: string;\n /** A short message to provide feedback based upon a user action. */\n content: string;\n /**\n * Time in milliseconds to automatically dismiss toast.\n * Can be set globally on Toaster and overridden individually at a message level.\n * @default Infinity\n */\n dismissAfter?: number;\n /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n onDismiss?: ({ id, timeout }: { id: NonNullable<ToastMessage['id']>; timeout: boolean }) => void;\n}\n\nexport interface ToasterProps extends TestIdProp {\n /** The element(s) responsible for handling the Toaster state. */\n children: ReactNode;\n /**\n * Time in milliseconds to automatically dismiss Toast.\n * Can be set globally on Toaster and overridden individually at a message level.\n * @default Infinity\n */\n dismissAfter?: ToastMessage['dismissAfter'];\n /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n onDismiss?: ToastMessage['onDismiss'];\n}\n"]}
@@ -1,7 +1,7 @@
1
1
  import { FunctionComponent, Ref } from 'react';
2
- import { BaseProps, ForwardProps } from '../../types';
2
+ import { BaseProps, ForwardProps, TestIdProp } from '../../types';
3
3
  import { Delay, PopoverProps } from '../Popover';
4
- export interface TooltipProps extends BaseProps {
4
+ export interface TooltipProps extends BaseProps, TestIdProp {
5
5
  /** Text content for the tooltip. */
6
6
  children: string | string[];
7
7
  /** Element to serve as the tooltip's target. */
@@ -40,6 +40,8 @@ export interface TooltipProps extends BaseProps {
40
40
  ref?: Ref<HTMLDivElement>;
41
41
  }
42
42
  export declare const StyledTooltip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
43
- declare const Tooltip: FunctionComponent<TooltipProps & ForwardProps>;
44
- export default Tooltip;
43
+ declare const _default: FunctionComponent<TooltipProps & ForwardProps> & {
44
+ getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
45
+ };
46
+ export default _default;
45
47
  //# sourceMappingURL=Tooltip.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAK1D,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,oCAAoC;IACpC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,gDAAgD;IAChD,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAgI1D,CAAC;AAEH,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAElE,OAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAO1D,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,UAAU;IACzD,oCAAoC;IACpC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,gDAAgD;IAChD,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,yGAaxB,CAAC;;;;AAyIH,wBAAuD"}
@@ -3,9 +3,10 @@ import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
4
  import { defaultThemeProp } from '../../theme';
5
5
  import Popover from '../Popover';
6
- import { useConsolidatedRef, useUID } from '../../hooks';
6
+ import { useConsolidatedRef, useTestIds, useUID } from '../../hooks';
7
7
  import { calculateFontSize } from '../../styles';
8
- import { getActiveElement } from '../../utils';
8
+ import { getActiveElement, withTestIds } from '../../utils';
9
+ import { getTooltipTestIds } from './Tooltip.test-ids';
9
10
  export const StyledTooltip = styled.div(({ theme }) => {
10
11
  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
11
12
  return css `
@@ -20,11 +21,12 @@ export const StyledTooltip = styled.div(({ theme }) => {
20
21
  `;
21
22
  });
22
23
  StyledTooltip.defaultProps = defaultThemeProp;
23
- const Tooltip = forwardRef(function Tooltip({ children, target, showDelay = 'short', hideDelay = 'long', placement = 'bottom', describeTarget = true, smart, ...restProps }, ref) {
24
+ const Tooltip = forwardRef(function Tooltip({ testId, children, target, showDelay = 'short', hideDelay = 'long', placement = 'bottom', describeTarget = true, smart, ...restProps }, ref) {
24
25
  const id = useUID();
25
26
  const [show, setShow] = useState(false);
26
27
  const tooltipRef = useConsolidatedRef(ref);
27
28
  const lastClickedRef = useRef(null);
29
+ const testIds = useTestIds(testId, getTooltipTestIds);
28
30
  const onMouseDown = useCallback(({ target: eTarget }) => {
29
31
  lastClickedRef.current = eTarget;
30
32
  if (eTarget === tooltipRef.current || eTarget === target)
@@ -99,7 +101,7 @@ const Tooltip = forwardRef(function Tooltip({ children, target, showDelay = 'sho
99
101
  }
100
102
  }
101
103
  }, [describeTarget, target, show]);
102
- return (_jsx(Popover, { id: id, ...restProps, show: show, showDelay: showDelay, hideDelay: hideDelay, groupId: 'tooltip', strategy: 'fixed', as: StyledTooltip, role: 'tooltip', target: target, arrow: true, placement: placement, onMouseDown: onMouseDown, hideOnTargetHidden: true, ref: tooltipRef, children: children }));
104
+ return (_jsx(Popover, { "data-testid": testIds.root, id: id, ...restProps, show: show, showDelay: showDelay, hideDelay: hideDelay, groupId: 'tooltip', strategy: 'fixed', as: StyledTooltip, role: 'tooltip', target: target, arrow: true, placement: placement, onMouseDown: onMouseDown, hideOnTargetHidden: true, ref: tooltipRef, children: children }));
103
105
  });
104
- export default Tooltip;
106
+ export default withTestIds(Tooltip, getTooltipTestIds);
105
107
  //# sourceMappingURL=Tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\nimport { getActiveElement } from '../../utils';\n\nexport interface TooltipProps extends BaseProps {\n /** Text content for the tooltip. */\n children: string | string[];\n /** Element to serve as the tooltip's target. */\n target: Element | null;\n /**\n * Delay showing the tooltip on mouseenter.\n * @default 'short'\n */\n showDelay?: Delay;\n /**\n * Delay hiding the tooltip on mouseleave.\n * @default 'long'\n */\n hideDelay?: Delay;\n /**\n * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default true\n */\n portal?: PopoverProps['portal'];\n /**\n * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n * @default true\n */\n describeTarget?: boolean;\n /**\n * Sets the placement of the tooltip relative to the target.\n * @default 'bottom'\n */\n placement?: PopoverProps['placement'];\n /**\n * Conditionally renders a tooltip only if the associated element's text content is truncated.\n * To work, the associated element must be be displayed as a CSS \"block box\" i.e. block, inline-block, etc...\n * @default false\n */\n smart?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n background-color: ${theme.components.tooltip['background-color']};\n color: ${theme.components.tooltip['foreground-color']};\n font-size: ${fontSize.xxs};\n max-width: 40ch;\n padding: ${theme.base.spacing};\n white-space: pre-line;\n word-break: break-word;\n pointer-events: none;\n `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(function Tooltip(\n {\n children,\n target,\n showDelay = 'short',\n hideDelay = 'long',\n placement = 'bottom',\n describeTarget = true,\n smart,\n ...restProps\n }: PropsWithoutRef<TooltipProps>,\n ref: Ref<HTMLDivElement>\n) {\n const id = useUID();\n const [show, setShow] = useState(false);\n const tooltipRef = useConsolidatedRef(ref);\n const lastClickedRef: MutableRefObject<EventTarget | null> = useRef(null);\n\n const onMouseDown = useCallback(\n ({ target: eTarget }: MouseEvent) => {\n lastClickedRef.current = eTarget;\n if (eTarget === tooltipRef.current || eTarget === target) return;\n setShow(false);\n },\n [target]\n );\n\n useEffect(() => {\n if (!target) return;\n\n const showTooltip = () => {\n setShow(\n // This approach may result in a tooltip NOT appearing 1px before it should due to browser specifics. Enhance as needed.\n // https://stackoverflow.com/a/64747288\n smart ? target.scrollWidth > target.getBoundingClientRect().width : true\n );\n };\n\n const onFocusIn = () => {\n showTooltip();\n };\n\n const onFocusOut = () => {\n if (lastClickedRef.current !== tooltipRef.current) {\n setShow(false);\n }\n lastClickedRef.current = null;\n };\n\n const onMouseEnter = () => {\n showTooltip();\n };\n\n const onMouseLeave = () => {\n if (getActiveElement() !== target) {\n setShow(false);\n }\n };\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape' && getActiveElement() === target) {\n setShow(false);\n }\n };\n\n document.addEventListener('keydown', onKeyDown);\n document.addEventListener('mousedown', onMouseDown);\n\n target.addEventListener('focusin', onFocusIn);\n target.addEventListener('focusout', onFocusOut);\n\n target.addEventListener('mouseenter', onMouseEnter);\n target.addEventListener('mouseleave', onMouseLeave);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n document.removeEventListener('mousedown', onMouseDown);\n\n target.removeEventListener('focusin', onFocusIn);\n target.removeEventListener('focusout', onFocusOut);\n\n target.removeEventListener('mouseenter', onMouseEnter);\n target.removeEventListener('mouseleave', onMouseLeave);\n };\n }, [target, onMouseDown, smart]);\n\n useEffect(() => {\n if (target && describeTarget && show) {\n const describedBy = target.getAttribute('aria-describedby');\n // Set the attribute to the old attribute plus the id\n target.setAttribute('aria-describedby', describedBy ? `${describedBy} ${id}` : id);\n } else if (target) {\n // Get the old attribute\n const describedBy = target.getAttribute('aria-describedby');\n if (describedBy) {\n // If the old attribute matches the id just remove it entirely\n if (describedBy === id) {\n target.removeAttribute('aria-describedby');\n } else {\n // Otherwise we want to just remove the id that was added and reset the attribute to what it was before\n const oldDescribedBy = describedBy.replace(new RegExp(`(?:^|\\\\s+)${id}`), '');\n target.setAttribute('aria-describedby', oldDescribedBy);\n }\n }\n }\n }, [describeTarget, target, show]);\n\n return (\n <Popover\n id={id}\n {...restProps}\n show={show}\n showDelay={showDelay}\n hideDelay={hideDelay}\n groupId='tooltip'\n strategy='fixed'\n as={StyledTooltip}\n role='tooltip'\n target={target}\n arrow\n placement={placement}\n onMouseDown={onMouseDown}\n hideOnTargetHidden\n ref={tooltipRef}\n >\n {children}\n </Popover>\n );\n});\n\nexport default Tooltip;\n"]}
1
+ {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAKV,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,OAAgC,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAyCvD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC;aACvD,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC;iBACxC,QAAQ,CAAC,GAAG;;eAEd,KAAK,CAAC,IAAI,CAAC,OAAO;;;;GAI9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CAAC,SAAS,OAAO,CACzF,EACE,MAAM,EACN,QAAQ,EACR,MAAM,EACN,SAAS,GAAG,OAAO,EACnB,SAAS,GAAG,MAAM,EAClB,SAAS,GAAG,QAAQ,EACpB,cAAc,GAAG,IAAI,EACrB,KAAK,EACL,GAAG,SAAS,EACkB,EAChC,GAAwB;IAExB,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IACpB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC3C,MAAM,cAAc,GAAyC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC1E,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAc,EAAE,EAAE;QAClC,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC;QACjC,IAAI,OAAO,KAAK,UAAU,CAAC,OAAO,IAAI,OAAO,KAAK,MAAM;YAAE,OAAO;QACjE,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,OAAO;YACL,wHAAwH;YACxH,uCAAuC;YACvC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CACzE,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,WAAW,EAAE,CAAC;QAChB,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,IAAI,cAAc,CAAC,OAAO,KAAK,UAAU,CAAC,OAAO,EAAE;gBACjD,OAAO,CAAC,KAAK,CAAC,CAAC;aAChB;YACD,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,WAAW,EAAE,CAAC;QAChB,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,gBAAgB,EAAE,KAAK,MAAM,EAAE;gBACjC,OAAO,CAAC,KAAK,CAAC,CAAC;aAChB;QACH,CAAC,CAAC;QAEF,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;YAC3C,IAAI,GAAG,KAAK,QAAQ,IAAI,gBAAgB,EAAE,KAAK,MAAM,EAAE;gBACrD,OAAO,CAAC,KAAK,CAAC,CAAC;aAChB;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAEpD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC9C,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QAEhD,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACpD,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YAEvD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACjD,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;YAEnD,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;YACvD,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,IAAI,cAAc,IAAI,IAAI,EAAE;YACpC,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;YAC5D,qDAAqD;YACrD,MAAM,CAAC,YAAY,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,WAAW,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACpF;aAAM,IAAI,MAAM,EAAE;YACjB,wBAAwB;YACxB,MAAM,WAAW,GAAG,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;YAC5D,IAAI,WAAW,EAAE;gBACf,8DAA8D;gBAC9D,IAAI,WAAW,KAAK,EAAE,EAAE;oBACtB,MAAM,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;iBAC5C;qBAAM;oBACL,uGAAuG;oBACvG,MAAM,cAAc,GAAG,WAAW,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;oBAC9E,MAAM,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;iBACzD;aACF;SACF;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,KAAC,OAAO,mBACO,OAAO,CAAC,IAAI,EACzB,EAAE,EAAE,EAAE,KACF,SAAS,EACb,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAC,OAAO,EAChB,EAAE,EAAE,aAAa,EACjB,IAAI,EAAC,SAAS,EACd,MAAM,EAAE,MAAM,EACd,KAAK,QACL,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,kBAAkB,QAClB,GAAG,EAAE,UAAU,YAEd,QAAQ,GACD,CACX,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n MutableRefObject,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps, TestIdProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Popover, { Delay, PopoverProps } from '../Popover';\nimport { useConsolidatedRef, useTestIds, useUID } from '../../hooks';\nimport { calculateFontSize } from '../../styles';\nimport { getActiveElement, withTestIds } from '../../utils';\n\nimport { getTooltipTestIds } from './Tooltip.test-ids';\n\nexport interface TooltipProps extends BaseProps, TestIdProp {\n /** Text content for the tooltip. */\n children: string | string[];\n /** Element to serve as the tooltip's target. */\n target: Element | null;\n /**\n * Delay showing the tooltip on mouseenter.\n * @default 'short'\n */\n showDelay?: Delay;\n /**\n * Delay hiding the tooltip on mouseleave.\n * @default 'long'\n */\n hideDelay?: Delay;\n /**\n * If true, the Tooltip will render outside of the current DOM hierarchy in a [portal](https://reactjs.org/docs/portals.html).\n * @default true\n */\n portal?: PopoverProps['portal'];\n /**\n * If true, the Tooltip will automatically apply an aria-describedby attribute to its target.\n * @default true\n */\n describeTarget?: boolean;\n /**\n * Sets the placement of the tooltip relative to the target.\n * @default 'bottom'\n */\n placement?: PopoverProps['placement'];\n /**\n * Conditionally renders a tooltip only if the associated element's text content is truncated.\n * To work, the associated element must be be displayed as a CSS \"block box\" i.e. block, inline-block, etc...\n * @default false\n */\n smart?: boolean;\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledTooltip = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n background-color: ${theme.components.tooltip['background-color']};\n color: ${theme.components.tooltip['foreground-color']};\n font-size: ${fontSize.xxs};\n max-width: 40ch;\n padding: ${theme.base.spacing};\n white-space: pre-line;\n word-break: break-word;\n pointer-events: none;\n `;\n});\n\nStyledTooltip.defaultProps = defaultThemeProp;\n\nconst Tooltip: FunctionComponent<TooltipProps & ForwardProps> = forwardRef(function Tooltip(\n {\n testId,\n children,\n target,\n showDelay = 'short',\n hideDelay = 'long',\n placement = 'bottom',\n describeTarget = true,\n smart,\n ...restProps\n }: PropsWithoutRef<TooltipProps>,\n ref: Ref<HTMLDivElement>\n) {\n const id = useUID();\n const [show, setShow] = useState(false);\n const tooltipRef = useConsolidatedRef(ref);\n const lastClickedRef: MutableRefObject<EventTarget | null> = useRef(null);\n const testIds = useTestIds(testId, getTooltipTestIds);\n\n const onMouseDown = useCallback(\n ({ target: eTarget }: MouseEvent) => {\n lastClickedRef.current = eTarget;\n if (eTarget === tooltipRef.current || eTarget === target) return;\n setShow(false);\n },\n [target]\n );\n\n useEffect(() => {\n if (!target) return;\n\n const showTooltip = () => {\n setShow(\n // This approach may result in a tooltip NOT appearing 1px before it should due to browser specifics. Enhance as needed.\n // https://stackoverflow.com/a/64747288\n smart ? target.scrollWidth > target.getBoundingClientRect().width : true\n );\n };\n\n const onFocusIn = () => {\n showTooltip();\n };\n\n const onFocusOut = () => {\n if (lastClickedRef.current !== tooltipRef.current) {\n setShow(false);\n }\n lastClickedRef.current = null;\n };\n\n const onMouseEnter = () => {\n showTooltip();\n };\n\n const onMouseLeave = () => {\n if (getActiveElement() !== target) {\n setShow(false);\n }\n };\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape' && getActiveElement() === target) {\n setShow(false);\n }\n };\n\n document.addEventListener('keydown', onKeyDown);\n document.addEventListener('mousedown', onMouseDown);\n\n target.addEventListener('focusin', onFocusIn);\n target.addEventListener('focusout', onFocusOut);\n\n target.addEventListener('mouseenter', onMouseEnter);\n target.addEventListener('mouseleave', onMouseLeave);\n\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n document.removeEventListener('mousedown', onMouseDown);\n\n target.removeEventListener('focusin', onFocusIn);\n target.removeEventListener('focusout', onFocusOut);\n\n target.removeEventListener('mouseenter', onMouseEnter);\n target.removeEventListener('mouseleave', onMouseLeave);\n };\n }, [target, onMouseDown, smart]);\n\n useEffect(() => {\n if (target && describeTarget && show) {\n const describedBy = target.getAttribute('aria-describedby');\n // Set the attribute to the old attribute plus the id\n target.setAttribute('aria-describedby', describedBy ? `${describedBy} ${id}` : id);\n } else if (target) {\n // Get the old attribute\n const describedBy = target.getAttribute('aria-describedby');\n if (describedBy) {\n // If the old attribute matches the id just remove it entirely\n if (describedBy === id) {\n target.removeAttribute('aria-describedby');\n } else {\n // Otherwise we want to just remove the id that was added and reset the attribute to what it was before\n const oldDescribedBy = describedBy.replace(new RegExp(`(?:^|\\\\s+)${id}`), '');\n target.setAttribute('aria-describedby', oldDescribedBy);\n }\n }\n }\n }, [describeTarget, target, show]);\n\n return (\n <Popover\n data-testid={testIds.root}\n id={id}\n {...restProps}\n show={show}\n showDelay={showDelay}\n hideDelay={hideDelay}\n groupId='tooltip'\n strategy='fixed'\n as={StyledTooltip}\n role='tooltip'\n target={target}\n arrow\n placement={placement}\n onMouseDown={onMouseDown}\n hideOnTargetHidden\n ref={tooltipRef}\n >\n {children}\n </Popover>\n );\n});\n\nexport default withTestIds(Tooltip, getTooltipTestIds);\n"]}
@@ -0,0 +1,2 @@
1
+ export declare const getTooltipTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
2
+ //# sourceMappingURL=Tooltip.test-ids.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tooltip.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iFAAwC,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { createTestIds } from '../../utils';
2
+ export const getTooltipTestIds = createTestIds('tooltip', []);
3
+ //# sourceMappingURL=Tooltip.test-ids.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tooltip.test-ids.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,SAAS,EAAE,EAAW,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getTooltipTestIds = createTestIds('tooltip', [] as const);\n"]}
@@ -1,8 +1,8 @@
1
1
  import { StandardTreePropsWithDefaults } from './StandardTree.types';
2
- export declare const StyledToggleIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Icon").IconProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
2
+ export declare const StyledToggleIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Icon").IconProps>, import("styled-components").DefaultTheme, {}, never>;
3
3
  export declare const StyledNodeActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
4
4
  export declare const StyledLabelContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
5
- export declare const StyledNodeIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Icon").IconProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
5
+ export declare const StyledNodeIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Icon").IconProps>, import("styled-components").DefaultTheme, {}, never>;
6
6
  export declare const StyledNodeText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
7
7
  export declare const StyledToggleIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
8
8
  export declare const StyledStandardTreeItemSubTree: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StandardTreePropsWithDefaults, "lined">, never>;
@@ -10,5 +10,7 @@ export declare const StyledNodeInteraction: import("styled-components").StyledCo
10
10
  export declare const StyledStandardTreeLeaf: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
11
11
  export declare const StyledStandardTreeParent: any;
12
12
  export declare const StyledStandardTreeNode: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
13
- export declare const StyledStandardTree: import("styled-components").StyledComponent<(<T extends import("./Tree").TreeNode = import("./Tree").TreeNode>(props: import("./Tree").TreeProps<T> & import("../..").ForwardProps) => JSX.Element | null), import("styled-components").DefaultTheme, {}, never>;
13
+ export declare const StyledStandardTree: import("styled-components").StyledComponent<(<T extends import("./Tree").TreeNode = import("./Tree").TreeNode>(props: import("./Tree").TreeProps<T> & import("../..").ForwardProps) => JSX.Element | null) & {
14
+ getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
15
+ }, import("styled-components").DefaultTheme, {}, never>;
14
16
  //# sourceMappingURL=StandardTree.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"StandardTree.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.styles.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AAErE,eAAO,MAAM,gBAAgB,iMAAiB,CAAC;AAE/C,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,cAAc,iMAAiB,CAAC;AAE7C,eAAO,MAAM,cAAc,0GAAgB,CAAC;AAE5C,eAAO,MAAM,uBAAuB,yGAKlC,CAAC;AAIH,eAAO,MAAM,6BAA6B,mJAgCxC,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGA8ChC,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGASjC,CAAC;AAKH,eAAO,MAAM,wBAAwB,EAAE,GA2BrC,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAclC,CAAC;AAIF,eAAO,MAAM,kBAAkB,kQAU7B,CAAC"}
1
+ {"version":3,"file":"StandardTree.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.styles.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AAErE,eAAO,MAAM,gBAAgB,0KAAiB,CAAC;AAE/C,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,cAAc,0KAAiB,CAAC;AAE7C,eAAO,MAAM,cAAc,0GAAgB,CAAC;AAE5C,eAAO,MAAM,uBAAuB,yGAKlC,CAAC;AAIH,eAAO,MAAM,6BAA6B,mJAgCxC,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGA8ChC,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGASjC,CAAC;AAKH,eAAO,MAAM,wBAAwB,EAAE,GA2BrC,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAclC,CAAC;AAIF,eAAO,MAAM,kBAAkB;;uDAU7B,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import { Ref, ComponentType, ReactNode } from 'react';
2
- import { BaseProps, NoChildrenProp, ForwardProps, OmitStrict } from '../../types';
2
+ import { BaseProps, NoChildrenProp, ForwardProps, OmitStrict, TestIdProp } from '../../types';
3
3
  export type TreeNode = {
4
4
  /** The id of the Node. Used as the key for the li element wrapping the Node. */
5
5
  id: string;
@@ -9,7 +9,7 @@ export type TreeNode = {
9
9
  listItemProps?: ForwardProps;
10
10
  [key: string]: unknown;
11
11
  };
12
- export interface TreeProps<T extends TreeNode = TreeNode> extends BaseProps, NoChildrenProp {
12
+ export interface TreeProps<T extends TreeNode = TreeNode> extends BaseProps, NoChildrenProp, TestIdProp {
13
13
  /** An array of ParentNodes and Nodes that compose the layout of the Tree. */
14
14
  nodes: T[];
15
15
  /** A function that allows custom styling and behavior for all Nodes. */
@@ -28,6 +28,8 @@ interface TreeItemProps extends TreeNode {
28
28
  depth: number;
29
29
  hasParentSibling: boolean;
30
30
  }
31
- declare const Tree: <T extends TreeNode = TreeNode>(props: TreeProps<T> & ForwardProps) => JSX.Element | null;
32
- export default Tree;
31
+ declare const _default: (<T extends TreeNode = TreeNode>(props: TreeProps<T> & ForwardProps) => JSX.Element | null) & {
32
+ getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly []>;
33
+ };
34
+ export default _default;
33
35
  //# sourceMappingURL=Tree.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAElF,MAAM,MAAM,QAAQ,GAAG;IACrB,gFAAgF;IAChF,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,gCAAgC;IAChC,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,SAAS,EAAE,cAAc;IACzF,6EAA6E;IAC7E,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,wEAAwE;IACxE,YAAY,CAAC,EAAE,aAAa,CAC1B;QACE,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,gBAAgB,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;KACrD,GAAG,UAAU,CAAC,CAAC,EAAE,eAAe,CAAC,CACnC,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,kBAAkB,wGAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,wGAU1B,CAAC;AAWF,UAAU,aAAc,SAAQ,QAAQ;IACtC,YAAY,EAAE,WAAW,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAgDD,QAAA,MAAM,IAAI,yEAKmE,WAAW,GAAG,IAAI,CAAC;AAEhG,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9F,MAAM,MAAM,QAAQ,GAAG;IACrB,gFAAgF;IAChF,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,gCAAgC;IAChC,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CACtD,SAAQ,SAAS,EACf,cAAc,EACd,UAAU;IACZ,6EAA6E;IAC7E,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,wEAAwE;IACxE,YAAY,CAAC,EAAE,aAAa,CAC1B;QACE,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,gBAAgB,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;KACrD,GAAG,UAAU,CAAC,CAAC,EAAE,eAAe,CAAC,CACnC,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,kBAAkB,wGAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,wGAU1B,CAAC;AAWF,UAAU,aAAc,SAAQ,QAAQ;IACtC,YAAY,EAAE,WAAW,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;CAC3B;;;;AAiED,wBAAiD"}
@@ -2,6 +2,9 @@ import { createElement as _createElement } from "react";
2
2
  import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
3
3
  import { forwardRef } from 'react';
4
4
  import styled from 'styled-components';
5
+ import { useTestIds } from '../../hooks';
6
+ import { withTestIds } from '../../utils';
7
+ import { getTreeTestIds } from './Tree.test-ids';
5
8
  export const StyledTreeListItem = styled.li ``;
6
9
  export const StyledTreeList = styled.ul `
7
10
  &,
@@ -25,8 +28,9 @@ TreeList = forwardRef(function TreeListFunction({ nodes, depth, nodeRenderer, ..
25
28
  const hasParentSibling = nodes.some(node => !!node.nodes);
26
29
  return nodes.length > 0 ? (_jsx(StyledTreeList, { ...restProps, ref: ref, role: depth === 0 ? 'tree' : 'group', children: nodes.map(node => (_createElement(TreeItem, { ...node, key: node.id, depth: depth, nodeRenderer: nodeRenderer, hasParentSibling: hasParentSibling }))) })) : null;
27
30
  });
28
- const Tree = forwardRef(function Tree({ nodeRenderer = DefaultNodeRenderer, ...restProps }, ref) {
29
- return _jsx(TreeList, { ...restProps, ref: ref, depth: 0, nodeRenderer: nodeRenderer });
31
+ const Tree = forwardRef(function Tree({ testId, nodeRenderer = DefaultNodeRenderer, ...restProps }, ref) {
32
+ const testIds = useTestIds(testId, getTreeTestIds);
33
+ return (_jsx(TreeList, { "data-testid": testIds.root, ...restProps, ref: ref, depth: 0, nodeRenderer: nodeRenderer }));
30
34
  });
31
- export default Tree;
35
+ export default withTestIds(Tree, getTreeTestIds);
32
36
  //# sourceMappingURL=Tree.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tree.js","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAkD,MAAM,OAAO,CAAC;AACnF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AA8BvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;IAOnC,kBAAkB;;;CAGrB,CAAC;AAEF,MAAM,mBAAmB,GAA8B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,8BACG,IAAI,EACJ,OAAO,IACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAaF,IAAI,QAAsC,CAAC;AAE3C,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,KAAK,EACL,KAAK,EACL,YAAY,EAAE,YAAY,EAC1B,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,OAAO,CACL,KAAC,kBAAkB,OAAK,aAAa,YACnC,KAAC,YAAY,OACP,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,GAAI,GAC1F,GACiB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,GAAG,UAAU,CAAC,SAAS,gBAAgB,CAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAkC,EAC5E,GAAsB;IAEtB,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,cAAc,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,YAC1E,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,QAAQ,OACH,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC,GACa,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,IAAI,CACnC,EAAE,YAAY,GAAG,mBAAmB,EAAE,GAAG,SAAS,EAA8B,EAChF,GAAqB;IAErB,OAAO,KAAC,QAAQ,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,YAAY,EAAE,YAAY,GAAI,CAAC;AACrF,CAAC,CAA8F,CAAC;AAEhG,eAAe,IAAI,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ComponentType, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, NoChildrenProp, ForwardProps, OmitStrict } from '../../types';\n\nexport type TreeNode = {\n /** The id of the Node. Used as the key for the li element wrapping the Node. */\n id: string;\n /** Child nodes. */\n nodes?: TreeNode[];\n /** Props to apply to the li. */\n listItemProps?: ForwardProps;\n\n [key: string]: unknown;\n};\n\nexport interface TreeProps<T extends TreeNode = TreeNode> extends BaseProps, NoChildrenProp {\n /** An array of ParentNodes and Nodes that compose the layout of the Tree. */\n nodes: T[];\n /** A function that allows custom styling and behavior for all Nodes. */\n nodeRenderer?: ComponentType<\n {\n depth: number;\n subTree?: ReactNode;\n hasParentSibling: TreeItemProps['hasParentSibling'];\n } & OmitStrict<T, 'listItemProps'>\n >;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledTreeListItem = styled.li``;\n\nexport const StyledTreeList = styled.ul`\n &,\n & & {\n list-style: none;\n position: relative;\n }\n\n ${StyledTreeListItem} {\n position: relative;\n }\n`;\n\nconst DefaultNodeRenderer: TreeProps['nodeRenderer'] = ({ data, subTree }) => {\n return (\n <>\n {data}\n {subTree}\n </>\n );\n};\n\ninterface TreeItemProps extends TreeNode {\n nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n depth: number;\n hasParentSibling: boolean;\n}\n\ninterface TreeListProps extends Pick<TreeProps, 'nodes' | 'ref'> {\n nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n depth: number;\n}\n\nlet TreeList: ComponentType<TreeListProps>;\n\nconst TreeItem = ({\n listItemProps,\n depth,\n nodes,\n nodeRenderer: NodeRenderer,\n ...restProps\n}: TreeItemProps) => {\n return (\n <StyledTreeListItem {...listItemProps}>\n <NodeRenderer\n {...restProps}\n depth={depth}\n nodes={nodes}\n subTree={nodes && <TreeList depth={depth + 1} nodes={nodes} nodeRenderer={NodeRenderer} />}\n />\n </StyledTreeListItem>\n );\n};\n\nTreeList = forwardRef(function TreeListFunction(\n { nodes, depth, nodeRenderer, ...restProps }: PropsWithoutRef<TreeListProps>,\n ref?: TreeProps['ref']\n) {\n const hasParentSibling = nodes.some(node => !!node.nodes);\n return nodes.length > 0 ? (\n <StyledTreeList {...restProps} ref={ref} role={depth === 0 ? 'tree' : 'group'}>\n {nodes.map(node => (\n <TreeItem\n {...node}\n key={node.id}\n depth={depth}\n nodeRenderer={nodeRenderer}\n hasParentSibling={hasParentSibling}\n />\n ))}\n </StyledTreeList>\n ) : null;\n});\n\nconst Tree = forwardRef(function Tree(\n { nodeRenderer = DefaultNodeRenderer, ...restProps }: PropsWithoutRef<TreeProps>,\n ref: TreeProps['ref']\n) {\n return <TreeList {...restProps} ref={ref} depth={0} nodeRenderer={nodeRenderer} />;\n}) as <T extends TreeNode = TreeNode>(props: TreeProps<T> & ForwardProps) => JSX.Element | null;\n\nexport default Tree;\n"]}
1
+ {"version":3,"file":"Tree.js","sourceRoot":"","sources":["../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAkD,MAAM,OAAO,CAAC;AACnF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AA+BjD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;IAOnC,kBAAkB;;;CAGrB,CAAC;AAEF,MAAM,mBAAmB,GAA8B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC3E,OAAO,CACL,8BACG,IAAI,EACJ,OAAO,IACP,CACJ,CAAC;AACJ,CAAC,CAAC;AAaF,IAAI,QAAsC,CAAC;AAE3C,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,KAAK,EACL,KAAK,EACL,YAAY,EAAE,YAAY,EAC1B,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,OAAO,CACL,KAAC,kBAAkB,OAAK,aAAa,YACnC,KAAC,YAAY,OACP,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,IAAI,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,GAAI,GAC1F,GACiB,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,GAAG,UAAU,CAAC,SAAS,gBAAgB,CAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAkC,EAC5E,GAAsB;IAEtB,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,cAAc,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,YAC1E,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,eAAC,QAAQ,OACH,IAAI,EACR,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC,GACa,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,IAAI,CACnC,EAAE,MAAM,EAAE,YAAY,GAAG,mBAAmB,EAAE,GAAG,SAAS,EAA8B,EACxF,GAAqB;IAErB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,QAAQ,mBACM,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,CAAC,EACR,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;AACJ,CAAC,CAA8F,CAAC;AAEhG,eAAe,WAAW,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, ComponentType, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, NoChildrenProp, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getTreeTestIds } from './Tree.test-ids';\n\nexport type TreeNode = {\n /** The id of the Node. Used as the key for the li element wrapping the Node. */\n id: string;\n /** Child nodes. */\n nodes?: TreeNode[];\n /** Props to apply to the li. */\n listItemProps?: ForwardProps;\n\n [key: string]: unknown;\n};\n\nexport interface TreeProps<T extends TreeNode = TreeNode>\n extends BaseProps,\n NoChildrenProp,\n TestIdProp {\n /** An array of ParentNodes and Nodes that compose the layout of the Tree. */\n nodes: T[];\n /** A function that allows custom styling and behavior for all Nodes. */\n nodeRenderer?: ComponentType<\n {\n depth: number;\n subTree?: ReactNode;\n hasParentSibling: TreeItemProps['hasParentSibling'];\n } & OmitStrict<T, 'listItemProps'>\n >;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLUListElement>;\n}\n\nexport const StyledTreeListItem = styled.li``;\n\nexport const StyledTreeList = styled.ul`\n &,\n & & {\n list-style: none;\n position: relative;\n }\n\n ${StyledTreeListItem} {\n position: relative;\n }\n`;\n\nconst DefaultNodeRenderer: TreeProps['nodeRenderer'] = ({ data, subTree }) => {\n return (\n <>\n {data}\n {subTree}\n </>\n );\n};\n\ninterface TreeItemProps extends TreeNode {\n nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n depth: number;\n hasParentSibling: boolean;\n}\n\ninterface TreeListProps extends Pick<TreeProps, 'nodes' | 'ref'> {\n nodeRenderer: NonNullable<TreeProps['nodeRenderer']>;\n depth: number;\n}\n\nlet TreeList: ComponentType<TreeListProps>;\n\nconst TreeItem = ({\n listItemProps,\n depth,\n nodes,\n nodeRenderer: NodeRenderer,\n ...restProps\n}: TreeItemProps) => {\n return (\n <StyledTreeListItem {...listItemProps}>\n <NodeRenderer\n {...restProps}\n depth={depth}\n nodes={nodes}\n subTree={nodes && <TreeList depth={depth + 1} nodes={nodes} nodeRenderer={NodeRenderer} />}\n />\n </StyledTreeListItem>\n );\n};\n\nTreeList = forwardRef(function TreeListFunction(\n { nodes, depth, nodeRenderer, ...restProps }: PropsWithoutRef<TreeListProps>,\n ref?: TreeProps['ref']\n) {\n const hasParentSibling = nodes.some(node => !!node.nodes);\n return nodes.length > 0 ? (\n <StyledTreeList {...restProps} ref={ref} role={depth === 0 ? 'tree' : 'group'}>\n {nodes.map(node => (\n <TreeItem\n {...node}\n key={node.id}\n depth={depth}\n nodeRenderer={nodeRenderer}\n hasParentSibling={hasParentSibling}\n />\n ))}\n </StyledTreeList>\n ) : null;\n});\n\nconst Tree = forwardRef(function Tree(\n { testId, nodeRenderer = DefaultNodeRenderer, ...restProps }: PropsWithoutRef<TreeProps>,\n ref: TreeProps['ref']\n) {\n const testIds = useTestIds(testId, getTreeTestIds);\n\n return (\n <TreeList\n data-testid={testIds.root}\n {...restProps}\n ref={ref}\n depth={0}\n nodeRenderer={nodeRenderer}\n />\n );\n}) as <T extends TreeNode = TreeNode>(props: TreeProps<T> & ForwardProps) => JSX.Element | null;\n\nexport default withTestIds(Tree, getTreeTestIds);\n"]}