@dnb/eufemia 9.17.2 → 9.21.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 (774) hide show
  1. package/CHANGELOG.md +24 -141
  2. package/cjs/components/Avatar.d.ts +14 -0
  3. package/cjs/components/Avatar.js +52 -0
  4. package/cjs/components/InfoCard.d.ts +14 -0
  5. package/cjs/components/InfoCard.js +52 -0
  6. package/cjs/components/Tag.d.ts +14 -0
  7. package/cjs/components/Tag.js +52 -0
  8. package/cjs/components/Timeline.d.ts +14 -0
  9. package/cjs/components/Timeline.js +52 -0
  10. package/cjs/components/accordion/Accordion.d.ts +7 -7
  11. package/cjs/components/autocomplete/Autocomplete.d.ts +13 -13
  12. package/cjs/components/avatar/Avatar.js +151 -0
  13. package/cjs/components/avatar/AvatarGroup.js +131 -0
  14. package/cjs/components/avatar/index.d.ts +8 -0
  15. package/cjs/components/avatar/index.js +52 -0
  16. package/cjs/components/avatar/style/_avatar.scss +147 -0
  17. package/cjs/components/avatar/style/dnb-avatar.css +221 -0
  18. package/cjs/components/avatar/style/dnb-avatar.min.css +1 -0
  19. package/cjs/components/avatar/style/dnb-avatar.scss +12 -0
  20. package/cjs/components/avatar/style/index.d.ts +6 -0
  21. package/cjs/components/avatar/style/index.js +3 -0
  22. package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.css +36 -0
  23. package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.min.css +1 -0
  24. package/cjs/components/avatar/style/themes/dnb-avatar-theme-ui.scss +29 -0
  25. package/cjs/components/avatar/style/themes/ui.js +3 -0
  26. package/cjs/components/avatar/style.js +3 -0
  27. package/cjs/components/breadcrumb/Breadcrumb.js +27 -52
  28. package/cjs/components/breadcrumb/BreadcrumbItem.js +18 -32
  29. package/cjs/components/button/Button.d.ts +19 -15
  30. package/cjs/components/button/Button.js +7 -5
  31. package/cjs/components/button/style/themes/dnb-button-theme-ui.scss +3 -0
  32. package/cjs/components/checkbox/Checkbox.d.ts +3 -3
  33. package/cjs/components/date-picker/DatePicker.d.ts +14 -14
  34. package/cjs/components/date-picker/DatePicker.js +4 -2
  35. package/cjs/components/date-picker/DatePickerAddon.d.ts +1 -1
  36. package/cjs/components/date-picker/DatePickerCalendar.d.ts +1 -1
  37. package/cjs/components/date-picker/DatePickerFooter.d.ts +1 -0
  38. package/cjs/components/date-picker/DatePickerFooter.js +10 -6
  39. package/cjs/components/date-picker/DatePickerInput.d.ts +1 -1
  40. package/cjs/components/dropdown/Dropdown.d.ts +11 -10
  41. package/cjs/components/form-label/FormLabel.d.ts +1 -1
  42. package/cjs/components/form-row/FormRow.d.ts +4 -4
  43. package/cjs/components/form-set/FormSet.d.ts +5 -5
  44. package/cjs/components/global-error/GlobalError.d.ts +1 -1
  45. package/cjs/components/global-status/GlobalStatus.d.ts +5 -5
  46. package/cjs/components/heading/Heading.d.ts +2 -2
  47. package/cjs/components/heading/HeadingProvider.d.ts +2 -2
  48. package/cjs/components/help-button/HelpButton.d.ts +1 -1
  49. package/cjs/components/help-button/HelpButtonInstance.d.ts +3 -2
  50. package/cjs/components/icon/Icon.d.ts +2 -2
  51. package/cjs/components/icon-primary/IconPrimary.d.ts +4 -3
  52. package/cjs/components/index.d.ts +8 -0
  53. package/cjs/components/index.js +32 -0
  54. package/cjs/components/info-card/InfoCard.js +180 -0
  55. package/cjs/components/info-card/index.d.ts +8 -0
  56. package/cjs/components/info-card/index.js +52 -0
  57. package/cjs/components/info-card/style/_info-card.scss +52 -0
  58. package/cjs/components/info-card/style/dnb-info-card.css +135 -0
  59. package/cjs/components/info-card/style/dnb-info-card.min.css +1 -0
  60. package/cjs/components/info-card/style/dnb-info-card.scss +12 -0
  61. package/cjs/components/info-card/style/index.d.ts +6 -0
  62. package/cjs/components/info-card/style/index.js +3 -0
  63. package/cjs/components/info-card/style.js +3 -0
  64. package/cjs/components/input/Input.d.ts +11 -10
  65. package/cjs/components/input-masked/InputMasked.d.ts +11 -11
  66. package/cjs/components/input-masked/InputMasked.js +6 -3
  67. package/cjs/components/input-masked/InputMaskedHooks.js +26 -34
  68. package/cjs/components/input-masked/InputMaskedUtils.js +9 -20
  69. package/cjs/components/lib.js +36 -0
  70. package/cjs/components/modal/Modal.js +123 -271
  71. package/cjs/components/modal/ModalContent.js +145 -243
  72. package/cjs/components/modal/ModalRoot.js +194 -0
  73. package/cjs/components/modal/components/CloseButton.js +125 -0
  74. package/cjs/components/modal/components/ModalHeader.js +124 -0
  75. package/cjs/components/modal/{ModalHeader.js → components/ModalHeaderBar.js} +50 -162
  76. package/cjs/components/modal/{ModalInner.js → components/ModalInner.js} +11 -19
  77. package/cjs/components/modal/helpers.js +80 -0
  78. package/cjs/components/modal/types.js +1 -0
  79. package/cjs/components/number-format/NumberFormat.d.ts +10 -10
  80. package/cjs/components/pagination/Pagination.d.ts +36 -36
  81. package/cjs/components/pagination/Pagination.js +13 -3
  82. package/cjs/components/pagination/PaginationProvider.d.ts +2 -2
  83. package/cjs/components/radio/Radio.d.ts +5 -5
  84. package/cjs/components/radio/RadioGroup.d.ts +4 -4
  85. package/cjs/components/section/Section.d.ts +3 -2
  86. package/cjs/components/skeleton/Skeleton.d.ts +3 -3
  87. package/cjs/components/skeleton/SkeletonHelper.d.ts +2 -1
  88. package/cjs/components/slider/Slider.d.ts +5 -5
  89. package/cjs/components/step-indicator/StepIndicator.d.ts +6 -6
  90. package/cjs/components/step-indicator/StepIndicatorContext.d.ts +1 -1
  91. package/cjs/components/step-indicator/StepIndicatorItem.d.ts +3 -3
  92. package/cjs/components/step-indicator/StepIndicatorItem.js +1 -0
  93. package/cjs/components/step-indicator/StepIndicatorSidebar.d.ts +4 -4
  94. package/cjs/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  95. package/cjs/components/step-indicator/StepIndicatorTriggerButton.js +4 -4
  96. package/cjs/components/switch/Switch.d.ts +6 -6
  97. package/cjs/components/tabs/Tabs.d.ts +8 -8
  98. package/cjs/components/tabs/TabsContentWrapper.d.ts +2 -2
  99. package/cjs/components/tabs/TabsCustomContent.d.ts +1 -1
  100. package/cjs/components/tag/Tag.js +145 -0
  101. package/cjs/components/tag/TagContext.js +14 -0
  102. package/cjs/components/tag/TagGroup.js +109 -0
  103. package/cjs/components/tag/index.d.ts +8 -0
  104. package/cjs/components/tag/index.js +52 -0
  105. package/cjs/components/tag/style/_tag.scss +102 -0
  106. package/cjs/components/tag/style/dnb-tag.css +931 -0
  107. package/cjs/components/tag/style/dnb-tag.min.css +1 -0
  108. package/cjs/components/tag/style/dnb-tag.scss +15 -0
  109. package/cjs/components/tag/style/index.d.ts +6 -0
  110. package/cjs/components/tag/style/index.js +3 -0
  111. package/cjs/components/tag/style/themes/_tag-mixins.scss +18 -0
  112. package/cjs/components/tag/style.js +3 -0
  113. package/cjs/components/textarea/Textarea.d.ts +4 -4
  114. package/cjs/components/timeline/Timeline.js +89 -0
  115. package/cjs/components/timeline/TimelineItem.js +136 -0
  116. package/cjs/components/timeline/index.d.ts +8 -0
  117. package/cjs/components/timeline/index.js +52 -0
  118. package/cjs/components/timeline/style/_timeline.scss +42 -0
  119. package/cjs/components/timeline/style/dnb-timeline.css +307 -0
  120. package/cjs/components/timeline/style/dnb-timeline.min.css +1 -0
  121. package/cjs/components/timeline/style/dnb-timeline.scss +12 -0
  122. package/cjs/components/timeline/style/index.d.ts +6 -0
  123. package/cjs/components/timeline/style/index.js +3 -0
  124. package/cjs/components/timeline/style/themes/dnb-timeline-theme-ui.css +185 -0
  125. package/cjs/components/timeline/style/themes/dnb-timeline-theme-ui.min.css +1 -0
  126. package/cjs/components/timeline/style/themes/dnb-timeline-theme-ui.scss +105 -0
  127. package/cjs/components/timeline/style/themes/ui.js +3 -0
  128. package/cjs/components/timeline/style.js +3 -0
  129. package/cjs/components/toggle-button/ToggleButton.d.ts +7 -7
  130. package/cjs/components/toggle-button/ToggleButtonGroup.d.ts +4 -4
  131. package/cjs/components/tooltip/Tooltip.d.ts +5 -5
  132. package/cjs/components/tooltip/TooltipContainer.d.ts +3 -3
  133. package/cjs/components/tooltip/TooltipPortal.d.ts +1 -1
  134. package/cjs/components/tooltip/TooltipWithEvents.d.ts +1 -1
  135. package/cjs/elements/Div.d.ts +1 -1
  136. package/cjs/elements/Img.d.ts +2 -2
  137. package/cjs/elements/P.d.ts +2 -1
  138. package/cjs/extensions/payment-card/PaymentCard.d.ts +1 -1
  139. package/cjs/extensions/payment-card/style/_payment-card.scss +0 -1
  140. package/cjs/extensions/payment-card/style/dnb-payment-card.css +0 -1
  141. package/cjs/extensions/payment-card/style/dnb-payment-card.min.css +1 -1
  142. package/cjs/fragments/drawer-list/DrawerListProvider.js +1 -0
  143. package/cjs/fragments/scroll-view/ScrollView.js +7 -16
  144. package/cjs/index.d.ts +8 -0
  145. package/cjs/index.js +32 -0
  146. package/cjs/shared/AnimateHeight.js +19 -13
  147. package/cjs/shared/Context.js +11 -4
  148. package/cjs/shared/helpers.js +16 -4
  149. package/cjs/shared/hooks/index.js +13 -0
  150. package/cjs/shared/hooks/usePropsWithContext.js +92 -0
  151. package/cjs/shared/locales/en-GB.js +5 -0
  152. package/cjs/shared/locales/nb-NO.js +5 -0
  153. package/cjs/style/core/helper-classes/skip-link.scss +1 -1
  154. package/cjs/style/dnb-ui-components.css +725 -0
  155. package/cjs/style/dnb-ui-components.min.css +3 -3
  156. package/cjs/style/dnb-ui-components.scss +4 -0
  157. package/cjs/style/dnb-ui-elements.css +1 -0
  158. package/cjs/style/dnb-ui-elements.min.css +1 -1
  159. package/cjs/style/dnb-ui-extensions.css +0 -1
  160. package/cjs/style/dnb-ui-extensions.min.css +1 -1
  161. package/cjs/style/dnb-ui-tags.css +2 -0
  162. package/cjs/style/dnb-ui-tags.min.css +2 -2
  163. package/cjs/style/elements/code.scss +1 -0
  164. package/cjs/style/stylis.d.ts +38 -0
  165. package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.css +224 -0
  166. package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  167. package/cjs/style/themes/theme-ui/dnb-theme-ui.css +224 -0
  168. package/cjs/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  169. package/cjs/style/themes/theme-ui/dnb-theme-ui.scss +2 -0
  170. package/components/Avatar.d.ts +14 -0
  171. package/components/Avatar.js +3 -0
  172. package/components/InfoCard.d.ts +14 -0
  173. package/components/InfoCard.js +3 -0
  174. package/components/Tag.d.ts +14 -0
  175. package/components/Tag.js +3 -0
  176. package/components/Timeline.d.ts +14 -0
  177. package/components/Timeline.js +3 -0
  178. package/components/accordion/Accordion.d.ts +7 -7
  179. package/components/autocomplete/Autocomplete.d.ts +13 -13
  180. package/components/avatar/Avatar.js +90 -0
  181. package/components/avatar/Avatar.tsx +162 -0
  182. package/components/avatar/AvatarGroup.js +94 -0
  183. package/components/avatar/AvatarGroup.tsx +163 -0
  184. package/components/avatar/index.d.ts +8 -0
  185. package/components/avatar/index.js +3 -0
  186. package/components/avatar/style/_avatar.scss +147 -0
  187. package/components/avatar/style/dnb-avatar.css +221 -0
  188. package/components/avatar/style/dnb-avatar.min.css +1 -0
  189. package/components/avatar/style/dnb-avatar.scss +12 -0
  190. package/components/avatar/style/index.d.ts +6 -0
  191. package/components/avatar/style/index.js +1 -0
  192. package/components/avatar/style/themes/dnb-avatar-theme-ui.css +36 -0
  193. package/components/avatar/style/themes/dnb-avatar-theme-ui.min.css +1 -0
  194. package/components/avatar/style/themes/dnb-avatar-theme-ui.scss +29 -0
  195. package/components/avatar/style/themes/ui.js +1 -0
  196. package/components/avatar/style.js +1 -0
  197. package/components/breadcrumb/Breadcrumb.js +22 -35
  198. package/components/breadcrumb/Breadcrumb.tsx +10 -10
  199. package/components/breadcrumb/BreadcrumbItem.js +17 -28
  200. package/components/breadcrumb/BreadcrumbItem.tsx +10 -13
  201. package/components/button/Button.d.ts +18 -14
  202. package/components/button/Button.js +7 -5
  203. package/components/button/style/themes/dnb-button-theme-ui.scss +3 -0
  204. package/components/checkbox/Checkbox.d.ts +3 -3
  205. package/components/date-picker/DatePicker.d.ts +14 -14
  206. package/components/date-picker/DatePicker.js +4 -2
  207. package/components/date-picker/DatePickerAddon.d.ts +1 -1
  208. package/components/date-picker/DatePickerCalendar.d.ts +1 -1
  209. package/components/date-picker/DatePickerFooter.d.ts +1 -0
  210. package/components/date-picker/DatePickerFooter.js +10 -6
  211. package/components/date-picker/DatePickerInput.d.ts +1 -1
  212. package/components/dropdown/Dropdown.d.ts +11 -10
  213. package/components/form-label/FormLabel.d.ts +1 -1
  214. package/components/form-row/FormRow.d.ts +4 -4
  215. package/components/form-set/FormSet.d.ts +5 -5
  216. package/components/global-error/GlobalError.d.ts +1 -1
  217. package/components/global-status/GlobalStatus.d.ts +5 -5
  218. package/components/heading/Heading.d.ts +2 -2
  219. package/components/heading/HeadingProvider.d.ts +2 -2
  220. package/components/help-button/HelpButton.d.ts +1 -1
  221. package/components/help-button/HelpButtonInstance.d.ts +3 -2
  222. package/components/icon/Icon.d.ts +2 -2
  223. package/components/icon-primary/IconPrimary.d.ts +2 -1
  224. package/components/index.d.ts +8 -0
  225. package/components/index.js +5 -1
  226. package/components/info-card/InfoCard.js +140 -0
  227. package/components/info-card/InfoCard.tsx +250 -0
  228. package/components/info-card/index.d.ts +8 -0
  229. package/components/info-card/index.js +3 -0
  230. package/components/info-card/style/_info-card.scss +52 -0
  231. package/components/info-card/style/dnb-info-card.css +135 -0
  232. package/components/info-card/style/dnb-info-card.min.css +1 -0
  233. package/components/info-card/style/dnb-info-card.scss +12 -0
  234. package/components/info-card/style/index.d.ts +6 -0
  235. package/components/info-card/style/index.js +1 -0
  236. package/components/info-card/style.js +1 -0
  237. package/components/input/Input.d.ts +11 -10
  238. package/components/input-masked/InputMasked.d.ts +11 -11
  239. package/components/input-masked/InputMasked.js +6 -4
  240. package/components/input-masked/InputMaskedHooks.js +24 -28
  241. package/components/input-masked/InputMaskedUtils.js +9 -20
  242. package/components/lib.js +9 -1
  243. package/components/modal/Modal.js +112 -250
  244. package/components/modal/Modal.tsx +524 -0
  245. package/components/modal/ModalContent.js +137 -224
  246. package/components/modal/ModalContent.tsx +519 -0
  247. package/components/modal/ModalContext.tsx +10 -0
  248. package/components/modal/ModalRoot.js +145 -0
  249. package/components/modal/ModalRoot.tsx +131 -0
  250. package/components/modal/components/CloseButton.js +72 -0
  251. package/components/modal/components/CloseButton.tsx +56 -0
  252. package/components/modal/components/ModalHeader.js +70 -0
  253. package/components/modal/components/ModalHeader.tsx +79 -0
  254. package/components/modal/components/ModalHeaderBar.js +122 -0
  255. package/components/modal/components/ModalHeaderBar.tsx +118 -0
  256. package/components/modal/{ModalInner.js → components/ModalInner.js} +11 -17
  257. package/components/modal/components/ModalInner.tsx +45 -0
  258. package/components/modal/helpers.js +64 -0
  259. package/components/modal/helpers.ts +63 -0
  260. package/components/modal/types.js +1 -0
  261. package/{cjs/components/modal/Modal.d.ts → components/modal/types.ts} +124 -182
  262. package/components/number-format/NumberFormat.d.ts +10 -10
  263. package/components/pagination/Pagination.d.ts +36 -36
  264. package/components/pagination/Pagination.js +9 -2
  265. package/components/pagination/PaginationProvider.d.ts +2 -2
  266. package/components/radio/Radio.d.ts +5 -5
  267. package/components/radio/RadioGroup.d.ts +4 -4
  268. package/components/section/Section.d.ts +3 -1
  269. package/components/skeleton/Skeleton.d.ts +2 -2
  270. package/components/skeleton/SkeletonHelper.d.ts +2 -1
  271. package/components/slider/Slider.d.ts +5 -5
  272. package/components/step-indicator/StepIndicator.d.ts +6 -6
  273. package/components/step-indicator/StepIndicatorContext.d.ts +1 -1
  274. package/components/step-indicator/StepIndicatorItem.d.ts +3 -3
  275. package/components/step-indicator/StepIndicatorItem.js +1 -0
  276. package/components/step-indicator/StepIndicatorSidebar.d.ts +4 -4
  277. package/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  278. package/components/step-indicator/StepIndicatorTriggerButton.js +4 -4
  279. package/components/switch/Switch.d.ts +6 -6
  280. package/components/tabs/Tabs.d.ts +8 -8
  281. package/components/tabs/TabsContentWrapper.d.ts +2 -2
  282. package/components/tabs/TabsCustomContent.d.ts +1 -1
  283. package/components/tag/Tag.js +112 -0
  284. package/components/tag/Tag.tsx +196 -0
  285. package/components/tag/TagContext.js +2 -0
  286. package/components/tag/TagContext.tsx +3 -0
  287. package/components/tag/TagGroup.js +47 -0
  288. package/components/tag/TagGroup.tsx +76 -0
  289. package/components/tag/index.d.ts +8 -0
  290. package/components/tag/index.js +3 -0
  291. package/components/tag/style/_tag.scss +102 -0
  292. package/components/tag/style/dnb-tag.css +931 -0
  293. package/components/tag/style/dnb-tag.min.css +1 -0
  294. package/components/tag/style/dnb-tag.scss +15 -0
  295. package/components/tag/style/index.d.ts +6 -0
  296. package/components/tag/style/index.js +1 -0
  297. package/components/tag/style/themes/_tag-mixins.scss +18 -0
  298. package/components/tag/style.js +1 -0
  299. package/components/textarea/Textarea.d.ts +4 -4
  300. package/components/timeline/Timeline.js +53 -0
  301. package/components/timeline/Timeline.tsx +95 -0
  302. package/components/timeline/TimelineItem.js +102 -0
  303. package/components/timeline/TimelineItem.tsx +191 -0
  304. package/components/timeline/index.d.ts +8 -0
  305. package/components/timeline/index.js +3 -0
  306. package/components/timeline/style/_timeline.scss +42 -0
  307. package/components/timeline/style/dnb-timeline.css +307 -0
  308. package/components/timeline/style/dnb-timeline.min.css +1 -0
  309. package/components/timeline/style/dnb-timeline.scss +12 -0
  310. package/components/timeline/style/index.d.ts +6 -0
  311. package/components/timeline/style/index.js +1 -0
  312. package/components/timeline/style/themes/dnb-timeline-theme-ui.css +185 -0
  313. package/components/timeline/style/themes/dnb-timeline-theme-ui.min.css +1 -0
  314. package/components/timeline/style/themes/dnb-timeline-theme-ui.scss +105 -0
  315. package/components/timeline/style/themes/ui.js +1 -0
  316. package/components/timeline/style.js +1 -0
  317. package/components/toggle-button/ToggleButton.d.ts +7 -7
  318. package/components/toggle-button/ToggleButtonGroup.d.ts +4 -4
  319. package/components/tooltip/Tooltip.d.ts +5 -5
  320. package/components/tooltip/TooltipContainer.d.ts +3 -3
  321. package/components/tooltip/TooltipPortal.d.ts +1 -1
  322. package/components/tooltip/TooltipWithEvents.d.ts +1 -1
  323. package/elements/Img.d.ts +1 -1
  324. package/elements/P.d.ts +2 -1
  325. package/es/components/Avatar.d.ts +14 -0
  326. package/es/components/Avatar.js +3 -0
  327. package/es/components/InfoCard.d.ts +14 -0
  328. package/es/components/InfoCard.js +3 -0
  329. package/es/components/Tag.d.ts +14 -0
  330. package/es/components/Tag.js +3 -0
  331. package/es/components/Timeline.d.ts +14 -0
  332. package/es/components/Timeline.js +3 -0
  333. package/es/components/accordion/Accordion.d.ts +7 -7
  334. package/es/components/autocomplete/Autocomplete.d.ts +13 -13
  335. package/es/components/avatar/Avatar.js +84 -0
  336. package/es/components/avatar/Avatar.tsx +162 -0
  337. package/es/components/avatar/AvatarGroup.js +89 -0
  338. package/es/components/avatar/AvatarGroup.tsx +163 -0
  339. package/es/components/avatar/index.d.ts +8 -0
  340. package/es/components/avatar/index.js +3 -0
  341. package/es/components/avatar/style/_avatar.scss +147 -0
  342. package/es/components/avatar/style/dnb-avatar.css +221 -0
  343. package/es/components/avatar/style/dnb-avatar.min.css +1 -0
  344. package/es/components/avatar/style/dnb-avatar.scss +12 -0
  345. package/es/components/avatar/style/index.d.ts +6 -0
  346. package/es/components/avatar/style/index.js +1 -0
  347. package/es/components/avatar/style/themes/dnb-avatar-theme-ui.css +36 -0
  348. package/es/components/avatar/style/themes/dnb-avatar-theme-ui.min.css +1 -0
  349. package/es/components/avatar/style/themes/dnb-avatar-theme-ui.scss +29 -0
  350. package/es/components/avatar/style/themes/ui.js +1 -0
  351. package/es/components/avatar/style.js +1 -0
  352. package/es/components/breadcrumb/Breadcrumb.js +8 -14
  353. package/es/components/breadcrumb/Breadcrumb.tsx +10 -10
  354. package/es/components/breadcrumb/BreadcrumbItem.js +12 -16
  355. package/es/components/breadcrumb/BreadcrumbItem.tsx +10 -13
  356. package/es/components/button/Button.d.ts +19 -15
  357. package/es/components/button/Button.js +7 -5
  358. package/es/components/button/style/themes/dnb-button-theme-ui.scss +3 -0
  359. package/es/components/checkbox/Checkbox.d.ts +3 -3
  360. package/es/components/date-picker/DatePicker.d.ts +14 -14
  361. package/es/components/date-picker/DatePicker.js +4 -2
  362. package/es/components/date-picker/DatePickerAddon.d.ts +1 -1
  363. package/es/components/date-picker/DatePickerCalendar.d.ts +1 -1
  364. package/es/components/date-picker/DatePickerFooter.d.ts +1 -0
  365. package/es/components/date-picker/DatePickerFooter.js +9 -6
  366. package/es/components/date-picker/DatePickerInput.d.ts +1 -1
  367. package/es/components/dropdown/Dropdown.d.ts +11 -10
  368. package/es/components/form-label/FormLabel.d.ts +1 -1
  369. package/es/components/form-row/FormRow.d.ts +4 -4
  370. package/es/components/form-set/FormSet.d.ts +5 -5
  371. package/es/components/global-error/GlobalError.d.ts +1 -1
  372. package/es/components/global-status/GlobalStatus.d.ts +5 -5
  373. package/es/components/heading/Heading.d.ts +2 -2
  374. package/es/components/heading/HeadingProvider.d.ts +2 -2
  375. package/es/components/help-button/HelpButton.d.ts +1 -1
  376. package/es/components/help-button/HelpButtonInstance.d.ts +3 -2
  377. package/es/components/icon/Icon.d.ts +2 -2
  378. package/es/components/icon-primary/IconPrimary.d.ts +4 -3
  379. package/es/components/index.d.ts +8 -0
  380. package/es/components/index.js +5 -1
  381. package/es/components/info-card/InfoCard.js +135 -0
  382. package/es/components/info-card/InfoCard.tsx +250 -0
  383. package/es/components/info-card/index.d.ts +8 -0
  384. package/es/components/info-card/index.js +3 -0
  385. package/es/components/info-card/style/_info-card.scss +52 -0
  386. package/es/components/info-card/style/dnb-info-card.css +135 -0
  387. package/es/components/info-card/style/dnb-info-card.min.css +1 -0
  388. package/es/components/info-card/style/dnb-info-card.scss +12 -0
  389. package/es/components/info-card/style/index.d.ts +6 -0
  390. package/es/components/info-card/style/index.js +1 -0
  391. package/es/components/info-card/style.js +1 -0
  392. package/es/components/input/Input.d.ts +11 -10
  393. package/es/components/input-masked/InputMasked.d.ts +11 -11
  394. package/es/components/input-masked/InputMasked.js +6 -4
  395. package/es/components/input-masked/InputMaskedHooks.js +14 -18
  396. package/es/components/input-masked/InputMaskedUtils.js +7 -18
  397. package/es/components/lib.js +9 -1
  398. package/es/components/modal/Modal.js +97 -227
  399. package/es/components/modal/Modal.tsx +524 -0
  400. package/es/components/modal/ModalContent.js +95 -186
  401. package/es/components/modal/ModalContent.tsx +519 -0
  402. package/es/components/modal/ModalContext.tsx +10 -0
  403. package/es/components/modal/ModalRoot.js +108 -0
  404. package/es/components/modal/ModalRoot.tsx +131 -0
  405. package/es/components/modal/components/CloseButton.js +41 -0
  406. package/es/components/modal/components/CloseButton.tsx +56 -0
  407. package/es/components/modal/components/ModalHeader.js +40 -0
  408. package/es/components/modal/components/ModalHeader.tsx +79 -0
  409. package/es/components/modal/components/ModalHeaderBar.js +88 -0
  410. package/es/components/modal/components/ModalHeaderBar.tsx +118 -0
  411. package/es/components/modal/{ModalInner.js → components/ModalInner.js} +8 -18
  412. package/es/components/modal/components/ModalInner.tsx +45 -0
  413. package/es/components/modal/helpers.js +60 -0
  414. package/es/components/modal/helpers.ts +63 -0
  415. package/es/components/modal/types.js +1 -0
  416. package/es/components/modal/{Modal.d.ts → types.ts} +124 -182
  417. package/es/components/number-format/NumberFormat.d.ts +10 -10
  418. package/es/components/pagination/Pagination.d.ts +36 -36
  419. package/es/components/pagination/Pagination.js +5 -2
  420. package/es/components/pagination/PaginationProvider.d.ts +2 -2
  421. package/es/components/radio/Radio.d.ts +5 -5
  422. package/es/components/radio/RadioGroup.d.ts +4 -4
  423. package/es/components/section/Section.d.ts +3 -2
  424. package/es/components/skeleton/Skeleton.d.ts +3 -3
  425. package/es/components/skeleton/SkeletonHelper.d.ts +2 -1
  426. package/es/components/slider/Slider.d.ts +5 -5
  427. package/es/components/step-indicator/StepIndicator.d.ts +6 -6
  428. package/es/components/step-indicator/StepIndicatorContext.d.ts +1 -1
  429. package/es/components/step-indicator/StepIndicatorItem.d.ts +3 -3
  430. package/es/components/step-indicator/StepIndicatorItem.js +1 -0
  431. package/es/components/step-indicator/StepIndicatorSidebar.d.ts +4 -4
  432. package/es/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  433. package/es/components/step-indicator/StepIndicatorTriggerButton.js +4 -4
  434. package/es/components/switch/Switch.d.ts +6 -6
  435. package/es/components/tabs/Tabs.d.ts +8 -8
  436. package/es/components/tabs/TabsContentWrapper.d.ts +2 -2
  437. package/es/components/tabs/TabsCustomContent.d.ts +1 -1
  438. package/es/components/tag/Tag.js +112 -0
  439. package/es/components/tag/Tag.tsx +196 -0
  440. package/es/components/tag/TagContext.js +2 -0
  441. package/es/components/tag/TagContext.tsx +3 -0
  442. package/es/components/tag/TagGroup.js +47 -0
  443. package/es/components/tag/TagGroup.tsx +76 -0
  444. package/es/components/tag/index.d.ts +8 -0
  445. package/es/components/tag/index.js +3 -0
  446. package/es/components/tag/style/_tag.scss +102 -0
  447. package/es/components/tag/style/dnb-tag.css +931 -0
  448. package/es/components/tag/style/dnb-tag.min.css +1 -0
  449. package/es/components/tag/style/dnb-tag.scss +15 -0
  450. package/es/components/tag/style/index.d.ts +6 -0
  451. package/es/components/tag/style/index.js +1 -0
  452. package/es/components/tag/style/themes/_tag-mixins.scss +18 -0
  453. package/es/components/tag/style.js +1 -0
  454. package/es/components/textarea/Textarea.d.ts +4 -4
  455. package/es/components/timeline/Timeline.js +52 -0
  456. package/es/components/timeline/Timeline.tsx +95 -0
  457. package/es/components/timeline/TimelineItem.js +108 -0
  458. package/es/components/timeline/TimelineItem.tsx +191 -0
  459. package/es/components/timeline/index.d.ts +8 -0
  460. package/es/components/timeline/index.js +3 -0
  461. package/es/components/timeline/style/_timeline.scss +42 -0
  462. package/es/components/timeline/style/dnb-timeline.css +307 -0
  463. package/es/components/timeline/style/dnb-timeline.min.css +1 -0
  464. package/es/components/timeline/style/dnb-timeline.scss +12 -0
  465. package/es/components/timeline/style/index.d.ts +6 -0
  466. package/es/components/timeline/style/index.js +1 -0
  467. package/es/components/timeline/style/themes/dnb-timeline-theme-ui.css +185 -0
  468. package/es/components/timeline/style/themes/dnb-timeline-theme-ui.min.css +1 -0
  469. package/es/components/timeline/style/themes/dnb-timeline-theme-ui.scss +105 -0
  470. package/es/components/timeline/style/themes/ui.js +1 -0
  471. package/es/components/timeline/style.js +1 -0
  472. package/es/components/toggle-button/ToggleButton.d.ts +7 -7
  473. package/es/components/toggle-button/ToggleButtonGroup.d.ts +4 -4
  474. package/es/components/tooltip/Tooltip.d.ts +5 -5
  475. package/es/components/tooltip/TooltipContainer.d.ts +3 -3
  476. package/es/components/tooltip/TooltipPortal.d.ts +1 -1
  477. package/es/components/tooltip/TooltipWithEvents.d.ts +1 -1
  478. package/es/elements/Div.d.ts +1 -1
  479. package/es/elements/Img.d.ts +2 -2
  480. package/es/elements/P.d.ts +2 -1
  481. package/es/extensions/payment-card/PaymentCard.d.ts +1 -1
  482. package/es/extensions/payment-card/style/_payment-card.scss +0 -1
  483. package/es/extensions/payment-card/style/dnb-payment-card.css +0 -1
  484. package/es/extensions/payment-card/style/dnb-payment-card.min.css +1 -1
  485. package/es/fragments/drawer-list/DrawerListProvider.js +1 -0
  486. package/es/fragments/scroll-view/ScrollView.js +7 -15
  487. package/es/fragments/scroll-view/ScrollView.tsx +92 -0
  488. package/es/index.d.ts +8 -0
  489. package/es/index.js +5 -1
  490. package/es/shared/AnimateHeight.js +15 -13
  491. package/es/shared/Context.js +11 -4
  492. package/es/shared/helpers.js +9 -2
  493. package/es/shared/hooks/index.js +1 -0
  494. package/es/shared/hooks/index.ts +1 -0
  495. package/es/shared/hooks/usePropsWithContext.js +26 -0
  496. package/es/shared/hooks/usePropsWithContext.ts +45 -0
  497. package/es/shared/interfaces.tsx +0 -2
  498. package/es/shared/locales/en-GB.js +5 -0
  499. package/es/shared/locales/nb-NO.js +5 -0
  500. package/es/style/core/helper-classes/skip-link.scss +1 -1
  501. package/es/style/dnb-ui-components.css +725 -0
  502. package/es/style/dnb-ui-components.min.css +3 -3
  503. package/es/style/dnb-ui-components.scss +4 -0
  504. package/es/style/dnb-ui-elements.css +1 -0
  505. package/es/style/dnb-ui-elements.min.css +1 -1
  506. package/es/style/dnb-ui-extensions.css +0 -1
  507. package/es/style/dnb-ui-extensions.min.css +1 -1
  508. package/es/style/dnb-ui-tags.css +2 -0
  509. package/es/style/dnb-ui-tags.min.css +2 -2
  510. package/es/style/elements/code.scss +1 -0
  511. package/es/style/stylis.d.ts +38 -0
  512. package/es/style/themes/theme-open-banking/dnb-theme-open-banking.css +224 -0
  513. package/es/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  514. package/es/style/themes/theme-ui/dnb-theme-ui.css +224 -0
  515. package/es/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  516. package/es/style/themes/theme-ui/dnb-theme-ui.scss +2 -0
  517. package/esm/components/Avatar.d.ts +14 -0
  518. package/esm/components/Avatar.js +3 -0
  519. package/esm/components/InfoCard.d.ts +14 -0
  520. package/esm/components/InfoCard.js +3 -0
  521. package/esm/components/Tag.d.ts +14 -0
  522. package/esm/components/Tag.js +3 -0
  523. package/esm/components/Timeline.d.ts +14 -0
  524. package/esm/components/Timeline.js +3 -0
  525. package/esm/components/accordion/Accordion.d.ts +7 -7
  526. package/esm/components/autocomplete/Autocomplete.d.ts +13 -13
  527. package/esm/components/avatar/Avatar.js +90 -0
  528. package/esm/components/avatar/Avatar.tsx +162 -0
  529. package/esm/components/avatar/AvatarGroup.js +94 -0
  530. package/esm/components/avatar/AvatarGroup.tsx +163 -0
  531. package/esm/components/avatar/index.d.ts +8 -0
  532. package/esm/components/avatar/index.js +3 -0
  533. package/esm/components/avatar/style/_avatar.scss +147 -0
  534. package/esm/components/avatar/style/dnb-avatar.css +221 -0
  535. package/esm/components/avatar/style/dnb-avatar.min.css +1 -0
  536. package/esm/components/avatar/style/dnb-avatar.scss +12 -0
  537. package/esm/components/avatar/style/index.d.ts +6 -0
  538. package/esm/components/avatar/style/index.js +1 -0
  539. package/esm/components/avatar/style/themes/dnb-avatar-theme-ui.css +36 -0
  540. package/esm/components/avatar/style/themes/dnb-avatar-theme-ui.min.css +1 -0
  541. package/esm/components/avatar/style/themes/dnb-avatar-theme-ui.scss +29 -0
  542. package/esm/components/avatar/style/themes/ui.js +1 -0
  543. package/esm/components/avatar/style.js +1 -0
  544. package/esm/components/breadcrumb/Breadcrumb.js +22 -35
  545. package/esm/components/breadcrumb/Breadcrumb.tsx +10 -10
  546. package/esm/components/breadcrumb/BreadcrumbItem.js +17 -28
  547. package/esm/components/breadcrumb/BreadcrumbItem.tsx +10 -13
  548. package/esm/components/button/Button.d.ts +18 -14
  549. package/esm/components/button/Button.js +7 -5
  550. package/esm/components/button/style/themes/dnb-button-theme-ui.scss +3 -0
  551. package/esm/components/checkbox/Checkbox.d.ts +3 -3
  552. package/esm/components/date-picker/DatePicker.d.ts +14 -14
  553. package/esm/components/date-picker/DatePicker.js +4 -2
  554. package/esm/components/date-picker/DatePickerAddon.d.ts +1 -1
  555. package/esm/components/date-picker/DatePickerCalendar.d.ts +1 -1
  556. package/esm/components/date-picker/DatePickerFooter.d.ts +1 -0
  557. package/esm/components/date-picker/DatePickerFooter.js +10 -6
  558. package/esm/components/date-picker/DatePickerInput.d.ts +1 -1
  559. package/esm/components/dropdown/Dropdown.d.ts +11 -10
  560. package/esm/components/form-label/FormLabel.d.ts +1 -1
  561. package/esm/components/form-row/FormRow.d.ts +4 -4
  562. package/esm/components/form-set/FormSet.d.ts +5 -5
  563. package/esm/components/global-error/GlobalError.d.ts +1 -1
  564. package/esm/components/global-status/GlobalStatus.d.ts +5 -5
  565. package/esm/components/heading/Heading.d.ts +2 -2
  566. package/esm/components/heading/HeadingProvider.d.ts +2 -2
  567. package/esm/components/help-button/HelpButton.d.ts +1 -1
  568. package/esm/components/help-button/HelpButtonInstance.d.ts +3 -2
  569. package/esm/components/icon/Icon.d.ts +2 -2
  570. package/esm/components/icon-primary/IconPrimary.d.ts +2 -1
  571. package/esm/components/index.d.ts +8 -0
  572. package/esm/components/index.js +5 -1
  573. package/esm/components/info-card/InfoCard.js +140 -0
  574. package/esm/components/info-card/InfoCard.tsx +250 -0
  575. package/esm/components/info-card/index.d.ts +8 -0
  576. package/esm/components/info-card/index.js +3 -0
  577. package/esm/components/info-card/style/_info-card.scss +52 -0
  578. package/esm/components/info-card/style/dnb-info-card.css +135 -0
  579. package/esm/components/info-card/style/dnb-info-card.min.css +1 -0
  580. package/esm/components/info-card/style/dnb-info-card.scss +12 -0
  581. package/esm/components/info-card/style/index.d.ts +6 -0
  582. package/esm/components/info-card/style/index.js +1 -0
  583. package/esm/components/info-card/style.js +1 -0
  584. package/esm/components/input/Input.d.ts +11 -10
  585. package/esm/components/input-masked/InputMasked.d.ts +11 -11
  586. package/esm/components/input-masked/InputMasked.js +6 -4
  587. package/esm/components/input-masked/InputMaskedHooks.js +24 -28
  588. package/esm/components/input-masked/InputMaskedUtils.js +9 -20
  589. package/esm/components/lib.js +9 -1
  590. package/esm/components/modal/Modal.js +112 -250
  591. package/esm/components/modal/Modal.tsx +524 -0
  592. package/esm/components/modal/ModalContent.js +137 -224
  593. package/esm/components/modal/ModalContent.tsx +519 -0
  594. package/esm/components/modal/ModalContext.tsx +10 -0
  595. package/esm/components/modal/ModalRoot.js +145 -0
  596. package/esm/components/modal/ModalRoot.tsx +131 -0
  597. package/esm/components/modal/components/CloseButton.js +72 -0
  598. package/esm/components/modal/components/CloseButton.tsx +56 -0
  599. package/esm/components/modal/components/ModalHeader.js +70 -0
  600. package/esm/components/modal/components/ModalHeader.tsx +79 -0
  601. package/esm/components/modal/components/ModalHeaderBar.js +122 -0
  602. package/esm/components/modal/components/ModalHeaderBar.tsx +118 -0
  603. package/esm/components/modal/{ModalInner.js → components/ModalInner.js} +11 -17
  604. package/esm/components/modal/components/ModalInner.tsx +45 -0
  605. package/esm/components/modal/helpers.js +64 -0
  606. package/esm/components/modal/helpers.ts +63 -0
  607. package/esm/components/modal/types.js +1 -0
  608. package/esm/components/modal/{Modal.d.ts → types.ts} +124 -182
  609. package/esm/components/number-format/NumberFormat.d.ts +10 -10
  610. package/esm/components/pagination/Pagination.d.ts +36 -36
  611. package/esm/components/pagination/Pagination.js +9 -2
  612. package/esm/components/pagination/PaginationProvider.d.ts +2 -2
  613. package/esm/components/radio/Radio.d.ts +5 -5
  614. package/esm/components/radio/RadioGroup.d.ts +4 -4
  615. package/esm/components/section/Section.d.ts +3 -1
  616. package/esm/components/skeleton/Skeleton.d.ts +2 -2
  617. package/esm/components/skeleton/SkeletonHelper.d.ts +2 -1
  618. package/esm/components/slider/Slider.d.ts +5 -5
  619. package/esm/components/step-indicator/StepIndicator.d.ts +6 -6
  620. package/esm/components/step-indicator/StepIndicatorContext.d.ts +1 -1
  621. package/esm/components/step-indicator/StepIndicatorItem.d.ts +3 -3
  622. package/esm/components/step-indicator/StepIndicatorItem.js +1 -0
  623. package/esm/components/step-indicator/StepIndicatorSidebar.d.ts +4 -4
  624. package/esm/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
  625. package/esm/components/step-indicator/StepIndicatorTriggerButton.js +4 -4
  626. package/esm/components/switch/Switch.d.ts +6 -6
  627. package/esm/components/tabs/Tabs.d.ts +8 -8
  628. package/esm/components/tabs/TabsContentWrapper.d.ts +2 -2
  629. package/esm/components/tabs/TabsCustomContent.d.ts +1 -1
  630. package/esm/components/tag/Tag.js +112 -0
  631. package/esm/components/tag/Tag.tsx +196 -0
  632. package/esm/components/tag/TagContext.js +2 -0
  633. package/esm/components/tag/TagContext.tsx +3 -0
  634. package/esm/components/tag/TagGroup.js +47 -0
  635. package/esm/components/tag/TagGroup.tsx +76 -0
  636. package/esm/components/tag/index.d.ts +8 -0
  637. package/esm/components/tag/index.js +3 -0
  638. package/esm/components/tag/style/_tag.scss +102 -0
  639. package/esm/components/tag/style/dnb-tag.css +931 -0
  640. package/esm/components/tag/style/dnb-tag.min.css +1 -0
  641. package/esm/components/tag/style/dnb-tag.scss +15 -0
  642. package/esm/components/tag/style/index.d.ts +6 -0
  643. package/esm/components/tag/style/index.js +1 -0
  644. package/esm/components/tag/style/themes/_tag-mixins.scss +18 -0
  645. package/esm/components/tag/style.js +1 -0
  646. package/esm/components/textarea/Textarea.d.ts +4 -4
  647. package/esm/components/timeline/Timeline.js +53 -0
  648. package/esm/components/timeline/Timeline.tsx +95 -0
  649. package/esm/components/timeline/TimelineItem.js +102 -0
  650. package/esm/components/timeline/TimelineItem.tsx +191 -0
  651. package/esm/components/timeline/index.d.ts +8 -0
  652. package/esm/components/timeline/index.js +3 -0
  653. package/esm/components/timeline/style/_timeline.scss +42 -0
  654. package/esm/components/timeline/style/dnb-timeline.css +307 -0
  655. package/esm/components/timeline/style/dnb-timeline.min.css +1 -0
  656. package/esm/components/timeline/style/dnb-timeline.scss +12 -0
  657. package/esm/components/timeline/style/index.d.ts +6 -0
  658. package/esm/components/timeline/style/index.js +1 -0
  659. package/esm/components/timeline/style/themes/dnb-timeline-theme-ui.css +185 -0
  660. package/esm/components/timeline/style/themes/dnb-timeline-theme-ui.min.css +1 -0
  661. package/esm/components/timeline/style/themes/dnb-timeline-theme-ui.scss +105 -0
  662. package/esm/components/timeline/style/themes/ui.js +1 -0
  663. package/esm/components/timeline/style.js +1 -0
  664. package/esm/components/toggle-button/ToggleButton.d.ts +7 -7
  665. package/esm/components/toggle-button/ToggleButtonGroup.d.ts +4 -4
  666. package/esm/components/tooltip/Tooltip.d.ts +5 -5
  667. package/esm/components/tooltip/TooltipContainer.d.ts +3 -3
  668. package/esm/components/tooltip/TooltipPortal.d.ts +1 -1
  669. package/esm/components/tooltip/TooltipWithEvents.d.ts +1 -1
  670. package/esm/dnb-ui-components.min.mjs +4 -4
  671. package/esm/dnb-ui-elements.min.mjs +1 -1
  672. package/esm/dnb-ui-extensions.min.mjs +3 -3
  673. package/esm/dnb-ui-lib.min.mjs +4 -4
  674. package/esm/dnb-ui-web-components.min.mjs +4 -4
  675. package/esm/elements/Img.d.ts +1 -1
  676. package/esm/elements/P.d.ts +2 -1
  677. package/esm/extensions/payment-card/PaymentCard.d.ts +1 -1
  678. package/esm/extensions/payment-card/style/_payment-card.scss +0 -1
  679. package/esm/extensions/payment-card/style/dnb-payment-card.css +0 -1
  680. package/esm/extensions/payment-card/style/dnb-payment-card.min.css +1 -1
  681. package/esm/fragments/drawer-list/DrawerListProvider.js +1 -0
  682. package/esm/fragments/scroll-view/ScrollView.js +10 -16
  683. package/esm/fragments/scroll-view/ScrollView.tsx +92 -0
  684. package/esm/index.d.ts +8 -0
  685. package/esm/index.js +5 -1
  686. package/esm/shared/AnimateHeight.js +19 -13
  687. package/esm/shared/Context.js +11 -4
  688. package/esm/shared/helpers.js +15 -4
  689. package/esm/shared/hooks/index.js +1 -0
  690. package/esm/shared/hooks/index.ts +1 -0
  691. package/esm/shared/hooks/usePropsWithContext.js +47 -0
  692. package/esm/shared/hooks/usePropsWithContext.ts +45 -0
  693. package/esm/shared/interfaces.tsx +0 -2
  694. package/esm/shared/locales/en-GB.js +5 -0
  695. package/esm/shared/locales/nb-NO.js +5 -0
  696. package/esm/style/core/helper-classes/skip-link.scss +1 -1
  697. package/esm/style/dnb-ui-components.css +725 -0
  698. package/esm/style/dnb-ui-components.min.css +3 -3
  699. package/esm/style/dnb-ui-components.scss +4 -0
  700. package/esm/style/dnb-ui-elements.css +1 -0
  701. package/esm/style/dnb-ui-elements.min.css +1 -1
  702. package/esm/style/dnb-ui-extensions.css +0 -1
  703. package/esm/style/dnb-ui-extensions.min.css +1 -1
  704. package/esm/style/dnb-ui-tags.css +2 -0
  705. package/esm/style/dnb-ui-tags.min.css +2 -2
  706. package/esm/style/elements/code.scss +1 -0
  707. package/esm/style/stylis.d.ts +38 -0
  708. package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.css +224 -0
  709. package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  710. package/esm/style/themes/theme-ui/dnb-theme-ui.css +224 -0
  711. package/esm/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  712. package/esm/style/themes/theme-ui/dnb-theme-ui.scss +2 -0
  713. package/extensions/payment-card/PaymentCard.d.ts +1 -1
  714. package/extensions/payment-card/style/_payment-card.scss +0 -1
  715. package/extensions/payment-card/style/dnb-payment-card.css +0 -1
  716. package/extensions/payment-card/style/dnb-payment-card.min.css +1 -1
  717. package/fragments/drawer-list/DrawerListProvider.js +1 -0
  718. package/fragments/scroll-view/ScrollView.js +10 -16
  719. package/fragments/scroll-view/ScrollView.tsx +92 -0
  720. package/index.d.ts +8 -0
  721. package/index.js +5 -1
  722. package/package.json +2 -3
  723. package/shared/AnimateHeight.js +19 -13
  724. package/shared/Context.js +11 -4
  725. package/shared/helpers.js +15 -4
  726. package/shared/hooks/index.js +1 -0
  727. package/shared/hooks/index.ts +1 -0
  728. package/shared/hooks/usePropsWithContext.js +47 -0
  729. package/shared/hooks/usePropsWithContext.ts +45 -0
  730. package/shared/interfaces.tsx +0 -2
  731. package/shared/locales/en-GB.js +5 -0
  732. package/shared/locales/nb-NO.js +5 -0
  733. package/style/core/helper-classes/skip-link.scss +1 -1
  734. package/style/dnb-ui-components.css +725 -0
  735. package/style/dnb-ui-components.min.css +3 -3
  736. package/style/dnb-ui-components.scss +4 -0
  737. package/style/dnb-ui-elements.css +1 -0
  738. package/style/dnb-ui-elements.min.css +1 -1
  739. package/style/dnb-ui-extensions.css +0 -1
  740. package/style/dnb-ui-extensions.min.css +1 -1
  741. package/style/dnb-ui-tags.css +2 -0
  742. package/style/dnb-ui-tags.min.css +2 -2
  743. package/style/elements/code.scss +1 -0
  744. package/style/stylis.d.ts +38 -0
  745. package/style/themes/theme-open-banking/dnb-theme-open-banking.css +224 -0
  746. package/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
  747. package/style/themes/theme-ui/dnb-theme-ui.css +224 -0
  748. package/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
  749. package/style/themes/theme-ui/dnb-theme-ui.scss +2 -0
  750. package/umd/dnb-ui-components.min.js +5 -5
  751. package/umd/dnb-ui-elements.min.js +3 -3
  752. package/umd/dnb-ui-extensions.min.js +3 -3
  753. package/umd/dnb-ui-lib.min.js +5 -5
  754. package/umd/dnb-ui-web-components.min.js +5 -5
  755. package/cjs/components/modal/ModalContent.d.ts +0 -168
  756. package/cjs/components/modal/ModalHeader.d.ts +0 -73
  757. package/cjs/components/modal/ModalInner.d.ts +0 -20
  758. package/cjs/fragments/scroll-view/ScrollView.d.ts +0 -1
  759. package/components/modal/Modal.d.ts +0 -329
  760. package/components/modal/ModalContent.d.ts +0 -168
  761. package/components/modal/ModalHeader.d.ts +0 -73
  762. package/components/modal/ModalHeader.js +0 -224
  763. package/components/modal/ModalInner.d.ts +0 -20
  764. package/es/components/modal/ModalContent.d.ts +0 -168
  765. package/es/components/modal/ModalHeader.d.ts +0 -73
  766. package/es/components/modal/ModalHeader.js +0 -166
  767. package/es/components/modal/ModalInner.d.ts +0 -20
  768. package/es/fragments/scroll-view/ScrollView.d.ts +0 -1
  769. package/esm/components/modal/ModalContent.d.ts +0 -168
  770. package/esm/components/modal/ModalHeader.d.ts +0 -73
  771. package/esm/components/modal/ModalHeader.js +0 -224
  772. package/esm/components/modal/ModalInner.d.ts +0 -20
  773. package/esm/fragments/scroll-view/ScrollView.d.ts +0 -1
  774. package/fragments/scroll-view/ScrollView.d.ts +0 -1
@@ -18,23 +18,20 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
18
18
 
19
19
  require("core-js/modules/es.object.assign.js");
20
20
 
21
+ require("core-js/modules/es.symbol.description.js");
22
+
23
+ require("core-js/modules/es.symbol.iterator.js");
24
+
21
25
  require("core-js/modules/es.array.iterator.js");
22
26
 
23
27
  require("core-js/modules/es.string.iterator.js");
24
28
 
25
- require("core-js/modules/es.weak-map.js");
26
-
27
29
  require("core-js/modules/web.dom-collections.iterator.js");
28
30
 
29
- require("core-js/modules/es.symbol.description.js");
30
-
31
- require("core-js/modules/es.symbol.iterator.js");
32
-
33
31
  Object.defineProperty(exports, "__esModule", {
34
32
  value: true
35
33
  });
36
34
  exports.default = void 0;
37
- exports.getListOfModalRoots = getListOfModalRoots;
38
35
 
39
36
  require("core-js/modules/es.array.filter.js");
40
37
 
@@ -44,12 +41,8 @@ require("core-js/modules/web.dom-collections.for-each.js");
44
41
 
45
42
  require("core-js/modules/es.parse-float.js");
46
43
 
47
- require("core-js/modules/es.regexp.exec.js");
48
-
49
44
  var _react = _interopRequireDefault(require("react"));
50
45
 
51
- var _propTypes = _interopRequireDefault(require("prop-types"));
52
-
53
46
  var _classnames = _interopRequireDefault(require("classnames"));
54
47
 
55
48
  var _keycode = _interopRequireDefault(require("keycode"));
@@ -62,16 +55,16 @@ var _ScrollView = _interopRequireDefault(require("../../fragments/scroll-view/Sc
62
55
 
63
56
  var _ModalContext = _interopRequireDefault(require("./ModalContext"));
64
57
 
65
- var _ModalHeader = _interopRequireWildcard(require("./ModalHeader"));
58
+ var _ModalHeader = _interopRequireDefault(require("./components/ModalHeader"));
66
59
 
67
- var _helpers = require("../../shared/helpers");
60
+ var _ModalHeaderBar = _interopRequireDefault(require("./components/ModalHeaderBar"));
68
61
 
69
- var _excluded = ["triggeredBy"],
70
- _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_close", "open_delay", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "toggleOpenClose", "children"];
62
+ var _helpers = require("../../shared/helpers");
71
63
 
72
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
64
+ var _helpers2 = require("./helpers");
73
65
 
74
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
66
+ var _excluded = ["triggeredBy"],
67
+ _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "children"];
75
68
 
76
69
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
77
70
 
@@ -121,11 +114,26 @@ var ModalContent = function (_React$PureComponent) {
121
114
 
122
115
  _defineProperty(_assertThisInitialized(_this), "state", {
123
116
  triggeredBy: null,
124
- triggeredByEvent: null
117
+ triggeredByEvent: null,
118
+ color: null
125
119
  });
126
120
 
121
+ _defineProperty(_assertThisInitialized(_this), "_contentRef", void 0);
122
+
123
+ _defineProperty(_assertThisInitialized(_this), "_id", void 0);
124
+
125
+ _defineProperty(_assertThisInitialized(_this), "_lockTimeout", void 0);
126
+
127
+ _defineProperty(_assertThisInitialized(_this), "_focusTimeout", void 0);
128
+
129
+ _defineProperty(_assertThisInitialized(_this), "_androidFocusTimeout", void 0);
130
+
131
+ _defineProperty(_assertThisInitialized(_this), "_ii", void 0);
132
+
133
+ _defineProperty(_assertThisInitialized(_this), "_iiLocal", void 0);
134
+
127
135
  _defineProperty(_assertThisInitialized(_this), "lockBody", function () {
128
- var modalRoots = getListOfModalRoots();
136
+ var modalRoots = (0, _helpers2.getListOfModalRoots)();
129
137
  var firstLevel = modalRoots[0];
130
138
 
131
139
  if (firstLevel === _assertThisInitialized(_this)) {
@@ -150,6 +158,9 @@ var ModalContent = function (_React$PureComponent) {
150
158
  });
151
159
 
152
160
  _defineProperty(_assertThisInitialized(_this), "_androidFocusHelper", function () {
161
+ var _this$props$animation = _this.props.animation_duration,
162
+ animation_duration = _this$props$animation === void 0 ? null : _this$props$animation;
163
+ var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
153
164
  clearTimeout(_this._androidFocusTimeout);
154
165
  _this._androidFocusTimeout = setTimeout(function () {
155
166
  try {
@@ -159,38 +170,38 @@ var ModalContent = function (_React$PureComponent) {
159
170
  document.activeElement.scrollIntoView();
160
171
  }
161
172
  } catch (e) {}
162
- }, parseFloat(_this.props.animation_duration) / 2);
173
+ }, timeoutDuration / 2);
163
174
  });
164
175
 
165
- _defineProperty(_assertThisInitialized(_this), "preventClick", function (e) {
166
- if (e) {
167
- e.stopPropagation();
176
+ _defineProperty(_assertThisInitialized(_this), "preventClick", function (event) {
177
+ if (event) {
178
+ event.stopPropagation();
168
179
  }
169
180
  });
170
181
 
171
- _defineProperty(_assertThisInitialized(_this), "onCloseClickHandler", function (e) {
172
- _this.closeModal(e, {
182
+ _defineProperty(_assertThisInitialized(_this), "onCloseClickHandler", function (event) {
183
+ _this.closeModalContent(event, {
173
184
  triggeredBy: 'button'
174
185
  });
175
186
  });
176
187
 
177
- _defineProperty(_assertThisInitialized(_this), "onContentClickHandler", function (e) {
178
- _this.closeModal(e, {
188
+ _defineProperty(_assertThisInitialized(_this), "onContentClickHandler", function (event) {
189
+ _this.closeModalContent(event, {
179
190
  triggeredBy: 'overlay',
180
191
  ifIsLatest: false
181
192
  });
182
193
  });
183
194
 
184
- _defineProperty(_assertThisInitialized(_this), "onKeyDownHandler", function (e) {
185
- switch ((0, _keycode.default)(e)) {
195
+ _defineProperty(_assertThisInitialized(_this), "onKeyDownHandler", function (event) {
196
+ switch ((0, _keycode.default)(event)) {
186
197
  case 'esc':
187
198
  {
188
- var mostCurrent = getListOfModalRoots(-1);
199
+ var mostCurrent = (0, _helpers2.getModalRoot)(-1);
189
200
 
190
201
  if (mostCurrent === _assertThisInitialized(_this)) {
191
- e.preventDefault();
202
+ event.preventDefault();
192
203
 
193
- _this.closeModal(e, {
204
+ _this.closeModalContent(event, {
194
205
  triggeredBy: 'keyboard'
195
206
  });
196
207
  }
@@ -201,6 +212,8 @@ var ModalContent = function (_React$PureComponent) {
201
212
  });
202
213
 
203
214
  _defineProperty(_assertThisInitialized(_this), "setBackgroundColor", function (color) {
215
+ document.documentElement.style.setProperty('--modal-background-color', color);
216
+
204
217
  _this.setState({
205
218
  color: color
206
219
  });
@@ -214,19 +227,26 @@ var ModalContent = function (_React$PureComponent) {
214
227
  _createClass(ModalContent, [{
215
228
  key: "componentDidMount",
216
229
  value: function componentDidMount() {
217
- this.addToIndex();
230
+ var _this$props = this.props,
231
+ _this$props$id = _this$props.id,
232
+ id = _this$props$id === void 0 ? null : _this$props$id,
233
+ _this$props$no_animat = _this$props.no_animation,
234
+ no_animation = _this$props$no_animat === void 0 ? false : _this$props$no_animat,
235
+ _this$props$animation2 = _this$props.animation_duration,
236
+ animation_duration = _this$props$animation2 === void 0 ? null : _this$props$animation2;
237
+ var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
238
+ (0, _helpers2.addToIndex)(this);
218
239
  this.removeScrollPossibility();
219
240
  this.setFocus();
220
241
  this.setAndroidFocusHelper();
221
- var id = this.props.id;
222
242
  (0, _componentHelper.dispatchCustomElementEvent)(this, 'on_open', {
223
243
  id: id
224
244
  });
225
245
 
226
- if ((0, _componentHelper.isTrue)(this.props.no_animation) || process.env.NODE_ENV === 'test') {
246
+ if ((0, _componentHelper.isTrue)(no_animation) || process.env.NODE_ENV === 'test') {
227
247
  this.lockBody();
228
248
  } else {
229
- this._lockTimeout = setTimeout(this.lockBody, parseFloat(this.props.animation_duration) * 1.2);
249
+ this._lockTimeout = setTimeout(this.lockBody, timeoutDuration * 1.2);
230
250
  }
231
251
  }
232
252
  }, {
@@ -239,9 +259,9 @@ var ModalContent = function (_React$PureComponent) {
239
259
  }, {
240
260
  key: "removeLocks",
241
261
  value: function removeLocks() {
242
- var modalRoots = getListOfModalRoots();
262
+ var modalRoots = (0, _helpers2.getListOfModalRoots)();
243
263
  var firstLevel = modalRoots[0];
244
- this.removeFromIndex();
264
+ (0, _helpers2.removeFromIndex)(this);
245
265
 
246
266
  if (firstLevel === this) {
247
267
  var _this$_ii;
@@ -280,7 +300,7 @@ var ModalContent = function (_React$PureComponent) {
280
300
  }, {
281
301
  key: "setAndroidFocusHelper",
282
302
  value: function setAndroidFocusHelper() {
283
- if (typeof window !== 'undefined' && typeof navigator !== 'undefined' && /Android/.test(navigator.appVersion)) {
303
+ if (typeof window !== 'undefined' && (0, _helpers.isAndroid)()) {
284
304
  window.addEventListener('resize', this._androidFocusHelper);
285
305
  }
286
306
  }
@@ -290,48 +310,18 @@ var ModalContent = function (_React$PureComponent) {
290
310
  window.removeEventListener('resize', this._androidFocusHelper);
291
311
  clearTimeout(this._androidFocusTimeout);
292
312
  }
293
- }, {
294
- key: "addToIndex",
295
- value: function addToIndex() {
296
- if (typeof window !== 'undefined') {
297
- try {
298
- if (!Array.isArray(window.__modalStack)) {
299
- window.__modalStack = [];
300
- }
301
-
302
- window.__modalStack.push(this);
303
- } catch (e) {
304
- (0, _componentHelper.warn)(e);
305
- }
306
- }
307
- }
308
- }, {
309
- key: "removeFromIndex",
310
- value: function removeFromIndex() {
311
- var _this2 = this;
312
-
313
- if (typeof window !== 'undefined') {
314
- try {
315
- if (!Array.isArray(window.__modalStack)) {
316
- window.__modalStack = [];
317
- }
318
-
319
- window.__modalStack = window.__modalStack.filter(function (cur) {
320
- return cur !== _this2;
321
- });
322
- } catch (e) {
323
- (0, _componentHelper.warn)(e);
324
- }
325
- }
326
- }
327
313
  }, {
328
314
  key: "setFocus",
329
315
  value: function setFocus() {
330
- var _this$props = this.props,
331
- focus_selector = _this$props.focus_selector,
332
- no_animation = _this$props.no_animation,
333
- animation_duration = _this$props.animation_duration;
316
+ var _this$props2 = this.props,
317
+ _this$props2$focus_se = _this$props2.focus_selector,
318
+ focus_selector = _this$props2$focus_se === void 0 ? null : _this$props2$focus_se,
319
+ _this$props2$no_anima = _this$props2.no_animation,
320
+ no_animation = _this$props2$no_anima === void 0 ? null : _this$props2$no_anima,
321
+ _this$props2$animatio = _this$props2.animation_duration,
322
+ animation_duration = _this$props2$animatio === void 0 ? null : _this$props2$animatio;
334
323
  var elem = this._contentRef.current;
324
+ var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
335
325
 
336
326
  if (elem) {
337
327
  clearTimeout(this._focusTimeout);
@@ -352,7 +342,7 @@ var ModalContent = function (_React$PureComponent) {
352
342
  } catch (e) {
353
343
  (0, _componentHelper.warn)(e);
354
344
  }
355
- }, (0, _componentHelper.isTrue)(no_animation) ? 0 : parseFloat(animation_duration) || 0);
345
+ }, (0, _componentHelper.isTrue)(no_animation) ? 0 : timeoutDuration || 0);
356
346
  }
357
347
  }
358
348
  }, {
@@ -369,10 +359,10 @@ var ModalContent = function (_React$PureComponent) {
369
359
  (0, _bodyScrollLock.clearAllBodyScrollLocks)();
370
360
  }
371
361
  }, {
372
- key: "closeModal",
373
- value: function closeModal(event, _ref) {
362
+ key: "closeModalContent",
363
+ value: function closeModalContent(event, _ref) {
374
364
  var _event$persist,
375
- _this3 = this;
365
+ _this2 = this;
376
366
 
377
367
  var triggeredBy = _ref.triggeredBy,
378
368
  params = _objectWithoutProperties(_ref, _excluded);
@@ -382,7 +372,7 @@ var ModalContent = function (_React$PureComponent) {
382
372
  triggeredBy: triggeredBy,
383
373
  triggeredByEvent: event
384
374
  }, function () {
385
- _this3.props.closeModal(event, _objectSpread({
375
+ _this2.props.closeModal(event, _objectSpread({
386
376
  triggeredBy: triggeredBy
387
377
  }, params));
388
378
  });
@@ -390,61 +380,65 @@ var ModalContent = function (_React$PureComponent) {
390
380
  }, {
391
381
  key: "render",
392
382
  value: function render() {
393
- var _this$props2 = this.props,
394
- mode = _this$props2.mode,
395
- hide = _this$props2.hide,
396
- title = _this$props2.title,
397
- labelled_by = _this$props2.labelled_by,
398
- header_content = _this$props2.header_content,
399
- modal_content = _this$props2.modal_content,
400
- bar_content = _this$props2.bar_content,
401
- _id = _this$props2.id,
402
- close_title = _this$props2.close_title,
403
- dialog_title = _this$props2.dialog_title,
404
- hide_close_button = _this$props2.hide_close_button,
405
- close_button_attributes = _this$props2.close_button_attributes,
406
- spacing = _this$props2.spacing,
407
- prevent_close = _this$props2.prevent_close,
408
- open_delay = _this$props2.open_delay,
409
- prevent_core_style = _this$props2.prevent_core_style,
410
- animation_duration = _this$props2.animation_duration,
411
- no_animation = _this$props2.no_animation,
412
- no_animation_on_mobile = _this$props2.no_animation_on_mobile,
413
- min_width = _this$props2.min_width,
414
- max_width = _this$props2.max_width,
415
- fullscreen = _this$props2.fullscreen,
416
- align_content = _this$props2.align_content,
417
- container_placement = _this$props2.container_placement,
418
- closeModal = _this$props2.closeModal,
419
- className = _this$props2.className,
420
- _className = _this$props2.class,
421
- content_class = _this$props2.content_class,
422
- overlay_class = _this$props2.overlay_class,
423
- content_id = _this$props2.content_id,
424
- toggleOpenClose = _this$props2.toggleOpenClose,
425
- children = _this$props2.children,
426
- rest = _objectWithoutProperties(_this$props2, _excluded2);
427
-
383
+ var _this$props3 = this.props,
384
+ _this$props3$mode = _this$props3.mode,
385
+ mode = _this$props3$mode === void 0 ? 'modal' : _this$props3$mode,
386
+ hide = _this$props3.hide,
387
+ title = _this$props3.title,
388
+ labelled_by = _this$props3.labelled_by,
389
+ header_content = _this$props3.header_content,
390
+ modal_content = _this$props3.modal_content,
391
+ bar_content = _this$props3.bar_content,
392
+ _id = _this$props3.id,
393
+ _this$props3$close_ti = _this$props3.close_title,
394
+ close_title = _this$props3$close_ti === void 0 ? 'Lukk' : _this$props3$close_ti,
395
+ _this$props3$dialog_t = _this$props3.dialog_title,
396
+ dialog_title = _this$props3$dialog_t === void 0 ? 'Vindu' : _this$props3$dialog_t,
397
+ _this$props3$hide_clo = _this$props3.hide_close_button,
398
+ hide_close_button = _this$props3$hide_clo === void 0 ? false : _this$props3$hide_clo,
399
+ close_button_attributes = _this$props3.close_button_attributes,
400
+ _this$props3$spacing = _this$props3.spacing,
401
+ spacing = _this$props3$spacing === void 0 ? true : _this$props3$spacing,
402
+ _this$props3$prevent_ = _this$props3.prevent_core_style,
403
+ prevent_core_style = _this$props3$prevent_ === void 0 ? false : _this$props3$prevent_,
404
+ animation_duration = _this$props3.animation_duration,
405
+ _this$props3$no_anima = _this$props3.no_animation,
406
+ no_animation = _this$props3$no_anima === void 0 ? false : _this$props3$no_anima,
407
+ _this$props3$no_anima2 = _this$props3.no_animation_on_mobile,
408
+ no_animation_on_mobile = _this$props3$no_anima2 === void 0 ? false : _this$props3$no_anima2,
409
+ min_width = _this$props3.min_width,
410
+ max_width = _this$props3.max_width,
411
+ _this$props3$fullscre = _this$props3.fullscreen,
412
+ fullscreen = _this$props3$fullscre === void 0 ? 'auto' : _this$props3$fullscre,
413
+ align_content = _this$props3.align_content,
414
+ container_placement = _this$props3.container_placement,
415
+ closeModal = _this$props3.closeModal,
416
+ className = _this$props3.className,
417
+ _className = _this$props3.class,
418
+ content_class = _this$props3.content_class,
419
+ overlay_class = _this$props3.overlay_class,
420
+ content_id = _this$props3.content_id,
421
+ children = _this$props3.children,
422
+ rest = _objectWithoutProperties(_this$props3, _excluded2);
423
+
424
+ var color = this.state.color;
428
425
  var contentId = content_id || (0, _componentHelper.makeUniqueId)('modal-');
429
- var style = this.state.color ? {
430
- '--modal-background-color': "var(--color-".concat(this.state.color, ")")
431
- } : null;
432
426
  var minWidth = min_width;
433
427
  var maxWidth = max_width;
434
428
 
435
- if (minWidth && !maxWidth && parseFloat(minWidth) > 0) {
429
+ if (minWidth && !maxWidth && parseFloat(String(minWidth)) > 0) {
436
430
  maxWidth = 0;
437
- } else if (maxWidth && !minWidth && parseFloat(maxWidth) > 0) {
431
+ } else if (maxWidth && !minWidth && parseFloat(String(maxWidth)) > 0) {
438
432
  minWidth = 0;
439
433
  }
440
434
 
441
435
  var useDialogRole = !(_helpers.IS_MAC || _helpers.IS_SAFARI || _helpers.IS_IOS);
442
436
  var contentParams = {
443
437
  role: useDialogRole ? 'dialog' : 'region',
444
- 'aria-modal': useDialogRole ? 'true' : undefined,
438
+ 'aria-modal': useDialogRole ? true : undefined,
445
439
  'aria-labelledby': (0, _componentHelper.combineLabelledBy)(this.props, title ? contentId + '-title' : null, labelled_by),
446
440
  'aria-describedby': (0, _componentHelper.combineDescribedBy)(this.props, contentId + '-content'),
447
- 'aria-label': !title && !labelled_by ? this.props.dialog_title : undefined,
441
+ 'aria-label': !title && !labelled_by ? dialog_title : undefined,
448
442
  className: (0, _classnames.default)('dnb-modal__content', (container_placement || mode === 'drawer') && "dnb-modal__content--".concat(container_placement || 'right'), (0, _componentHelper.isTrue)(fullscreen) ? 'dnb-modal__content--fullscreen' : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen', content_class, mode && "dnb-modal__content--".concat(mode), hide && 'dnb-modal__content--hide', (0, _componentHelper.isTrue)(spacing) && 'dnb-modal__content--spacing', align_content && "dnb-modal__content__align--".concat(align_content), (0, _componentHelper.isTrue)(no_animation) && 'dnb-modal__content--no-animation', (0, _componentHelper.isTrue)(no_animation_on_mobile) && 'dnb-modal__content--no-animation-on-mobile'),
449
443
  onClick: this.onContentClickHandler
450
444
  };
@@ -460,138 +454,46 @@ var ModalContent = function (_React$PureComponent) {
460
454
  onKeyDown: this.onKeyDownHandler
461
455
  }, rest);
462
456
 
463
- var overlayParams = {
464
- className: (0, _classnames.default)('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', mode && "dnb-modal__overlay--".concat(mode), (0, _componentHelper.isTrue)(no_animation) && 'dnb-modal__overlay--no-animation', (0, _componentHelper.isTrue)(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile')
465
- };
466
457
  (0, _componentHelper.validateDOMAttributes)(this.props, innerParams);
467
- var bar = (0, _componentHelper.findElementInChildren)(modal_content, function (cur) {
468
- return cur.type === _ModalHeader.ModalHeaderBar;
469
- }) ? null : _react.default.createElement(_ModalHeader.ModalHeaderBar, null, bar_content);
470
- var header = (0, _componentHelper.findElementInChildren)(modal_content, function (cur) {
458
+ var barExists = (0, _componentHelper.findElementInChildren)(modal_content, function (cur) {
459
+ return cur.type === _ModalHeaderBar.default;
460
+ });
461
+ var headerExists = (0, _componentHelper.findElementInChildren)(modal_content, function (cur) {
471
462
  return cur.type === _ModalHeader.default;
472
- }) ? null : _react.default.createElement(_ModalHeader.default, {
473
- title: title
474
- }, header_content);
475
-
476
- var content = _react.default.createElement("div", {
477
- id: contentId + '-content',
478
- className: "dnb-modal__content__wrapper"
479
- }, modal_content);
480
-
463
+ });
481
464
  return _react.default.createElement(_ModalContext.default.Provider, {
482
- value: _objectSpread(_objectSpread({
483
- id: contentId,
484
- setBackgroundColor: this.setBackgroundColor
485
- }, this.props), {}, {
465
+ value: {
466
+ id: this.props.id,
467
+ title: title,
468
+ hide_close_button: hide_close_button,
469
+ close_button_attributes: close_button_attributes,
470
+ close_title: close_title,
471
+ mode: mode,
472
+ setBackgroundColor: this.setBackgroundColor,
486
473
  onCloseClickHandler: this.onCloseClickHandler
487
- })
474
+ }
488
475
  }, _react.default.createElement("div", _extends({
489
476
  id: contentId
490
477
  }, contentParams), _react.default.createElement(_ScrollView.default, innerParams, _react.default.createElement("div", {
491
- tabIndex: "-1",
478
+ tabIndex: -1,
492
479
  className: "dnb-modal__content__spacing dnb-no-focus",
493
- style: style,
480
+ style: color ? {
481
+ '--modal-background-color': "var(--color-".concat(color, ")")
482
+ } : null,
494
483
  ref: this._contentRef
495
- }, bar, header, content))), _react.default.createElement("span", _extends({}, overlayParams, {
484
+ }, !barExists && _react.default.createElement(_ModalHeaderBar.default, null, bar_content), !headerExists && _react.default.createElement(_ModalHeader.default, {
485
+ title: title
486
+ }, header_content), _react.default.createElement("div", {
487
+ id: contentId + '-content',
488
+ className: "dnb-modal__content__wrapper"
489
+ }, modal_content)))), _react.default.createElement("span", {
490
+ className: (0, _classnames.default)('dnb-modal__overlay', overlay_class, hide && 'dnb-modal__overlay--hide', mode && "dnb-modal__overlay--".concat(mode), (0, _componentHelper.isTrue)(no_animation) && 'dnb-modal__overlay--no-animation', (0, _componentHelper.isTrue)(no_animation_on_mobile) && 'dnb-modal__overlay--no-animation-on-mobile'),
496
491
  "aria-hidden": "true"
497
- })));
492
+ }));
498
493
  }
499
494
  }]);
500
495
 
501
496
  return ModalContent;
502
497
  }(_react.default.PureComponent);
503
498
 
504
- exports.default = ModalContent;
505
-
506
- _defineProperty(ModalContent, "defaultProps", {
507
- mode: null,
508
- bar_content: null,
509
- header_content: null,
510
- hide: null,
511
- id: null,
512
- root_id: null,
513
- labelled_by: null,
514
- focus_selector: null,
515
- content_id: null,
516
- title: null,
517
- close_title: null,
518
- dialog_title: null,
519
- hide_close_button: null,
520
- close_button_attributes: null,
521
- spacing: null,
522
- prevent_close: null,
523
- prevent_core_style: null,
524
- animation_duration: null,
525
- no_animation: null,
526
- no_animation_on_mobile: null,
527
- min_width: null,
528
- max_width: null,
529
- fullscreen: null,
530
- align_content: null,
531
- container_placement: null,
532
- class: null,
533
- overlay_class: null,
534
- content_class: null,
535
- closeModal: null,
536
- className: null,
537
- children: null
538
- });
539
-
540
- process.env.NODE_ENV !== "production" ? ModalContent.propTypes = {
541
- modal_content: _propTypes.default.node.isRequired,
542
- mode: _propTypes.default.oneOf(['modal', 'drawer']),
543
- bar_content: _propTypes.default.node,
544
- header_content: _propTypes.default.node,
545
- hide: _propTypes.default.bool,
546
- id: _propTypes.default.string,
547
- root_id: _propTypes.default.string,
548
- labelled_by: _propTypes.default.string,
549
- focus_selector: _propTypes.default.string,
550
- content_id: _propTypes.default.string,
551
- title: _propTypes.default.node,
552
- close_title: _propTypes.default.string,
553
- dialog_title: _propTypes.default.string,
554
- hide_close_button: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
555
- close_button_attributes: _propTypes.default.object,
556
- spacing: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
557
- prevent_close: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
558
- prevent_core_style: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
559
- animation_duration: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
560
- no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
561
- no_animation_on_mobile: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
562
- min_width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
563
- max_width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
564
- fullscreen: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
565
- align_content: _propTypes.default.string,
566
- container_placement: _propTypes.default.string,
567
- class: _propTypes.default.string,
568
- content_class: _propTypes.default.string,
569
- overlay_class: _propTypes.default.string,
570
- closeModal: _propTypes.default.func.isRequired,
571
- className: _propTypes.default.string,
572
- children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func])
573
- } : void 0;
574
-
575
- function getListOfModalRoots() {
576
- var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
577
-
578
- if (typeof window !== 'undefined') {
579
- try {
580
- var stack = window.__modalStack || [];
581
-
582
- if (index !== null) {
583
- if (index === -1 && stack.length) {
584
- return stack[stack.length - 1];
585
- } else if (index > -1) {
586
- return stack[index];
587
- }
588
- }
589
-
590
- return stack;
591
- } catch (e) {
592
- (0, _componentHelper.warn)(e);
593
- }
594
- }
595
-
596
- return [];
597
- }
499
+ exports.default = ModalContent;