@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.
- package/CHANGELOG.md +33 -0
- package/cjs/components/breadcrumb/style/dnb-breadcrumb.css +6 -0
- package/cjs/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
- package/cjs/components/global-status/style/dnb-global-status.css +6 -0
- package/cjs/components/global-status/style/dnb-global-status.min.css +1 -1
- package/cjs/components/section/Section.d.ts +2 -2
- package/cjs/components/section/style/_section.scss +8 -0
- package/cjs/components/section/style/dnb-section.css +6 -0
- package/cjs/components/section/style/dnb-section.min.css +1 -1
- package/cjs/components/space/Space.d.ts +0 -2
- package/cjs/components/space/Space.js +18 -12
- package/cjs/components/space/SpacingUtils.d.ts +14 -9
- package/cjs/components/space/SpacingUtils.js +59 -45
- package/cjs/components/step-indicator/StepIndicatorSidebar.js +5 -1
- package/cjs/components/tabs/Tabs.d.ts +2 -2
- package/cjs/components/tabs/Tabs.js +6 -11
- package/cjs/components/tabs/TabsContentWrapper.d.ts +1 -1
- package/cjs/components/tabs/TabsContentWrapper.js +6 -4
- package/cjs/components/tabs/style/_tabs.scss +15 -2
- package/cjs/components/tabs/style/dnb-tabs.css +14 -2
- package/cjs/components/tabs/style/dnb-tabs.min.css +1 -1
- package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +3 -3
- package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -1
- package/cjs/components/tabs/style/themes/dnb-tabs-theme-ui.css +3 -3
- package/cjs/components/tabs/style/themes/dnb-tabs-theme-ui.min.css +1 -1
- package/cjs/components/tabs/style/themes/dnb-tabs-theme-ui.scss +4 -1
- package/cjs/components/upload/Upload.js +14 -17
- package/cjs/components/upload/UploadFileInput.js +17 -22
- package/cjs/components/upload/UploadFileList.js +1 -0
- package/cjs/components/upload/UploadFileListCell.d.ts +2 -1
- package/cjs/components/upload/UploadFileListCell.js +65 -7
- package/cjs/components/upload/UploadVerify.d.ts +4 -1
- package/cjs/components/upload/UploadVerify.js +67 -1
- package/cjs/components/upload/style/themes/dnb-upload-theme-ui.css +16 -3
- package/cjs/components/upload/style/themes/dnb-upload-theme-ui.min.css +1 -1
- package/cjs/components/upload/style/themes/dnb-upload-theme-ui.scss +9 -0
- package/cjs/components/upload/types.d.ts +3 -1
- package/cjs/components/upload/useUpload.d.ts +1 -2
- package/cjs/components/upload/useUpload.js +19 -3
- package/cjs/elements/Element.d.ts +1 -1
- package/cjs/shared/Eufemia.js +1 -1
- package/cjs/shared/MediaQueryUtils.d.ts +1 -5
- package/cjs/shared/MediaQueryUtils.js +1 -7
- package/cjs/shared/SpacingHelper.d.ts +6 -1
- package/cjs/shared/useMedia.js +1 -2
- package/cjs/shared/useMediaQuery.js +4 -2
- package/cjs/style/dnb-ui-components.css +20 -2
- package/cjs/style/dnb-ui-components.min.css +2 -2
- package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.css +22 -9
- package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +2 -2
- package/cjs/style/themes/theme-ui/dnb-theme-ui.css +19 -6
- package/cjs/style/themes/theme-ui/dnb-theme-ui.min.css +2 -2
- package/components/breadcrumb/style/dnb-breadcrumb.css +6 -0
- package/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
- package/components/global-status/style/dnb-global-status.css +6 -0
- package/components/global-status/style/dnb-global-status.min.css +1 -1
- package/components/section/Section.d.ts +2 -2
- package/components/section/style/_section.scss +8 -0
- package/components/section/style/dnb-section.css +6 -0
- package/components/section/style/dnb-section.min.css +1 -1
- package/components/space/Space.d.ts +0 -2
- package/components/space/Space.js +17 -11
- package/components/space/SpacingUtils.d.ts +14 -9
- package/components/space/SpacingUtils.js +57 -44
- package/components/step-indicator/StepIndicatorSidebar.js +3 -1
- package/components/tabs/Tabs.d.ts +2 -2
- package/components/tabs/Tabs.js +6 -11
- package/components/tabs/TabsContentWrapper.d.ts +1 -1
- package/components/tabs/TabsContentWrapper.js +5 -4
- package/components/tabs/style/_tabs.scss +15 -2
- package/components/tabs/style/dnb-tabs.css +14 -2
- package/components/tabs/style/dnb-tabs.min.css +1 -1
- package/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +3 -3
- package/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -1
- package/components/tabs/style/themes/dnb-tabs-theme-ui.css +3 -3
- package/components/tabs/style/themes/dnb-tabs-theme-ui.min.css +1 -1
- package/components/tabs/style/themes/dnb-tabs-theme-ui.scss +4 -1
- package/components/upload/Upload.js +11 -15
- package/components/upload/UploadFileInput.js +16 -21
- package/components/upload/UploadFileList.js +1 -0
- package/components/upload/UploadFileListCell.d.ts +2 -1
- package/components/upload/UploadFileListCell.js +44 -3
- package/components/upload/UploadVerify.d.ts +4 -1
- package/components/upload/UploadVerify.js +27 -1
- package/components/upload/style/themes/dnb-upload-theme-ui.css +16 -3
- package/components/upload/style/themes/dnb-upload-theme-ui.min.css +1 -1
- package/components/upload/style/themes/dnb-upload-theme-ui.scss +9 -0
- package/components/upload/types.d.ts +3 -1
- package/components/upload/useUpload.d.ts +1 -2
- package/components/upload/useUpload.js +17 -3
- package/elements/Element.d.ts +1 -1
- package/es/components/breadcrumb/style/dnb-breadcrumb.css +6 -0
- package/es/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
- package/es/components/global-status/style/dnb-global-status.css +6 -0
- package/es/components/global-status/style/dnb-global-status.min.css +1 -1
- package/es/components/section/Section.d.ts +2 -2
- package/es/components/section/style/_section.scss +8 -0
- package/es/components/section/style/dnb-section.css +6 -0
- package/es/components/section/style/dnb-section.min.css +1 -1
- package/es/components/space/Space.d.ts +0 -2
- package/es/components/space/Space.js +17 -11
- package/es/components/space/SpacingUtils.d.ts +14 -9
- package/es/components/space/SpacingUtils.js +44 -36
- package/es/components/step-indicator/StepIndicatorSidebar.js +3 -1
- package/es/components/tabs/Tabs.d.ts +2 -2
- package/es/components/tabs/Tabs.js +6 -11
- package/es/components/tabs/TabsContentWrapper.d.ts +1 -1
- package/es/components/tabs/TabsContentWrapper.js +5 -4
- package/es/components/tabs/style/_tabs.scss +15 -2
- package/es/components/tabs/style/dnb-tabs.css +14 -2
- package/es/components/tabs/style/dnb-tabs.min.css +1 -1
- package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +3 -3
- package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -1
- package/es/components/tabs/style/themes/dnb-tabs-theme-ui.css +3 -3
- package/es/components/tabs/style/themes/dnb-tabs-theme-ui.min.css +1 -1
- package/es/components/tabs/style/themes/dnb-tabs-theme-ui.scss +4 -1
- package/es/components/upload/Upload.js +11 -13
- package/es/components/upload/UploadFileInput.js +13 -17
- package/es/components/upload/UploadFileList.js +1 -0
- package/es/components/upload/UploadFileListCell.d.ts +2 -1
- package/es/components/upload/UploadFileListCell.js +36 -2
- package/es/components/upload/UploadVerify.d.ts +4 -1
- package/es/components/upload/UploadVerify.js +12 -1
- package/es/components/upload/style/themes/dnb-upload-theme-ui.css +16 -3
- package/es/components/upload/style/themes/dnb-upload-theme-ui.min.css +1 -1
- package/es/components/upload/style/themes/dnb-upload-theme-ui.scss +9 -0
- package/es/components/upload/types.d.ts +3 -1
- package/es/components/upload/useUpload.d.ts +1 -2
- package/es/components/upload/useUpload.js +15 -3
- package/es/elements/Element.d.ts +1 -1
- package/es/shared/Eufemia.js +1 -1
- package/es/shared/MediaQueryUtils.d.ts +1 -5
- package/es/shared/MediaQueryUtils.js +1 -6
- package/es/shared/SpacingHelper.d.ts +6 -1
- package/es/shared/useMedia.js +1 -2
- package/es/shared/useMediaQuery.js +4 -2
- package/es/style/dnb-ui-components.css +20 -2
- package/es/style/dnb-ui-components.min.css +2 -2
- package/es/style/themes/theme-eiendom/dnb-theme-eiendom.css +22 -9
- package/es/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +2 -2
- package/es/style/themes/theme-ui/dnb-theme-ui.css +19 -6
- package/es/style/themes/theme-ui/dnb-theme-ui.min.css +2 -2
- package/esm/dnb-ui-basis.min.mjs +1 -1
- package/esm/dnb-ui-components.min.mjs +1 -1
- package/esm/dnb-ui-elements.min.mjs +3 -3
- package/esm/dnb-ui-extensions.min.mjs +4 -4
- package/esm/dnb-ui-lib.min.mjs +2 -2
- package/esm/dnb-ui-web-components.min.mjs +2 -2
- package/package.json +1 -1
- package/shared/Eufemia.js +1 -1
- package/shared/MediaQueryUtils.d.ts +1 -5
- package/shared/MediaQueryUtils.js +1 -7
- package/shared/SpacingHelper.d.ts +6 -1
- package/shared/useMedia.js +1 -2
- package/shared/useMediaQuery.js +4 -2
- package/style/dnb-ui-components.css +20 -2
- package/style/dnb-ui-components.min.css +2 -2
- package/style/themes/theme-eiendom/dnb-theme-eiendom.css +22 -9
- package/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +2 -2
- package/style/themes/theme-ui/dnb-theme-ui.css +19 -6
- package/style/themes/theme-ui/dnb-theme-ui.min.css +2 -2
- package/umd/dnb-ui-basis.min.js +1 -1
- package/umd/dnb-ui-components.min.js +1 -1
- package/umd/dnb-ui-elements.min.js +4 -4
- package/umd/dnb-ui-extensions.min.js +3 -3
- package/umd/dnb-ui-lib.min.js +3 -3
- 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
|
|
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::
|
|
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::
|
|
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::
|
|
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:
|
|
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::
|
|
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::
|
|
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::
|
|
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:
|
|
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
|
-
|
|
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
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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(
|
|
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(
|
|
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, {
|
|
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
|
|
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:
|
|
49
|
+
onChange: onChangeHandler,
|
|
50
|
+
onClick: onClickHandler,
|
|
60
51
|
multiple: filesAmountLimit > 1
|
|
61
52
|
}));
|
|
62
53
|
|
|
63
|
-
function
|
|
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;
|
|
@@ -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'
|
|
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,
|
|
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
|
|
31
|
-
|
|
32
|
-
|
|
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:
|
|
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
|
|
33
|
+
files,
|
|
23
34
|
setFiles,
|
|
24
|
-
internalFiles
|
|
25
|
-
setInternalFiles
|
|
35
|
+
internalFiles,
|
|
36
|
+
setInternalFiles,
|
|
37
|
+
existsInFiles
|
|
26
38
|
};
|
|
27
39
|
}
|
|
28
40
|
|
package/es/elements/Element.d.ts
CHANGED
|
@@ -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" | "
|
|
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;
|
package/es/shared/Eufemia.js
CHANGED
|
@@ -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,
|
|
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
|
|
package/es/shared/useMedia.js
CHANGED
|
@@ -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) {
|