@dnb/eufemia 10.37.0 → 10.38.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 (345) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/cjs/components/accordion/Accordion.d.ts +13 -3
  3. package/cjs/components/accordion/Accordion.js +14 -9
  4. package/cjs/components/accordion/Accordion.js.map +1 -1
  5. package/cjs/components/accordion/AccordionContext.d.ts +2 -0
  6. package/cjs/components/accordion/AccordionContext.js.map +1 -1
  7. package/cjs/components/accordion/AccordionDocs.js +5 -0
  8. package/cjs/components/accordion/AccordionDocs.js.map +1 -1
  9. package/cjs/components/accordion/AccordionGroup.js +6 -3
  10. package/cjs/components/accordion/AccordionGroup.js.map +1 -1
  11. package/cjs/components/accordion/AccordionProviderContext.d.ts +2 -0
  12. package/cjs/components/accordion/AccordionProviderContext.js.map +1 -1
  13. package/cjs/components/accordion/AccordionStore.d.ts +2 -0
  14. package/cjs/components/accordion/AccordionStore.js +1 -1
  15. package/cjs/components/accordion/AccordionStore.js.map +1 -1
  16. package/cjs/components/accordion/style/themes/dnb-accordion-theme-ui.css +1 -0
  17. package/cjs/components/accordion/style/themes/dnb-accordion-theme-ui.min.css +1 -1
  18. package/cjs/components/accordion/style/themes/dnb-accordion-theme-ui.scss +3 -0
  19. package/cjs/components/button/Button.d.ts +1 -1
  20. package/cjs/components/card/Card.js +4 -3
  21. package/cjs/components/card/Card.js.map +1 -1
  22. package/cjs/components/card/style/dnb-card.css +16 -0
  23. package/cjs/components/card/style/dnb-card.min.css +1 -1
  24. package/cjs/components/card/style/dnb-card.scss +17 -0
  25. package/cjs/components/card/style/themes/dnb-card-theme-sbanken.css +4 -4
  26. package/cjs/components/card/style/themes/dnb-card-theme-sbanken.min.css +1 -1
  27. package/cjs/components/card/style/themes/dnb-card-theme-sbanken.scss +3 -5
  28. package/cjs/components/card/style/themes/dnb-card-theme-ui.css +4 -7
  29. package/cjs/components/card/style/themes/dnb-card-theme-ui.min.css +1 -1
  30. package/cjs/components/card/style/themes/dnb-card-theme-ui.scss +3 -7
  31. package/cjs/components/checkbox/style/dnb-checkbox.scss +1 -1
  32. package/cjs/components/height-animation/HeightAnimation.d.ts +1 -1
  33. package/cjs/components/height-animation/HeightAnimation.js +6 -2
  34. package/cjs/components/height-animation/HeightAnimation.js.map +1 -1
  35. package/cjs/components/height-animation/HeightAnimationDocs.d.ts +3 -0
  36. package/cjs/components/height-animation/HeightAnimationDocs.js +83 -0
  37. package/cjs/components/height-animation/HeightAnimationDocs.js.map +1 -0
  38. package/cjs/components/height-animation/style/dnb-height-animation.css +3 -2
  39. package/cjs/components/height-animation/style/dnb-height-animation.min.css +1 -1
  40. package/cjs/components/height-animation/style/dnb-height-animation.scss +3 -2
  41. package/cjs/components/height-animation/useHeightAnimation.d.ts +6 -1
  42. package/cjs/components/height-animation/useHeightAnimation.js +36 -6
  43. package/cjs/components/height-animation/useHeightAnimation.js.map +1 -1
  44. package/cjs/components/radio/RadioGroup.js +4 -2
  45. package/cjs/components/radio/RadioGroup.js.map +1 -1
  46. package/cjs/components/radio/style/dnb-radio.css +8 -5
  47. package/cjs/components/radio/style/dnb-radio.min.css +1 -1
  48. package/cjs/components/radio/style/dnb-radio.scss +11 -13
  49. package/cjs/components/section/Section.js +3 -0
  50. package/cjs/components/section/Section.js.map +1 -1
  51. package/cjs/components/section/style/dnb-section.scss +2 -0
  52. package/cjs/components/toggle-button/ToggleButtonGroup.js +6 -3
  53. package/cjs/components/toggle-button/ToggleButtonGroup.js.map +1 -1
  54. package/cjs/components/toggle-button/style/dnb-toggle-button.css +3 -3
  55. package/cjs/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  56. package/cjs/components/toggle-button/style/dnb-toggle-button.scss +6 -2
  57. package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.d.ts +14 -0
  58. package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.js +90 -31
  59. package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.js.map +1 -1
  60. package/cjs/extensions/forms/Field/ArraySelection/style/dnb-array-selection.css +12 -3
  61. package/cjs/extensions/forms/Field/ArraySelection/style/dnb-array-selection.min.css +1 -1
  62. package/cjs/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss +14 -3
  63. package/cjs/extensions/forms/Field/Selection/Selection.d.ts +15 -3
  64. package/cjs/extensions/forms/Field/Selection/Selection.js +71 -42
  65. package/cjs/extensions/forms/Field/Selection/Selection.js.map +1 -1
  66. package/cjs/extensions/forms/Field/Selection/style/dnb-selection.css +9 -0
  67. package/cjs/extensions/forms/Field/Selection/style/dnb-selection.min.css +1 -1
  68. package/cjs/extensions/forms/Field/Selection/style/dnb-selection.scss +16 -0
  69. package/cjs/extensions/forms/Form/Visibility/Visibility.d.ts +3 -1
  70. package/cjs/extensions/forms/Form/Visibility/Visibility.js +4 -2
  71. package/cjs/extensions/forms/Form/Visibility/Visibility.js.map +1 -1
  72. package/cjs/extensions/forms/Form/Visibility/VisibilityDocs.js +5 -0
  73. package/cjs/extensions/forms/Form/Visibility/VisibilityDocs.js.map +1 -1
  74. package/cjs/extensions/forms/style/dnb-forms.css +21 -3
  75. package/cjs/extensions/forms/style/dnb-forms.min.css +1 -1
  76. package/cjs/extensions/forms/types.d.ts +1 -1
  77. package/cjs/extensions/forms/types.js.map +1 -1
  78. package/cjs/shared/Eufemia.d.ts +1 -1
  79. package/cjs/shared/Eufemia.js +2 -2
  80. package/cjs/shared/Eufemia.js.map +1 -1
  81. package/cjs/style/core/scopes.scss +1 -1
  82. package/cjs/style/dnb-ui-basis.css +1 -1
  83. package/cjs/style/dnb-ui-basis.min.css +1 -1
  84. package/cjs/style/dnb-ui-body.css +1 -1
  85. package/cjs/style/dnb-ui-body.min.css +1 -1
  86. package/cjs/style/dnb-ui-components.css +51 -13
  87. package/cjs/style/dnb-ui-components.min.css +3 -3
  88. package/cjs/style/dnb-ui-core.css +1 -1
  89. package/cjs/style/dnb-ui-core.min.css +1 -1
  90. package/cjs/style/dnb-ui-extensions.css +21 -3
  91. package/cjs/style/dnb-ui-extensions.min.css +1 -1
  92. package/cjs/style/dnb-ui-forms.css +21 -3
  93. package/cjs/style/dnb-ui-forms.min.css +1 -1
  94. package/cjs/style/themes/theme-eiendom/eiendom-theme-components.css +77 -23
  95. package/cjs/style/themes/theme-eiendom/eiendom-theme-components.min.css +5 -5
  96. package/cjs/style/themes/theme-eiendom/eiendom-theme-extensions.css +21 -3
  97. package/cjs/style/themes/theme-eiendom/eiendom-theme-extensions.min.css +1 -1
  98. package/cjs/style/themes/theme-eiendom/eiendom-theme-forms.css +21 -3
  99. package/cjs/style/themes/theme-eiendom/eiendom-theme-forms.min.css +1 -1
  100. package/cjs/style/themes/theme-sbanken/fonts.scss +1 -1
  101. package/cjs/style/themes/theme-sbanken/sbanken-theme-components.css +76 -20
  102. package/cjs/style/themes/theme-sbanken/sbanken-theme-components.min.css +4 -4
  103. package/cjs/style/themes/theme-sbanken/sbanken-theme-extensions.css +21 -3
  104. package/cjs/style/themes/theme-sbanken/sbanken-theme-extensions.min.css +1 -1
  105. package/cjs/style/themes/theme-sbanken/sbanken-theme-forms.css +21 -3
  106. package/cjs/style/themes/theme-sbanken/sbanken-theme-forms.min.css +1 -1
  107. package/cjs/style/themes/theme-ui/ui-theme-components.css +77 -23
  108. package/cjs/style/themes/theme-ui/ui-theme-components.min.css +5 -5
  109. package/cjs/style/themes/theme-ui/ui-theme-extensions.css +21 -3
  110. package/cjs/style/themes/theme-ui/ui-theme-extensions.min.css +1 -1
  111. package/cjs/style/themes/theme-ui/ui-theme-forms.css +21 -3
  112. package/cjs/style/themes/theme-ui/ui-theme-forms.min.css +1 -1
  113. package/components/accordion/Accordion.d.ts +13 -3
  114. package/components/accordion/Accordion.js +15 -10
  115. package/components/accordion/Accordion.js.map +1 -1
  116. package/components/accordion/AccordionContext.d.ts +2 -0
  117. package/components/accordion/AccordionContext.js.map +1 -1
  118. package/components/accordion/AccordionDocs.js +5 -0
  119. package/components/accordion/AccordionDocs.js.map +1 -1
  120. package/components/accordion/AccordionGroup.js +6 -3
  121. package/components/accordion/AccordionGroup.js.map +1 -1
  122. package/components/accordion/AccordionProviderContext.d.ts +2 -0
  123. package/components/accordion/AccordionProviderContext.js.map +1 -1
  124. package/components/accordion/AccordionStore.d.ts +2 -0
  125. package/components/accordion/AccordionStore.js +1 -1
  126. package/components/accordion/AccordionStore.js.map +1 -1
  127. package/components/accordion/style/themes/dnb-accordion-theme-ui.css +1 -0
  128. package/components/accordion/style/themes/dnb-accordion-theme-ui.min.css +1 -1
  129. package/components/accordion/style/themes/dnb-accordion-theme-ui.scss +3 -0
  130. package/components/button/Button.d.ts +1 -1
  131. package/components/card/Card.js +4 -3
  132. package/components/card/Card.js.map +1 -1
  133. package/components/card/style/dnb-card.css +16 -0
  134. package/components/card/style/dnb-card.min.css +1 -1
  135. package/components/card/style/dnb-card.scss +17 -0
  136. package/components/card/style/themes/dnb-card-theme-sbanken.css +4 -4
  137. package/components/card/style/themes/dnb-card-theme-sbanken.min.css +1 -1
  138. package/components/card/style/themes/dnb-card-theme-sbanken.scss +3 -5
  139. package/components/card/style/themes/dnb-card-theme-ui.css +4 -7
  140. package/components/card/style/themes/dnb-card-theme-ui.min.css +1 -1
  141. package/components/card/style/themes/dnb-card-theme-ui.scss +3 -7
  142. package/components/checkbox/style/dnb-checkbox.scss +1 -1
  143. package/components/height-animation/HeightAnimation.d.ts +1 -1
  144. package/components/height-animation/HeightAnimation.js +6 -2
  145. package/components/height-animation/HeightAnimation.js.map +1 -1
  146. package/components/height-animation/HeightAnimationDocs.d.ts +3 -0
  147. package/components/height-animation/HeightAnimationDocs.js +75 -0
  148. package/components/height-animation/HeightAnimationDocs.js.map +1 -0
  149. package/components/height-animation/style/dnb-height-animation.css +3 -2
  150. package/components/height-animation/style/dnb-height-animation.min.css +1 -1
  151. package/components/height-animation/style/dnb-height-animation.scss +3 -2
  152. package/components/height-animation/useHeightAnimation.d.ts +6 -1
  153. package/components/height-animation/useHeightAnimation.js +37 -7
  154. package/components/height-animation/useHeightAnimation.js.map +1 -1
  155. package/components/radio/RadioGroup.js +4 -2
  156. package/components/radio/RadioGroup.js.map +1 -1
  157. package/components/radio/style/dnb-radio.css +8 -5
  158. package/components/radio/style/dnb-radio.min.css +1 -1
  159. package/components/radio/style/dnb-radio.scss +11 -13
  160. package/components/section/Section.js +3 -0
  161. package/components/section/Section.js.map +1 -1
  162. package/components/section/style/dnb-section.scss +2 -0
  163. package/components/toggle-button/ToggleButtonGroup.js +6 -3
  164. package/components/toggle-button/ToggleButtonGroup.js.map +1 -1
  165. package/components/toggle-button/style/dnb-toggle-button.css +3 -3
  166. package/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  167. package/components/toggle-button/style/dnb-toggle-button.scss +6 -2
  168. package/es/components/accordion/Accordion.d.ts +13 -3
  169. package/es/components/accordion/Accordion.js +15 -10
  170. package/es/components/accordion/Accordion.js.map +1 -1
  171. package/es/components/accordion/AccordionContext.d.ts +2 -0
  172. package/es/components/accordion/AccordionContext.js.map +1 -1
  173. package/es/components/accordion/AccordionDocs.js +5 -0
  174. package/es/components/accordion/AccordionDocs.js.map +1 -1
  175. package/es/components/accordion/AccordionGroup.js +6 -3
  176. package/es/components/accordion/AccordionGroup.js.map +1 -1
  177. package/es/components/accordion/AccordionProviderContext.d.ts +2 -0
  178. package/es/components/accordion/AccordionProviderContext.js.map +1 -1
  179. package/es/components/accordion/AccordionStore.d.ts +2 -0
  180. package/es/components/accordion/AccordionStore.js +1 -1
  181. package/es/components/accordion/AccordionStore.js.map +1 -1
  182. package/es/components/accordion/style/themes/dnb-accordion-theme-ui.css +1 -0
  183. package/es/components/accordion/style/themes/dnb-accordion-theme-ui.min.css +1 -1
  184. package/es/components/accordion/style/themes/dnb-accordion-theme-ui.scss +3 -0
  185. package/es/components/button/Button.d.ts +1 -1
  186. package/es/components/card/Card.js +4 -3
  187. package/es/components/card/Card.js.map +1 -1
  188. package/es/components/card/style/dnb-card.css +16 -0
  189. package/es/components/card/style/dnb-card.min.css +1 -1
  190. package/es/components/card/style/dnb-card.scss +17 -0
  191. package/es/components/card/style/themes/dnb-card-theme-sbanken.css +4 -4
  192. package/es/components/card/style/themes/dnb-card-theme-sbanken.min.css +1 -1
  193. package/es/components/card/style/themes/dnb-card-theme-sbanken.scss +3 -5
  194. package/es/components/card/style/themes/dnb-card-theme-ui.css +4 -7
  195. package/es/components/card/style/themes/dnb-card-theme-ui.min.css +1 -1
  196. package/es/components/card/style/themes/dnb-card-theme-ui.scss +3 -7
  197. package/es/components/checkbox/style/dnb-checkbox.scss +1 -1
  198. package/es/components/height-animation/HeightAnimation.d.ts +1 -1
  199. package/es/components/height-animation/HeightAnimation.js +6 -2
  200. package/es/components/height-animation/HeightAnimation.js.map +1 -1
  201. package/es/components/height-animation/HeightAnimationDocs.d.ts +3 -0
  202. package/es/components/height-animation/HeightAnimationDocs.js +75 -0
  203. package/es/components/height-animation/HeightAnimationDocs.js.map +1 -0
  204. package/es/components/height-animation/style/dnb-height-animation.css +3 -2
  205. package/es/components/height-animation/style/dnb-height-animation.min.css +1 -1
  206. package/es/components/height-animation/style/dnb-height-animation.scss +3 -2
  207. package/es/components/height-animation/useHeightAnimation.d.ts +6 -1
  208. package/es/components/height-animation/useHeightAnimation.js +37 -7
  209. package/es/components/height-animation/useHeightAnimation.js.map +1 -1
  210. package/es/components/radio/RadioGroup.js +4 -2
  211. package/es/components/radio/RadioGroup.js.map +1 -1
  212. package/es/components/radio/style/dnb-radio.css +8 -5
  213. package/es/components/radio/style/dnb-radio.min.css +1 -1
  214. package/es/components/radio/style/dnb-radio.scss +11 -13
  215. package/es/components/section/Section.js +3 -0
  216. package/es/components/section/Section.js.map +1 -1
  217. package/es/components/section/style/dnb-section.scss +2 -0
  218. package/es/components/toggle-button/ToggleButtonGroup.js +6 -3
  219. package/es/components/toggle-button/ToggleButtonGroup.js.map +1 -1
  220. package/es/components/toggle-button/style/dnb-toggle-button.css +3 -3
  221. package/es/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
  222. package/es/components/toggle-button/style/dnb-toggle-button.scss +6 -2
  223. package/es/extensions/forms/Field/ArraySelection/ArraySelection.d.ts +14 -0
  224. package/es/extensions/forms/Field/ArraySelection/ArraySelection.js +87 -29
  225. package/es/extensions/forms/Field/ArraySelection/ArraySelection.js.map +1 -1
  226. package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.css +12 -3
  227. package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.min.css +1 -1
  228. package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss +14 -3
  229. package/es/extensions/forms/Field/Selection/Selection.d.ts +15 -3
  230. package/es/extensions/forms/Field/Selection/Selection.js +68 -42
  231. package/es/extensions/forms/Field/Selection/Selection.js.map +1 -1
  232. package/es/extensions/forms/Field/Selection/style/dnb-selection.css +9 -0
  233. package/es/extensions/forms/Field/Selection/style/dnb-selection.min.css +1 -1
  234. package/es/extensions/forms/Field/Selection/style/dnb-selection.scss +16 -0
  235. package/es/extensions/forms/Form/Visibility/Visibility.d.ts +3 -1
  236. package/es/extensions/forms/Form/Visibility/Visibility.js +4 -2
  237. package/es/extensions/forms/Form/Visibility/Visibility.js.map +1 -1
  238. package/es/extensions/forms/Form/Visibility/VisibilityDocs.js +5 -0
  239. package/es/extensions/forms/Form/Visibility/VisibilityDocs.js.map +1 -1
  240. package/es/extensions/forms/style/dnb-forms.css +21 -3
  241. package/es/extensions/forms/style/dnb-forms.min.css +1 -1
  242. package/es/extensions/forms/types.d.ts +1 -1
  243. package/es/extensions/forms/types.js.map +1 -1
  244. package/es/shared/Eufemia.d.ts +1 -1
  245. package/es/shared/Eufemia.js +2 -2
  246. package/es/shared/Eufemia.js.map +1 -1
  247. package/es/style/core/scopes.scss +1 -1
  248. package/es/style/dnb-ui-basis.css +1 -1
  249. package/es/style/dnb-ui-basis.min.css +1 -1
  250. package/es/style/dnb-ui-body.css +1 -1
  251. package/es/style/dnb-ui-body.min.css +1 -1
  252. package/es/style/dnb-ui-components.css +51 -13
  253. package/es/style/dnb-ui-components.min.css +3 -3
  254. package/es/style/dnb-ui-core.css +1 -1
  255. package/es/style/dnb-ui-core.min.css +1 -1
  256. package/es/style/dnb-ui-extensions.css +21 -3
  257. package/es/style/dnb-ui-extensions.min.css +1 -1
  258. package/es/style/dnb-ui-forms.css +21 -3
  259. package/es/style/dnb-ui-forms.min.css +1 -1
  260. package/es/style/themes/theme-eiendom/eiendom-theme-components.css +77 -23
  261. package/es/style/themes/theme-eiendom/eiendom-theme-components.min.css +5 -5
  262. package/es/style/themes/theme-eiendom/eiendom-theme-extensions.css +21 -3
  263. package/es/style/themes/theme-eiendom/eiendom-theme-extensions.min.css +1 -1
  264. package/es/style/themes/theme-eiendom/eiendom-theme-forms.css +21 -3
  265. package/es/style/themes/theme-eiendom/eiendom-theme-forms.min.css +1 -1
  266. package/es/style/themes/theme-sbanken/fonts.scss +1 -1
  267. package/es/style/themes/theme-sbanken/sbanken-theme-components.css +76 -20
  268. package/es/style/themes/theme-sbanken/sbanken-theme-components.min.css +4 -4
  269. package/es/style/themes/theme-sbanken/sbanken-theme-extensions.css +21 -3
  270. package/es/style/themes/theme-sbanken/sbanken-theme-extensions.min.css +1 -1
  271. package/es/style/themes/theme-sbanken/sbanken-theme-forms.css +21 -3
  272. package/es/style/themes/theme-sbanken/sbanken-theme-forms.min.css +1 -1
  273. package/es/style/themes/theme-ui/ui-theme-components.css +77 -23
  274. package/es/style/themes/theme-ui/ui-theme-components.min.css +5 -5
  275. package/es/style/themes/theme-ui/ui-theme-extensions.css +21 -3
  276. package/es/style/themes/theme-ui/ui-theme-extensions.min.css +1 -1
  277. package/es/style/themes/theme-ui/ui-theme-forms.css +21 -3
  278. package/es/style/themes/theme-ui/ui-theme-forms.min.css +1 -1
  279. package/esm/dnb-ui-basis.min.mjs +1 -1
  280. package/esm/dnb-ui-components.min.mjs +1 -1
  281. package/esm/dnb-ui-elements.min.mjs +1 -1
  282. package/esm/dnb-ui-extensions.min.mjs +2 -2
  283. package/esm/dnb-ui-lib.min.mjs +1 -1
  284. package/extensions/forms/Field/ArraySelection/ArraySelection.d.ts +14 -0
  285. package/extensions/forms/Field/ArraySelection/ArraySelection.js +88 -29
  286. package/extensions/forms/Field/ArraySelection/ArraySelection.js.map +1 -1
  287. package/extensions/forms/Field/ArraySelection/style/dnb-array-selection.css +12 -3
  288. package/extensions/forms/Field/ArraySelection/style/dnb-array-selection.min.css +1 -1
  289. package/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss +14 -3
  290. package/extensions/forms/Field/Selection/Selection.d.ts +15 -3
  291. package/extensions/forms/Field/Selection/Selection.js +69 -42
  292. package/extensions/forms/Field/Selection/Selection.js.map +1 -1
  293. package/extensions/forms/Field/Selection/style/dnb-selection.css +9 -0
  294. package/extensions/forms/Field/Selection/style/dnb-selection.min.css +1 -1
  295. package/extensions/forms/Field/Selection/style/dnb-selection.scss +16 -0
  296. package/extensions/forms/Form/Visibility/Visibility.d.ts +3 -1
  297. package/extensions/forms/Form/Visibility/Visibility.js +4 -2
  298. package/extensions/forms/Form/Visibility/Visibility.js.map +1 -1
  299. package/extensions/forms/Form/Visibility/VisibilityDocs.js +5 -0
  300. package/extensions/forms/Form/Visibility/VisibilityDocs.js.map +1 -1
  301. package/extensions/forms/style/dnb-forms.css +21 -3
  302. package/extensions/forms/style/dnb-forms.min.css +1 -1
  303. package/extensions/forms/types.d.ts +1 -1
  304. package/extensions/forms/types.js.map +1 -1
  305. package/package.json +1 -1
  306. package/shared/Eufemia.d.ts +1 -1
  307. package/shared/Eufemia.js +2 -2
  308. package/shared/Eufemia.js.map +1 -1
  309. package/style/core/scopes.scss +1 -1
  310. package/style/dnb-ui-basis.css +1 -1
  311. package/style/dnb-ui-basis.min.css +1 -1
  312. package/style/dnb-ui-body.css +1 -1
  313. package/style/dnb-ui-body.min.css +1 -1
  314. package/style/dnb-ui-components.css +51 -13
  315. package/style/dnb-ui-components.min.css +3 -3
  316. package/style/dnb-ui-core.css +1 -1
  317. package/style/dnb-ui-core.min.css +1 -1
  318. package/style/dnb-ui-extensions.css +21 -3
  319. package/style/dnb-ui-extensions.min.css +1 -1
  320. package/style/dnb-ui-forms.css +21 -3
  321. package/style/dnb-ui-forms.min.css +1 -1
  322. package/style/themes/theme-eiendom/eiendom-theme-components.css +77 -23
  323. package/style/themes/theme-eiendom/eiendom-theme-components.min.css +5 -5
  324. package/style/themes/theme-eiendom/eiendom-theme-extensions.css +21 -3
  325. package/style/themes/theme-eiendom/eiendom-theme-extensions.min.css +1 -1
  326. package/style/themes/theme-eiendom/eiendom-theme-forms.css +21 -3
  327. package/style/themes/theme-eiendom/eiendom-theme-forms.min.css +1 -1
  328. package/style/themes/theme-sbanken/fonts.scss +1 -1
  329. package/style/themes/theme-sbanken/sbanken-theme-components.css +76 -20
  330. package/style/themes/theme-sbanken/sbanken-theme-components.min.css +4 -4
  331. package/style/themes/theme-sbanken/sbanken-theme-extensions.css +21 -3
  332. package/style/themes/theme-sbanken/sbanken-theme-extensions.min.css +1 -1
  333. package/style/themes/theme-sbanken/sbanken-theme-forms.css +21 -3
  334. package/style/themes/theme-sbanken/sbanken-theme-forms.min.css +1 -1
  335. package/style/themes/theme-ui/ui-theme-components.css +77 -23
  336. package/style/themes/theme-ui/ui-theme-components.min.css +5 -5
  337. package/style/themes/theme-ui/ui-theme-extensions.css +21 -3
  338. package/style/themes/theme-ui/ui-theme-extensions.min.css +1 -1
  339. package/style/themes/theme-ui/ui-theme-forms.css +21 -3
  340. package/style/themes/theme-ui/ui-theme-forms.min.css +1 -1
  341. package/umd/dnb-ui-basis.min.js +1 -1
  342. package/umd/dnb-ui-components.min.js +1 -1
  343. package/umd/dnb-ui-elements.min.js +1 -1
  344. package/umd/dnb-ui-extensions.min.js +3 -3
  345. package/umd/dnb-ui-lib.min.js +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"AccordionStore.js","names":["_componentHelper","require","_defineProperty","obj","key","value","_toPropertyKey","Object","defineProperty","enumerable","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","AccordionStore","constructor","id","_id","_instances","onChange","_ref","forEach","inst","close","addInstance","instance","push","removeInstance","filter","exports","Store","_ref2","group","storeId","arguments","length","saveState","expanded","opts","store","getData","force","window","localStorage","setItem","JSON","stringify","e","rememberWarning","prototype","hasOwnProperty","parse","getItem","getState","state","flush","type","warn"],"sources":["../../../../src/components/accordion/AccordionStore.ts"],"sourcesContent":["import { warn } from '../../shared/component-helper'\n\ntype AccordionStoreInstance = {\n _id: string\n close: () => void\n}\nexport class AccordionStore {\n _instances: Array<AccordionStoreInstance>\n _id: string\n constructor(id: string) {\n this._id = id\n this._instances = []\n }\n onChange({ id }: { id: string }) {\n this._instances.forEach((inst) => {\n if (inst._id !== id) {\n inst.close()\n }\n })\n }\n addInstance(instance: AccordionStoreInstance) {\n this._instances.push(instance)\n }\n removeInstance(instance) {\n this._instances = this._instances.filter((inst) => inst !== instance)\n }\n}\n\nexport type StoreDataReturn = {\n id: string\n expanded: boolean\n}\nexport type StoreOptions = {\n force?: boolean\n}\n\ntype StoreProps = {\n id?: string\n group?: string\n}\n\nexport class Store {\n id?: string\n group?: string\n\n constructor({ id, group }: StoreProps) {\n this.id = id\n this.group = group\n return this\n }\n\n storeId(id = this.id) {\n if (this.group) {\n // Skip using the random ID\n if (this.group[0] === '#') {\n return null\n }\n id = this.group\n }\n return `dnb-accordion-${id}`\n }\n\n saveState(expanded: boolean, id = this.id, opts: StoreOptions = {}) {\n if (id) {\n try {\n const store = this.getData() || ({} as StoreDataReturn)\n\n if (this.group) {\n if (expanded) {\n store.id = id\n } else if (opts && opts.force) {\n store.id = null\n }\n } else {\n store.expanded = expanded\n }\n\n const storeId = this.storeId(id)\n if (storeId) {\n window.localStorage.setItem(storeId, JSON.stringify(store))\n }\n } catch (e) {\n //\n }\n } else {\n rememberWarning()\n }\n }\n\n getData(id = this.id): StoreDataReturn {\n const storeId = this.storeId(id)\n\n if (storeId) {\n try {\n if (\n Object.prototype.hasOwnProperty.call(\n window.localStorage,\n storeId\n )\n ) {\n return JSON.parse(window.localStorage.getItem(storeId))\n }\n } catch (e) {\n //\n }\n }\n\n return null\n }\n\n getState(id = this.id) {\n let state = null\n\n const store = this.getData(id)\n\n if (store) {\n if (typeof store.id !== 'undefined') {\n state = id === store.id\n } else if (typeof store.expanded !== 'undefined') {\n state = store.expanded\n }\n }\n\n return state\n }\n\n flush(id = this.id) {\n if (id) {\n try {\n const storeId = this.storeId(id)\n if (storeId) {\n window.localStorage.setItem(storeId, null)\n }\n } catch (e) {\n //\n }\n }\n }\n}\n\nexport function rememberWarning(type = 'accordion') {\n warn(`Missing \"id\" prop the ${type}! \"remember_state\" is enabled.`)\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"AccordionStore.js","names":["_componentHelper","require","_defineProperty","obj","key","value","_toPropertyKey","Object","defineProperty","enumerable","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","AccordionStore","constructor","id","_id","_instances","onChange","_ref","forEach","inst","context","expandBehaviour","close","addInstance","instance","push","removeInstance","filter","exports","Store","_ref2","group","storeId","arguments","length","saveState","expanded","opts","store","getData","force","window","localStorage","setItem","JSON","stringify","e","rememberWarning","prototype","hasOwnProperty","parse","getItem","getState","state","flush","type","warn"],"sources":["../../../../src/components/accordion/AccordionStore.ts"],"sourcesContent":["import { warn } from '../../shared/component-helper'\nimport { AccordionContextProps } from './AccordionContext'\n\ntype AccordionStoreInstance = {\n context: AccordionContextProps\n _id: string\n close: () => void\n}\nexport class AccordionStore {\n _instances: Array<AccordionStoreInstance>\n _id: string\n constructor(id: string) {\n this._id = id\n this._instances = []\n }\n onChange({ id }: { id: string }) {\n this._instances.forEach((inst) => {\n if (inst.context.expandBehaviour === 'single' && inst._id !== id) {\n inst.close()\n }\n })\n }\n addInstance(instance: AccordionStoreInstance) {\n this._instances.push(instance)\n }\n removeInstance(instance) {\n this._instances = this._instances.filter((inst) => inst !== instance)\n }\n}\n\nexport type StoreDataReturn = {\n id: string\n expanded: boolean\n}\nexport type StoreOptions = {\n force?: boolean\n}\n\ntype StoreProps = {\n id?: string\n group?: string\n}\n\nexport class Store {\n id?: string\n group?: string\n\n constructor({ id, group }: StoreProps) {\n this.id = id\n this.group = group\n return this\n }\n\n storeId(id = this.id) {\n if (this.group) {\n // Skip using the random ID\n if (this.group[0] === '#') {\n return null\n }\n id = this.group\n }\n return `dnb-accordion-${id}`\n }\n\n saveState(expanded: boolean, id = this.id, opts: StoreOptions = {}) {\n if (id) {\n try {\n const store = this.getData() || ({} as StoreDataReturn)\n\n if (this.group) {\n if (expanded) {\n store.id = id\n } else if (opts && opts.force) {\n store.id = null\n }\n } else {\n store.expanded = expanded\n }\n\n const storeId = this.storeId(id)\n if (storeId) {\n window.localStorage.setItem(storeId, JSON.stringify(store))\n }\n } catch (e) {\n //\n }\n } else {\n rememberWarning()\n }\n }\n\n getData(id = this.id): StoreDataReturn {\n const storeId = this.storeId(id)\n\n if (storeId) {\n try {\n if (\n Object.prototype.hasOwnProperty.call(\n window.localStorage,\n storeId\n )\n ) {\n return JSON.parse(window.localStorage.getItem(storeId))\n }\n } catch (e) {\n //\n }\n }\n\n return null\n }\n\n getState(id = this.id) {\n let state = null\n\n const store = this.getData(id)\n\n if (store) {\n if (typeof store.id !== 'undefined') {\n state = id === store.id\n } else if (typeof store.expanded !== 'undefined') {\n state = store.expanded\n }\n }\n\n return state\n }\n\n flush(id = this.id) {\n if (id) {\n try {\n const storeId = this.storeId(id)\n if (storeId) {\n window.localStorage.setItem(storeId, null)\n }\n } catch (e) {\n //\n }\n }\n }\n}\n\nexport function rememberWarning(type = 'accordion') {\n warn(`Missing \"id\" prop the ${type}! \"remember_state\" is enabled.`)\n}\n"],"mappings":"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"}
@@ -85,6 +85,7 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover:not([di
85
85
  --ui-accordion-after-click-background: var(--color-sea-green);
86
86
  --ui-accordion-after-click-border-color: var(--color-sea-green);
87
87
  --ui-accordion-after-click-description-color: var(--color-white);
88
+ z-index: 1;
88
89
  }
89
90
  .dnb-accordion__header--outlined:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active[disabled] {
90
91
  cursor: not-allowed;
@@ -8,7 +8,7 @@
8
8
  --ui-accordion-border-color
9
9
  );--ui-accordion-expanded-description-color:var(
10
10
  --ui-accordion-description-color
11
- );--ui-accordion-after-click-color:var(--color-white);--ui-accordion-after-click-background:var(--color-sea-green);--ui-accordion-after-click-border-color:var(--color-sea-green);--ui-accordion-after-click-description-color:var(--color-white)}.dnb-accordion__header--outlined:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active[disabled]{cursor:not-allowed}.dnb-accordion__header--outlined:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active:not([disabled]){--accordion-border-width:0.0625rem;--ui-accordion-background:var(--color-pistachio);--ui-accordion-border-inset:inset}.dnb-accordion__header--filled{--accordion-border-width:0.125rem;--accordion-title-font-weight--expanded:var(--font-weight-basis);--ui-accordion-color:var(--color-emerald-green);--ui-accordion-background:var(--color-pistachio);--ui-accordion-border-color:var(--color-pistachio);--ui-accordion-description-color:var(--color-black-55)}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover:not([disabled]){--ui-accordion-background:var(--color-white)}.dnb-accordion__header--filled:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active[disabled]{cursor:not-allowed}.dnb-accordion__header--filled:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active:not([disabled]){--ui-accordion-color:var(--color-white);--ui-accordion-background:var(--color-sea-green);--ui-accordion-border-color:var(--color-sea-green);--ui-accordion-description-color:ar(--color-white)}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:not([disabled]){--ui-accordion-border-color:var(--color-sea-green)}.dnb-accordion__header--expanded{--ui-accordion-color--override:var(
11
+ );--ui-accordion-after-click-color:var(--color-white);--ui-accordion-after-click-background:var(--color-sea-green);--ui-accordion-after-click-border-color:var(--color-sea-green);--ui-accordion-after-click-description-color:var(--color-white);z-index:1}.dnb-accordion__header--outlined:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active[disabled]{cursor:not-allowed}.dnb-accordion__header--outlined:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active:not([disabled]){--accordion-border-width:0.0625rem;--ui-accordion-background:var(--color-pistachio);--ui-accordion-border-inset:inset}.dnb-accordion__header--filled{--accordion-border-width:0.125rem;--accordion-title-font-weight--expanded:var(--font-weight-basis);--ui-accordion-color:var(--color-emerald-green);--ui-accordion-background:var(--color-pistachio);--ui-accordion-border-color:var(--color-pistachio);--ui-accordion-description-color:var(--color-black-55)}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover:not([disabled]){--ui-accordion-background:var(--color-white)}.dnb-accordion__header--filled:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active[disabled]{cursor:not-allowed}.dnb-accordion__header--filled:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active:not([disabled]){--ui-accordion-color:var(--color-white);--ui-accordion-background:var(--color-sea-green);--ui-accordion-border-color:var(--color-sea-green);--ui-accordion-description-color:ar(--color-white)}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:not([disabled]){--ui-accordion-border-color:var(--color-sea-green)}.dnb-accordion__header--expanded{--ui-accordion-color--override:var(
12
12
  --ui-accordion-expanded-color--override,var(--ui-accordion-expanded-color)
13
13
  );--ui-accordion-background--override:var(
14
14
  --ui-accordion-expanded-background--override,var(--ui-accordion-expanded-background)
@@ -85,6 +85,7 @@
85
85
  --ui-accordion-background: var(--color-white);
86
86
  --ui-accordion-border-color: var(--color-emerald-green);
87
87
  --ui-accordion-description-color: var(--color-black-55);
88
+ // Removes the optional 'inset' property on the box-shadow border, on hover.
88
89
  --ui-accordion-border-inset: ;
89
90
 
90
91
  // state = expanded
@@ -102,6 +103,8 @@
102
103
  --ui-accordion-after-click-background: var(--color-sea-green);
103
104
  --ui-accordion-after-click-border-color: var(--color-sea-green);
104
105
  --ui-accordion-after-click-description-color: var(--color-white);
106
+
107
+ z-index: 1;
105
108
  }
106
109
 
107
110
  @include active() {
@@ -60,7 +60,7 @@ export type ButtonProps = {
60
60
  */
61
61
  variant?: ButtonVariant;
62
62
  /**
63
- * The size of the button. For now there is "medium", "default" and "large".
63
+ * The size of the button. For now there is "small", "medium", "default" and "large".
64
64
  */
65
65
  size?: ButtonSize;
66
66
  /**
@@ -11,7 +11,7 @@ var _Section = require("../section/Section");
11
11
  var _componentHelper = require("../../shared/component-helper");
12
12
  var _useId = _interopRequireDefault(require("../../shared/helpers/useId"));
13
13
  var _Space = _interopRequireDefault(require("../Space"));
14
- const _excluded = ["className", "stack", "direction", "gap", "spacing", "innerSpace", "alignSelf", "divider", "rowGap", "responsive", "filled", "title", "children"];
14
+ const _excluded = ["className", "stack", "direction", "gap", "spacing", "innerSpace", "alignSelf", "align", "divider", "rowGap", "responsive", "filled", "title", "children"];
15
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
16
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
17
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -30,6 +30,7 @@ function Card(props) {
30
30
  spacing,
31
31
  innerSpace,
32
32
  alignSelf = 'stretch',
33
+ align,
33
34
  divider = 'space',
34
35
  rowGap,
35
36
  responsive = true,
@@ -63,7 +64,7 @@ function Card(props) {
63
64
  className: (0, _classnames.default)('dnb-card', className, responsive && 'dnb-card--responsive', filled && 'dnb-card--filled'),
64
65
  breakout: responsive ? trueWhenSmall : false,
65
66
  roundedCorner: responsive ? falseWhenSmall : true,
66
- outline: true,
67
+ outline: '--outline-card-color',
67
68
  innerSpace: innerSpace !== null && innerSpace !== void 0 ? innerSpace : {
68
69
  small: smallSpace,
69
70
  medium: basisSpace,
@@ -79,7 +80,7 @@ function Card(props) {
79
80
  direction: direction !== null && direction !== void 0 ? direction : 'vertical',
80
81
  divider: divider,
81
82
  alignSelf: alignSelf,
82
- align: stack ? 'stretch' : undefined,
83
+ align: stack ? 'stretch' : align,
83
84
  wrap: !stack,
84
85
  gap: stack ? 'medium' : (gap !== null && gap !== void 0 ? gap : spacing) || false,
85
86
  rowGap: rowGap || false
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_Flex","_Section","_componentHelper","_useId","_Space","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Card","props","className","stack","direction","gap","spacing","innerSpace","alignSelf","divider","rowGap","responsive","filled","title","children","rest","titleId","useId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","params","SectionParams","classnames","breakout","roundedCorner","outline","combineLabelledBy","createElement","Item","element","Container","align","wrap","id","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\nimport Space from '../Space'\n\nexport type Props = {\n /**\n * Define a title that appears on top of the Card\n */\n title?: React.ReactNode\n\n /**\n * Define if the Card should behave responsive. Defaults to `true`\n */\n responsive?: boolean\n\n /**\n * Define if the Card should get the same background color as the outline border\n */\n filled?: boolean\n} & FlexContainerProps &\n FlexItemProps & {\n stack?: boolean\n } & SpaceProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size'>\n\nfunction Card(props: Props) {\n const {\n className,\n stack,\n direction,\n gap,\n spacing,\n innerSpace,\n alignSelf = 'stretch',\n divider = 'space',\n rowGap,\n responsive = true,\n filled,\n title,\n children,\n ...rest\n } = props\n\n const titleId = useId()\n const falseWhenSmall = { small: false, medium: true, large: true }\n const trueWhenSmall = { small: true, medium: false, large: false }\n const basisSpace = {\n top: 'medium',\n right: 'medium',\n bottom: 'large',\n left: 'medium',\n }\n const smallSpace = responsive\n ? {\n ...basisSpace,\n right: 0,\n left: 0,\n }\n : basisSpace\n\n const params = SectionParams({\n className: classnames(\n 'dnb-card',\n className,\n responsive && 'dnb-card--responsive',\n filled && 'dnb-card--filled'\n ),\n breakout: responsive ? trueWhenSmall : false,\n roundedCorner: responsive ? falseWhenSmall : true,\n outline: true,\n innerSpace:\n innerSpace ??\n ({\n small: smallSpace,\n medium: basisSpace,\n large: basisSpace,\n } as SpaceTypeMedia),\n ...(rest as SectionProps),\n 'aria-labelledby': combineLabelledBy(rest, title && titleId),\n })\n\n return (\n <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n <Flex.Container\n direction={direction ?? 'vertical'}\n divider={divider}\n alignSelf={alignSelf}\n align={stack ? 'stretch' : undefined}\n wrap={!stack}\n gap={stack ? 'medium' : (gap ?? spacing) || false}\n rowGap={rowGap || false}\n >\n {title && (\n <Space id={titleId} className=\"dnb-card__title\">\n {title}\n </Space>\n )}\n {children}\n </Flex.Container>\n </Flex.Item>\n )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}
1
+ {"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_Flex","_Section","_componentHelper","_useId","_Space","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Card","props","className","stack","direction","gap","spacing","innerSpace","alignSelf","align","divider","rowGap","responsive","filled","title","children","rest","titleId","useId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","params","SectionParams","classnames","breakout","roundedCorner","outline","combineLabelledBy","createElement","Item","element","Container","wrap","id","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\nimport Space from '../Space'\n\nexport type Props = {\n /**\n * Define a title that appears on top of the Card\n */\n title?: React.ReactNode\n\n /**\n * Define if the Card should behave responsive. Defaults to `true`\n */\n responsive?: boolean\n\n /**\n * Define if the Card should get the same background color as the outline border\n */\n filled?: boolean\n} & FlexContainerProps &\n FlexItemProps & {\n stack?: boolean\n } & SpaceProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size'>\n\nfunction Card(props: Props) {\n const {\n className,\n stack,\n direction,\n gap,\n spacing,\n innerSpace,\n alignSelf = 'stretch',\n align,\n divider = 'space',\n rowGap,\n responsive = true,\n filled,\n title,\n children,\n ...rest\n } = props\n\n const titleId = useId()\n const falseWhenSmall = { small: false, medium: true, large: true }\n const trueWhenSmall = { small: true, medium: false, large: false }\n const basisSpace = {\n top: 'medium',\n right: 'medium',\n bottom: 'large',\n left: 'medium',\n }\n const smallSpace = responsive\n ? {\n ...basisSpace,\n right: 0,\n left: 0,\n }\n : basisSpace\n\n const params = SectionParams({\n className: classnames(\n 'dnb-card',\n className,\n responsive && 'dnb-card--responsive',\n filled && 'dnb-card--filled'\n ),\n breakout: responsive ? trueWhenSmall : false,\n roundedCorner: responsive ? falseWhenSmall : true,\n outline: '--outline-card-color',\n innerSpace:\n innerSpace ??\n ({\n small: smallSpace,\n medium: basisSpace,\n large: basisSpace,\n } as SpaceTypeMedia),\n ...(rest as SectionProps),\n 'aria-labelledby': combineLabelledBy(rest, title && titleId),\n })\n\n return (\n <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n <Flex.Container\n direction={direction ?? 'vertical'}\n divider={divider}\n alignSelf={alignSelf}\n align={stack ? 'stretch' : align}\n wrap={!stack}\n gap={stack ? 'medium' : (gap ?? spacing) || false}\n rowGap={rowGap || false}\n >\n {title && (\n <Space id={titleId} className=\"dnb-card__title\">\n {title}\n </Space>\n )}\n {children}\n </Flex.Container>\n </Flex.Item>\n )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}
@@ -17,8 +17,24 @@
17
17
  padding: 1rem;
18
18
  }
19
19
  .dnb-card.dnb-section {
20
+ --outline-color: var(--card-outline-color);
21
+ --outline-width: var(--card-outline-width);
22
+ --background-color: var(--card-background-color);
20
23
  background-color: var(--background-color);
21
24
  }
25
+ .dnb-card .dnb-section {
26
+ z-index: 1;
27
+ }
28
+ @media screen and (min-width: 40em) {
29
+ .dnb-card {
30
+ --nested-space-l: calc(var(--padding-left, 0px) * -1);
31
+ --nested-space-r: calc(var(--padding-right, 0px) * -1);
32
+ }
33
+ .dnb-card .dnb-section::after {
34
+ --left: var(--nested-space-l);
35
+ --width: calc(100% - var(--nested-space-r) * 2);
36
+ }
37
+ }
22
38
  .dnb-card--filled.dnb-card.dnb-section {
23
39
  --background-color: var(--outline-color);
24
40
  }
@@ -1 +1 @@
1
- .dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{background-color:var(--background-color)}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}
1
+ .dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{--outline-color:var(--card-outline-color);--outline-width:var(--card-outline-width);--background-color:var(--card-background-color);background-color:var(--background-color)}.dnb-card .dnb-section{z-index:1}@media screen and (min-width:40em){.dnb-card{--nested-space-l:calc(var(--padding-left, 0px)*-1);--nested-space-r:calc(var(--padding-right, 0px)*-1)}.dnb-card .dnb-section:after{--left:var(--nested-space-l);--width:calc(100% - var(--nested-space-r)*2)}}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}
@@ -20,9 +20,26 @@
20
20
  }
21
21
 
22
22
  &.dnb-section {
23
+ --outline-color: var(--card-outline-color);
24
+ --outline-width: var(--card-outline-width);
25
+ --background-color: var(--card-background-color);
26
+
23
27
  background-color: var(--background-color);
24
28
  }
25
29
 
30
+ & .dnb-section {
31
+ z-index: 1;
32
+ }
33
+ @include allAbove(small) {
34
+ // These vars needs to be declared outside of the nested .dnb-section
35
+ --nested-space-l: calc(var(--padding-left, 0px) * -1);
36
+ --nested-space-r: calc(var(--padding-right, 0px) * -1);
37
+ & .dnb-section::after {
38
+ --left: var(--nested-space-l);
39
+ --width: calc(100% - var(--nested-space-r) * 2);
40
+ }
41
+ }
42
+
26
43
  &--filled#{&}.dnb-section {
27
44
  --background-color: var(--outline-color);
28
45
  }
@@ -1,5 +1,5 @@
1
- .dnb-card.dnb-section {
2
- --outline-color: var(--border-color, var(--sb-color-gray-light));
3
- --outline-width: 0.0625rem;
4
- --background-color: var(--sb-color-white);
1
+ .dnb-card {
2
+ --card-outline-color: var(--border-color, var(--sb-color-gray-light));
3
+ --card-outline-width: 0.0625rem;
4
+ --card-background-color: var(--sb-color-white);
5
5
  }
@@ -1 +1 @@
1
- .dnb-card.dnb-section{--outline-color:var(--border-color,var(--sb-color-gray-light));--outline-width:0.0625rem;--background-color:var(--sb-color-white)}
1
+ .dnb-card{--card-outline-color:var(--border-color,var(--sb-color-gray-light));--card-outline-width:0.0625rem;--card-background-color:var(--sb-color-white)}
@@ -1,7 +1,5 @@
1
1
  .dnb-card {
2
- &.dnb-section {
3
- --outline-color: var(--border-color, var(--sb-color-gray-light));
4
- --outline-width: 0.0625rem;
5
- --background-color: var(--sb-color-white);
6
- }
2
+ --card-outline-color: var(--border-color, var(--sb-color-gray-light));
3
+ --card-outline-width: 0.0625rem;
4
+ --card-background-color: var(--sb-color-white);
7
5
  }
@@ -1,8 +1,5 @@
1
- /*
2
- * Utilities
3
- */
4
- .dnb-card.dnb-section {
5
- --outline-color: var(--border-color, var(--color-lavender));
6
- --outline-width: 0.25rem;
7
- --background-color: var(--color-white);
1
+ .dnb-card {
2
+ --card-outline-color: var(--border-color, var(--color-lavender));
3
+ --card-outline-width: 0.25rem;
4
+ --card-background-color: var(--color-white);
8
5
  }
@@ -1 +1 @@
1
- .dnb-card.dnb-section{--outline-color:var(--border-color,var(--color-lavender));--outline-width:0.25rem;--background-color:var(--color-white)}
1
+ .dnb-card{--card-outline-color:var(--border-color,var(--color-lavender));--card-outline-width:0.25rem;--card-background-color:var(--color-white)}
@@ -1,9 +1,5 @@
1
- @import '../../../../style/core/utilities.scss';
2
-
3
1
  .dnb-card {
4
- &.dnb-section {
5
- --outline-color: var(--border-color, var(--color-lavender));
6
- --outline-width: 0.25rem;
7
- --background-color: var(--color-white);
8
- }
2
+ --card-outline-color: var(--border-color, var(--color-lavender));
3
+ --card-outline-width: 0.25rem;
4
+ --card-background-color: var(--color-white);
9
5
  }
@@ -243,7 +243,7 @@
243
243
  */
244
244
 
245
245
  // stylelint-disable no-descending-specificity
246
- // We prioritise categorisation and readability over specificity here
246
+ // We prioritize categorisation and readability over specificity here
247
247
 
248
248
  /** Normal state **/
249
249
 
@@ -34,7 +34,7 @@ export type HeightAnimationProps = {
34
34
  innerRef?: React.RefObject<HTMLElement>;
35
35
  } & useHeightAnimationOptions;
36
36
  export type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
37
- declare function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, delay, className, innerRef, children, onInit, onOpen, onAnimationStart, onAnimationEnd, ...rest }: HeightAnimationAllProps): import("react/jsx-runtime").JSX.Element;
37
+ declare function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, delay, className, innerRef, children, compensateForGap, onInit, onOpen, onAnimationStart, onAnimationEnd, ...rest }: HeightAnimationAllProps): import("react/jsx-runtime").JSX.Element;
38
38
  declare namespace HeightAnimation {
39
39
  var _supportsSpacingProps: string;
40
40
  }
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
10
  var _useHeightAnimation = require("./useHeightAnimation");
11
11
  var _Space = _interopRequireDefault(require("../space/Space"));
12
- const _excluded = ["open", "animate", "keepInDOM", "showOverflow", "element", "duration", "delay", "className", "innerRef", "children", "onInit", "onOpen", "onAnimationStart", "onAnimationEnd"];
12
+ const _excluded = ["open", "animate", "keepInDOM", "showOverflow", "element", "duration", "delay", "className", "innerRef", "children", "compensateForGap", "onInit", "onOpen", "onAnimationStart", "onAnimationEnd"];
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
14
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
15
  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; }
@@ -33,6 +33,7 @@ function HeightAnimation(_ref) {
33
33
  className,
34
34
  innerRef,
35
35
  children,
36
+ compensateForGap,
36
37
  onInit = null,
37
38
  onOpen = null,
38
39
  onAnimationStart = null,
@@ -51,6 +52,7 @@ function HeightAnimation(_ref) {
51
52
  open,
52
53
  animate,
53
54
  children,
55
+ compensateForGap,
54
56
  onInit,
55
57
  onOpen,
56
58
  onAnimationStart,
@@ -71,7 +73,9 @@ function HeightAnimation(_ref) {
71
73
  className: (0, _classnames.default)('dnb-height-animation', className, isVisible ? 'dnb-height-animation--is-visible' : !isAnimating && !open && 'dnb-height-animation--hidden', isInDOM && 'dnb-height-animation--is-in-dom', animate && isVisibleParallax && 'dnb-height-animation--parallax', isAnimating && 'dnb-height-animation--animating', showOverflow && 'dnb-height-animation--show-overflow'),
72
74
  style: _objectSpread(_objectSpread({}, firstPaintStyle), rest === null || rest === void 0 ? void 0 : rest.style),
73
75
  "aria-hidden": keepInDOM ? !open : undefined
74
- }, rest), children);
76
+ }, rest), compensateForGap ? _react.default.createElement("div", {
77
+ className: "compensateForGap"
78
+ }, children) : children);
75
79
  }
76
80
  HeightAnimation._supportsSpacingProps = 'children';
77
81
  var _default = HeightAnimation;
@@ -1 +1 @@
1
- {"version":3,"file":"HeightAnimation.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_useHeightAnimation","_Space","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","delay","className","innerRef","children","onInit","onOpen","onAnimationStart","onAnimationEnd","rest","elementRef","useRef","targetRef","isInDOM","isVisible","isVisibleParallax","isAnimating","firstPaintStyle","useHeightAnimation","createElement","classnames","style","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n useHeightAnimation,\n useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space from '../space/Space'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n /**\n * Whether the nested children content should be kept in the DOM or not.\n * Default: false\n */\n keepInDOM?: boolean\n\n /**\n * Set to `true` to omit the usage of \"overflow: hidden;\"\n * Default: false\n */\n showOverflow?: boolean\n\n /**\n * Defines the duration of the animation in milliseconds.\n * Default: 400\n */\n duration?: number\n\n /**\n * Defines the delay of the animation in milliseconds.\n * Default: 0\n */\n delay?: number\n\n /**\n * Define a custom HTML Element.\n * Default: div\n */\n element?: DynamicElement\n\n /**\n * Send along a custom React Ref.\n * Default: null\n */\n innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n SpacingProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nfunction HeightAnimation({\n open = true,\n animate = true,\n keepInDOM = false,\n showOverflow = false,\n element,\n duration,\n delay,\n className,\n innerRef,\n children,\n onInit = null,\n onOpen = null,\n onAnimationStart = null,\n onAnimationEnd = null,\n ...rest\n}: HeightAnimationAllProps) {\n const elementRef = useRef<HTMLElement>()\n const targetRef = innerRef || elementRef\n\n const {\n isInDOM,\n isVisible,\n isVisibleParallax,\n isAnimating,\n firstPaintStyle,\n } = useHeightAnimation(targetRef, {\n open,\n animate,\n children,\n onInit,\n onOpen,\n onAnimationStart,\n onAnimationEnd,\n })\n\n if (!keepInDOM && !isInDOM && !isAnimating) {\n return null\n }\n\n if (duration) {\n firstPaintStyle['--duration'] = `${duration}ms`\n }\n if (delay) {\n firstPaintStyle['--delay'] = `${delay}ms`\n }\n\n return (\n <Space\n innerRef={targetRef}\n element={element || 'div'}\n className={classnames(\n 'dnb-height-animation',\n isInDOM && 'dnb-height-animation--is-in-dom',\n isVisible && 'dnb-height-animation--is-visible',\n animate && isVisibleParallax && 'dnb-height-animation--parallax',\n isAnimating && 'dnb-height-animation--animating',\n !isVisible &&\n !isAnimating &&\n !open &&\n 'dnb-height-animation--hidden',\n showOverflow && 'dnb-height-animation--show-overflow',\n className\n )}\n style={{ ...firstPaintStyle, ...rest?.style }}\n aria-hidden={keepInDOM ? !open : undefined}\n {...rest}\n >\n {children}\n </Space>\n )\n}\n\nHeightAnimation._supportsSpacingProps = 'children'\n\nexport default HeightAnimation\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAIA,IAAAI,MAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAkC,MAAAK,SAAA;AAAA,SAAAH,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAX,wBAAAO,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAAA,SAAAW,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAAA,SAAAI,QAAAC,MAAA,EAAAC,cAAA,QAAAC,IAAA,GAAArB,MAAA,CAAAqB,IAAA,CAAAF,MAAA,OAAAnB,MAAA,CAAAsB,qBAAA,QAAAC,OAAA,GAAAvB,MAAA,CAAAsB,qBAAA,CAAAH,MAAA,GAAAC,cAAA,KAAAG,OAAA,GAAAA,OAAA,CAAAC,MAAA,WAAAC,GAAA,WAAAzB,MAAA,CAAAE,wBAAA,CAAAiB,MAAA,EAAAM,GAAA,EAAAC,UAAA,OAAAL,IAAA,CAAAM,IAAA,CAAAV,KAAA,CAAAI,IAAA,EAAAE,OAAA,YAAAF,IAAA;AAAA,SAAAO,cAAAhB,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,WAAAF,SAAA,CAAAD,CAAA,IAAAC,SAAA,CAAAD,CAAA,QAAAA,CAAA,OAAAK,OAAA,CAAAlB,MAAA,CAAAgB,MAAA,OAAAa,OAAA,WAAA1B,GAAA,IAAA2B,eAAA,CAAAlB,MAAA,EAAAT,GAAA,EAAAa,MAAA,CAAAb,GAAA,SAAAH,MAAA,CAAA+B,yBAAA,GAAA/B,MAAA,CAAAgC,gBAAA,CAAApB,MAAA,EAAAZ,MAAA,CAAA+B,yBAAA,CAAAf,MAAA,KAAAE,OAAA,CAAAlB,MAAA,CAAAgB,MAAA,GAAAa,OAAA,WAAA1B,GAAA,IAAAH,MAAA,CAAAC,cAAA,CAAAW,MAAA,EAAAT,GAAA,EAAAH,MAAA,CAAAE,wBAAA,CAAAc,MAAA,EAAAb,GAAA,iBAAAS,MAAA;AAAA,SAAAkB,gBAAA3C,GAAA,EAAAgB,GAAA,EAAA8B,KAAA,IAAA9B,GAAA,GAAA+B,cAAA,CAAA/B,GAAA,OAAAA,GAAA,IAAAhB,GAAA,IAAAa,MAAA,CAAAC,cAAA,CAAAd,GAAA,EAAAgB,GAAA,IAAA8B,KAAA,EAAAA,KAAA,EAAAP,UAAA,QAAAS,YAAA,QAAAC,QAAA,oBAAAjD,GAAA,CAAAgB,GAAA,IAAA8B,KAAA,WAAA9C,GAAA;AAAA,SAAA+C,eAAAG,GAAA,QAAAlC,GAAA,GAAAmC,YAAA,CAAAD,GAAA,2BAAAlC,GAAA,gBAAAA,GAAA,GAAAoC,MAAA,CAAApC,GAAA;AAAA,SAAAmC,aAAAE,KAAA,EAAAC,IAAA,eAAAD,KAAA,iBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAAG,MAAA,CAAAC,WAAA,OAAAF,IAAA,KAAAG,SAAA,QAAAC,GAAA,GAAAJ,IAAA,CAAApC,IAAA,CAAAkC,KAAA,EAAAC,IAAA,2BAAAK,GAAA,sBAAAA,GAAA,YAAAC,SAAA,4DAAAN,IAAA,gBAAAF,MAAA,GAAAS,MAAA,EAAAR,KAAA;AAAA,SAAAS,yBAAAjC,MAAA,EAAAkC,QAAA,QAAAlC,MAAA,yBAAAJ,MAAA,GAAAuC,6BAAA,CAAAnC,MAAA,EAAAkC,QAAA,OAAA/C,GAAA,EAAAU,CAAA,MAAAb,MAAA,CAAAsB,qBAAA,QAAA8B,gBAAA,GAAApD,MAAA,CAAAsB,qBAAA,CAAAN,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAuC,gBAAA,CAAArC,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAiD,gBAAA,CAAAvC,CAAA,OAAAqC,QAAA,CAAAG,OAAA,CAAAlD,GAAA,uBAAAH,MAAA,CAAAI,SAAA,CAAAkD,oBAAA,CAAAhD,IAAA,CAAAU,MAAA,EAAAb,GAAA,aAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,cAAAS,MAAA;AAAA,SAAAuC,8BAAAnC,MAAA,EAAAkC,QAAA,QAAAlC,MAAA,yBAAAJ,MAAA,WAAA2C,UAAA,GAAAvD,MAAA,CAAAqB,IAAA,CAAAL,MAAA,OAAAb,GAAA,EAAAU,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAA0C,UAAA,CAAAxC,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAoD,UAAA,CAAA1C,CAAA,OAAAqC,QAAA,CAAAG,OAAA,CAAAlD,GAAA,kBAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,YAAAS,MAAA;AA8ClC,SAAS4C,eAAeA,CAAAC,IAAA,EAgBI;EAAA,IAhBH;MACvBC,IAAI,GAAG,IAAI;MACXC,OAAO,GAAG,IAAI;MACdC,SAAS,GAAG,KAAK;MACjBC,YAAY,GAAG,KAAK;MACpBC,OAAO;MACPC,QAAQ;MACRC,KAAK;MACLC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC,MAAM,GAAG,IAAI;MACbC,MAAM,GAAG,IAAI;MACbC,gBAAgB,GAAG,IAAI;MACvBC,cAAc,GAAG;IAEM,CAAC,GAAAd,IAAA;IADrBe,IAAI,GAAAvB,wBAAA,CAAAQ,IAAA,EAAAvE,SAAA;EAEP,MAAMuF,UAAU,GAAG,IAAAC,aAAM,EAAc,CAAC;EACxC,MAAMC,SAAS,GAAGT,QAAQ,IAAIO,UAAU;EAExC,MAAM;IACJG,OAAO;IACPC,SAAS;IACTC,iBAAiB;IACjBC,WAAW;IACXC;EACF,CAAC,GAAG,IAAAC,sCAAkB,EAACN,SAAS,EAAE;IAChCjB,IAAI;IACJC,OAAO;IACPQ,QAAQ;IACRC,MAAM;IACNC,MAAM;IACNC,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEF,IAAI,CAACX,SAAS,IAAI,CAACgB,OAAO,IAAI,CAACG,WAAW,EAAE;IAC1C,OAAO,IAAI;EACb;EAEA,IAAIhB,QAAQ,EAAE;IACZiB,eAAe,CAAC,YAAY,CAAC,GAAI,GAAEjB,QAAS,IAAG;EACjD;EACA,IAAIC,KAAK,EAAE;IACTgB,eAAe,CAAC,SAAS,CAAC,GAAI,GAAEhB,KAAM,IAAG;EAC3C;EAEA,OACErF,MAAA,CAAAU,OAAA,CAAA6F,aAAA,CAACjG,MAAA,CAAAI,OAAK,EAAAoB,QAAA;IACJyD,QAAQ,EAAES,SAAU;IACpBb,OAAO,EAAEA,OAAO,IAAI,KAAM;IAC1BG,SAAS,EAAE,IAAAkB,mBAAU,EACnB,sBAAsB,EAUtBlB,SAAS,EARTY,SAAS,GAAI,kCAAkC,GAI7C,CAACE,WAAW,IACZ,CAACrB,IAAI,IACL,8BAA8B,EAPhCkB,OAAO,IAAI,iCAAiC,EAE5CjB,OAAO,IAAImB,iBAAiB,IAAI,gCAAgC,EAChEC,WAAW,IAAI,iCAAiC,EAKhDlB,YAAY,IAAI,qCAElB,CAAE;IACFuB,KAAK,EAAAxD,aAAA,CAAAA,aAAA,KAAOoD,eAAe,GAAKR,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEY,KAAK,CAAG;IAC9C,eAAaxB,SAAS,GAAG,CAACF,IAAI,GAAGb;EAAU,GACvC2B,IAAI,GAEPL,QACI,CAAC;AAEZ;AAEAX,eAAe,CAAC6B,qBAAqB,GAAG,UAAU;AAAA,IAAAC,QAAA,GAEnC9B,eAAe;AAAA+B,OAAA,CAAAlG,OAAA,GAAAiG,QAAA"}
1
+ {"version":3,"file":"HeightAnimation.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_useHeightAnimation","_Space","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","delay","className","innerRef","children","compensateForGap","onInit","onOpen","onAnimationStart","onAnimationEnd","rest","elementRef","useRef","targetRef","isInDOM","isVisible","isVisibleParallax","isAnimating","firstPaintStyle","useHeightAnimation","createElement","classnames","style","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n useHeightAnimation,\n useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space from '../space/Space'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n /**\n * Whether the nested children content should be kept in the DOM or not.\n * Default: false\n */\n keepInDOM?: boolean\n\n /**\n * Set to `true` to omit the usage of \"overflow: hidden;\"\n * Default: false\n */\n showOverflow?: boolean\n\n /**\n * Defines the duration of the animation in milliseconds.\n * Default: 400\n */\n duration?: number\n\n /**\n * Defines the delay of the animation in milliseconds.\n * Default: 0\n */\n delay?: number\n\n /**\n * Define a custom HTML Element.\n * Default: div\n */\n element?: DynamicElement\n\n /**\n * Send along a custom React Ref.\n * Default: null\n */\n innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n SpacingProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nfunction HeightAnimation({\n open = true,\n animate = true,\n keepInDOM = false,\n showOverflow = false,\n element,\n duration,\n delay,\n className,\n innerRef,\n children,\n compensateForGap,\n onInit = null,\n onOpen = null,\n onAnimationStart = null,\n onAnimationEnd = null,\n ...rest\n}: HeightAnimationAllProps) {\n const elementRef = useRef<HTMLElement>()\n const targetRef = innerRef || elementRef\n\n const {\n isInDOM,\n isVisible,\n isVisibleParallax,\n isAnimating,\n firstPaintStyle,\n } = useHeightAnimation(targetRef, {\n open,\n animate,\n children,\n compensateForGap,\n onInit,\n onOpen,\n onAnimationStart,\n onAnimationEnd,\n })\n\n if (!keepInDOM && !isInDOM && !isAnimating) {\n return null\n }\n\n if (duration) {\n firstPaintStyle['--duration'] = `${duration}ms`\n }\n if (delay) {\n firstPaintStyle['--delay'] = `${delay}ms`\n }\n\n return (\n <Space\n innerRef={targetRef}\n element={element || 'div'}\n className={classnames(\n 'dnb-height-animation',\n isInDOM && 'dnb-height-animation--is-in-dom',\n isVisible && 'dnb-height-animation--is-visible',\n animate && isVisibleParallax && 'dnb-height-animation--parallax',\n isAnimating && 'dnb-height-animation--animating',\n !isVisible &&\n !isAnimating &&\n !open &&\n 'dnb-height-animation--hidden',\n showOverflow && 'dnb-height-animation--show-overflow',\n className\n )}\n style={{ ...firstPaintStyle, ...rest?.style }}\n aria-hidden={keepInDOM ? !open : undefined}\n {...rest}\n >\n {compensateForGap ? (\n <div className=\"compensateForGap\">{children}</div>\n ) : (\n children\n )}\n </Space>\n )\n}\n\nHeightAnimation._supportsSpacingProps = 'children'\n\nexport default HeightAnimation\n"],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ import { PropertiesTableProps } from '../../shared/types';
2
+ export declare const HeightAnimationProperties: PropertiesTableProps;
3
+ export declare const HeightAnimationEvents: PropertiesTableProps;
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.HeightAnimationProperties = exports.HeightAnimationEvents = void 0;
7
+ const HeightAnimationProperties = {
8
+ open: {
9
+ doc: 'Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.',
10
+ type: 'boolean',
11
+ status: 'optional'
12
+ },
13
+ animate: {
14
+ doc: 'Set to `false` to omit the animation. Defaults to `true`.',
15
+ type: 'boolean',
16
+ status: 'optional'
17
+ },
18
+ keepInDOM: {
19
+ doc: 'Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.',
20
+ type: 'boolean',
21
+ status: 'optional'
22
+ },
23
+ compensateForGap: {
24
+ doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',
25
+ type: 'string',
26
+ status: 'optional'
27
+ },
28
+ showOverflow: {
29
+ doc: 'Set to `true` to omit the usage of "overflow: hidden;". Defaults to `false`.',
30
+ type: 'boolean',
31
+ status: 'optional'
32
+ },
33
+ duration: {
34
+ doc: 'Custom duration of the animation in milliseconds. Defaults to `400ms`.',
35
+ type: 'number',
36
+ status: 'optional'
37
+ },
38
+ delay: {
39
+ doc: 'Custom delay of the animation in milliseconds. Defaults to `0ms`.',
40
+ type: 'number',
41
+ status: 'optional'
42
+ },
43
+ element: {
44
+ doc: 'Custom HTML element for the component. Defaults to `div` HTML Element.',
45
+ type: 'string',
46
+ status: 'optional'
47
+ },
48
+ innerRef: {
49
+ doc: 'Send along a custom React Ref.',
50
+ type: 'React.RefObject',
51
+ status: 'optional'
52
+ },
53
+ '[Space](/uilib/layout/space/properties)': {
54
+ doc: 'spacing properties like `top` or `bottom` are supported.',
55
+ type: ['string', 'object'],
56
+ status: 'optional'
57
+ }
58
+ };
59
+ exports.HeightAnimationProperties = HeightAnimationProperties;
60
+ const HeightAnimationEvents = {
61
+ onOpen: {
62
+ doc: 'Is called when fully opened or closed. Returns `true` or `false` depending on the state.',
63
+ type: 'function',
64
+ status: 'optional'
65
+ },
66
+ onAnimationStart: {
67
+ doc: 'Is called when animation has started.',
68
+ type: 'function',
69
+ status: 'optional'
70
+ },
71
+ onAnimationEnd: {
72
+ doc: 'Is called when animation is done and the full height is reached.',
73
+ type: 'function',
74
+ status: 'optional'
75
+ },
76
+ onInit: {
77
+ doc: 'Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.',
78
+ type: 'function',
79
+ status: 'optional'
80
+ }
81
+ };
82
+ exports.HeightAnimationEvents = HeightAnimationEvents;
83
+ //# sourceMappingURL=HeightAnimationDocs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"HeightAnimationDocs.js","names":["HeightAnimationProperties","open","doc","type","status","animate","keepInDOM","compensateForGap","showOverflow","duration","delay","element","innerRef","exports","HeightAnimationEvents","onOpen","onAnimationStart","onAnimationEnd","onInit"],"sources":["../../../../src/components/height-animation/HeightAnimationDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const HeightAnimationProperties: PropertiesTableProps = {\n open: {\n doc: 'Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.',\n type: 'boolean',\n status: 'optional',\n },\n animate: {\n doc: 'Set to `false` to omit the animation. Defaults to `true`.',\n type: 'boolean',\n status: 'optional',\n },\n keepInDOM: {\n doc: 'Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.',\n type: 'boolean',\n status: 'optional',\n },\n compensateForGap: {\n doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',\n type: 'string',\n status: 'optional',\n },\n showOverflow: {\n doc: 'Set to `true` to omit the usage of \"overflow: hidden;\". Defaults to `false`.',\n type: 'boolean',\n status: 'optional',\n },\n duration: {\n doc: 'Custom duration of the animation in milliseconds. Defaults to `400ms`.',\n type: 'number',\n status: 'optional',\n },\n delay: {\n doc: 'Custom delay of the animation in milliseconds. Defaults to `0ms`.',\n type: 'number',\n status: 'optional',\n },\n element: {\n doc: 'Custom HTML element for the component. Defaults to `div` HTML Element.',\n type: 'string',\n status: 'optional',\n },\n innerRef: {\n doc: 'Send along a custom React Ref.',\n type: 'React.RefObject',\n status: 'optional',\n },\n '[Space](/uilib/layout/space/properties)': {\n doc: 'spacing properties like `top` or `bottom` are supported.',\n type: ['string', 'object'],\n status: 'optional',\n },\n}\n\nexport const HeightAnimationEvents: PropertiesTableProps = {\n onOpen: {\n doc: 'Is called when fully opened or closed. Returns `true` or `false` depending on the state.',\n type: 'function',\n status: 'optional',\n },\n onAnimationStart: {\n doc: 'Is called when animation has started.',\n type: 'function',\n status: 'optional',\n },\n onAnimationEnd: {\n doc: 'Is called when animation is done and the full height is reached.',\n type: 'function',\n status: 'optional',\n },\n onInit: {\n doc: 'Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.',\n type: 'function',\n status: 'optional',\n },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,yBAA+C,GAAG;EAC7DC,IAAI,EAAE;IACJC,GAAG,EAAE,sGAAsG;IAC3GC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,gBAAgB,EAAE;IAChBL,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,YAAY,EAAE;IACZN,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,KAAK,EAAE;IACLR,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,gCAAgC;IACrCC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAAAS,OAAA,CAAAb,yBAAA,GAAAA,yBAAA;AAEM,MAAMc,qBAA2C,GAAG;EACzDC,MAAM,EAAE;IACNb,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDY,gBAAgB,EAAE;IAChBd,GAAG,EAAE,uCAAuC;IAC5CC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDa,cAAc,EAAE;IACdf,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDc,MAAM,EAAE;IACNhB,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC;AAAAS,OAAA,CAAAC,qBAAA,GAAAA,qBAAA"}
@@ -6,8 +6,9 @@
6
6
  * Utilities
7
7
  */
8
8
  .dnb-height-animation {
9
- --height-animation: height var(--duration, 400ms) var(--easing-default)
10
- var(--delay, 0ms);
9
+ --height-animation-duration: var(--duration, 400ms);
10
+ --height-animation: height var(--height-animation-duration)
11
+ var(--easing-default) var(--delay, 0ms);
11
12
  will-change: height;
12
13
  transition: var(--height-animation);
13
14
  }
@@ -1 +1 @@
1
- .dnb-height-animation{--height-animation:height var(--duration,400ms) var(--easing-default) var(--delay,0ms);transition:var(--height-animation);will-change:height}html[data-visual-test] .dnb-height-animation,html[data-visual-test] .dnb-height-animation *{transition:none!important}.dnb-height-animation--animating{overflow-y:hidden}@supports (overflow-y:clip){.dnb-height-animation--animating{overflow-y:clip}}.dnb-height-animation--hidden{display:none}.dnb-height-animation--show-overflow{overflow:visible}
1
+ .dnb-height-animation{--height-animation-duration:var(--duration,400ms);--height-animation:height var(--height-animation-duration) var(--easing-default) var(--delay,0ms);transition:var(--height-animation);will-change:height}html[data-visual-test] .dnb-height-animation,html[data-visual-test] .dnb-height-animation *{transition:none!important}.dnb-height-animation--animating{overflow-y:hidden}@supports (overflow-y:clip){.dnb-height-animation--animating{overflow-y:clip}}.dnb-height-animation--hidden{display:none}.dnb-height-animation--show-overflow{overflow:visible}
@@ -6,8 +6,9 @@
6
6
  @import '../../../style/core/utilities.scss';
7
7
 
8
8
  .dnb-height-animation {
9
- --height-animation: height var(--duration, 400ms) var(--easing-default)
10
- var(--delay, 0ms);
9
+ --height-animation-duration: var(--duration, 400ms);
10
+ --height-animation: height var(--height-animation-duration)
11
+ var(--easing-default) var(--delay, 0ms);
11
12
 
12
13
  will-change: height;
13
14
  transition: var(--height-animation);
@@ -11,6 +11,11 @@ export type useHeightAnimationOptions = {
11
11
  * Default: true
12
12
  */
13
13
  animate?: boolean;
14
+ /**
15
+ * To compensate for CSS gap between the rows, so animation does not jump during the animation.
16
+ * Provide a CSS unit or `var(--row-gap)`.
17
+ */
18
+ compensateForGap?: string | 'auto';
14
19
  /**
15
20
  * In order to let the Hook know when children has changed
16
21
  */
@@ -34,7 +39,7 @@ export type useHeightAnimationOptions = {
34
39
  };
35
40
  export type HeightAnimationOnStartTypes = 'opening' | 'closing' | 'adjusting';
36
41
  export type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted';
37
- export declare function useHeightAnimation(targetRef: React.RefObject<HTMLElement>, { open, animate, children, onInit, onOpen, onAnimationStart, onAnimationEnd, }?: useHeightAnimationOptions): {
42
+ export declare function useHeightAnimation(targetRef: React.RefObject<HTMLElement>, { open, animate, children, compensateForGap, onInit, onOpen, onAnimationStart, onAnimationEnd, }?: useHeightAnimationOptions): {
38
43
  open: boolean;
39
44
  isOpen: boolean;
40
45
  isInDOM: boolean;