@dnb/eufemia 9.16.3 → 9.18.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 (785) hide show
  1. package/CHANGELOG.md +50 -0
  2. package/assets/assets/icons/above_the_line.svg +1 -1
  3. package/assets/assets/icons/eufemia-icons-pdf-categorized.tgz +0 -0
  4. package/assets/assets/icons/eufemia-icons-pdf.tgz +0 -0
  5. package/assets/assets/icons/facebook.svg +3 -0
  6. package/assets/assets/icons/facebook_medium.svg +3 -0
  7. package/assets/assets/icons/fridge.svg +1 -1
  8. package/assets/assets/icons/information_circled.svg +2 -1
  9. package/assets/assets/icons/information_circled_medium.svg +2 -1
  10. package/assets/assets/icons/instagram.svg +5 -0
  11. package/assets/assets/icons/instagram_medium.svg +12 -0
  12. package/assets/assets/icons/linkedin.svg +3 -0
  13. package/assets/assets/icons/linkedin_medium.svg +3 -0
  14. package/assets/assets/icons/motorcycle_medium.svg +2 -2
  15. package/assets/assets/icons/paragraph.svg +1 -1
  16. package/assets/assets/icons/scooter_medium.svg +2 -2
  17. package/assets/assets/icons/tag.svg +4 -0
  18. package/assets/assets/icons/tag_medium.svg +4 -0
  19. package/assets/icons/above_the_line.svg +1 -1
  20. package/assets/icons/eufemia-icons-pdf-categorized.tgz +0 -0
  21. package/assets/icons/eufemia-icons-pdf.tgz +0 -0
  22. package/assets/icons/facebook.svg +3 -0
  23. package/assets/icons/facebook_medium.svg +3 -0
  24. package/assets/icons/fridge.svg +1 -1
  25. package/assets/icons/information_circled.svg +2 -1
  26. package/assets/icons/information_circled_medium.svg +2 -1
  27. package/assets/icons/instagram.svg +5 -0
  28. package/assets/icons/instagram_medium.svg +12 -0
  29. package/assets/icons/linkedin.svg +3 -0
  30. package/assets/icons/linkedin_medium.svg +3 -0
  31. package/assets/icons/motorcycle_medium.svg +2 -2
  32. package/assets/icons/paragraph.svg +1 -1
  33. package/assets/icons/scooter_medium.svg +2 -2
  34. package/assets/icons/tag.svg +4 -0
  35. package/assets/icons/tag_medium.svg +4 -0
  36. package/cjs/components/Tag.d.ts +14 -0
  37. package/cjs/components/Tag.js +52 -0
  38. package/cjs/components/accordion/Accordion.d.ts +7 -7
  39. package/cjs/components/autocomplete/Autocomplete.d.ts +13 -13
  40. package/cjs/components/autocomplete/style/dnb-autocomplete.css +0 -2
  41. package/cjs/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  42. package/cjs/components/breadcrumb/Breadcrumb.js +5 -3
  43. package/cjs/components/breadcrumb/style/_breadcrumb.scss +7 -4
  44. package/cjs/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  45. package/cjs/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  46. package/cjs/components/button/Button.d.ts +7 -7
  47. package/cjs/components/button/Button.js +7 -5
  48. package/cjs/components/button/style/_button.scss +0 -4
  49. package/cjs/components/button/style/dnb-button.css +0 -2
  50. package/cjs/components/button/style/dnb-button.min.css +1 -1
  51. package/cjs/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  52. package/cjs/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  53. package/cjs/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  54. package/cjs/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  55. package/cjs/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  56. package/cjs/components/checkbox/Checkbox.d.ts +3 -3
  57. package/cjs/components/date-picker/DatePicker.d.ts +14 -14
  58. package/cjs/components/date-picker/DatePickerAddon.d.ts +1 -1
  59. package/cjs/components/date-picker/DatePickerCalendar.d.ts +1 -1
  60. package/cjs/components/date-picker/DatePickerInput.d.ts +1 -1
  61. package/cjs/components/date-picker/style/dnb-date-picker.css +0 -6
  62. package/cjs/components/date-picker/style/dnb-date-picker.min.css +1 -1
  63. package/cjs/components/dropdown/Dropdown.d.ts +9 -9
  64. package/cjs/components/dropdown/style/dnb-dropdown.css +0 -2
  65. package/cjs/components/dropdown/style/dnb-dropdown.min.css +1 -1
  66. package/cjs/components/form-row/FormRow.d.ts +4 -4
  67. package/cjs/components/form-set/FormSet.d.ts +6 -6
  68. package/cjs/components/global-error/GlobalError.d.ts +1 -1
  69. package/cjs/components/global-error/style/dnb-global-error.css +0 -2
  70. package/cjs/components/global-error/style/dnb-global-error.min.css +1 -1
  71. package/cjs/components/global-status/GlobalStatus.d.ts +5 -5
  72. package/cjs/components/global-status/GlobalStatus.js +21 -73
  73. package/cjs/components/global-status/style/_global-status.scss +14 -12
  74. package/cjs/components/global-status/style/dnb-global-status.css +13 -17
  75. package/cjs/components/global-status/style/dnb-global-status.min.css +1 -1
  76. package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  77. package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  78. package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  79. package/cjs/components/heading/Heading.d.ts +2 -2
  80. package/cjs/components/heading/HeadingProvider.d.ts +2 -2
  81. package/cjs/components/help-button/HelpButton.d.ts +200 -0
  82. package/cjs/components/icon/Icon.d.ts +1 -1
  83. package/cjs/components/icon-primary/IconPrimary.d.ts +1 -1
  84. package/cjs/components/index.d.ts +2 -0
  85. package/cjs/components/index.js +8 -0
  86. package/cjs/components/input/Input.d.ts +9 -9
  87. package/cjs/components/input/style/dnb-input.css +0 -2
  88. package/cjs/components/input/style/dnb-input.min.css +1 -1
  89. package/cjs/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  90. package/cjs/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  91. package/cjs/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  92. package/cjs/components/input-masked/InputMasked.d.ts +11 -11
  93. package/cjs/components/input-masked/InputMasked.js +6 -3
  94. package/cjs/components/input-masked/InputMaskedElement.js +1 -4
  95. package/cjs/components/input-masked/InputMaskedHooks.js +68 -54
  96. package/cjs/components/input-masked/InputMaskedUtils.js +17 -22
  97. package/cjs/components/input-masked/style/dnb-input-masked.css +0 -2
  98. package/cjs/components/input-masked/style/dnb-input-masked.min.css +1 -1
  99. package/cjs/components/lib.js +9 -0
  100. package/cjs/components/modal/Modal.js +158 -300
  101. package/cjs/components/modal/ModalContent.js +183 -272
  102. package/cjs/components/modal/ModalRoot.js +194 -0
  103. package/cjs/components/modal/components/CloseButton.js +125 -0
  104. package/cjs/components/modal/components/ModalHeader.js +124 -0
  105. package/cjs/components/modal/{ModalHeader.js → components/ModalHeaderBar.js} +50 -162
  106. package/cjs/components/modal/{ModalInner.js → components/ModalInner.js} +11 -19
  107. package/cjs/components/modal/helpers.js +80 -0
  108. package/cjs/components/modal/style/_modal-mixins.scss +4 -4
  109. package/cjs/components/modal/style/_modal.scss +13 -30
  110. package/cjs/components/modal/style/dnb-modal.css +27 -47
  111. package/cjs/components/modal/style/dnb-modal.min.css +1 -1
  112. package/cjs/components/modal/types.js +1 -0
  113. package/cjs/components/number-format/NumberFormat.d.ts +8 -8
  114. package/cjs/components/pagination/Pagination.d.ts +30 -30
  115. package/cjs/components/pagination/PaginationProvider.d.ts +2 -2
  116. package/cjs/components/pagination/style/dnb-pagination.css +0 -2
  117. package/cjs/components/pagination/style/dnb-pagination.min.css +1 -1
  118. package/cjs/components/radio/Radio.d.ts +4 -4
  119. package/cjs/components/radio/RadioGroup.d.ts +3 -3
  120. package/cjs/components/section/Section.d.ts +3 -2
  121. package/cjs/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  122. package/cjs/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  123. package/cjs/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  124. package/cjs/components/skeleton/Skeleton.d.ts +2 -2
  125. package/cjs/components/slider/Slider.d.ts +4 -4
  126. package/cjs/components/slider/style/dnb-slider.css +0 -2
  127. package/cjs/components/slider/style/dnb-slider.min.css +1 -1
  128. package/cjs/components/step-indicator/StepIndicator.d.ts +6 -6
  129. package/cjs/components/step-indicator/StepIndicator.js +4 -98
  130. package/cjs/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  131. package/cjs/components/step-indicator/StepIndicatorContext.js +221 -19
  132. package/cjs/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  133. package/cjs/components/step-indicator/StepIndicatorItem.js +4 -6
  134. package/cjs/components/step-indicator/StepIndicatorModal.js +40 -49
  135. package/cjs/components/step-indicator/StepIndicatorProps.js +1 -1
  136. package/cjs/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  137. package/cjs/components/step-indicator/StepIndicatorSidebar.js +57 -54
  138. package/cjs/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  139. package/cjs/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  140. package/cjs/components/step-indicator/style/_step-indicator.scss +17 -4
  141. package/cjs/components/step-indicator/style/dnb-step-indicator.css +14 -6
  142. package/cjs/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  143. package/cjs/components/switch/Switch.d.ts +5 -5
  144. package/cjs/components/tabs/Tabs.d.ts +4 -4
  145. package/cjs/components/tabs/TabsContentWrapper.d.ts +1 -1
  146. package/cjs/components/tag/Tag.js +97 -0
  147. package/cjs/components/tag/index.d.ts +8 -0
  148. package/cjs/components/tag/index.js +52 -0
  149. package/cjs/components/tag/style/_tag.scss +26 -0
  150. package/cjs/components/tag/style/dnb-tag.css +109 -0
  151. package/cjs/components/tag/style/dnb-tag.min.css +1 -0
  152. package/cjs/components/tag/style/dnb-tag.scss +12 -0
  153. package/cjs/components/tag/style/index.d.ts +6 -0
  154. package/cjs/components/tag/style/index.js +3 -0
  155. package/cjs/components/tag/style.js +3 -0
  156. package/cjs/components/textarea/Textarea.d.ts +4 -4
  157. package/cjs/components/textarea/style/_textarea.scss +4 -0
  158. package/cjs/components/textarea/style/dnb-textarea.css +3 -0
  159. package/cjs/components/textarea/style/dnb-textarea.min.css +1 -1
  160. package/cjs/components/toggle-button/ToggleButton.d.ts +6 -6
  161. package/cjs/components/toggle-button/ToggleButton.js +6 -2
  162. package/cjs/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  163. package/cjs/components/toggle-button/style/dnb-toggle-button.css +0 -2
  164. package/cjs/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  165. package/cjs/components/tooltip/Tooltip.d.ts +5 -5
  166. package/cjs/components/tooltip/TooltipContainer.d.ts +3 -3
  167. package/cjs/components/tooltip/TooltipPortal.d.ts +1 -1
  168. package/cjs/components/tooltip/TooltipWithEvents.d.ts +1 -1
  169. package/cjs/fragments/scroll-view/ScrollView.js +7 -16
  170. package/cjs/icons/above_the_line.js +1 -1
  171. package/cjs/icons/facebook.js +35 -0
  172. package/cjs/icons/facebook_medium.js +35 -0
  173. package/cjs/icons/fridge.js +1 -1
  174. package/cjs/icons/icons-meta.json +24 -0
  175. package/cjs/icons/icons-pdf.lock +1 -1
  176. package/cjs/icons/icons-svg.lock +1 -1
  177. package/cjs/icons/index.d.ts +16 -0
  178. package/cjs/icons/index.js +64 -0
  179. package/cjs/icons/information_circled.js +11 -4
  180. package/cjs/icons/information_circled_medium.js +10 -4
  181. package/cjs/icons/instagram.js +47 -0
  182. package/cjs/icons/instagram_medium.js +54 -0
  183. package/cjs/icons/linkedin.js +32 -0
  184. package/cjs/icons/linkedin_medium.js +32 -0
  185. package/cjs/icons/motorcycle_medium.js +2 -2
  186. package/cjs/icons/paragraph.js +1 -1
  187. package/cjs/icons/scooter_medium.js +2 -2
  188. package/cjs/icons/secondary_icons.js +32 -0
  189. package/cjs/icons/secondary_icons_medium.js +32 -0
  190. package/cjs/icons/tag.js +41 -0
  191. package/cjs/icons/tag_medium.js +41 -0
  192. package/cjs/index.d.ts +2 -0
  193. package/cjs/index.js +8 -0
  194. package/cjs/shared/Context.js +2 -1
  195. package/cjs/shared/EventEmitter.js +6 -8
  196. package/cjs/shared/component-helper.js +108 -76
  197. package/cjs/shared/helpers.js +36 -11
  198. package/cjs/style/core/helper-classes/skip-link.scss +1 -1
  199. package/cjs/style/dnb-ui-components.css +107 -76
  200. package/cjs/style/dnb-ui-components.min.css +5 -5
  201. package/cjs/style/dnb-ui-components.scss +1 -0
  202. package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  203. package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  204. package/cjs/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  205. package/cjs/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  206. package/components/Tag.d.ts +14 -0
  207. package/components/Tag.js +3 -0
  208. package/components/accordion/Accordion.d.ts +7 -7
  209. package/components/autocomplete/Autocomplete.d.ts +13 -13
  210. package/components/autocomplete/style/dnb-autocomplete.css +0 -2
  211. package/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  212. package/components/breadcrumb/Breadcrumb.js +5 -3
  213. package/components/breadcrumb/Breadcrumb.tsx +9 -0
  214. package/components/breadcrumb/style/_breadcrumb.scss +7 -4
  215. package/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  216. package/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  217. package/components/button/Button.d.ts +7 -7
  218. package/components/button/Button.js +7 -5
  219. package/components/button/style/_button.scss +0 -4
  220. package/components/button/style/dnb-button.css +0 -2
  221. package/components/button/style/dnb-button.min.css +1 -1
  222. package/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  223. package/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  224. package/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  225. package/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  226. package/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  227. package/components/checkbox/Checkbox.d.ts +3 -3
  228. package/components/date-picker/DatePicker.d.ts +14 -14
  229. package/components/date-picker/DatePickerAddon.d.ts +1 -1
  230. package/components/date-picker/DatePickerCalendar.d.ts +1 -1
  231. package/components/date-picker/DatePickerInput.d.ts +1 -1
  232. package/components/date-picker/style/dnb-date-picker.css +0 -6
  233. package/components/date-picker/style/dnb-date-picker.min.css +1 -1
  234. package/components/dropdown/Dropdown.d.ts +9 -9
  235. package/components/dropdown/style/dnb-dropdown.css +0 -2
  236. package/components/dropdown/style/dnb-dropdown.min.css +1 -1
  237. package/components/form-row/FormRow.d.ts +4 -4
  238. package/components/form-set/FormSet.d.ts +6 -6
  239. package/components/global-error/GlobalError.d.ts +1 -1
  240. package/components/global-error/style/dnb-global-error.css +0 -2
  241. package/components/global-error/style/dnb-global-error.min.css +1 -1
  242. package/components/global-status/GlobalStatus.d.ts +5 -5
  243. package/components/global-status/GlobalStatus.js +18 -71
  244. package/components/global-status/style/_global-status.scss +14 -12
  245. package/components/global-status/style/dnb-global-status.css +13 -17
  246. package/components/global-status/style/dnb-global-status.min.css +1 -1
  247. package/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  248. package/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  249. package/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  250. package/components/heading/Heading.d.ts +2 -2
  251. package/components/heading/HeadingProvider.d.ts +2 -2
  252. package/components/help-button/HelpButton.d.ts +200 -0
  253. package/components/icon/Icon.d.ts +1 -1
  254. package/components/index.d.ts +2 -0
  255. package/components/index.js +2 -1
  256. package/components/input/Input.d.ts +9 -9
  257. package/components/input/style/dnb-input.css +0 -2
  258. package/components/input/style/dnb-input.min.css +1 -1
  259. package/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  260. package/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  261. package/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  262. package/components/input-masked/InputMasked.d.ts +11 -11
  263. package/components/input-masked/InputMasked.js +6 -4
  264. package/components/input-masked/InputMaskedElement.js +1 -4
  265. package/components/input-masked/InputMaskedHooks.js +66 -48
  266. package/components/input-masked/InputMaskedUtils.js +18 -23
  267. package/components/input-masked/style/dnb-input-masked.css +0 -2
  268. package/components/input-masked/style/dnb-input-masked.min.css +1 -1
  269. package/components/lib.js +3 -1
  270. package/components/modal/Modal.js +147 -279
  271. package/components/modal/Modal.tsx +524 -0
  272. package/components/modal/ModalContent.js +175 -253
  273. package/components/modal/ModalContent.tsx +515 -0
  274. package/components/modal/ModalContext.tsx +10 -0
  275. package/components/modal/ModalRoot.js +145 -0
  276. package/components/modal/ModalRoot.tsx +131 -0
  277. package/components/modal/components/CloseButton.js +72 -0
  278. package/components/modal/components/CloseButton.tsx +56 -0
  279. package/components/modal/components/ModalHeader.js +70 -0
  280. package/components/modal/components/ModalHeader.tsx +79 -0
  281. package/components/modal/components/ModalHeaderBar.js +122 -0
  282. package/components/modal/components/ModalHeaderBar.tsx +118 -0
  283. package/components/modal/{ModalInner.js → components/ModalInner.js} +11 -17
  284. package/components/modal/components/ModalInner.tsx +45 -0
  285. package/components/modal/helpers.js +64 -0
  286. package/components/modal/helpers.ts +63 -0
  287. package/components/modal/style/_modal-mixins.scss +4 -4
  288. package/components/modal/style/_modal.scss +13 -30
  289. package/components/modal/style/dnb-modal.css +27 -47
  290. package/components/modal/style/dnb-modal.min.css +1 -1
  291. package/components/modal/types.js +1 -0
  292. package/{cjs/components/modal/Modal.d.ts → components/modal/types.ts} +125 -179
  293. package/components/number-format/NumberFormat.d.ts +8 -8
  294. package/components/pagination/Pagination.d.ts +30 -30
  295. package/components/pagination/PaginationProvider.d.ts +2 -2
  296. package/components/pagination/style/dnb-pagination.css +0 -2
  297. package/components/pagination/style/dnb-pagination.min.css +1 -1
  298. package/components/radio/Radio.d.ts +4 -4
  299. package/components/radio/RadioGroup.d.ts +3 -3
  300. package/components/section/Section.d.ts +3 -1
  301. package/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  302. package/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  303. package/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  304. package/components/skeleton/Skeleton.d.ts +2 -2
  305. package/components/slider/Slider.d.ts +4 -4
  306. package/components/slider/style/dnb-slider.css +0 -2
  307. package/components/slider/style/dnb-slider.min.css +1 -1
  308. package/components/step-indicator/StepIndicator.d.ts +6 -6
  309. package/components/step-indicator/StepIndicator.js +4 -91
  310. package/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  311. package/components/step-indicator/StepIndicatorContext.js +196 -18
  312. package/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  313. package/components/step-indicator/StepIndicatorItem.js +3 -5
  314. package/components/step-indicator/StepIndicatorModal.js +33 -32
  315. package/components/step-indicator/StepIndicatorProps.js +1 -1
  316. package/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  317. package/components/step-indicator/StepIndicatorSidebar.js +54 -52
  318. package/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  319. package/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  320. package/components/step-indicator/style/_step-indicator.scss +17 -4
  321. package/components/step-indicator/style/dnb-step-indicator.css +14 -6
  322. package/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  323. package/components/switch/Switch.d.ts +5 -5
  324. package/components/tabs/Tabs.d.ts +4 -4
  325. package/components/tabs/TabsContentWrapper.d.ts +1 -1
  326. package/components/tag/Tag.js +63 -0
  327. package/components/tag/Tag.tsx +95 -0
  328. package/components/tag/index.d.ts +8 -0
  329. package/components/tag/index.js +3 -0
  330. package/components/tag/style/_tag.scss +26 -0
  331. package/components/tag/style/dnb-tag.css +109 -0
  332. package/components/tag/style/dnb-tag.min.css +1 -0
  333. package/components/tag/style/dnb-tag.scss +12 -0
  334. package/components/tag/style/index.d.ts +6 -0
  335. package/components/tag/style/index.js +1 -0
  336. package/components/tag/style.js +1 -0
  337. package/components/textarea/Textarea.d.ts +4 -4
  338. package/components/textarea/style/_textarea.scss +4 -0
  339. package/components/textarea/style/dnb-textarea.css +3 -0
  340. package/components/textarea/style/dnb-textarea.min.css +1 -1
  341. package/components/toggle-button/ToggleButton.d.ts +6 -6
  342. package/components/toggle-button/ToggleButton.js +6 -2
  343. package/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  344. package/components/toggle-button/style/dnb-toggle-button.css +0 -2
  345. package/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  346. package/components/tooltip/Tooltip.d.ts +5 -5
  347. package/components/tooltip/TooltipContainer.d.ts +3 -3
  348. package/components/tooltip/TooltipPortal.d.ts +1 -1
  349. package/components/tooltip/TooltipWithEvents.d.ts +1 -1
  350. package/es/components/Tag.d.ts +14 -0
  351. package/es/components/Tag.js +3 -0
  352. package/es/components/accordion/Accordion.d.ts +7 -7
  353. package/es/components/autocomplete/Autocomplete.d.ts +13 -13
  354. package/es/components/autocomplete/style/dnb-autocomplete.css +0 -2
  355. package/es/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  356. package/es/components/breadcrumb/Breadcrumb.js +5 -3
  357. package/es/components/breadcrumb/Breadcrumb.tsx +9 -0
  358. package/es/components/breadcrumb/style/_breadcrumb.scss +7 -4
  359. package/es/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  360. package/es/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  361. package/es/components/button/Button.d.ts +7 -7
  362. package/es/components/button/Button.js +8 -5
  363. package/es/components/button/style/_button.scss +0 -4
  364. package/es/components/button/style/dnb-button.css +0 -2
  365. package/es/components/button/style/dnb-button.min.css +1 -1
  366. package/es/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  367. package/es/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  368. package/es/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  369. package/es/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  370. package/es/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  371. package/es/components/checkbox/Checkbox.d.ts +3 -3
  372. package/es/components/date-picker/DatePicker.d.ts +14 -14
  373. package/es/components/date-picker/DatePickerAddon.d.ts +1 -1
  374. package/es/components/date-picker/DatePickerCalendar.d.ts +1 -1
  375. package/es/components/date-picker/DatePickerInput.d.ts +1 -1
  376. package/es/components/date-picker/style/dnb-date-picker.css +0 -6
  377. package/es/components/date-picker/style/dnb-date-picker.min.css +1 -1
  378. package/es/components/dropdown/Dropdown.d.ts +9 -9
  379. package/es/components/dropdown/style/dnb-dropdown.css +0 -2
  380. package/es/components/dropdown/style/dnb-dropdown.min.css +1 -1
  381. package/es/components/form-row/FormRow.d.ts +4 -4
  382. package/es/components/form-set/FormSet.d.ts +6 -6
  383. package/es/components/global-error/GlobalError.d.ts +1 -1
  384. package/es/components/global-error/style/dnb-global-error.css +0 -2
  385. package/es/components/global-error/style/dnb-global-error.min.css +1 -1
  386. package/es/components/global-status/GlobalStatus.d.ts +5 -5
  387. package/es/components/global-status/GlobalStatus.js +18 -67
  388. package/es/components/global-status/style/_global-status.scss +14 -12
  389. package/es/components/global-status/style/dnb-global-status.css +13 -17
  390. package/es/components/global-status/style/dnb-global-status.min.css +1 -1
  391. package/es/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  392. package/es/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  393. package/es/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  394. package/es/components/heading/Heading.d.ts +2 -2
  395. package/es/components/heading/HeadingProvider.d.ts +2 -2
  396. package/es/components/help-button/HelpButton.d.ts +200 -0
  397. package/es/components/icon/Icon.d.ts +1 -1
  398. package/es/components/icon-primary/IconPrimary.d.ts +1 -1
  399. package/es/components/index.d.ts +2 -0
  400. package/es/components/index.js +2 -1
  401. package/es/components/input/Input.d.ts +9 -9
  402. package/es/components/input/style/dnb-input.css +0 -2
  403. package/es/components/input/style/dnb-input.min.css +1 -1
  404. package/es/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  405. package/es/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  406. package/es/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  407. package/es/components/input-masked/InputMasked.d.ts +11 -11
  408. package/es/components/input-masked/InputMasked.js +6 -4
  409. package/es/components/input-masked/InputMaskedElement.js +1 -4
  410. package/es/components/input-masked/InputMaskedHooks.js +50 -34
  411. package/es/components/input-masked/InputMaskedUtils.js +16 -21
  412. package/es/components/input-masked/style/dnb-input-masked.css +0 -2
  413. package/es/components/input-masked/style/dnb-input-masked.min.css +1 -1
  414. package/es/components/lib.js +3 -1
  415. package/es/components/modal/Modal.js +128 -252
  416. package/es/components/modal/Modal.tsx +524 -0
  417. package/es/components/modal/ModalContent.js +131 -211
  418. package/es/components/modal/ModalContent.tsx +515 -0
  419. package/es/components/modal/ModalContext.tsx +10 -0
  420. package/es/components/modal/ModalRoot.js +108 -0
  421. package/es/components/modal/ModalRoot.tsx +131 -0
  422. package/es/components/modal/components/CloseButton.js +41 -0
  423. package/es/components/modal/components/CloseButton.tsx +56 -0
  424. package/es/components/modal/components/ModalHeader.js +40 -0
  425. package/es/components/modal/components/ModalHeader.tsx +79 -0
  426. package/es/components/modal/components/ModalHeaderBar.js +88 -0
  427. package/es/components/modal/components/ModalHeaderBar.tsx +118 -0
  428. package/es/components/modal/{ModalInner.js → components/ModalInner.js} +8 -18
  429. package/es/components/modal/components/ModalInner.tsx +45 -0
  430. package/es/components/modal/helpers.js +60 -0
  431. package/es/components/modal/helpers.ts +63 -0
  432. package/es/components/modal/style/_modal-mixins.scss +4 -4
  433. package/es/components/modal/style/_modal.scss +13 -30
  434. package/es/components/modal/style/dnb-modal.css +27 -47
  435. package/es/components/modal/style/dnb-modal.min.css +1 -1
  436. package/es/components/modal/types.js +1 -0
  437. package/es/components/modal/{Modal.d.ts → types.ts} +125 -179
  438. package/es/components/number-format/NumberFormat.d.ts +8 -8
  439. package/es/components/pagination/Pagination.d.ts +30 -30
  440. package/es/components/pagination/PaginationProvider.d.ts +2 -2
  441. package/es/components/pagination/style/dnb-pagination.css +0 -2
  442. package/es/components/pagination/style/dnb-pagination.min.css +1 -1
  443. package/es/components/radio/Radio.d.ts +4 -4
  444. package/es/components/radio/RadioGroup.d.ts +3 -3
  445. package/es/components/section/Section.d.ts +3 -2
  446. package/es/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  447. package/es/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  448. package/es/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  449. package/es/components/skeleton/Skeleton.d.ts +2 -2
  450. package/es/components/slider/Slider.d.ts +4 -4
  451. package/es/components/slider/style/dnb-slider.css +0 -2
  452. package/es/components/slider/style/dnb-slider.min.css +1 -1
  453. package/es/components/step-indicator/StepIndicator.d.ts +6 -6
  454. package/es/components/step-indicator/StepIndicator.js +3 -79
  455. package/es/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  456. package/es/components/step-indicator/StepIndicatorContext.js +165 -17
  457. package/es/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  458. package/es/components/step-indicator/StepIndicatorItem.js +2 -5
  459. package/es/components/step-indicator/StepIndicatorModal.js +31 -34
  460. package/es/components/step-indicator/StepIndicatorProps.js +1 -1
  461. package/es/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  462. package/es/components/step-indicator/StepIndicatorSidebar.js +44 -46
  463. package/es/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  464. package/es/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  465. package/es/components/step-indicator/style/_step-indicator.scss +17 -4
  466. package/es/components/step-indicator/style/dnb-step-indicator.css +14 -6
  467. package/es/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  468. package/es/components/switch/Switch.d.ts +5 -5
  469. package/es/components/tabs/Tabs.d.ts +4 -4
  470. package/es/components/tabs/TabsContentWrapper.d.ts +1 -1
  471. package/es/components/tag/Tag.js +58 -0
  472. package/es/components/tag/Tag.tsx +95 -0
  473. package/es/components/tag/index.d.ts +8 -0
  474. package/es/components/tag/index.js +3 -0
  475. package/es/components/tag/style/_tag.scss +26 -0
  476. package/es/components/tag/style/dnb-tag.css +109 -0
  477. package/es/components/tag/style/dnb-tag.min.css +1 -0
  478. package/es/components/tag/style/dnb-tag.scss +12 -0
  479. package/es/components/tag/style/index.d.ts +6 -0
  480. package/es/components/tag/style/index.js +1 -0
  481. package/es/components/tag/style.js +1 -0
  482. package/es/components/textarea/Textarea.d.ts +4 -4
  483. package/es/components/textarea/style/_textarea.scss +4 -0
  484. package/es/components/textarea/style/dnb-textarea.css +3 -0
  485. package/es/components/textarea/style/dnb-textarea.min.css +1 -1
  486. package/es/components/toggle-button/ToggleButton.d.ts +6 -6
  487. package/es/components/toggle-button/ToggleButton.js +6 -2
  488. package/es/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  489. package/es/components/toggle-button/style/dnb-toggle-button.css +0 -2
  490. package/es/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  491. package/es/components/tooltip/Tooltip.d.ts +5 -5
  492. package/es/components/tooltip/TooltipContainer.d.ts +3 -3
  493. package/es/components/tooltip/TooltipPortal.d.ts +1 -1
  494. package/es/components/tooltip/TooltipWithEvents.d.ts +1 -1
  495. package/es/fragments/scroll-view/ScrollView.js +7 -15
  496. package/es/fragments/scroll-view/ScrollView.tsx +92 -0
  497. package/es/icons/above_the_line.js +1 -1
  498. package/es/icons/facebook.js +23 -0
  499. package/es/icons/facebook_medium.js +23 -0
  500. package/es/icons/fridge.js +1 -1
  501. package/es/icons/icons-meta.json +24 -0
  502. package/es/icons/icons-pdf.lock +1 -1
  503. package/es/icons/icons-svg.lock +1 -1
  504. package/es/icons/index.d.ts +16 -0
  505. package/es/icons/index.js +9 -1
  506. package/es/icons/information_circled.js +11 -4
  507. package/es/icons/information_circled_medium.js +10 -4
  508. package/es/icons/instagram.js +35 -0
  509. package/es/icons/instagram_medium.js +42 -0
  510. package/es/icons/linkedin.js +20 -0
  511. package/es/icons/linkedin_medium.js +20 -0
  512. package/es/icons/motorcycle_medium.js +2 -2
  513. package/es/icons/paragraph.js +1 -1
  514. package/es/icons/scooter_medium.js +2 -2
  515. package/es/icons/secondary_icons.js +5 -1
  516. package/es/icons/secondary_icons_medium.js +5 -1
  517. package/es/icons/tag.js +29 -0
  518. package/es/icons/tag_medium.js +29 -0
  519. package/es/index.d.ts +2 -0
  520. package/es/index.js +2 -1
  521. package/es/shared/Context.js +2 -1
  522. package/es/shared/EventEmitter.js +5 -8
  523. package/es/shared/component-helper.js +58 -50
  524. package/es/shared/helpers.js +11 -2
  525. package/es/style/core/helper-classes/skip-link.scss +1 -1
  526. package/es/style/dnb-ui-components.css +107 -76
  527. package/es/style/dnb-ui-components.min.css +5 -5
  528. package/es/style/dnb-ui-components.scss +1 -0
  529. package/es/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  530. package/es/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  531. package/es/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  532. package/es/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  533. package/esm/components/Tag.d.ts +14 -0
  534. package/esm/components/Tag.js +3 -0
  535. package/esm/components/accordion/Accordion.d.ts +7 -7
  536. package/esm/components/autocomplete/Autocomplete.d.ts +13 -13
  537. package/esm/components/autocomplete/style/dnb-autocomplete.css +0 -2
  538. package/esm/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
  539. package/esm/components/breadcrumb/Breadcrumb.js +5 -3
  540. package/esm/components/breadcrumb/Breadcrumb.tsx +9 -0
  541. package/esm/components/breadcrumb/style/_breadcrumb.scss +7 -4
  542. package/esm/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
  543. package/esm/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  544. package/esm/components/button/Button.d.ts +7 -7
  545. package/esm/components/button/Button.js +7 -5
  546. package/esm/components/button/style/_button.scss +0 -4
  547. package/esm/components/button/style/dnb-button.css +0 -2
  548. package/esm/components/button/style/dnb-button.min.css +1 -1
  549. package/esm/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
  550. package/esm/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
  551. package/esm/components/button/style/themes/dnb-button-theme-ui.css +4 -13
  552. package/esm/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  553. package/esm/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
  554. package/esm/components/checkbox/Checkbox.d.ts +3 -3
  555. package/esm/components/date-picker/DatePicker.d.ts +14 -14
  556. package/esm/components/date-picker/DatePickerAddon.d.ts +1 -1
  557. package/esm/components/date-picker/DatePickerCalendar.d.ts +1 -1
  558. package/esm/components/date-picker/DatePickerInput.d.ts +1 -1
  559. package/esm/components/date-picker/style/dnb-date-picker.css +0 -6
  560. package/esm/components/date-picker/style/dnb-date-picker.min.css +1 -1
  561. package/esm/components/dropdown/Dropdown.d.ts +9 -9
  562. package/esm/components/dropdown/style/dnb-dropdown.css +0 -2
  563. package/esm/components/dropdown/style/dnb-dropdown.min.css +1 -1
  564. package/esm/components/form-row/FormRow.d.ts +4 -4
  565. package/esm/components/form-set/FormSet.d.ts +6 -6
  566. package/esm/components/global-error/GlobalError.d.ts +1 -1
  567. package/esm/components/global-error/style/dnb-global-error.css +0 -2
  568. package/esm/components/global-error/style/dnb-global-error.min.css +1 -1
  569. package/esm/components/global-status/GlobalStatus.d.ts +5 -5
  570. package/esm/components/global-status/GlobalStatus.js +18 -71
  571. package/esm/components/global-status/style/_global-status.scss +14 -12
  572. package/esm/components/global-status/style/dnb-global-status.css +13 -17
  573. package/esm/components/global-status/style/dnb-global-status.min.css +1 -1
  574. package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
  575. package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
  576. package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
  577. package/esm/components/heading/Heading.d.ts +2 -2
  578. package/esm/components/heading/HeadingProvider.d.ts +2 -2
  579. package/esm/components/help-button/HelpButton.d.ts +200 -0
  580. package/esm/components/icon/Icon.d.ts +1 -1
  581. package/esm/components/index.d.ts +2 -0
  582. package/esm/components/index.js +2 -1
  583. package/esm/components/input/Input.d.ts +9 -9
  584. package/esm/components/input/style/dnb-input.css +0 -2
  585. package/esm/components/input/style/dnb-input.min.css +1 -1
  586. package/esm/components/input/style/themes/dnb-input-theme-ui.css +11 -2
  587. package/esm/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
  588. package/esm/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
  589. package/esm/components/input-masked/InputMasked.d.ts +11 -11
  590. package/esm/components/input-masked/InputMasked.js +6 -4
  591. package/esm/components/input-masked/InputMaskedElement.js +1 -4
  592. package/esm/components/input-masked/InputMaskedHooks.js +66 -48
  593. package/esm/components/input-masked/InputMaskedUtils.js +18 -23
  594. package/esm/components/input-masked/style/dnb-input-masked.css +0 -2
  595. package/esm/components/input-masked/style/dnb-input-masked.min.css +1 -1
  596. package/esm/components/lib.js +3 -1
  597. package/esm/components/modal/Modal.js +147 -279
  598. package/esm/components/modal/Modal.tsx +524 -0
  599. package/esm/components/modal/ModalContent.js +175 -253
  600. package/esm/components/modal/ModalContent.tsx +515 -0
  601. package/esm/components/modal/ModalContext.tsx +10 -0
  602. package/esm/components/modal/ModalRoot.js +145 -0
  603. package/esm/components/modal/ModalRoot.tsx +131 -0
  604. package/esm/components/modal/components/CloseButton.js +72 -0
  605. package/esm/components/modal/components/CloseButton.tsx +56 -0
  606. package/esm/components/modal/components/ModalHeader.js +70 -0
  607. package/esm/components/modal/components/ModalHeader.tsx +79 -0
  608. package/esm/components/modal/components/ModalHeaderBar.js +122 -0
  609. package/esm/components/modal/components/ModalHeaderBar.tsx +118 -0
  610. package/esm/components/modal/{ModalInner.js → components/ModalInner.js} +11 -17
  611. package/esm/components/modal/components/ModalInner.tsx +45 -0
  612. package/esm/components/modal/helpers.js +64 -0
  613. package/esm/components/modal/helpers.ts +63 -0
  614. package/esm/components/modal/style/_modal-mixins.scss +4 -4
  615. package/esm/components/modal/style/_modal.scss +13 -30
  616. package/esm/components/modal/style/dnb-modal.css +27 -47
  617. package/esm/components/modal/style/dnb-modal.min.css +1 -1
  618. package/esm/components/modal/types.js +1 -0
  619. package/esm/components/modal/{Modal.d.ts → types.ts} +125 -179
  620. package/esm/components/number-format/NumberFormat.d.ts +8 -8
  621. package/esm/components/pagination/Pagination.d.ts +30 -30
  622. package/esm/components/pagination/PaginationProvider.d.ts +2 -2
  623. package/esm/components/pagination/style/dnb-pagination.css +0 -2
  624. package/esm/components/pagination/style/dnb-pagination.min.css +1 -1
  625. package/esm/components/radio/Radio.d.ts +4 -4
  626. package/esm/components/radio/RadioGroup.d.ts +3 -3
  627. package/esm/components/section/Section.d.ts +3 -1
  628. package/esm/components/section/style/themes/dnb-section-theme-ui.css +77 -19
  629. package/esm/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
  630. package/esm/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
  631. package/esm/components/skeleton/Skeleton.d.ts +2 -2
  632. package/esm/components/slider/Slider.d.ts +4 -4
  633. package/esm/components/slider/style/dnb-slider.css +0 -2
  634. package/esm/components/slider/style/dnb-slider.min.css +1 -1
  635. package/esm/components/step-indicator/StepIndicator.d.ts +6 -6
  636. package/esm/components/step-indicator/StepIndicator.js +4 -91
  637. package/esm/components/step-indicator/StepIndicatorContext.d.ts +2 -1
  638. package/esm/components/step-indicator/StepIndicatorContext.js +196 -18
  639. package/esm/components/step-indicator/StepIndicatorItem.d.ts +2 -2
  640. package/esm/components/step-indicator/StepIndicatorItem.js +3 -5
  641. package/esm/components/step-indicator/StepIndicatorModal.js +33 -32
  642. package/esm/components/step-indicator/StepIndicatorProps.js +1 -1
  643. package/esm/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
  644. package/esm/components/step-indicator/StepIndicatorSidebar.js +54 -52
  645. package/esm/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  646. package/esm/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
  647. package/esm/components/step-indicator/style/_step-indicator.scss +17 -4
  648. package/esm/components/step-indicator/style/dnb-step-indicator.css +14 -6
  649. package/esm/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
  650. package/esm/components/switch/Switch.d.ts +5 -5
  651. package/esm/components/tabs/Tabs.d.ts +4 -4
  652. package/esm/components/tabs/TabsContentWrapper.d.ts +1 -1
  653. package/esm/components/tag/Tag.js +63 -0
  654. package/esm/components/tag/Tag.tsx +95 -0
  655. package/esm/components/tag/index.d.ts +8 -0
  656. package/esm/components/tag/index.js +3 -0
  657. package/esm/components/tag/style/_tag.scss +26 -0
  658. package/esm/components/tag/style/dnb-tag.css +109 -0
  659. package/esm/components/tag/style/dnb-tag.min.css +1 -0
  660. package/esm/components/tag/style/dnb-tag.scss +12 -0
  661. package/esm/components/tag/style/index.d.ts +6 -0
  662. package/esm/components/tag/style/index.js +1 -0
  663. package/esm/components/tag/style.js +1 -0
  664. package/esm/components/textarea/Textarea.d.ts +4 -4
  665. package/esm/components/textarea/style/_textarea.scss +4 -0
  666. package/esm/components/textarea/style/dnb-textarea.css +3 -0
  667. package/esm/components/textarea/style/dnb-textarea.min.css +1 -1
  668. package/esm/components/toggle-button/ToggleButton.d.ts +6 -6
  669. package/esm/components/toggle-button/ToggleButton.js +6 -2
  670. package/esm/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
  671. package/esm/components/toggle-button/style/dnb-toggle-button.css +0 -2
  672. package/esm/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  673. package/esm/components/tooltip/Tooltip.d.ts +5 -5
  674. package/esm/components/tooltip/TooltipContainer.d.ts +3 -3
  675. package/esm/components/tooltip/TooltipPortal.d.ts +1 -1
  676. package/esm/components/tooltip/TooltipWithEvents.d.ts +1 -1
  677. package/esm/dnb-ui-basis.min.mjs +2 -2
  678. package/esm/dnb-ui-components.min.mjs +3 -3
  679. package/esm/dnb-ui-elements.min.mjs +4 -4
  680. package/esm/dnb-ui-extensions.min.mjs +4 -4
  681. package/esm/dnb-ui-lib.min.mjs +4 -4
  682. package/esm/dnb-ui-web-components.min.mjs +4 -4
  683. package/esm/fragments/scroll-view/ScrollView.js +10 -16
  684. package/esm/fragments/scroll-view/ScrollView.tsx +92 -0
  685. package/esm/icons/above_the_line.js +1 -1
  686. package/esm/icons/facebook.js +23 -0
  687. package/esm/icons/facebook_medium.js +23 -0
  688. package/esm/icons/fridge.js +1 -1
  689. package/esm/icons/icons-meta.json +24 -0
  690. package/esm/icons/icons-pdf.lock +1 -1
  691. package/esm/icons/icons-svg.lock +1 -1
  692. package/esm/icons/index.d.ts +16 -0
  693. package/esm/icons/index.js +9 -1
  694. package/esm/icons/information_circled.js +11 -4
  695. package/esm/icons/information_circled_medium.js +10 -4
  696. package/esm/icons/instagram.js +35 -0
  697. package/esm/icons/instagram_medium.js +42 -0
  698. package/esm/icons/linkedin.js +20 -0
  699. package/esm/icons/linkedin_medium.js +20 -0
  700. package/esm/icons/motorcycle_medium.js +2 -2
  701. package/esm/icons/paragraph.js +1 -1
  702. package/esm/icons/scooter_medium.js +2 -2
  703. package/esm/icons/secondary_icons.js +5 -1
  704. package/esm/icons/secondary_icons_medium.js +5 -1
  705. package/esm/icons/tag.js +29 -0
  706. package/esm/icons/tag_medium.js +29 -0
  707. package/esm/index.d.ts +2 -0
  708. package/esm/index.js +2 -1
  709. package/esm/shared/Context.js +2 -1
  710. package/esm/shared/EventEmitter.js +6 -8
  711. package/esm/shared/component-helper.js +94 -59
  712. package/esm/shared/helpers.js +19 -2
  713. package/esm/style/core/helper-classes/skip-link.scss +1 -1
  714. package/esm/style/dnb-ui-components.css +107 -76
  715. package/esm/style/dnb-ui-components.min.css +5 -5
  716. package/esm/style/dnb-ui-components.scss +1 -0
  717. package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  718. package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  719. package/esm/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  720. package/esm/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  721. package/fragments/scroll-view/ScrollView.js +10 -16
  722. package/fragments/scroll-view/ScrollView.tsx +92 -0
  723. package/icons/above_the_line.js +1 -1
  724. package/icons/facebook.js +23 -0
  725. package/icons/facebook_medium.js +23 -0
  726. package/icons/fridge.js +1 -1
  727. package/icons/icons-meta.json +24 -0
  728. package/icons/icons-pdf.lock +1 -1
  729. package/icons/icons-svg.lock +1 -1
  730. package/icons/index.d.ts +16 -0
  731. package/icons/index.js +9 -1
  732. package/icons/information_circled.js +11 -4
  733. package/icons/information_circled_medium.js +10 -4
  734. package/icons/instagram.js +35 -0
  735. package/icons/instagram_medium.js +42 -0
  736. package/icons/linkedin.js +20 -0
  737. package/icons/linkedin_medium.js +20 -0
  738. package/icons/motorcycle_medium.js +2 -2
  739. package/icons/paragraph.js +1 -1
  740. package/icons/scooter_medium.js +2 -2
  741. package/icons/secondary_icons.js +5 -1
  742. package/icons/secondary_icons_medium.js +5 -1
  743. package/icons/tag.js +29 -0
  744. package/icons/tag_medium.js +29 -0
  745. package/index.d.ts +2 -0
  746. package/index.js +2 -1
  747. package/package.json +1 -1
  748. package/shared/Context.js +2 -1
  749. package/shared/EventEmitter.js +6 -8
  750. package/shared/component-helper.js +94 -59
  751. package/shared/helpers.js +19 -2
  752. package/style/core/helper-classes/skip-link.scss +1 -1
  753. package/style/dnb-ui-components.css +107 -76
  754. package/style/dnb-ui-components.min.css +5 -5
  755. package/style/dnb-ui-components.scss +1 -0
  756. package/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
  757. package/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  758. package/style/themes/theme-ui/dnb-theme-ui.css +94 -82
  759. package/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  760. package/umd/dnb-ui-basis.min.js +3 -3
  761. package/umd/dnb-ui-components.min.js +4 -4
  762. package/umd/dnb-ui-elements.min.js +5 -5
  763. package/umd/dnb-ui-extensions.min.js +5 -5
  764. package/umd/dnb-ui-lib.min.js +5 -5
  765. package/umd/dnb-ui-web-components.min.js +5 -5
  766. package/cjs/components/modal/ModalContent.d.ts +0 -168
  767. package/cjs/components/modal/ModalHeader.d.ts +0 -73
  768. package/cjs/components/modal/ModalInner.d.ts +0 -20
  769. package/cjs/fragments/scroll-view/ScrollView.d.ts +0 -1
  770. package/components/modal/Modal.d.ts +0 -325
  771. package/components/modal/ModalContent.d.ts +0 -168
  772. package/components/modal/ModalHeader.d.ts +0 -73
  773. package/components/modal/ModalHeader.js +0 -224
  774. package/components/modal/ModalInner.d.ts +0 -20
  775. package/es/components/modal/ModalContent.d.ts +0 -168
  776. package/es/components/modal/ModalHeader.d.ts +0 -73
  777. package/es/components/modal/ModalHeader.js +0 -166
  778. package/es/components/modal/ModalInner.d.ts +0 -20
  779. package/es/fragments/scroll-view/ScrollView.d.ts +0 -1
  780. package/esm/components/modal/ModalContent.d.ts +0 -168
  781. package/esm/components/modal/ModalHeader.d.ts +0 -73
  782. package/esm/components/modal/ModalHeader.js +0 -224
  783. package/esm/components/modal/ModalInner.d.ts +0 -20
  784. package/esm/fragments/scroll-view/ScrollView.d.ts +0 -1
  785. package/fragments/scroll-view/ScrollView.d.ts +0 -1
@@ -13,8 +13,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
13
13
  import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
14
14
  import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
15
15
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
16
- var _excluded = ["root_id", "content_id", "id", "open_state", "open_delay", "disabled", "spacing", "labelled_by", "focus_selector", "header_content", "bar_content", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"],
17
- _excluded2 = ["children", "direct_dom_return"];
16
+ var _excluded = ["root_id", "content_id", "disabled", "spacing", "labelled_by", "focus_selector", "header_content", "bar_content", "id", "open_state", "open_delay", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"];
18
17
 
19
18
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
20
19
 
@@ -24,30 +23,25 @@ import "core-js/modules/es.parse-float.js";
24
23
  import "core-js/modules/es.object.to-string.js";
25
24
  import "core-js/modules/web.dom-collections.for-each.js";
26
25
  import "core-js/modules/es.object.freeze.js";
27
- import "core-js/modules/es.array.includes.js";
28
- import "core-js/modules/es.string.includes.js";
29
- import "core-js/modules/es.regexp.exec.js";
30
- import "core-js/modules/es.string.replace.js";
31
- import "core-js/modules/es.array.concat.js";
32
26
 
33
27
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
34
28
 
35
29
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
36
30
 
37
31
  import React from 'react';
38
- import ReactDOM from 'react-dom';
39
- import PropTypes from 'prop-types';
40
32
  import classnames from 'classnames';
41
33
  import { SuffixContext } from '../../shared/helpers/Suffix';
42
34
  import Context from '../../shared/Context';
43
35
  import { warn, isTrue, makeUniqueId, extendPropsWithContext, registerElement, processChildren, dispatchCustomElementEvent } from '../../shared/component-helper';
44
- import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
45
- import { buttonVariantPropType } from '../button/Button';
36
+ import { createSpacingClasses } from '../space/SpacingHelper';
46
37
  import HelpButtonInstance from '../help-button/HelpButtonInstance';
47
- import ModalContent, { getListOfModalRoots } from './ModalContent';
48
- import ModalContext from './ModalContext';
49
- import ModalInner from './ModalInner';
50
- import ModalHeader, { ModalHeaderBar, CloseButton } from './ModalHeader';
38
+ import { getListOfModalRoots, getModalRoot } from './helpers';
39
+ import ModalInner from './components/ModalInner';
40
+ import ModalHeader from './components/ModalHeader';
41
+ import ModalHeaderBar from './components/ModalHeaderBar';
42
+ import CloseButton from './components/CloseButton';
43
+ import ModalRoot from './ModalRoot';
44
+ export var ANIMATION_DURATION = 300;
51
45
 
52
46
  var Modal = function (_React$PureComponent) {
53
47
  _inherits(Modal, _React$PureComponent);
@@ -61,6 +55,24 @@ var Modal = function (_React$PureComponent) {
61
55
 
62
56
  _this = _super.call(this, props);
63
57
 
58
+ _defineProperty(_assertThisInitialized(_this), "_id", void 0);
59
+
60
+ _defineProperty(_assertThisInitialized(_this), "_triggerRef", void 0);
61
+
62
+ _defineProperty(_assertThisInitialized(_this), "_onUnmount", void 0);
63
+
64
+ _defineProperty(_assertThisInitialized(_this), "_openTimeout", void 0);
65
+
66
+ _defineProperty(_assertThisInitialized(_this), "_closeTimeout", void 0);
67
+
68
+ _defineProperty(_assertThisInitialized(_this), "_sideEffectsTimeout", void 0);
69
+
70
+ _defineProperty(_assertThisInitialized(_this), "_tryToOpenTimeout", void 0);
71
+
72
+ _defineProperty(_assertThisInitialized(_this), "activeElement", void 0);
73
+
74
+ _defineProperty(_assertThisInitialized(_this), "isInTransition", void 0);
75
+
64
76
  _defineProperty(_assertThisInitialized(_this), "state", {
65
77
  hide: false,
66
78
  modalActive: false
@@ -75,6 +87,12 @@ var Modal = function (_React$PureComponent) {
75
87
  }
76
88
 
77
89
  var toggleNow = function toggleNow() {
90
+ var _this$props = _this.props,
91
+ _this$props$animation = _this$props.animation_duration,
92
+ animation_duration = _this$props$animation === void 0 ? ANIMATION_DURATION : _this$props$animation,
93
+ _this$props$no_animat = _this$props.no_animation,
94
+ no_animation = _this$props$no_animat === void 0 ? false : _this$props$no_animat;
95
+ var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
78
96
  var modalActive = typeof showModal === 'boolean' ? showModal : !_this.state.modalActive;
79
97
  _this.isInTransition = true;
80
98
 
@@ -89,29 +107,32 @@ var Modal = function (_React$PureComponent) {
89
107
  });
90
108
  };
91
109
 
92
- if (modalActive === false && !isTrue(_this.props.no_animation)) {
110
+ if (modalActive === false && !isTrue(no_animation)) {
93
111
  _this.setState({
94
112
  hide: true
95
113
  });
96
114
 
97
- clearTimeout(_this._closeTimeout);
98
- _this._closeTimeout = setTimeout(doItNow, parseFloat(_this.props.animation_duration));
115
+ _this._closeTimeout = setTimeout(doItNow, timeoutDuration);
99
116
  } else {
100
117
  doItNow();
101
118
  }
102
119
  };
103
120
 
104
121
  var waitBeforeOpen = function waitBeforeOpen() {
105
- var delay = parseFloat(_this.props.open_delay);
122
+ var _this$props2 = _this.props,
123
+ open_delay = _this$props2.open_delay,
124
+ no_animation = _this$props2.no_animation;
125
+ var delay = typeof open_delay === 'string' ? parseFloat(open_delay) : open_delay;
106
126
 
107
- if (delay > 0 && !isTrue(_this.props.no_animation)) {
108
- clearTimeout(_this._openTimeout);
127
+ if (delay > 0 && !isTrue(no_animation)) {
109
128
  _this._openTimeout = setTimeout(toggleNow, delay);
110
129
  } else {
111
130
  toggleNow();
112
131
  }
113
132
  };
114
133
 
134
+ clearTimeout(_this._closeTimeout);
135
+ clearTimeout(_this._openTimeout);
115
136
  var open_modal = _this.props.open_modal;
116
137
 
117
138
  if (typeof open_modal === 'function') {
@@ -127,10 +148,11 @@ var Modal = function (_React$PureComponent) {
127
148
 
128
149
  _defineProperty(_assertThisInitialized(_this), "handleSideEffects", function () {
129
150
  var modalActive = _this.state.modalActive;
151
+ var close_modal = _this.props.close_modal;
130
152
 
131
153
  if (modalActive) {
132
- if (typeof _this.props.close_modal === 'function') {
133
- var fn = _this.props.close_modal(function () {
154
+ if (typeof close_modal === 'function') {
155
+ var fn = close_modal(function () {
134
156
  _this.toggleOpenClose(null, false);
135
157
  }, _assertThisInitialized(_this));
136
158
 
@@ -147,7 +169,7 @@ var Modal = function (_React$PureComponent) {
147
169
  });
148
170
  }
149
171
 
150
- if ((_this.props.open_state === 'opened' || _this.props.open_state === true) && _this.activeElement) {
172
+ if ((_this.props.open_state === 'opened' || _this.props.open_state === true) && _this.activeElement && _this.activeElement instanceof HTMLElement) {
151
173
  try {
152
174
  _this.activeElement.focus({
153
175
  preventScroll: true
@@ -157,13 +179,7 @@ var Modal = function (_React$PureComponent) {
157
179
  } catch (e) {}
158
180
  }
159
181
 
160
- var last = getListOfModalRoots(-1);
161
-
162
- if (last) {
163
- _this.setActiveState(last._id);
164
- } else if (getListOfModalRoots().length <= 1) {
165
- _this.setActiveState(false);
166
- }
182
+ _this.removeActiveState();
167
183
  }
168
184
  });
169
185
 
@@ -176,9 +192,11 @@ var Modal = function (_React$PureComponent) {
176
192
  ifIsLatest: true
177
193
  },
178
194
  ifIsLatest = _ref.ifIsLatest,
179
- triggeredBy = _ref.triggeredBy;
195
+ _ref$triggeredBy = _ref.triggeredBy,
196
+ triggeredBy = _ref$triggeredBy === void 0 ? null : _ref$triggeredBy;
180
197
 
181
- var prevent_close = _this.props.prevent_close;
198
+ var _this$props$prevent_c = _this.props.prevent_close,
199
+ prevent_close = _this$props$prevent_c === void 0 ? false : _this$props$prevent_c;
182
200
 
183
201
  if (isTrue(prevent_close)) {
184
202
  var id = _this._id;
@@ -195,7 +213,7 @@ var Modal = function (_React$PureComponent) {
195
213
  var list = getListOfModalRoots();
196
214
 
197
215
  if (list.length > 1) {
198
- var last = getListOfModalRoots(-1);
216
+ var last = getModalRoot(-1);
199
217
 
200
218
  if (last !== _assertThisInitialized(_this)) {
201
219
  return;
@@ -207,7 +225,7 @@ var Modal = function (_React$PureComponent) {
207
225
  }
208
226
  });
209
227
 
210
- _this._id = props.id || makeUniqueId();
228
+ _this._id = props.id || makeUniqueId('modal-');
211
229
  _this._triggerRef = React.createRef();
212
230
  _this._onUnmount = [];
213
231
  return _this;
@@ -221,16 +239,15 @@ var Modal = function (_React$PureComponent) {
221
239
  }, {
222
240
  key: "componentWillUnmount",
223
241
  value: function componentWillUnmount() {
242
+ clearTimeout(this._openTimeout);
243
+ clearTimeout(this._closeTimeout);
244
+ this.removeActiveState();
245
+
224
246
  this._onUnmount.forEach(function (fn) {
225
247
  if (typeof fn === 'function') {
226
248
  fn();
227
249
  }
228
250
  });
229
-
230
- clearTimeout(this._openTimeout);
231
- clearTimeout(this._closeTimeout);
232
- clearTimeout(this._sideEffectsTimeout);
233
- clearTimeout(this._tryToOpenTimeout);
234
251
  }
235
252
  }, {
236
253
  key: "componentDidUpdate",
@@ -242,35 +259,48 @@ var Modal = function (_React$PureComponent) {
242
259
  }, {
243
260
  key: "openBasedOnStateUpdate",
244
261
  value: function openBasedOnStateUpdate() {
245
- var _this$state = this.state,
246
- hide = _this$state.hide,
247
- modalActive = _this$state.modalActive;
262
+ var hide = this.state.hide;
248
263
  var open_state = this.props.open_state;
249
264
 
250
265
  if (!this.activeElement && typeof document !== 'undefined') {
251
266
  this.activeElement = document.activeElement;
252
267
  }
253
268
 
254
- if (!hide && !modalActive && (open_state === 'opened' || open_state === true)) {
269
+ if (!hide && (open_state === 'opened' || open_state === true)) {
255
270
  this.toggleOpenClose(null, true);
256
- } else if (hide && modalActive && (open_state === 'closed' || open_state === false)) {
271
+ } else if (hide && (open_state === 'closed' || open_state === false)) {
257
272
  this.toggleOpenClose(null, false);
258
273
  }
259
274
  }
275
+ }, {
276
+ key: "removeActiveState",
277
+ value: function removeActiveState() {
278
+ var last = getModalRoot(-1);
279
+
280
+ if (last !== null && last !== void 0 && last._id && last._id !== this._id) {
281
+ return this.setActiveState(last._id);
282
+ }
283
+
284
+ try {
285
+ document.documentElement.removeAttribute('data-dnb-modal-active');
286
+ document.body.setAttribute('data-dnb-modal-active', 'false');
287
+ } catch (e) {
288
+ warn('Modal: Error on remove "data-dnb-modal-active"', e);
289
+ }
290
+ }
260
291
  }, {
261
292
  key: "setActiveState",
262
293
  value: function setActiveState(modalId) {
294
+ if (!modalId) {
295
+ warn('Modal: A valid modalId is required');
296
+ }
297
+
263
298
  if (typeof document !== 'undefined') {
264
299
  try {
265
- if (modalId) {
266
- document.documentElement.setAttribute('data-dnb-modal-active', modalId);
267
- } else {
268
- document.documentElement.removeAttribute('data-dnb-modal-active');
269
- }
270
-
271
- document.body.setAttribute('data-dnb-modal-active', modalId ? 'true' : 'false');
300
+ document.documentElement.setAttribute('data-dnb-modal-active', modalId);
301
+ document.body.setAttribute('data-dnb-modal-active', 'true');
272
302
  } catch (e) {
273
- warn('Modal: Error on set "data-dnb-modal-active" by using element.setAttribute()', e);
303
+ warn('Modal: Error on set "data-dnb-modal-active"', e);
274
304
  }
275
305
  }
276
306
  }
@@ -281,76 +311,89 @@ var Modal = function (_React$PureComponent) {
281
311
 
282
312
  var props = extendPropsWithContext(this.props, Modal.defaultProps, this.context.getTranslation(this.props).Modal, this.context.FormRow, this.context.Modal);
283
313
 
284
- var root_id = props.root_id,
285
- content_id = props.content_id,
314
+ var _props$root_id = props.root_id,
315
+ root_id = _props$root_id === void 0 ? 'root' : _props$root_id,
316
+ _props$content_id = props.content_id,
317
+ content_id = _props$content_id === void 0 ? null : _props$content_id,
318
+ _props$disabled = props.disabled,
319
+ disabled = _props$disabled === void 0 ? null : _props$disabled,
320
+ _props$spacing = props.spacing,
321
+ spacing = _props$spacing === void 0 ? true : _props$spacing,
322
+ _props$labelled_by = props.labelled_by,
323
+ labelled_by = _props$labelled_by === void 0 ? null : _props$labelled_by,
324
+ _props$focus_selector = props.focus_selector,
325
+ focus_selector = _props$focus_selector === void 0 ? null : _props$focus_selector,
326
+ _props$header_content = props.header_content,
327
+ header_content = _props$header_content === void 0 ? null : _props$header_content,
328
+ _props$bar_content = props.bar_content,
329
+ bar_content = _props$bar_content === void 0 ? null : _props$bar_content,
286
330
  id = props.id,
287
331
  open_state = props.open_state,
288
332
  open_delay = props.open_delay,
289
- disabled = props.disabled,
290
- spacing = props.spacing,
291
- labelled_by = props.labelled_by,
292
- focus_selector = props.focus_selector,
293
- header_content = props.header_content,
294
- bar_content = props.bar_content,
295
- trigger = props.trigger,
296
- trigger_attributes = props.trigger_attributes,
297
- trigger_hidden = props.trigger_hidden,
298
- trigger_disabled = props.trigger_disabled,
299
- trigger_variant = props.trigger_variant,
300
- trigger_text = props.trigger_text,
301
- trigger_title = props.trigger_title,
302
- trigger_size = props.trigger_size,
333
+ _props$trigger = props.trigger,
334
+ trigger = _props$trigger === void 0 ? null : _props$trigger,
335
+ _props$trigger_attrib = props.trigger_attributes,
336
+ trigger_attributes = _props$trigger_attrib === void 0 ? null : _props$trigger_attrib,
337
+ _props$trigger_hidden = props.trigger_hidden,
338
+ trigger_hidden = _props$trigger_hidden === void 0 ? 'false' : _props$trigger_hidden,
339
+ _props$trigger_disabl = props.trigger_disabled,
340
+ trigger_disabled = _props$trigger_disabl === void 0 ? null : _props$trigger_disabl,
341
+ _props$trigger_varian = props.trigger_variant,
342
+ trigger_variant = _props$trigger_varian === void 0 ? 'secondary' : _props$trigger_varian,
343
+ _props$trigger_text = props.trigger_text,
344
+ trigger_text = _props$trigger_text === void 0 ? null : _props$trigger_text,
345
+ _props$trigger_title = props.trigger_title,
346
+ trigger_title = _props$trigger_title === void 0 ? null : _props$trigger_title,
347
+ _props$trigger_size = props.trigger_size,
348
+ trigger_size = _props$trigger_size === void 0 ? null : _props$trigger_size,
303
349
  trigger_icon = props.trigger_icon,
304
- trigger_icon_position = props.trigger_icon_position,
305
- trigger_class = props.trigger_class,
350
+ _props$trigger_icon_p = props.trigger_icon_position,
351
+ trigger_icon_position = _props$trigger_icon_p === void 0 ? 'left' : _props$trigger_icon_p,
352
+ _props$trigger_class = props.trigger_class,
353
+ trigger_class = _props$trigger_class === void 0 ? null : _props$trigger_class,
306
354
  rest = _objectWithoutProperties(props, _excluded);
307
355
 
308
- var _this$state2 = this.state,
309
- hide = _this$state2.hide,
310
- modalActive = _this$state2.modalActive;
356
+ var _this$state = this.state,
357
+ hide = _this$state.hide,
358
+ modalActive = _this$state.modalActive;
311
359
  var modal_content = Modal.getContent(typeof this.props.children === 'function' ? Object.freeze(_objectSpread(_objectSpread({}, this.props), {}, {
312
360
  close: this.close
313
361
  })) : this.props);
314
362
 
315
363
  var render = function render(suffixProps) {
316
- var modalProps = {};
317
-
318
- var triggerAttributes = _objectSpread({}, trigger_attributes);
364
+ var triggerAttributes = _objectSpread({
365
+ hidden: trigger_hidden,
366
+ disabled: trigger_disabled,
367
+ variant: trigger_variant,
368
+ text: trigger_text,
369
+ title: trigger_title,
370
+ size: trigger_size,
371
+ icon: trigger_icon,
372
+ icon_position: trigger_icon_position,
373
+ class: trigger_class
374
+ }, trigger_attributes);
319
375
 
320
- for (var prop in props) {
321
- if (prop.includes('trigger_') && props[prop] !== null) {
322
- var name = String(prop).replace('trigger_', '');
323
-
324
- if (name !== 'attributes' && name !== 'props' && prop !== 'element') {
325
- triggerAttributes[name] = props[prop];
326
- }
327
- }
376
+ if (isTrue(disabled)) {
377
+ triggerAttributes.disabled = true;
328
378
  }
329
379
 
330
380
  if (triggerAttributes.id) {
331
381
  _this2._id = triggerAttributes.id;
332
382
  }
333
383
 
334
- if (!rest.title && triggerAttributes.title) {
335
- modalProps.title = triggerAttributes.title;
336
- } else if (!rest.title && suffixProps) {
337
- modalProps.title = _this2.context.translation.HelpButton.title;
338
- }
384
+ var fallbackTitle;
339
385
 
340
- if (isTrue(disabled)) {
341
- triggerAttributes.disabled = true;
386
+ if (triggerAttributes.title) {
387
+ fallbackTitle = triggerAttributes.title;
388
+ } else if (suffixProps) {
389
+ fallbackTitle = _this2.context.translation.HelpButton.title;
342
390
  }
343
391
 
344
392
  var TriggerButton = trigger ? trigger : HelpButtonInstance;
345
- return React.createElement(ModalContext.Provider, {
346
- value: _objectSpread({
347
- id: _this2._id
348
- }, rest)
349
- }, TriggerButton && !isTrue(trigger_hidden) && React.createElement(TriggerButton, _extends({
393
+ return React.createElement(React.Fragment, null, TriggerButton && !isTrue(trigger_hidden) && React.createElement(TriggerButton, _extends({}, triggerAttributes, {
350
394
  id: _this2._id,
351
- title: !triggerAttributes.text ? props.title || modalProps.title : null,
352
- onClick: _this2.toggleOpenClose
353
- }, triggerAttributes, {
395
+ title: !triggerAttributes.text ? rest.title || fallbackTitle : null,
396
+ onClick: _this2.toggleOpenClose,
354
397
  innerRef: _this2._triggerRef,
355
398
  className: classnames('dnb-modal__trigger', createSpacingClasses(props), triggerAttributes.class, triggerAttributes.className)
356
399
  })), modalActive && modal_content && React.createElement(ModalRoot, _extends({}, rest, {
@@ -365,8 +408,8 @@ var Modal = function (_React$PureComponent) {
365
408
  spacing: spacing,
366
409
  closeModal: _this2.close,
367
410
  hide: hide,
368
- toggleOpenClose: _this2.toggleOpenClose
369
- }, modalProps)));
411
+ title: rest.title || fallbackTitle
412
+ })));
370
413
  };
371
414
 
372
415
  return React.createElement(SuffixContext.Consumer, null, render);
@@ -387,30 +430,6 @@ var Modal = function (_React$PureComponent) {
387
430
 
388
431
  return processChildren(props);
389
432
  }
390
- }, {
391
- key: "insertModalRoot",
392
- value: function insertModalRoot(id) {
393
- if (typeof window === 'undefined') {
394
- return false;
395
- }
396
-
397
- try {
398
- id = "dnb-modal-".concat(id || 'root');
399
- window.__modalRoot = document.getElementById(id);
400
-
401
- if (!window.__modalRoot) {
402
- window.__modalRoot = document.createElement('div');
403
-
404
- window.__modalRoot.setAttribute('id', id);
405
-
406
- document.body.insertBefore(window.__modalRoot, document.body.firstChild);
407
- }
408
- } catch (e) {
409
- warn('Modal: Could not insert dnb-modal-root', e);
410
- }
411
-
412
- return window.__modalRoot;
413
- }
414
433
  }, {
415
434
  key: "getDerivedStateFromProps",
416
435
  value: function getDerivedStateFromProps(props, state) {
@@ -460,8 +479,6 @@ _defineProperty(Modal, "Inner", ModalInner);
460
479
 
461
480
  _defineProperty(Modal, "defaultProps", {
462
481
  id: null,
463
- root_id: 'root',
464
- mode: 'modal',
465
482
  focus_selector: null,
466
483
  labelled_by: null,
467
484
  title: null,
@@ -475,7 +492,7 @@ _defineProperty(Modal, "defaultProps", {
475
492
  close_button_attributes: null,
476
493
  prevent_close: false,
477
494
  prevent_core_style: false,
478
- animation_duration: 300,
495
+ animation_duration: ANIMATION_DURATION,
479
496
  no_animation: false,
480
497
  no_animation_on_mobile: false,
481
498
  fullscreen: 'auto',
@@ -486,6 +503,7 @@ _defineProperty(Modal, "defaultProps", {
486
503
  open_state: null,
487
504
  direct_dom_return: false,
488
505
  class: null,
506
+ root_id: 'root',
489
507
  className: null,
490
508
  children: null,
491
509
  on_open: null,
@@ -512,154 +530,4 @@ _defineProperty(Modal, "defaultProps", {
512
530
  });
513
531
 
514
532
  export { Modal as default };
515
- process.env.NODE_ENV !== "production" ? Modal.propTypes = _objectSpread(_objectSpread({
516
- id: PropTypes.string,
517
- root_id: PropTypes.string,
518
- mode: PropTypes.oneOf(['modal', 'drawer']),
519
- focus_selector: PropTypes.string,
520
- labelled_by: PropTypes.string,
521
- title: PropTypes.node,
522
- disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
523
- spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
524
- open_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
525
- content_id: PropTypes.string,
526
- dialog_title: PropTypes.string,
527
- close_title: PropTypes.string,
528
- hide_close_button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
529
- close_button_attributes: PropTypes.object,
530
- prevent_close: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
531
- prevent_core_style: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
532
- animation_duration: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
533
- no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
534
- no_animation_on_mobile: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
535
- fullscreen: PropTypes.oneOf(['auto', true, false, 'true', 'false']),
536
- min_width: PropTypes.string,
537
- max_width: PropTypes.string,
538
- align_content: PropTypes.oneOf(['left', 'center', 'centered', 'right']),
539
- container_placement: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
540
- open_state: PropTypes.oneOfType([PropTypes.oneOf(['opened', 'closed']), PropTypes.bool]),
541
- direct_dom_return: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
542
- }, spacingPropTypes), {}, {
543
- class: PropTypes.string,
544
- className: PropTypes.string,
545
- children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
546
- on_open: PropTypes.func,
547
- on_close: PropTypes.func,
548
- on_close_prevent: PropTypes.func,
549
- open_modal: PropTypes.func,
550
- close_modal: PropTypes.func,
551
- trigger: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
552
- trigger_attributes: PropTypes.object,
553
- trigger_hidden: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
554
- trigger_disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
555
- trigger_variant: buttonVariantPropType.variant,
556
- trigger_text: PropTypes.string,
557
- trigger_title: PropTypes.string,
558
- trigger_size: PropTypes.string,
559
- trigger_icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
560
- trigger_icon_position: PropTypes.oneOf(['left', 'right']),
561
- trigger_class: PropTypes.string,
562
- overlay_class: PropTypes.string,
563
- content_class: PropTypes.string,
564
- modal_content: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
565
- header_content: PropTypes.node,
566
- bar_content: PropTypes.node
567
- }) : void 0;
568
-
569
- var ModalRoot = function (_React$PureComponent2) {
570
- _inherits(ModalRoot, _React$PureComponent2);
571
-
572
- var _super2 = _createSuper(ModalRoot);
573
-
574
- function ModalRoot() {
575
- var _this3;
576
-
577
- _classCallCheck(this, ModalRoot);
578
-
579
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
580
- args[_key] = arguments[_key];
581
- }
582
-
583
- _this3 = _super2.call.apply(_super2, [this].concat(args));
584
-
585
- _defineProperty(_assertThisInitialized(_this3), "state", {
586
- isMounted: false
587
- });
588
-
589
- return _this3;
590
- }
591
-
592
- _createClass(ModalRoot, [{
593
- key: "componentDidMount",
594
- value: function componentDidMount() {
595
- if (!isTrue(this.props.direct_dom_return)) {
596
- Modal.insertModalRoot(this.props.root_id);
597
-
598
- try {
599
- if (!this.portalElem) {
600
- this.portalElem = document.createElement('div');
601
- this.portalElem.className = 'dnb-modal-root__inner';
602
- }
603
-
604
- if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot) {
605
- window.__modalRoot.appendChild(this.portalElem);
606
- }
607
- } catch (e) {
608
- warn(e);
609
- }
610
-
611
- this.setState({
612
- isMounted: true
613
- });
614
- }
615
- }
616
- }, {
617
- key: "componentWillUnmount",
618
- value: function componentWillUnmount() {
619
- try {
620
- if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot && window.__modalRoot.removeChild) {
621
- window.__modalRoot.removeChild(this.portalElem);
622
-
623
- this.portalElem = null;
624
- }
625
- } catch (e) {
626
- warn(e);
627
- }
628
- }
629
- }, {
630
- key: "render",
631
- value: function render() {
632
- var _this$props = this.props,
633
- children = _this$props.children,
634
- direct_dom_return = _this$props.direct_dom_return,
635
- props = _objectWithoutProperties(_this$props, _excluded2);
636
-
637
- if (isTrue(direct_dom_return)) {
638
- return React.createElement(ModalContent, props, children);
639
- }
640
-
641
- if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot && this.state.isMounted) {
642
- return ReactDOM.createPortal(React.createElement(ModalContent, props, children), this.portalElem);
643
- }
644
-
645
- return null;
646
- }
647
- }]);
648
-
649
- return ModalRoot;
650
- }(React.PureComponent);
651
-
652
- _defineProperty(ModalRoot, "defaultProps", {
653
- id: null,
654
- root_id: null,
655
- direct_dom_return: false,
656
- children: null
657
- });
658
-
659
- process.env.NODE_ENV !== "production" ? ModalRoot.propTypes = {
660
- id: PropTypes.string,
661
- root_id: PropTypes.string,
662
- direct_dom_return: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
663
- children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])
664
- } : void 0;
665
533
  export { CloseButton };