@dnb/eufemia 9.34.3 → 9.36.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 (167) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/cjs/components/breadcrumb/style/dnb-breadcrumb.css +6 -0
  3. package/cjs/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  4. package/cjs/components/global-status/style/dnb-global-status.css +6 -0
  5. package/cjs/components/global-status/style/dnb-global-status.min.css +1 -1
  6. package/cjs/components/section/Section.d.ts +2 -2
  7. package/cjs/components/section/style/_section.scss +8 -0
  8. package/cjs/components/section/style/dnb-section.css +6 -0
  9. package/cjs/components/section/style/dnb-section.min.css +1 -1
  10. package/cjs/components/space/Space.d.ts +0 -2
  11. package/cjs/components/space/Space.js +18 -12
  12. package/cjs/components/space/SpacingUtils.d.ts +14 -9
  13. package/cjs/components/space/SpacingUtils.js +59 -45
  14. package/cjs/components/step-indicator/StepIndicatorSidebar.js +5 -1
  15. package/cjs/components/tabs/Tabs.d.ts +2 -2
  16. package/cjs/components/tabs/Tabs.js +6 -11
  17. package/cjs/components/tabs/TabsContentWrapper.d.ts +1 -1
  18. package/cjs/components/tabs/TabsContentWrapper.js +6 -4
  19. package/cjs/components/tabs/style/_tabs.scss +15 -2
  20. package/cjs/components/tabs/style/dnb-tabs.css +14 -2
  21. package/cjs/components/tabs/style/dnb-tabs.min.css +1 -1
  22. package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +3 -3
  23. package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -1
  24. package/cjs/components/tabs/style/themes/dnb-tabs-theme-ui.css +3 -3
  25. package/cjs/components/tabs/style/themes/dnb-tabs-theme-ui.min.css +1 -1
  26. package/cjs/components/tabs/style/themes/dnb-tabs-theme-ui.scss +4 -1
  27. package/cjs/components/upload/Upload.js +14 -17
  28. package/cjs/components/upload/UploadFileInput.js +17 -22
  29. package/cjs/components/upload/UploadFileList.js +1 -0
  30. package/cjs/components/upload/UploadFileListCell.d.ts +2 -1
  31. package/cjs/components/upload/UploadFileListCell.js +65 -7
  32. package/cjs/components/upload/UploadVerify.d.ts +4 -1
  33. package/cjs/components/upload/UploadVerify.js +67 -1
  34. package/cjs/components/upload/style/themes/dnb-upload-theme-ui.css +16 -3
  35. package/cjs/components/upload/style/themes/dnb-upload-theme-ui.min.css +1 -1
  36. package/cjs/components/upload/style/themes/dnb-upload-theme-ui.scss +9 -0
  37. package/cjs/components/upload/types.d.ts +3 -1
  38. package/cjs/components/upload/useUpload.d.ts +1 -2
  39. package/cjs/components/upload/useUpload.js +19 -3
  40. package/cjs/elements/Element.d.ts +1 -1
  41. package/cjs/shared/Eufemia.js +1 -1
  42. package/cjs/shared/MediaQueryUtils.d.ts +1 -5
  43. package/cjs/shared/MediaQueryUtils.js +1 -7
  44. package/cjs/shared/SpacingHelper.d.ts +6 -1
  45. package/cjs/shared/useMedia.js +1 -2
  46. package/cjs/shared/useMediaQuery.js +4 -2
  47. package/cjs/style/dnb-ui-components.css +20 -2
  48. package/cjs/style/dnb-ui-components.min.css +2 -2
  49. package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.css +22 -9
  50. package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +2 -2
  51. package/cjs/style/themes/theme-ui/dnb-theme-ui.css +19 -6
  52. package/cjs/style/themes/theme-ui/dnb-theme-ui.min.css +2 -2
  53. package/components/breadcrumb/style/dnb-breadcrumb.css +6 -0
  54. package/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  55. package/components/global-status/style/dnb-global-status.css +6 -0
  56. package/components/global-status/style/dnb-global-status.min.css +1 -1
  57. package/components/section/Section.d.ts +2 -2
  58. package/components/section/style/_section.scss +8 -0
  59. package/components/section/style/dnb-section.css +6 -0
  60. package/components/section/style/dnb-section.min.css +1 -1
  61. package/components/space/Space.d.ts +0 -2
  62. package/components/space/Space.js +17 -11
  63. package/components/space/SpacingUtils.d.ts +14 -9
  64. package/components/space/SpacingUtils.js +57 -44
  65. package/components/step-indicator/StepIndicatorSidebar.js +3 -1
  66. package/components/tabs/Tabs.d.ts +2 -2
  67. package/components/tabs/Tabs.js +6 -11
  68. package/components/tabs/TabsContentWrapper.d.ts +1 -1
  69. package/components/tabs/TabsContentWrapper.js +5 -4
  70. package/components/tabs/style/_tabs.scss +15 -2
  71. package/components/tabs/style/dnb-tabs.css +14 -2
  72. package/components/tabs/style/dnb-tabs.min.css +1 -1
  73. package/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +3 -3
  74. package/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -1
  75. package/components/tabs/style/themes/dnb-tabs-theme-ui.css +3 -3
  76. package/components/tabs/style/themes/dnb-tabs-theme-ui.min.css +1 -1
  77. package/components/tabs/style/themes/dnb-tabs-theme-ui.scss +4 -1
  78. package/components/upload/Upload.js +11 -15
  79. package/components/upload/UploadFileInput.js +16 -21
  80. package/components/upload/UploadFileList.js +1 -0
  81. package/components/upload/UploadFileListCell.d.ts +2 -1
  82. package/components/upload/UploadFileListCell.js +44 -3
  83. package/components/upload/UploadVerify.d.ts +4 -1
  84. package/components/upload/UploadVerify.js +27 -1
  85. package/components/upload/style/themes/dnb-upload-theme-ui.css +16 -3
  86. package/components/upload/style/themes/dnb-upload-theme-ui.min.css +1 -1
  87. package/components/upload/style/themes/dnb-upload-theme-ui.scss +9 -0
  88. package/components/upload/types.d.ts +3 -1
  89. package/components/upload/useUpload.d.ts +1 -2
  90. package/components/upload/useUpload.js +17 -3
  91. package/elements/Element.d.ts +1 -1
  92. package/es/components/breadcrumb/style/dnb-breadcrumb.css +6 -0
  93. package/es/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
  94. package/es/components/global-status/style/dnb-global-status.css +6 -0
  95. package/es/components/global-status/style/dnb-global-status.min.css +1 -1
  96. package/es/components/section/Section.d.ts +2 -2
  97. package/es/components/section/style/_section.scss +8 -0
  98. package/es/components/section/style/dnb-section.css +6 -0
  99. package/es/components/section/style/dnb-section.min.css +1 -1
  100. package/es/components/space/Space.d.ts +0 -2
  101. package/es/components/space/Space.js +17 -11
  102. package/es/components/space/SpacingUtils.d.ts +14 -9
  103. package/es/components/space/SpacingUtils.js +44 -36
  104. package/es/components/step-indicator/StepIndicatorSidebar.js +3 -1
  105. package/es/components/tabs/Tabs.d.ts +2 -2
  106. package/es/components/tabs/Tabs.js +6 -11
  107. package/es/components/tabs/TabsContentWrapper.d.ts +1 -1
  108. package/es/components/tabs/TabsContentWrapper.js +5 -4
  109. package/es/components/tabs/style/_tabs.scss +15 -2
  110. package/es/components/tabs/style/dnb-tabs.css +14 -2
  111. package/es/components/tabs/style/dnb-tabs.min.css +1 -1
  112. package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +3 -3
  113. package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -1
  114. package/es/components/tabs/style/themes/dnb-tabs-theme-ui.css +3 -3
  115. package/es/components/tabs/style/themes/dnb-tabs-theme-ui.min.css +1 -1
  116. package/es/components/tabs/style/themes/dnb-tabs-theme-ui.scss +4 -1
  117. package/es/components/upload/Upload.js +11 -13
  118. package/es/components/upload/UploadFileInput.js +13 -17
  119. package/es/components/upload/UploadFileList.js +1 -0
  120. package/es/components/upload/UploadFileListCell.d.ts +2 -1
  121. package/es/components/upload/UploadFileListCell.js +36 -2
  122. package/es/components/upload/UploadVerify.d.ts +4 -1
  123. package/es/components/upload/UploadVerify.js +12 -1
  124. package/es/components/upload/style/themes/dnb-upload-theme-ui.css +16 -3
  125. package/es/components/upload/style/themes/dnb-upload-theme-ui.min.css +1 -1
  126. package/es/components/upload/style/themes/dnb-upload-theme-ui.scss +9 -0
  127. package/es/components/upload/types.d.ts +3 -1
  128. package/es/components/upload/useUpload.d.ts +1 -2
  129. package/es/components/upload/useUpload.js +15 -3
  130. package/es/elements/Element.d.ts +1 -1
  131. package/es/shared/Eufemia.js +1 -1
  132. package/es/shared/MediaQueryUtils.d.ts +1 -5
  133. package/es/shared/MediaQueryUtils.js +1 -6
  134. package/es/shared/SpacingHelper.d.ts +6 -1
  135. package/es/shared/useMedia.js +1 -2
  136. package/es/shared/useMediaQuery.js +4 -2
  137. package/es/style/dnb-ui-components.css +20 -2
  138. package/es/style/dnb-ui-components.min.css +2 -2
  139. package/es/style/themes/theme-eiendom/dnb-theme-eiendom.css +22 -9
  140. package/es/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +2 -2
  141. package/es/style/themes/theme-ui/dnb-theme-ui.css +19 -6
  142. package/es/style/themes/theme-ui/dnb-theme-ui.min.css +2 -2
  143. package/esm/dnb-ui-basis.min.mjs +1 -1
  144. package/esm/dnb-ui-components.min.mjs +1 -1
  145. package/esm/dnb-ui-elements.min.mjs +3 -3
  146. package/esm/dnb-ui-extensions.min.mjs +4 -4
  147. package/esm/dnb-ui-lib.min.mjs +2 -2
  148. package/esm/dnb-ui-web-components.min.mjs +2 -2
  149. package/package.json +1 -1
  150. package/shared/Eufemia.js +1 -1
  151. package/shared/MediaQueryUtils.d.ts +1 -5
  152. package/shared/MediaQueryUtils.js +1 -7
  153. package/shared/SpacingHelper.d.ts +6 -1
  154. package/shared/useMedia.js +1 -2
  155. package/shared/useMediaQuery.js +4 -2
  156. package/style/dnb-ui-components.css +20 -2
  157. package/style/dnb-ui-components.min.css +2 -2
  158. package/style/themes/theme-eiendom/dnb-theme-eiendom.css +22 -9
  159. package/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +2 -2
  160. package/style/themes/theme-ui/dnb-theme-ui.css +19 -6
  161. package/style/themes/theme-ui/dnb-theme-ui.min.css +2 -2
  162. package/umd/dnb-ui-basis.min.js +1 -1
  163. package/umd/dnb-ui-components.min.js +1 -1
  164. package/umd/dnb-ui-elements.min.js +4 -4
  165. package/umd/dnb-ui-extensions.min.js +3 -3
  166. package/umd/dnb-ui-lib.min.js +3 -3
  167. package/umd/dnb-ui-web-components.min.js +4 -4
@@ -1 +1 @@
1
- .dnb-tabs{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tabs *,.dnb-tabs :after,.dnb-tabs :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tabs :after,.dnb-tabs :before{text-decoration:inherit;vertical-align:inherit}.dnb-tabs__tabs{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-box-flex:0;-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-color:#14555a transparent;scrollbar-color:var(--color-emerald-green) transparent;scrollbar-width:thin;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}html[data-visual-test] .dnb-tabs__tabs__tablist{scroll-behavior:auto!important}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{-webkit-box-flex:1;-webkit-box-pack:end;-ms-flex-pack:end;-ms-flex:1;flex:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:absolute;right:-2px;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button--visible{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;text-decoration:none;-webkit-transition:margin .4s ease-out;transition:margin .4s ease-out;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:1rem;font-size:var(--font-size-small);-webkit-transform:translateY(-.125rem);transform:translateY(-.125rem)}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-tabs__button__snap{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 1rem 0 1.5rem;-webkit-transition:padding 1s cubic-bezier(.42,0,0,1);transition:padding 1s cubic-bezier(.42,0,0,1);-webkit-transition:padding 1s var(--easing-default);transition:padding 1s var(--easing-default);will-change:padding}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{-webkit-transition:none!important;transition:none!important}.dnb-tabs__content--spacing{padding-top:2rem}
1
+ .dnb-tabs{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tabs *,.dnb-tabs :after,.dnb-tabs :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tabs :after,.dnb-tabs :before{text-decoration:inherit;vertical-align:inherit}.dnb-tabs__tabs{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1}.dnb-tabs__tabs,.dnb-tabs__tabs.dnb-section--spacing{padding-bottom:0}.dnb-tabs__tabs__tablist{-webkit-box-flex:0;-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:auto;-ms-overflow-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex:0 1 auto;flex:0 1 auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-color:#14555a transparent;scrollbar-color:var(--color-emerald-green) transparent;scrollbar-width:thin;scrollbar-width:none}.dnb-tabs__tabs__tablist:focus{outline:none}html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__tabs__tablist:focus{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}html:not([data-visual-test]) .dnb-tabs__tabs__tablist{scroll-behavior:smooth}html[data-visual-test] .dnb-tabs__tabs__tablist{scroll-behavior:auto!important}.dnb-tabs__tabs__tablist::-webkit-scrollbar{display:none}.dnb-tabs__tabs--left .dnb-tabs__tabs__tablist{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.dnb-tabs__tabs--right .dnb-tabs__tabs__tablist{-webkit-box-flex:1;-webkit-box-pack:end;-ms-flex-pack:end;-ms-flex:1;flex:1;justify-content:flex-end}.dnb-tabs__tabs--center .dnb-tabs__tabs__tablist{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.dnb-tabs__tabs:before{bottom:0;content:"";height:1px;left:-100vw;position:absolute;width:100vw;z-index:-1}.dnb-tabs__tabs--no-border:before{content:none}.dnb-tabs__scroll-nav-button{display:none;opacity:0;pointer-events:none;position:absolute;right:-2px;-webkit-transition:opacity .6s ease-out;transition:opacity .6s ease-out;z-index:2}.dnb-tabs__scroll-nav-button:first-of-type{left:-2px;right:auto}.dnb-tabs__scroll-nav-button--visible{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;pointer-events:auto}.dnb-tabs__scroll-nav-button--hide{opacity:0!important;pointer-events:none}.dnb-core-style .dnb-tabs .dnb-tabs__button,.dnb-tabs__button{background-color:transparent;border:none;cursor:pointer;font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;outline:none;padding:0 .125rem;position:relative;text-decoration:none;-webkit-transition:margin .4s ease-out;transition:margin .4s ease-out;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap;z-index:1}.dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon,.dnb-tabs__button__title .dnb-icon{font-size:1rem;font-size:var(--font-size-small);-webkit-transform:translateY(-.125rem);transform:translateY(-.125rem)}.dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy,.dnb-tabs__button .dnb-dummy{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:0;margin-top:.25rem;overflow:hidden;visibility:hidden}.dnb-core-style .dnb-tabs .dnb-tabs__button:after,.dnb-tabs__button:after{bottom:0;content:"";height:1px;left:0;position:absolute;right:0;width:100%;z-index:-1}.dnb-tabs__button__snap{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 1rem 0 1.5rem;-webkit-transition:padding 1s cubic-bezier(.42,0,0,1);transition:padding 1s cubic-bezier(.42,0,0,1);-webkit-transition:padding 1s var(--easing-default);transition:padding 1s var(--easing-default);will-change:padding}@media screen and (max-width:40em){.dnb-tabs__button__snap{padding:0 1rem}}.dnb-tabs__button__snap:first-of-type{padding-left:0}.dnb-tabs__button__snap:last-of-type{padding-right:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus{margin-left:.5rem}html[data-whatinput=keyboard] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus{margin-right:.5rem}.dnb-tabs__cached{opacity:1;-webkit-transition:opacity 1s cubic-bezier(.42,0,0,1);transition:opacity 1s cubic-bezier(.42,0,0,1);-webkit-transition:opacity 1s var(--easing-default);transition:opacity 1s var(--easing-default)}.dnb-tabs__cached--hidden{height:0!important;opacity:0;overflow:hidden;visibility:hidden}html[data-visual-test] .dnb-tabs .dnb-tabs__button,html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,html[data-visual-test] .dnb-tabs .dnb-tabs__cached,html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button{-webkit-transition:none!important;transition:none!important}.dnb-tabs__content{padding-bottom:0}
@@ -40,7 +40,7 @@
40
40
 
41
41
  .dnb-tabs__content:focus {
42
42
  position: relative; }
43
- .dnb-tabs__content:focus::after {
43
+ .dnb-tabs__content:focus::before {
44
44
  content: '';
45
45
  position: absolute;
46
46
  z-index: -1;
@@ -51,13 +51,13 @@
51
51
  max-width: 100vw;
52
52
  border-radius: 0.5rem;
53
53
  outline: none; }
54
- html[data-whatinput='keyboard'] .dnb-tabs__content:focus::after {
54
+ html[data-whatinput='keyboard'] .dnb-tabs__content:focus::before {
55
55
  --border-color: var(--color-emerald-green);
56
56
  -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
57
57
  box-shadow: 0 0 0 0.125rem var(--border-color);
58
58
  border-color: transparent; }
59
59
  @media screen and (-ms-high-contrast: none) {
60
- html[data-whatinput='keyboard'] .dnb-tabs__content:focus::after {
60
+ html[data-whatinput='keyboard'] .dnb-tabs__content:focus::before {
61
61
  -webkit-box-shadow: 0 0 0 0.125rem #14555a;
62
62
  box-shadow: 0 0 0 0.125rem #14555a;
63
63
  -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
@@ -1 +1 @@
1
- .dnb-tabs__tabs:not(.dnb-section):before{background-color:#ebebeb;background-color:var(--color-black-8);-webkit-box-shadow:100vw 0 0 0 #ebebeb;box-shadow:100vw 0 0 0 #ebebeb;-webkit-box-shadow:100vw 0 0 0 var(--color-black-8);box-shadow:100vw 0 0 0 var(--color-black-8)}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:after{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content:focus:after{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__content:focus:after{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button__title{color:#007272;color:var(--color-sea-green);display:block;font-size:1.125rem;font-size:var(--font-size-basis);font-weight:400;font-weight:var(--font-weight-regular);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:focus{overflow:visible}.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button:focus:before{border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:#b3dada;color:var(--color-sea-green-30)}.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:#14555a;color:var(--color-emerald-green)}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button span[hidden]{font-weight:500;font-weight:var(--font-weight-medium)}html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:#f2f4ec;background-color:var(--color-pistachio)}
1
+ .dnb-tabs__tabs:not(.dnb-section):before{background-color:#ebebeb;background-color:var(--color-black-8);-webkit-box-shadow:100vw 0 0 0 #ebebeb;box-shadow:100vw 0 0 0 #ebebeb;-webkit-box-shadow:100vw 0 0 0 var(--color-black-8);box-shadow:100vw 0 0 0 var(--color-black-8)}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:before{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__content:focus:before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button__title{color:#007272;color:var(--color-sea-green);display:block;font-size:1.125rem;font-size:var(--font-size-basis);font-weight:400;font-weight:var(--font-weight-regular);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:focus{overflow:visible}.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button:focus:before{border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:#b3dada;color:var(--color-sea-green-30)}.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:#14555a;color:var(--color-emerald-green)}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button span[hidden]{font-weight:500;font-weight:var(--font-weight-medium)}html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:#f2f4ec;background-color:var(--color-pistachio)}
@@ -36,7 +36,7 @@
36
36
 
37
37
  .dnb-tabs__content:focus {
38
38
  position: relative; }
39
- .dnb-tabs__content:focus::after {
39
+ .dnb-tabs__content:focus::before {
40
40
  content: '';
41
41
  position: absolute;
42
42
  z-index: -1;
@@ -47,13 +47,13 @@
47
47
  max-width: 100vw;
48
48
  border-radius: 0.5rem;
49
49
  outline: none; }
50
- html[data-whatinput='keyboard'] .dnb-tabs__content:focus::after {
50
+ html[data-whatinput='keyboard'] .dnb-tabs__content:focus::before {
51
51
  --border-color: var(--color-emerald-green);
52
52
  -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
53
53
  box-shadow: 0 0 0 0.125rem var(--border-color);
54
54
  border-color: transparent; }
55
55
  @media screen and (-ms-high-contrast: none) {
56
- html[data-whatinput='keyboard'] .dnb-tabs__content:focus::after {
56
+ html[data-whatinput='keyboard'] .dnb-tabs__content:focus::before {
57
57
  -webkit-box-shadow: 0 0 0 0.125rem #14555a;
58
58
  box-shadow: 0 0 0 0.125rem #14555a;
59
59
  -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
@@ -1 +1 @@
1
- .dnb-tabs__tabs:not(.dnb-section):before{background-color:#ebebeb;background-color:var(--color-black-8);-webkit-box-shadow:100vw 0 0 0 #ebebeb;box-shadow:100vw 0 0 0 #ebebeb;-webkit-box-shadow:100vw 0 0 0 var(--color-black-8);box-shadow:100vw 0 0 0 var(--color-black-8)}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:after{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content:focus:after{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__content:focus:after{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button__title{color:#007272;color:var(--color-sea-green);display:block;font-size:1.125rem;font-size:var(--font-size-basis);font-weight:400;font-weight:var(--font-weight-regular);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:focus{overflow:visible}.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button:focus:before{border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:#b3dada;color:var(--color-sea-green-30)}.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:#14555a;color:var(--color-emerald-green)}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button span[hidden]{font-weight:500;font-weight:var(--font-weight-medium)}
1
+ .dnb-tabs__tabs:not(.dnb-section):before{background-color:#ebebeb;background-color:var(--color-black-8);-webkit-box-shadow:100vw 0 0 0 #ebebeb;box-shadow:100vw 0 0 0 #ebebeb;-webkit-box-shadow:100vw 0 0 0 var(--color-black-8);box-shadow:100vw 0 0 0 var(--color-black-8)}.dnb-tabs__tabs__tablist:focus{border-radius:.5rem}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type{border-radius:0 50% 50% 0}.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type{border-radius:50% 0 0 50%}.dnb-tabs--at-edge .dnb-tabs__tabs__tablist:focus{border-radius:0}.dnb-tabs__content:focus{position:relative}.dnb-tabs__content:focus:before{border-radius:.5rem;bottom:-.5rem;content:"";left:-.5rem;max-width:100vw;outline:none;position:absolute;right:-.5rem;top:.125rem;z-index:-1}html[data-whatinput=keyboard] .dnb-tabs__content:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__content:focus:before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button__title{color:#007272;color:var(--color-sea-green);display:block;font-size:1.125rem;font-size:var(--font-size-basis);font-weight:400;font-weight:var(--font-weight-regular);padding:.5rem 0 .25rem;text-align:center}html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-tabs__button:hover:not([disabled]):after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:focus{overflow:visible}.dnb-tabs__button:focus:before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-tabs__button:focus:before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-tabs__button:focus:before{border-radius:1.5rem;bottom:.5rem;left:-.375rem;right:-.375rem;top:.5rem}.dnb-tabs__button[disabled] .dnb-tabs__button__title{color:#b3dada;color:var(--color-sea-green-30)}.dnb-tabs__button:not([disabled]).selected:after,.dnb-tabs__button:not([disabled]):active:after{background-color:#007272;background-color:var(--color-sea-green);border-radius:2px;height:2px}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button:not([disabled]):active .dnb-tabs__button__title{color:#14555a;color:var(--color-emerald-green)}.dnb-tabs__button:not([disabled]).selected .dnb-tabs__button__title,.dnb-tabs__button span[hidden]{font-weight:500;font-weight:var(--font-weight-medium)}
@@ -36,9 +36,12 @@
36
36
  border-radius: 0;
37
37
  }
38
38
 
39
+ // Make focus ring when keyboard is used to navigate
39
40
  &__content:focus {
40
41
  position: relative;
41
- &::after {
42
+
43
+ // Use "before" (instead of after) in order to not collide with Section styles
44
+ &::before {
42
45
  content: '';
43
46
  position: absolute;
44
47
  z-index: -1;
@@ -60,7 +60,8 @@ const Upload = localProps => {
60
60
  const {
61
61
  files,
62
62
  setFiles,
63
- setInternalFiles
63
+ setInternalFiles,
64
+ existsInFiles
64
65
  } = useUpload(id);
65
66
  return React.createElement(UploadContext.Provider, {
66
67
  value: _objectSpread(_objectSpread({}, extendedProps), {}, {
@@ -75,24 +76,21 @@ const Upload = localProps => {
75
76
  }, props), _UploadInfo || (_UploadInfo = React.createElement(UploadInfo, null)), _UploadFileInput || (_UploadFileInput = React.createElement(UploadFileInput, null)), _UploadFileList || (_UploadFileList = React.createElement(UploadFileList, null)))));
76
77
 
77
78
  function onInputUpload(newFiles) {
78
- const existsInFiles = file => files.some(({
79
- file: f
80
- }) => {
81
- return f.name === file.name && f.size === file.size && f.lastModified === file.lastModified;
82
- });
79
+ const mergedFiles = [...files, ...newFiles.map(fileItem => {
80
+ const {
81
+ file
82
+ } = fileItem;
83
83
 
84
- const uniqueFiles = [...files, ...newFiles.filter(({
85
- file
86
- }) => {
87
- return !existsInFiles(file);
88
- }).map(fileItem => {
89
84
  if (!fileItem.id) {
90
85
  fileItem.id = makeUniqueId();
91
86
  }
92
87
 
88
+ fileItem.exists = existsInFiles(file, files);
93
89
  return fileItem;
94
90
  })];
95
- const verifiedFiles = verifyFiles(uniqueFiles, {
91
+ const verifiedFiles = verifyFiles(mergedFiles.filter(({
92
+ exists
93
+ }) => !exists), {
96
94
  fileMaxSize,
97
95
  acceptedFileTypes,
98
96
  errorUnsupportedFile,
@@ -100,7 +98,7 @@ const Upload = localProps => {
100
98
  });
101
99
  const validFiles = [...verifiedFiles].slice(0, filesAmountLimit);
102
100
  setFiles(validFiles);
103
- setInternalFiles(verifiedFiles);
101
+ setInternalFiles(mergedFiles);
104
102
 
105
103
  if (typeof onChange === 'function') {
106
104
  onChange({
@@ -1,12 +1,12 @@
1
1
  var _UploadStatus;
2
2
 
3
- import React, { useEffect, useRef } from 'react';
3
+ import React, { useRef } from 'react';
4
4
  import Button from '../button/Button';
5
5
  import { folder as FolderIcon } from '../../icons';
6
6
  import { makeUniqueId } from '../../shared/component-helper';
7
7
  import { UploadContext } from './UploadContext';
8
8
  import UploadStatus from './UploadStatus';
9
- import useUpload from './useUpload';
9
+ import { extendWithAbbreviation } from './UploadVerify';
10
10
 
11
11
  const UploadFileInput = () => {
12
12
  const fileInput = useRef(null);
@@ -18,17 +18,6 @@ const UploadFileInput = () => {
18
18
  onInputUpload,
19
19
  filesAmountLimit
20
20
  } = context;
21
- const {
22
- internalFiles
23
- } = useUpload(id);
24
- const accept = acceptedFileTypes.reduce((accept, format, index) => {
25
- const previus = index === 0 ? '' : `${accept},`;
26
- return `${previus} .${format}`;
27
- }, '');
28
- useEffect(() => {
29
- fileInput.current.value = null;
30
- fileInput.current.accept = accept;
31
- }, []);
32
21
 
33
22
  const openFileDialog = () => {
34
23
  var _fileInput$current;
@@ -37,6 +26,7 @@ const UploadFileInput = () => {
37
26
  };
38
27
 
39
28
  const sharedId = id || makeUniqueId();
29
+ const accept = extendWithAbbreviation(acceptedFileTypes).map(type => `.${type}`).join(',');
40
30
  return React.createElement("div", {
41
31
  "data-testid": "upload-file-input"
42
32
  }, React.createElement(Button, {
@@ -48,19 +38,20 @@ const UploadFileInput = () => {
48
38
  icon_position: "left",
49
39
  variant: "secondary",
50
40
  wrap: true,
51
- onClick: openFileDialog,
52
- disabled: internalFiles.length > filesAmountLimit
41
+ onClick: openFileDialog
53
42
  }, buttonText), _UploadStatus || (_UploadStatus = React.createElement(UploadStatus, null)), React.createElement("input", {
54
43
  "aria-labelledby": `${sharedId}-input`,
55
44
  "data-testid": "upload-file-input-input",
56
45
  ref: fileInput,
46
+ accept: accept,
57
47
  className: "dnb-upload__file-input",
58
48
  type: "file",
59
- onChange: handleFileInput,
49
+ onChange: onChangeHandler,
50
+ onClick: onClickHandler,
60
51
  multiple: filesAmountLimit > 1
61
52
  }));
62
53
 
63
- function handleFileInput(event) {
54
+ function onChangeHandler(event) {
64
55
  const target = event.target;
65
56
  const {
66
57
  files
@@ -71,6 +62,11 @@ const UploadFileInput = () => {
71
62
  };
72
63
  }));
73
64
  }
65
+
66
+ function onClickHandler(event) {
67
+ const target = event.target;
68
+ target.value = null;
69
+ }
74
70
  };
75
71
 
76
72
  export default UploadFileInput;
@@ -48,6 +48,7 @@ function UploadFileList() {
48
48
 
49
49
  return React.createElement(UploadFileListCell, {
50
50
  key: index,
51
+ id: id,
51
52
  uploadFile: uploadFile,
52
53
  onDelete: onDeleteHandler,
53
54
  deleteButtonText: deleteButton,
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { UploadFile } from './types';
3
3
  export declare type UploadFileListCellProps = {
4
+ id: string;
4
5
  /**
5
6
  * Uploaded file
6
7
  */
@@ -15,5 +16,5 @@ export declare type UploadFileListCellProps = {
15
16
  loadingText: React.ReactNode;
16
17
  deleteButtonText: React.ReactNode;
17
18
  };
18
- declare const UploadFileListCell: ({ uploadFile, onDelete, loadingText, deleteButtonText, }: UploadFileListCellProps) => JSX.Element;
19
+ declare const UploadFileListCell: ({ id, uploadFile, onDelete, loadingText, deleteButtonText, }: UploadFileListCellProps) => JSX.Element;
19
20
  export default UploadFileListCell;
@@ -1,6 +1,7 @@
1
1
  var _ProgressIndicator, _Icon;
2
2
 
3
3
  import React, { useRef } from 'react';
4
+ import classnames from 'classnames';
4
5
  import Button from '../button/Button';
5
6
  import Icon from '../../components/Icon';
6
7
  import FormStatus from '../../components/FormStatus';
@@ -8,6 +9,7 @@ import ProgressIndicator from '../../components/progress-indicator';
8
9
  import P from '../../elements/P';
9
10
  import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_pdf_medium as pdf, file_xls_medium as xls, file_ppt_medium as ppt, file_csv_medium as csv, file_txt_medium as txt, file_xml_medium as xml, file_medium as file } from '../../icons';
10
11
  import { getPreviousSibling, warn } from '../../shared/component-helper';
12
+ import useUpload from './useUpload';
11
13
  const images = {
12
14
  pdf,
13
15
  xls,
@@ -19,6 +21,7 @@ const images = {
19
21
  };
20
22
 
21
23
  const UploadFileListCell = ({
24
+ id,
22
25
  uploadFile,
23
26
  onDelete,
24
27
  loadingText,
@@ -39,6 +42,7 @@ const UploadFileListCell = ({
39
42
  const hasWarning = errorMessage != null;
40
43
  const imageUrl = URL.createObjectURL(file);
41
44
  const cellRef = useRef();
45
+ const exists = useExistsHighlight(id, file);
42
46
 
43
47
  const handleDisappearFocus = () => {
44
48
  try {
@@ -57,7 +61,7 @@ const UploadFileListCell = ({
57
61
 
58
62
  return React.createElement("li", {
59
63
  "data-testid": "upload-file-list-cell",
60
- className: 'dnb-upload__file-cell' + (hasWarning ? " dnb-upload__file-cell--warning" : ""),
64
+ className: classnames('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', exists && 'dnb-upload__file-cell--highlight'),
61
65
  ref: cellRef
62
66
  }, React.createElement("div", {
63
67
  className: "dnb-upload__file-cell__content"
@@ -121,4 +125,34 @@ const UploadFileListCell = ({
121
125
  }
122
126
  };
123
127
 
124
- export default UploadFileListCell;
128
+ export default UploadFileListCell;
129
+
130
+ function useExistsHighlight(id, file) {
131
+ const {
132
+ internalFiles
133
+ } = useUpload(id);
134
+ const [exists, updateExists] = React.useState(false);
135
+ const timerRef = React.useRef();
136
+
137
+ const clearTimers = () => {
138
+ clearTimeout(timerRef.current);
139
+ };
140
+
141
+ React.useEffect(() => {
142
+ const exists = internalFiles.some(({
143
+ exists,
144
+ file: f
145
+ }) => {
146
+ return exists && f.name === file.name && f.size === file.size;
147
+ });
148
+
149
+ if (exists) {
150
+ updateExists(true);
151
+ clearTimers();
152
+ timerRef.current = setTimeout(() => updateExists(false), 1500);
153
+ }
154
+
155
+ return clearTimers;
156
+ }, [file, internalFiles]);
157
+ return exists;
158
+ }
@@ -1,2 +1,5 @@
1
- import { UploadContextProps, UploadFile } from './types';
1
+ import { UploadFile, UploadContextProps, UploadAcceptedFileTypes } from './types';
2
2
  export declare function verifyFiles(files: UploadFile[], context: Pick<UploadContextProps, 'errorUnsupportedFile' | 'errorLargeFile' | 'acceptedFileTypes' | 'fileMaxSize'>): UploadFile[];
3
+ export declare function extendWithAbbreviation(acceptedFileTypes: UploadAcceptedFileTypes, abbreviations?: {
4
+ jpg: string;
5
+ }): string[];
@@ -17,7 +17,7 @@ export function verifyFiles(files, context) {
17
17
  return false;
18
18
  }
19
19
 
20
- const foundType = acceptedFileTypes.some(type => {
20
+ const foundType = extendWithAbbreviation(acceptedFileTypes).some(type => {
21
21
  return file.type.includes(type);
22
22
  });
23
23
  return !foundType ? errorUnsupportedFile : null;
@@ -36,4 +36,15 @@ export function verifyFiles(files, context) {
36
36
  return item;
37
37
  });
38
38
  return cleanedFiles;
39
+ }
40
+ export function extendWithAbbreviation(acceptedFileTypes, abbreviations = {
41
+ jpg: 'jpeg'
42
+ }) {
43
+ const list = [...acceptedFileTypes];
44
+ Object.entries(abbreviations).forEach(([type, abbr]) => {
45
+ if (list.some(t => t === type) && !list.some(t => t === abbr)) {
46
+ list.push(abbr);
47
+ }
48
+ });
49
+ return list;
39
50
  }
@@ -27,9 +27,22 @@
27
27
  .dnb-upload--active {
28
28
  background-color: #f2f4ec;
29
29
  background-color: var(--color-pistachio); }
30
- .dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon {
31
- color: #dc2a2a;
32
- color: var(--color-fire-red); }
30
+ .dnb-upload__file-cell {
31
+ /** Highlight Animation */
32
+ -webkit-transition: background-color;
33
+ transition: background-color;
34
+ -webkit-transition-duration: 1.5s;
35
+ transition-duration: 1.5s;
36
+ -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0, 1);
37
+ transition-timing-function: cubic-bezier(0.42, 0, 0, 1);
38
+ -webkit-transition-timing-function: var(--easing-default);
39
+ transition-timing-function: var(--easing-default); }
40
+ .dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon {
41
+ color: #dc2a2a;
42
+ color: var(--color-fire-red); }
43
+ .dnb-upload__file-cell--highlight {
44
+ background-color: #fbf6ec;
45
+ background-color: var(--color-sand-yellow); }
33
46
  .dnb-upload__text.dnb-p {
34
47
  color: #737373;
35
48
  color: var(--color-black-55); }
@@ -1 +1 @@
1
- .dnb-upload{background-color:#fff;background-color:var(--color-white);border-radius:.5rem}.dnb-upload__outline{stroke:#007272;stroke:var(--color-sea-green);stroke-width:.1875rem;border-radius:.5rem}.dnb-upload--active .dnb-upload__outline{stroke:#14555a;stroke:var(--color-emerald-green);bottom:-1px;height:calc(100% + 2px);inset:-1px;left:-1px;right:-1px;top:-1px;width:calc(100% + 2px)}.dnb-upload--active .dnb-upload__outline rect{stroke-width:.25rem;stroke-dasharray:0}.dnb-upload--active{background-color:#f2f4ec;background-color:var(--color-pistachio)}.dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon{color:#dc2a2a;color:var(--color-fire-red)}.dnb-upload__subtitle.dnb-p,.dnb-upload__text.dnb-p{color:#737373;color:var(--color-black-55)}
1
+ .dnb-upload{background-color:#fff;background-color:var(--color-white);border-radius:.5rem}.dnb-upload__outline{stroke:#007272;stroke:var(--color-sea-green);stroke-width:.1875rem;border-radius:.5rem}.dnb-upload--active .dnb-upload__outline{stroke:#14555a;stroke:var(--color-emerald-green);bottom:-1px;height:calc(100% + 2px);inset:-1px;left:-1px;right:-1px;top:-1px;width:calc(100% + 2px)}.dnb-upload--active .dnb-upload__outline rect{stroke-width:.25rem;stroke-dasharray:0}.dnb-upload--active{background-color:#f2f4ec;background-color:var(--color-pistachio)}.dnb-upload__file-cell{-webkit-transition:background-color;transition:background-color;-webkit-transition-duration:1.5s;transition-duration:1.5s;-webkit-transition-timing-function:cubic-bezier(.42,0,0,1);transition-timing-function:cubic-bezier(.42,0,0,1);-webkit-transition-timing-function:var(--easing-default);transition-timing-function:var(--easing-default)}.dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon{color:#dc2a2a;color:var(--color-fire-red)}.dnb-upload__file-cell--highlight{background-color:#fbf6ec;background-color:var(--color-sand-yellow)}.dnb-upload__subtitle.dnb-p,.dnb-upload__text.dnb-p{color:#737373;color:var(--color-black-55)}
@@ -35,6 +35,15 @@
35
35
  &--warning &__content__left .dnb-icon {
36
36
  color: var(--color-fire-red);
37
37
  }
38
+
39
+ /** Highlight Animation */
40
+ transition: background-color;
41
+ transition-duration: 1.5s;
42
+ transition-timing-function: var(--easing-default);
43
+
44
+ &--highlight {
45
+ background-color: var(--color-sand-yellow);
46
+ }
38
47
  }
39
48
 
40
49
  &__text.dnb-p {
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { SkeletonShow } from '../skeleton/Skeleton';
3
3
  import { LocaleProps, SpacingProps } from '../../shared/types';
4
+ export declare type UploadAcceptedFileTypes = string[];
4
5
  export declare type UploadProps = {
5
6
  /**
6
7
  * unique id used with the useUpload hook to manage the files
@@ -9,7 +10,7 @@ export declare type UploadProps = {
9
10
  /**
10
11
  * list of accepted file types.
11
12
  */
12
- acceptedFileTypes: string[];
13
+ acceptedFileTypes: UploadAcceptedFileTypes;
13
14
  /**
14
15
  * Skeleton should be applied when loading content
15
16
  * Default: null
@@ -63,5 +64,6 @@ export declare type UploadFile = {
63
64
  file: File;
64
65
  errorMessage?: React.ReactNode;
65
66
  isLoading?: boolean;
67
+ exists?: boolean;
66
68
  id?: string;
67
69
  };
@@ -4,11 +4,10 @@ export declare type useUploadReturn = {
4
4
  setFiles: (files: UploadFile[]) => void;
5
5
  internalFiles: UploadFile[];
6
6
  setInternalFiles: (files: UploadFile[]) => void;
7
+ existsInFiles: (file: File, fileItems?: UploadFile[]) => boolean;
7
8
  };
8
9
  /**
9
10
  * Use together with Upload with the same id to manage the files from outside the component.
10
- * @param id string, must match the id of the Upload component
11
- * @returns { files: UploadFile[], setFiles: (file: UploadFile[]) => void }
12
11
  */
13
12
  declare function useUpload(id: string): useUploadReturn;
14
13
  export default useUpload;
@@ -18,11 +18,23 @@ function useUpload(id) {
18
18
  });
19
19
  };
20
20
 
21
+ const files = (data === null || data === void 0 ? void 0 : data.files) || [];
22
+ const internalFiles = (data === null || data === void 0 ? void 0 : data.internalFiles) || [];
23
+
24
+ const existsInFiles = (file, fileItems = files) => {
25
+ return fileItems.some(({
26
+ file: f
27
+ }) => {
28
+ return f.name === file.name && f.size === file.size && f.lastModified === file.lastModified;
29
+ });
30
+ };
31
+
21
32
  return {
22
- files: (data === null || data === void 0 ? void 0 : data.files) || [],
33
+ files,
23
34
  setFiles,
24
- internalFiles: (data === null || data === void 0 ? void 0 : data.internalFiles) || [],
25
- setInternalFiles
35
+ internalFiles,
36
+ setInternalFiles,
37
+ existsInFiles
26
38
  };
27
39
  }
28
40
 
@@ -49,5 +49,5 @@ declare const Element: React.ForwardRefExoticComponent<Pick<{
49
49
  skeleton_method?: SkeletonMethods;
50
50
  } & import("../shared/types").SpacingElementProps & {
51
51
  space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
52
- } & ElementInternalProps & React.HTMLProps<HTMLElement>, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "top" | "right" | "bottom" | "left" | "width" | "height" | "size" | "children" | "className" | "skeleton" | "space" | "alt" | "src" | "shape" | "list" | "step" | "content" | "inner_ref" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "class" | "innerRef" | "skeletonMethod" | "internalClass" | "css" | "skeleton_method"> & React.RefAttributes<unknown>>;
52
+ } & ElementInternalProps & React.HTMLProps<HTMLElement>, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "top" | "right" | "bottom" | "left" | "space" | "width" | "height" | "size" | "children" | "className" | "skeleton" | "alt" | "src" | "shape" | "list" | "step" | "content" | "inner_ref" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "sizes" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "class" | "innerRef" | "skeletonMethod" | "internalClass" | "css" | "skeleton_method"> & React.RefAttributes<unknown>>;
53
53
  export default Element;
@@ -2,7 +2,7 @@ export function init() {
2
2
  if (typeof window !== 'undefined') {
3
3
  class Eufemia {
4
4
  get version() {
5
- return '9.34.3';
5
+ return '9.36.0';
6
6
  }
7
7
 
8
8
  }
@@ -32,10 +32,6 @@ export declare type MediaQueryProperties = {
32
32
  * If set to true, no MediaQuery will be used.
33
33
  */
34
34
  disabled?: boolean;
35
- /**
36
- * If set to true, no Eufemia warning will be shown when window.matchMedia is undefined
37
- */
38
- dismissWarning?: boolean;
39
35
  /**
40
36
  * For debugging
41
37
  */
@@ -84,7 +80,7 @@ export declare const isMatchMediaSupported: () => boolean;
84
80
  * @property {boolean} log - print used query to console
85
81
  * @returns MediaQueryList type
86
82
  */
87
- export declare function makeMediaQueryList({ query, when, not, log, disabled, dismissWarning, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
83
+ export declare function makeMediaQueryList({ query, when, not, log, disabled, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
88
84
  /**
89
85
  * Adds a listener to the window.matchMedia Browser API
90
86
  *
@@ -46,16 +46,11 @@ export function makeMediaQueryList({
46
46
  when,
47
47
  not = null,
48
48
  log = false,
49
- disabled = false,
50
- dismissWarning = false
49
+ disabled = false
51
50
  } = {}, breakpoints = null) {
52
51
  const isSupported = isMatchMediaSupported();
53
52
 
54
53
  if (disabled || !isSupported) {
55
- if (!dismissWarning && !isSupported) {
56
- warn('window.matchMedia is "undefined"');
57
- }
58
-
59
54
  return null;
60
55
  }
61
56
 
@@ -1 +1,6 @@
1
- export const SpacingHelper: (props: any) => {};
1
+ export const SpacingHelper: (props: (Record<string, unknown> | import("./types").SpacingProps) & {
2
+ maxWidth?: string;
3
+ maxHeight?: string;
4
+ width?: string;
5
+ height?: string;
6
+ }) => {};
@@ -62,8 +62,7 @@ export default function useMedia(props = {}) {
62
62
  const mediaQueryList = makeMediaQueryList({
63
63
  when,
64
64
  disabled,
65
- log,
66
- dismissWarning: true
65
+ log
67
66
  }, context.breakpoints);
68
67
  const event = createMediaQueryListener(mediaQueryList, match => {
69
68
  if (!disabledRef.current && match) {