diff --git a/README.md b/README.md
index 7e5977bfd80..52273a190fb 100644
--- a/README.md
+++ b/README.md
@@ -101,9 +101,16 @@ You could import all components also from `@ui5/webcomponents-react` directly, b
### Browser Support
`@ui5/webcomponents-react` is supporting all modern major browsers. There is no support for Internet Explorer 11 built in.
-If you want your application to run in IE11, you will have to polyfill some features by importing:
+If you want your application to run in IE11, you will have to polyfill some features by importing these polyfills as **first** imports in your `src/index.js`:
```js
+import 'react-app-polyfill/ie11';
+import '@ui5/webcomponents-base/src/features/browsersupport/IE11';
import '@ui5/webcomponents-react-base/polyfill/IE11';
+import '@webcomponents/webcomponentsjs/webcomponents-bundle';
+```
+You can install `react-app-polyfill` and `@webcomponents/webcomponentsjs` with the following command:
+```bash
+npm install react-app-polyfill @webcomponents/webcomponentsjs --save
```
For Browser Support and the configuration of the UI5 Web Components, please take a look at the
diff --git a/package.json b/package.json
index ec67bf4c188..2f3ae4b7433 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"@types/react-dom": "^16.8.4",
"@types/sinon": "^7.0.12",
"@types/storybook__react": "^4.0.1",
+ "@webcomponents/webcomponentsjs": "^2.2.10",
"babel-code-frame": "^6.26.0",
"babel-loader": "^8.0.5",
"babel-preset-react-app": "^9.0.0",
@@ -91,6 +92,7 @@
"puppeteer": "^1.15.0",
"qs": "^6.7.0",
"react": "^16.8.6",
+ "react-app-polyfill": "^1.0.2",
"react-docgen-typescript-loader": "^3.1.0",
"react-dom": "^16.8.6",
"react-highlight.js": "^1.0.7",
diff --git a/packages/docs/.storybook/config.js b/packages/docs/.storybook/config.js
index 23d5684ce3b..cf73339eb5a 100644
--- a/packages/docs/.storybook/config.js
+++ b/packages/docs/.storybook/config.js
@@ -1,3 +1,6 @@
+import 'react-app-polyfill/ie11';
+import '@ui5/webcomponents-base/src/features/browsersupport/IE11';
+import '@webcomponents/webcomponentsjs/webcomponents-bundle';
import React from 'react';
import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider';
diff --git a/packages/docs/.storybook/webpack.config.js b/packages/docs/.storybook/webpack.config.js
index 89a6557cd5b..08ba1620a17 100644
--- a/packages/docs/.storybook/webpack.config.js
+++ b/packages/docs/.storybook/webpack.config.js
@@ -5,6 +5,9 @@ require('dotenv').config({
path: path.join(PATHS.root, '.env')
});
+process.env.NODE_ENV = 'development';
+process.env.BABEL_ENV = 'development';
+
module.exports = ({ config }) => {
const tsLoader = {
test: /\.tsx?$/,
@@ -12,7 +15,7 @@ module.exports = ({ config }) => {
{
loader: require.resolve('babel-loader'),
options: {
- presets: [require.resolve('babel-preset-react-app')]
+ presets: [[require.resolve('babel-preset-react-app'), { flow: false, typescript: true }]]
}
}
]
@@ -30,37 +33,48 @@ SKIP_DOC_GENERATION=true
tsLoader.use.push({ loader: require.resolve('react-docgen-typescript-loader') });
}
- return {
- ...config,
- module: {
- ...config.module,
- rules: [
- ...config.module.rules,
- tsLoader,
- {
- test: [/cldr\/.*\.json$/, /i18n\/.*\.json$/],
- loader: 'file-loader',
- options: {
- name: 'static/media/[name].[hash:8].[ext]'
- },
- type: 'javascript/auto'
- },
- {
- test: /\.properties$/,
- use: 'file-loader'
- }
- ]
- },
- resolve: {
- ...config.resolve,
- extensions: [...config.resolve.extensions, '.ts', '.tsx', '.jsx'],
- alias: {
- ...config.resolve.alias,
- '@shared': path.join(PATHS.root, 'shared'),
- '@ui5/webcomponents-react/lib': path.join(PATHS.root, 'packages', 'main', 'src', 'lib'),
- '@ui5/webcomponents-react-charts/lib': path.join(PATHS.root, 'packages', 'charts', 'src', 'lib'),
- '@ui5/webcomponents-react-base': path.join(PATHS.root, 'packages', 'base', 'src', 'index.ts')
+ config.module.rules.push(
+ tsLoader,
+ {
+ test: /\.(js|mjs)$/,
+ exclude: /@babel(?:\/|\\{1,2})runtime/,
+ loader: require.resolve('babel-loader'),
+ options: {
+ babelrc: false,
+ configFile: false,
+ compact: false,
+ presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],
+ cacheDirectory: true,
+ cacheCompression: false,
+
+ // If an error happens in a package, it's possible to be
+ // because it was compiled. Thus, we don't want the browser
+ // debugger to show the original code. Instead, the code
+ // being evaluated would be much more helpful.
+ sourceMaps: false
}
+ },
+ {
+ test: /\.properties$/,
+ use: 'file-loader'
}
+ );
+
+ config.module.rules = [
+ {
+ oneOf: config.module.rules
+ }
+ ];
+
+ config.resolve.extensions.push('.ts', '.tsx');
+ config.resolve.alias = {
+ ...config.resolve.alias,
+ '@shared': path.join(PATHS.root, 'shared'),
+ '@ui5/webcomponents-react/lib': path.join(PATHS.root, 'packages', 'main', 'src', 'lib'),
+ '@ui5/webcomponents-react-charts/lib': path.join(PATHS.root, 'packages', 'charts', 'src', 'lib'),
+ '@ui5/webcomponents-react-base/lib': path.join(PATHS.root, 'packages', 'base', 'src', 'lib'),
+ '@ui5/webcomponents-react-base/polyfill': path.join(PATHS.root, 'packages', 'base', 'npm', 'polyfill')
};
+
+ return config;
};
diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx
index 8362b7c2642..d093b53cb00 100644
--- a/packages/main/src/components/ThemeProvider/index.tsx
+++ b/packages/main/src/components/ThemeProvider/index.tsx
@@ -1,9 +1,9 @@
import boot from '@ui5/webcomponents-base/src/boot';
import { getCompactSize, getTheme } from '@ui5/webcomponents-base/src/Configuration';
import { injectThemeProperties } from '@ui5/webcomponents-base/src/theming/StyleInjection';
-import { createGenerateClassName, sap_fiori_3 } from '@ui5/webcomponents-react-base';
-import fiori3ThemeProperties from '@ui5/webcomponents/dist/themes/sap_fiori_3/parameters-bundle.css.json';
-import React, { Fragment, PureComponent, ReactNode } from 'react';
+import { createGenerateClassName, sap_fiori_3, Device } from '@ui5/webcomponents-react-base';
+import fiori3Theme from '@ui5/webcomponents/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js';
+import React, { FC, Fragment, ReactNode, useEffect, useMemo } from 'react';
import { JssProvider, ThemeProvider as ReactJssThemeProvider } from 'react-jss';
import { ContentDensity } from '../../lib/ContentDensity';
import { MessageToast } from '../../lib/MessageToast';
@@ -16,47 +16,57 @@ export interface ThemeProviderProps {
const generateClassName = createGenerateClassName();
-export class ThemeProvider extends PureComponent {
- static defaultProps = {
- withToastContainer: false
- };
-
- constructor(props) {
- super(props);
- boot().then((_) => {
- let existingThemingProperties = document.querySelector('head style[data-ui5-webcomponents-theme-properties]');
- if (!existingThemingProperties || !existingThemingProperties.innerHTML) {
- injectThemeProperties(fiori3ThemeProperties._);
+const ThemeProvider: FC = (props) => {
+ const theme = getTheme();
+ useEffect(() => {
+ boot().then(async () => {
+ // TODO will rename to 'data-ui5-theme-properties' after next UI5 Web Components Release
+ const styleElement = document.head.querySelector('style[data-ui5-webcomponents-theme-properties]');
+ // only inject parameters for sap_fiori_3 and if they haven't been injected before
+ if (theme === Themes.sap_fiori_3 && !styleElement.textContent) {
+ injectThemeProperties(fiori3Theme);
+ const CSSVarsPonyfill = window['CSSVarsPonyfill'];
+ if (Device.browser.msie && CSSVarsPonyfill) {
+ setTimeout(() => {
+ CSSVarsPonyfill.resetCssVars();
+ CSSVarsPonyfill.cssVars();
+ }, 0);
+ }
}
});
- }
+ }, [theme]);
+ const { withToastContainer, children } = props;
- private static getTheme = (theme: Themes) => {
+ const isCompactSize = getCompactSize();
+
+ const parameters = useMemo(() => {
if (theme === Themes.sap_fiori_3) return sap_fiori_3;
return null;
- };
-
- private static getContentDensity = (compactSize: boolean) => {
- return compactSize ? ContentDensity.Compact : ContentDensity.Cozy;
- };
-
- render() {
- const { withToastContainer } = this.props;
- return (
-
-
-
- {this.props.children}
- {withToastContainer && }
-
-
-
- );
- }
-}
+ }, [theme]);
+
+ const themeContext = useMemo(() => {
+ return {
+ theme,
+ contentDensity: isCompactSize ? ContentDensity.Compact : ContentDensity.Cozy,
+ parameters
+ };
+ }, [theme, isCompactSize, parameters]);
+
+ return (
+
+
+
+ {children}
+ {withToastContainer && }
+
+
+
+ );
+};
+
+ThemeProvider.displayName = 'ThemeProvider';
+ThemeProvider.defaultProps = {
+ withToastContainer: false
+};
+
+export { ThemeProvider };
diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json
index 7cc087189f4..51a8891a2fd 100644
--- a/scripts/rollup/results.json
+++ b/scripts/rollup/results.json
@@ -4,29 +4,29 @@
"filename": "charts.development.js",
"bundleType": "NODE_ES_DEV",
"packageName": "charts",
- "size": 39708,
- "gzip": 7661
+ "size": 39752,
+ "gzip": 7671
},
{
"filename": "charts.production.min.js",
"bundleType": "NODE_ES_PROD",
"packageName": "charts",
- "size": 39604,
- "gzip": 7639
+ "size": 39648,
+ "gzip": 7649
},
{
"filename": "charts.development.js",
"bundleType": "NODE_DEV",
"packageName": "charts",
- "size": 40469,
- "gzip": 7702
+ "size": 40513,
+ "gzip": 7711
},
{
"filename": "charts.production.min.js",
"bundleType": "NODE_PROD",
"packageName": "charts",
- "size": 20060,
- "gzip": 6117
+ "size": 20079,
+ "gzip": 6122
},
{
"filename": "base.development.js",
@@ -60,29 +60,29 @@
"filename": "main.development.js",
"bundleType": "NODE_ES_DEV",
"packageName": "main",
- "size": 180706,
- "gzip": 33215
+ "size": 184672,
+ "gzip": 34502
},
{
"filename": "main.production.min.js",
"bundleType": "NODE_ES_PROD",
"packageName": "main",
- "size": 180706,
- "gzip": 33215
+ "size": 184672,
+ "gzip": 34502
},
{
"filename": "main.development.js",
"bundleType": "NODE_DEV",
"packageName": "main",
- "size": 186313,
- "gzip": 33339
+ "size": 190406,
+ "gzip": 34658
},
{
"filename": "main.production.min.js",
"bundleType": "NODE_PROD",
"packageName": "main",
- "size": 95013,
- "gzip": 25174
+ "size": 97719,
+ "gzip": 26216
}
]
}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index aa38f079671..7bb70f3ec2d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3000,6 +3000,11 @@
"@webassemblyjs/wast-parser" "1.8.5"
"@xtuc/long" "4.2.2"
+"@webcomponents/webcomponentsjs@^2.2.10":
+ version "2.2.10"
+ resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.2.10.tgz#6f6bee0277833ae98d7e5b46f1e0fdb48cd5ff44"
+ integrity sha512-5dzhUhP+h0qMiK0IWb7VNb0OGBoXO3AuI6Qi8t9PoKT50s5L1jv0xnwnLq+cFgPuTB8FLTNP8xIDmyoOsKBy9Q==
+
"@webpack-contrib/schema-utils@^1.0.0-beta.0":
version "1.0.0-beta.0"
resolved "https://registry.yarnpkg.com/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz#bf9638c9464d177b48209e84209e23bee2eb4f65"
@@ -3460,7 +3465,7 @@ arrify@^1.0.1:
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
-asap@^2.0.0, asap@~2.0.3:
+asap@^2.0.0, asap@~2.0.3, asap@~2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -5251,6 +5256,11 @@ core-js-pure@3.1.4, core-js-pure@^3.0.1:
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.1.4.tgz#5fa17dc77002a169a3566cc48dc774d2e13e3769"
integrity sha512-uJ4Z7iPNwiu1foygbcZYJsJs1jiXrTTCvxfLDXNhI/I+NHbSIEyr548y4fcsCEyWY0XgfAG/qqaunJ1SThHenA==
+core-js@3.1.4, core-js@^3.0.1, core-js@^3.0.4, core-js@^3.1.3, core-js@^3.1.4:
+ version "3.1.4"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"
+ integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==
+
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -5261,11 +5271,6 @@ core-js@^2.4.0:
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
-core-js@^3.0.1, core-js@^3.0.4, core-js@^3.1.3, core-js@^3.1.4:
- version "3.1.4"
- resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"
- integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==
-
core-util-is@1.0.2, core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -11488,7 +11493,7 @@ oauth-sign@~0.9.0:
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -12827,6 +12832,13 @@ promise.series@^0.2.0:
resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
+promise@8.0.3:
+ version "8.0.3"
+ resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.3.tgz#f592e099c6cddc000d538ee7283bb190452b0bf6"
+ integrity sha512-HeRDUL1RJiLhyA0/grn+PTShlBAcLuh/1BJGtrvjwbvRDCTLLMEz9rOGCV+R3vHY4MixIuoMEd9Yq/XvsTPcjw==
+ dependencies:
+ asap "~2.0.6"
+
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
@@ -13055,7 +13067,7 @@ raf-schd@^4.0.0:
resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
-raf@^3.4.0:
+raf@3.4.1, raf@^3.4.0:
version "3.4.1"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -13146,6 +13158,18 @@ react-addons-create-fragment@^15.6.2:
loose-envify "^1.3.1"
object-assign "^4.1.0"
+react-app-polyfill@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.2.tgz#2a51175885c88245a2a356dc46df29f38ec9f060"
+ integrity sha512-yZcpLnIr0FOIzrOOz9JC37NWAWEuCaQWmYn9EWjEzlCW4cOmA5MkT5L3iP8QuUeFnoqVCTJgjIWYbXEJgNXhGA==
+ dependencies:
+ core-js "3.1.4"
+ object-assign "4.1.1"
+ promise "8.0.3"
+ raf "3.4.1"
+ regenerator-runtime "0.13.3"
+ whatwg-fetch "3.0.0"
+
react-chartjs-2@^2.7.6:
version "2.7.6"
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-2.7.6.tgz#b8cd29bed00bf55b9e8172b06466b4ecf2b86bfb"
@@ -13716,16 +13740,16 @@ regenerator-runtime@0.12.1, regenerator-runtime@^0.12.0, regenerator-runtime@^0.
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
+regenerator-runtime@0.13.3, regenerator-runtime@^0.13.2:
+ version "0.13.3"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+ integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
+
regenerator-runtime@^0.11.0:
version "0.11.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-regenerator-runtime@^0.13.2:
- version "0.13.3"
- resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
- integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
-
regenerator-transform@^0.14.0:
version "0.14.1"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
@@ -16306,7 +16330,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
dependencies:
iconv-lite "0.4.24"
-whatwg-fetch@>=0.10.0:
+whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==