@dnb/eufemia 9.34.2 → 9.35.0

package/es/components/upload/UploadFileInput.js

@@ -1,12 +1,12 @@
 var _UploadStatus;
 
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import Button from '../button/Button';
 import { folder as FolderIcon } from '../../icons';
 import { makeUniqueId } from '../../shared/component-helper';
 import { UploadContext } from './UploadContext';
 import UploadStatus from './UploadStatus';
-import useUpload from './useUpload';
+import { extendWithAbbreviation } from './UploadVerify';
 
 const UploadFileInput = () => {
   const fileInput = useRef(null);
@@ -18,17 +18,6 @@ const UploadFileInput = () => {
     onInputUpload,
     filesAmountLimit
   } = context;
-  const {
-    internalFiles
-  } = useUpload(id);
-  const accept = acceptedFileTypes.reduce((accept, format, index) => {
-    const previus = index === 0 ? '' : `${accept},`;
-    return `${previus} .${format}`;
-  }, '');
-  useEffect(() => {
-    fileInput.current.value = null;
-    fileInput.current.accept = accept;
-  }, []);
 
   const openFileDialog = () => {
     var _fileInput$current;
@@ -37,6 +26,7 @@ const UploadFileInput = () => {
   };
 
   const sharedId = id || makeUniqueId();
+  const accept = extendWithAbbreviation(acceptedFileTypes).map(type => `.${type}`).join(',');
   return React.createElement("div", {
     "data-testid": "upload-file-input"
   }, React.createElement(Button, {
@@ -48,19 +38,20 @@ const UploadFileInput = () => {
     icon_position: "left",
     variant: "secondary",
     wrap: true,
-    onClick: openFileDialog,
-    disabled: internalFiles.length > filesAmountLimit
+    onClick: openFileDialog
   }, buttonText), _UploadStatus || (_UploadStatus = React.createElement(UploadStatus, null)), React.createElement("input", {
     "aria-labelledby": `${sharedId}-input`,
     "data-testid": "upload-file-input-input",
     ref: fileInput,
+    accept: accept,
     className: "dnb-upload__file-input",
     type: "file",
-    onChange: handleFileInput,
+    onChange: onChangeHandler,
+    onClick: onClickHandler,
     multiple: filesAmountLimit > 1
   }));
 
-  function handleFileInput(event) {
+  function onChangeHandler(event) {
     const target = event.target;
     const {
       files
@@ -71,6 +62,11 @@ const UploadFileInput = () => {
       };
     }));
   }
+
+  function onClickHandler(event) {
+    const target = event.target;
+    target.value = null;
+  }
 };
 
 export default UploadFileInput;

package/es/components/upload/UploadFileList.js

@@ -48,6 +48,7 @@ function UploadFileList() {
 
     return React.createElement(UploadFileListCell, {
       key: index,
+      id: id,
       uploadFile: uploadFile,
       onDelete: onDeleteHandler,
       deleteButtonText: deleteButton,

package/es/components/upload/UploadFileListCell.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { UploadFile } from './types';
 export declare type UploadFileListCellProps = {
+    id: string;
     /**
      * Uploaded file
      */
@@ -15,5 +16,5 @@ export declare type UploadFileListCellProps = {
     loadingText: React.ReactNode;
     deleteButtonText: React.ReactNode;
 };
-declare const UploadFileListCell: ({ uploadFile, onDelete, loadingText, deleteButtonText, }: UploadFileListCellProps) => JSX.Element;
+declare const UploadFileListCell: ({ id, uploadFile, onDelete, loadingText, deleteButtonText, }: UploadFileListCellProps) => JSX.Element;
 export default UploadFileListCell;

package/es/components/upload/UploadFileListCell.js

@@ -1,6 +1,7 @@
 var _ProgressIndicator, _Icon;
 
 import React, { useRef } from 'react';
+import classnames from 'classnames';
 import Button from '../button/Button';
 import Icon from '../../components/Icon';
 import FormStatus from '../../components/FormStatus';
@@ -8,6 +9,7 @@ import ProgressIndicator from '../../components/progress-indicator';
 import P from '../../elements/P';
 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';
 import { getPreviousSibling, warn } from '../../shared/component-helper';
+import useUpload from './useUpload';
 const images = {
   pdf,
   xls,
@@ -19,6 +21,7 @@ const images = {
 };
 
 const UploadFileListCell = ({
+  id,
   uploadFile,
   onDelete,
   loadingText,
@@ -39,6 +42,7 @@ const UploadFileListCell = ({
   const hasWarning = errorMessage != null;
   const imageUrl = URL.createObjectURL(file);
   const cellRef = useRef();
+  const exists = useExistsHighlight(id, file);
 
   const handleDisappearFocus = () => {
     try {
@@ -57,7 +61,7 @@ const UploadFileListCell = ({
 
   return React.createElement("li", {
     "data-testid": "upload-file-list-cell",
-    className: 'dnb-upload__file-cell' + (hasWarning ? " dnb-upload__file-cell--warning" : ""),
+    className: classnames('dnb-upload__file-cell', hasWarning && 'dnb-upload__file-cell--warning', exists && 'dnb-upload__file-cell--highlight'),
     ref: cellRef
   }, React.createElement("div", {
     className: "dnb-upload__file-cell__content"
@@ -121,4 +125,34 @@ const UploadFileListCell = ({
   }
 };
 
-export default UploadFileListCell;
+export default UploadFileListCell;
+
+function useExistsHighlight(id, file) {
+  const {
+    internalFiles
+  } = useUpload(id);
+  const [exists, updateExists] = React.useState(false);
+  const timerRef = React.useRef();
+
+  const clearTimers = () => {
+    clearTimeout(timerRef.current);
+  };
+
+  React.useEffect(() => {
+    const exists = internalFiles.some(({
+      exists,
+      file: f
+    }) => {
+      return exists && f.name === file.name && f.size === file.size;
+    });
+
+    if (exists) {
+      updateExists(true);
+      clearTimers();
+      timerRef.current = setTimeout(() => updateExists(false), 1500);
+    }
+
+    return clearTimers;
+  }, [file, internalFiles]);
+  return exists;
+}

package/es/components/upload/UploadVerify.d.ts

@@ -1,2 +1,5 @@
-import { UploadContextProps, UploadFile } from './types';
+import { UploadFile, UploadContextProps, UploadAcceptedFileTypes } from './types';
 export declare function verifyFiles(files: UploadFile[], context: Pick<UploadContextProps, 'errorUnsupportedFile' | 'errorLargeFile' | 'acceptedFileTypes' | 'fileMaxSize'>): UploadFile[];
+export declare function extendWithAbbreviation(acceptedFileTypes: UploadAcceptedFileTypes, abbreviations?: {
+    jpg: string;
+}): string[];

package/es/components/upload/UploadVerify.js

@@ -17,7 +17,7 @@ export function verifyFiles(files, context) {
       return false;
     }
 
-    const foundType = acceptedFileTypes.some(type => {
+    const foundType = extendWithAbbreviation(acceptedFileTypes).some(type => {
       return file.type.includes(type);
     });
     return !foundType ? errorUnsupportedFile : null;
@@ -36,4 +36,15 @@ export function verifyFiles(files, context) {
     return item;
   });
   return cleanedFiles;
+}
+export function extendWithAbbreviation(acceptedFileTypes, abbreviations = {
+  jpg: 'jpeg'
+}) {
+  const list = [...acceptedFileTypes];
+  Object.entries(abbreviations).forEach(([type, abbr]) => {
+    if (list.some(t => t === type) && !list.some(t => t === abbr)) {
+      list.push(abbr);
+    }
+  });
+  return list;
 }

package/es/components/upload/style/themes/dnb-upload-theme-ui.css

@@ -27,9 +27,22 @@
   .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__file-cell {
+    /** Highlight Animation */
+    -webkit-transition: background-color;
+    transition: background-color;
+    -webkit-transition-duration: 1.5s;
+            transition-duration: 1.5s;
+    -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0, 1);
+            transition-timing-function: cubic-bezier(0.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__text.dnb-p {
     color: #737373;
     color: var(--color-black-55); }

package/es/components/upload/style/themes/dnb-upload-theme-ui.min.css

@@ -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)}
+.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)}

package/es/components/upload/style/themes/dnb-upload-theme-ui.scss

@@ -35,6 +35,15 @@
     &--warning &__content__left .dnb-icon {
       color: var(--color-fire-red);
     }
+
+    /** Highlight Animation */
+    transition: background-color;
+    transition-duration: 1.5s;
+    transition-timing-function: var(--easing-default);
+
+    &--highlight {
+      background-color: var(--color-sand-yellow);
+    }
   }
 
   &__text.dnb-p {

package/es/components/upload/types.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SkeletonShow } from '../skeleton/Skeleton';
 import { LocaleProps, SpacingProps } from '../../shared/types';
+export declare type UploadAcceptedFileTypes = string[];
 export declare type UploadProps = {
     /**
      * unique id used with the useUpload hook to manage the files
@@ -9,7 +10,7 @@ export declare type UploadProps = {
     /**
      * list of accepted file types.
      */
-    acceptedFileTypes: string[];
+    acceptedFileTypes: UploadAcceptedFileTypes;
     /**
      * Skeleton should be applied when loading content
      * Default: null
@@ -63,5 +64,6 @@ export declare type UploadFile = {
     file: File;
     errorMessage?: React.ReactNode;
     isLoading?: boolean;
+    exists?: boolean;
     id?: string;
 };

package/es/components/upload/useUpload.d.ts

@@ -4,11 +4,10 @@ export declare type useUploadReturn = {
     setFiles: (files: UploadFile[]) => void;
     internalFiles: UploadFile[];
     setInternalFiles: (files: UploadFile[]) => void;
+    existsInFiles: (file: File, fileItems?: UploadFile[]) => boolean;
 };
 /**
  * Use together with Upload with the same id to manage the files from outside the component.
- * @param id string, must match the id of the Upload component
- * @returns { files: UploadFile[], setFiles: (file: UploadFile[]) => void }
  */
 declare function useUpload(id: string): useUploadReturn;
 export default useUpload;

package/es/components/upload/useUpload.js

@@ -18,11 +18,23 @@ function useUpload(id) {
     });
   };
 
+  const files = (data === null || data === void 0 ? void 0 : data.files) || [];
+  const internalFiles = (data === null || data === void 0 ? void 0 : data.internalFiles) || [];
+
+  const existsInFiles = (file, fileItems = files) => {
+    return fileItems.some(({
+      file: f
+    }) => {
+      return f.name === file.name && f.size === file.size && f.lastModified === file.lastModified;
+    });
+  };
+
   return {
-    files: (data === null || data === void 0 ? void 0 : data.files) || [],
+    files,
     setFiles,
-    internalFiles: (data === null || data === void 0 ? void 0 : data.internalFiles) || [],
-    setInternalFiles
+    internalFiles,
+    setInternalFiles,
+    existsInFiles
   };
 }
 

package/es/shared/Eufemia.js

@@ -2,7 +2,7 @@ export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '9.34.2';
+        return '__VERSION__';
       }
 
     }

package/es/style/dnb-ui-components.css

@@ -5394,6 +5394,12 @@ html[data-dnb-modal-active] {
   .dnb-section--spacing-medium {
     padding: 1.5rem 0;
     padding: var(--spacing-medium) 0; }
+  .dnb-section--spacing-x-large {
+    padding: 3rem 0;
+    padding: var(--spacing-x-large) 0; }
+  .dnb-section--spacing-xx-large {
+    padding: 3.5rem 0;
+    padding: var(--spacing-xx-large) 0; }
   .dnb-section--spacing, .dnb-section--spacing-large {
     padding: 2rem 0;
     padding: var(--spacing-large) 0; }
@@ -7536,13 +7542,25 @@ span.dnb-space--no-collapse > span {
     /* stylelint-enable */ }
     html[data-whatinput='keyboard'] .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus {
       margin-right: 0.5rem; }
+  .dnb-tabs__cached {
+    opacity: 1;
+    -webkit-transition: opacity 1s cubic-bezier(0.42, 0, 0, 1);
+    transition: opacity 1s cubic-bezier(0.42, 0, 0, 1);
+    -webkit-transition: opacity 1s var(--easing-default);
+    transition: opacity 1s var(--easing-default); }
+  .dnb-tabs__cached--hidden {
+    opacity: 0;
+    visibility: hidden;
+    height: 0 !important;
+    overflow: hidden; }
+  html[data-visual-test] .dnb-tabs .dnb-tabs__cached,
   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; }
+  .dnb-tabs__content {
+    padding-bottom: 0; }
 
 /*
 * Tag component