fix: fix application component issue in next.js

src/components/ActivityTimeline/index.d.ts

@@ -10,6 +10,7 @@ interface onToggleSectionEventShape {
 
 export interface ActivityTimelineProps extends BaseProps {
     children?: ReactNode;
+    variant?: 'default' | 'accordion';
     multiple?: boolean;
     onToggleSection?: (value: onToggleSectionEventShape) => void;
     activeSectionNames?: Names;

src/components/FileSelector/icon.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ErrorIcon, FileIcon, FilesIcon, UploadIcon } from './icons';
+import { FileListType } from './types';
 
 export default function Icon({ files, error, isDragOver, value, uploadIcon }) {
     if (value !== null) {
@@ -19,7 +20,7 @@ export default function Icon({ files, error, isDragOver, value, uploadIcon }) {
     return uploadIcon || <UploadIcon />;
 }
 Icon.propTypes = {
-    files: PropTypes.instanceOf(FileList),
+    files: PropTypes.instanceOf(FileListType),
     error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     isDragOver: PropTypes.bool,
     value: PropTypes.object,

src/components/FileSelector/types.js

@@ -0,0 +1,4 @@
+import { isServer } from '../../libs/utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export const FileListType = isServer ? Object : window.FileList;

src/libs/utils/getBrowserLocale.js

@@ -1,8 +1,8 @@
+import isServer from './isServer';
+
 export default function getBrowserLocale() {
-    return (
-        (navigator.languages && navigator.languages[0]) ||
-        navigator.language ||
-        navigator.userLanguage ||
-        'en-US'
-    );
+    if (isServer) return 'en-US';
+    if (navigator.languages && navigator.languages.length > 0) return navigator.languages[0];
+    if (navigator.language) return navigator.language;
+    return 'en-US';
 }

src/libs/utils/index.js

@@ -2,5 +2,6 @@ import uniqueId from './uniqueId';
 import getLocale from './getLocale';
 import getBrowserLocale from './getBrowserLocale';
 import getSuffixSI from './getSuffixSI';
+import isServer from './isServer';
 
-export { uniqueId, getLocale, getBrowserLocale, getSuffixSI };
+export { uniqueId, getLocale, getBrowserLocale, getSuffixSI, isServer };

src/libs/utils/isServer.js

@@ -0,0 +1,11 @@
+const isBrowser = !!(
+    typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement
+);
+
+const isNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+
+const isServer = !(isBrowser || isNative);
+
+export default isServer;

src/styles/helpers/color/isValidColor.js

@@ -1,4 +1,7 @@
+import { isServer } from '../../../libs/utils';
+
 export default function isValidColor(color) {
+    if (isServer) return true;
     const element = document.createElement('a');
     element.style.color = color;
     return element.style.color !== '';