diff --git a/package-lock.json b/package-lock.json index 1a3d2146f..e640e985c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -279,10 +279,13 @@ "dev": true }, "@material/base": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", - "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", - "dev": true + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-1.0.0.tgz", + "integrity": "sha512-5dxFp46x5FA+Epg6YHLzN+5zRt9S2wR84UdvVAEJ1egea94m9UHUg7y9tAnNSN16aexRSywmzyLwPr+i8PGEYA==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } }, "@material/button": { "version": "0.43.0", @@ -317,6 +320,14 @@ "@material/animation": "^0.41.0", "@material/base": "^0.41.0", "@material/theme": "^0.43.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + } } }, "@material/rtl": { @@ -356,6 +367,27 @@ "@material/rtl": "^0.40.1", "@material/shape": "^0.41.0", "@material/theme": "^0.41.0" + }, + "dependencies": { + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + } + } + } } }, "@material/checkbox": { @@ -370,6 +402,25 @@ "@material/rtl": "^0.40.1", "@material/selection-control": "^0.41.0", "@material/theme": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + } } }, "@material/chips": { @@ -386,6 +437,25 @@ "@material/shape": "^0.41.0", "@material/theme": "^0.41.0", "@material/typography": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + } } }, "@material/dialog": { @@ -406,6 +476,12 @@ "focus-trap": "^4.0.2" }, "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, "@material/elevation": { "version": "0.43.0", "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-0.43.0.tgz", @@ -491,6 +567,25 @@ "@material/theme": "^0.41.0", "@material/typography": "^0.41.0", "focus-trap": "^3.0.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + } } }, "@material/elevation": { @@ -516,8 +611,35 @@ "@material/shape": "^0.41.0", "@material/theme": "^0.41.0", "@material/typography": "^0.41.0" + }, + "dependencies": { + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + } + } + } } }, + "@material/feature-targeting": { + "version": "0.44.1", + "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-0.44.1.tgz", + "integrity": "sha512-90cc7njn4aHbH9UxY8qgZth1W5JgOgcEdWdubH1t7sFkwqFxS5g3zgxSBt46TygFBVIXNZNq35Xmg80wgqO7Pg==", + "dev": true + }, "@material/floating-label": { "version": "0.41.0", "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-0.41.0.tgz", @@ -529,6 +651,14 @@ "@material/rtl": "^0.40.1", "@material/theme": "^0.41.0", "@material/typography": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + } } }, "@material/icon-button": { @@ -540,6 +670,25 @@ "@material/base": "^0.41.0", "@material/ripple": "^0.41.0", "@material/theme": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + } } }, "@material/layout-grid": { @@ -549,14 +698,44 @@ "dev": true }, "@material/line-ripple": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.41.0.tgz", - "integrity": "sha512-5DDIoC3d78fCLhNgle7DRFojT3D2SF+XVpUd3g6yLZmybHB7832p4bgl/qGpbIXwk1wAQA1dkUgKH5foxorjNQ==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-1.0.0.tgz", + "integrity": "sha512-sFFpoFXVnqkknkac5bCrMhKGacay26AWVFfc3acaEGjQgkvF8VBV/bS41+CioACyubpc4JL69PU9Um/t7xAQVw==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/theme": "^0.41.0" + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/theme": "^1.0.0", + "tslib": "^1.9.3" + }, + "dependencies": { + "@material/animation": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-1.0.0.tgz", + "integrity": "sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, + "@material/base": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-1.0.0.tgz", + "integrity": "sha512-5dxFp46x5FA+Epg6YHLzN+5zRt9S2wR84UdvVAEJ1egea94m9UHUg7y9tAnNSN16aexRSywmzyLwPr+i8PGEYA==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, + "@material/theme": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-1.0.0.tgz", + "integrity": "sha512-Bg/BQLU5MmCwtQ3DHcSs9DodZB8PTvuItv1wXrP54S/wBVwryIB5uMDmERhnItbNnAFbkKhlAuhn1asMmMzfkQ==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } + } } }, "@material/linear-progress": { @@ -568,6 +747,14 @@ "@material/animation": "^0.41.0", "@material/base": "^0.41.0", "@material/theme": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + } } }, "@material/list": { @@ -583,20 +770,87 @@ "@material/shape": "^0.41.0", "@material/theme": "^0.41.0", "@material/typography": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + } } }, "@material/menu-surface": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/menu-surface/-/menu-surface-0.41.0.tgz", - "integrity": "sha512-HiGFrEIF8DCfEtS8mRtc6MCcK2CJNCh0U6KWWeSIXv+9nW2oiN09piuULXM7aU46wETvfweVcgvHNJvBAXnXjQ==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/menu-surface/-/menu-surface-1.0.1.tgz", + "integrity": "sha512-JFUa3kQ+NtpuK/mgWIcyhC1AClKmt9EQdW4SG2KQhPAGg0juWiZwyMySDIjf+V0buSUZXZ7N26bi32+Y1LvZ3w==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/elevation": "^0.41.0", - "@material/rtl": "^0.40.1", - "@material/shape": "^0.41.0", - "@material/theme": "^0.41.0" + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/elevation": "^1.0.0", + "@material/feature-targeting": "^0.44.1", + "@material/rtl": "^0.42.0", + "@material/shape": "^1.0.0", + "@material/theme": "^1.0.0", + "tslib": "^1.9.3" + }, + "dependencies": { + "@material/animation": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-1.0.0.tgz", + "integrity": "sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, + "@material/elevation": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-1.0.0.tgz", + "integrity": "sha512-TqmvEXmZDYLm2X5lEnjKCsZMDkCXpxFFxL22AfCAQB5L4d0gAS7vqDEE797y4Rp+BBKEcOP71mum1l56RI3NBQ==", + "dev": true, + "requires": { + "@material/animation": "^1.0.0", + "@material/feature-targeting": "^0.44.1", + "@material/theme": "^1.0.0" + } + }, + "@material/rtl": { + "version": "0.42.0", + "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-0.42.0.tgz", + "integrity": "sha512-VrnrKJzhmspsN8WXHuxxBZ69yM5IwhCUqWr1t1eNfw3ZEvEj7i1g3P31HGowKThIN1dc1Wh4LE14rCISWCtv5w==", + "dev": true + }, + "@material/shape": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/shape/-/shape-1.0.0.tgz", + "integrity": "sha512-zfXEacPQZmH+ujVtaFyfAsYiF46j1QCcFzJeZVouG4pznrbA7XD6614Ywg0wbyWX5iB6hD52ld/IN+R/6oxKqA==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } + }, + "@material/theme": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-1.0.0.tgz", + "integrity": "sha512-Bg/BQLU5MmCwtQ3DHcSs9DodZB8PTvuItv1wXrP54S/wBVwryIB5uMDmERhnItbNnAFbkKhlAuhn1asMmMzfkQ==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } + } } }, "@material/notched-outline": { @@ -610,6 +864,14 @@ "@material/rtl": "^0.40.1", "@material/shape": "^0.41.0", "@material/theme": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + } } }, "@material/radio": { @@ -623,17 +885,68 @@ "@material/ripple": "^0.41.0", "@material/selection-control": "^0.41.0", "@material/theme": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + } } }, "@material/ripple": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", - "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-1.0.0.tgz", + "integrity": "sha512-WUjc6LU2D9mRjfHJPQgj8ljG0NuppwOAM6bIt5wyJ3aiUyYQqW05cvB7YCbYE7WHgfxFtL6UOrGuUG4Z+izJDw==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/theme": "^0.41.0" + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/dom": "^1.0.0", + "@material/feature-targeting": "^0.44.1", + "@material/theme": "^1.0.0", + "tslib": "^1.9.3" + }, + "dependencies": { + "@material/animation": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-1.0.0.tgz", + "integrity": "sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, + "@material/dom": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/dom/-/dom-1.0.0.tgz", + "integrity": "sha512-P2WDLk/9iZxg4RCvwqCtrObm0Qm0EF5G6X/rw21FKTg6uhwmPR75tCj2Zr1yyvVS9rjLxXZf0bQRsgvKxVE6Zw==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, + "@material/theme": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-1.0.0.tgz", + "integrity": "sha512-Bg/BQLU5MmCwtQ3DHcSs9DodZB8PTvuItv1wXrP54S/wBVwryIB5uMDmERhnItbNnAFbkKhlAuhn1asMmMzfkQ==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } + } } }, "@material/rtl": { @@ -747,6 +1060,27 @@ "dev": true, "requires": { "@material/ripple": "^0.41.0" + }, + "dependencies": { + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + } + } + } } }, "@material/shape": { @@ -773,6 +1107,12 @@ "@material/typography": "^0.43.0" }, "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, "@material/icon-button": { "version": "0.43.0", "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-0.43.0.tgz", @@ -834,6 +1174,25 @@ "@material/rtl": "^0.40.1", "@material/selection-control": "^0.41.0", "@material/theme": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + } } }, "@material/tab": { @@ -848,6 +1207,36 @@ "@material/tab-indicator": "^0.41.0", "@material/theme": "^0.41.0", "@material/typography": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + }, + "@material/tab-indicator": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.41.0.tgz", + "integrity": "sha512-IBJEO+O8OnFVgRAn4CCGccpyNPF1bvTp5+1foD46S2u7XZLD7ejfxTQhqE5HYWtVLQ3zk1aYo3+N9+oSUkpM2w==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + } } }, "@material/tab-bar": { @@ -860,28 +1249,143 @@ "@material/elevation": "^0.41.0", "@material/tab": "^0.41.0", "@material/tab-scroller": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/tab-scroller": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.41.0.tgz", + "integrity": "sha512-dyxaxLLSiDigIUVJ0BwqnKBtBseALrOhmPgvk6BQVDbynnRQ2bOvaNZ7cbpe3A0i8zOQGOoTZF4i9D38/iubcg==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/tab": "^0.41.0" + } + } } }, "@material/tab-indicator": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-0.41.0.tgz", - "integrity": "sha512-IBJEO+O8OnFVgRAn4CCGccpyNPF1bvTp5+1foD46S2u7XZLD7ejfxTQhqE5HYWtVLQ3zk1aYo3+N9+oSUkpM2w==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-1.0.0.tgz", + "integrity": "sha512-4wT+dAc6YOe7ASPt68soHSqKlr/VVl5JcS883M8I2kAtJe92BglsHYW2ALa9IdqwWcvhFaw0sXZKWohLRwibMw==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/theme": "^0.41.0" + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/theme": "^1.0.0", + "tslib": "^1.9.3" + }, + "dependencies": { + "@material/animation": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-1.0.0.tgz", + "integrity": "sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, + "@material/theme": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-1.0.0.tgz", + "integrity": "sha512-Bg/BQLU5MmCwtQ3DHcSs9DodZB8PTvuItv1wXrP54S/wBVwryIB5uMDmERhnItbNnAFbkKhlAuhn1asMmMzfkQ==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } + } } }, "@material/tab-scroller": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.41.0.tgz", - "integrity": "sha512-dyxaxLLSiDigIUVJ0BwqnKBtBseALrOhmPgvk6BQVDbynnRQ2bOvaNZ7cbpe3A0i8zOQGOoTZF4i9D38/iubcg==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-1.0.1.tgz", + "integrity": "sha512-WpOw710NbLlx3W/ZqAmeoBCon+6u6/PpoSusrh/Qvxats9hajc5bQUSfjm/grzEhZcqfyXN/bCoci3lBIbfWvw==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/tab": "^0.41.0" + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/dom": "^1.0.1", + "@material/tab": "^1.0.1", + "tslib": "^1.9.3" + }, + "dependencies": { + "@material/animation": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-1.0.0.tgz", + "integrity": "sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, + "@material/dom": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/dom/-/dom-1.0.1.tgz", + "integrity": "sha512-7gb9Tk8YBn2fLEa5fJfvDexG0QxvRGDb8c6uZEhvK4bTd2ZHCfHg9KrO+smC6Trbn5jC+FsBvdRZBbMjtS/E4g==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, + "@material/ripple": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-1.0.1.tgz", + "integrity": "sha512-aBigRoVMjIU2lLDq7TMocI2H2YFbO1hICs5FTdSRp4Yis/QFTrgaW32q8yuHdZI56j+b2BWIWapqA2xpSmCMXQ==", + "dev": true, + "requires": { + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/dom": "^1.0.1", + "@material/feature-targeting": "^0.44.1", + "@material/theme": "^1.0.0", + "tslib": "^1.9.3" + } + }, + "@material/rtl": { + "version": "0.42.0", + "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-0.42.0.tgz", + "integrity": "sha512-VrnrKJzhmspsN8WXHuxxBZ69yM5IwhCUqWr1t1eNfw3ZEvEj7i1g3P31HGowKThIN1dc1Wh4LE14rCISWCtv5w==", + "dev": true + }, + "@material/tab": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/tab/-/tab-1.0.1.tgz", + "integrity": "sha512-//JXHaL1ebTpR6Z1mZpd6Ltry/kD840HSI/NQRMCdjxKjdap3cVtNfjRZ5ST4snGEqihLQ7gsqfDg/XZ5k0j3g==", + "dev": true, + "requires": { + "@material/base": "^1.0.0", + "@material/ripple": "^1.0.1", + "@material/rtl": "^0.42.0", + "@material/tab-indicator": "^1.0.0", + "@material/theme": "^1.0.0", + "@material/typography": "^1.0.0", + "tslib": "^1.9.3" + } + }, + "@material/theme": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-1.0.0.tgz", + "integrity": "sha512-Bg/BQLU5MmCwtQ3DHcSs9DodZB8PTvuItv1wXrP54S/wBVwryIB5uMDmERhnItbNnAFbkKhlAuhn1asMmMzfkQ==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } + }, + "@material/typography": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/typography/-/typography-1.0.0.tgz", + "integrity": "sha512-Oeqbjci1cC7jTE8/n3dwnkqKe9ZeWiaE+rgMtRYtRFw1HvAw14SpGA5EEAS/Li2Hu2KZ50FYCe3HYqShfxtChA==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } + } } }, "@material/textfield": { @@ -900,6 +1404,36 @@ "@material/shape": "^0.41.0", "@material/theme": "^0.41.0", "@material/typography": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/line-ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.41.0.tgz", + "integrity": "sha512-5DDIoC3d78fCLhNgle7DRFojT3D2SF+XVpUd3g6yLZmybHB7832p4bgl/qGpbIXwk1wAQA1dkUgKH5foxorjNQ==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + }, + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + } } }, "@material/theme": { @@ -922,6 +1456,25 @@ "@material/shape": "^0.41.0", "@material/theme": "^0.41.0", "@material/typography": "^0.41.0" + }, + "dependencies": { + "@material/base": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", + "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "dev": true + }, + "@material/ripple": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", + "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/theme": "^0.41.0" + } + } } }, "@material/typography": { diff --git a/package.json b/package.json index c881e9f91..b99bef45a 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "test:unit": "npm run clean && cross-env NODE_ENV=test karma start karma.local.js --single-run", "test:unit-ci": "karma start karma.ci.js --single-run", "test:image-diff": "MDC_COMMIT_HASH=$(git rev-parse --short HEAD) MDC_BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) mocha --require ts-node/register --require babel-core/register --ui tdd --timeout 30000 test/screenshot/diff-suite.tsx", - "test:screenshots": "docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY=\"${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}\" mdcreact/screenshots /bin/sh -c 'git checkout .; git checkout master; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 35s; npm run test:image-diff'", + "test:screenshots": "docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY=\"${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}\" mdcreact/screenshots /bin/sh -c 'git checkout .; git checkout master; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 40s; npm run test:image-diff'", "upload:screenshots": "node ./test/screenshot/upload-screenshots.js" }, "config": { @@ -60,6 +60,7 @@ }, "devDependencies": { "@google-cloud/storage": "^1.6.0", + "@material/base": "^1.0.0", "@material/button": "^0.43.0", "@material/card": "^0.41.0", "@material/checkbox": "^0.41.0", @@ -71,20 +72,20 @@ "@material/floating-label": "^0.41.0", "@material/icon-button": "^0.41.0", "@material/layout-grid": "^0.41.0", - "@material/line-ripple": "^0.41.0", + "@material/line-ripple": "^1.0.0", "@material/linear-progress": "^0.41.0", "@material/list": "^0.41.0", - "@material/menu-surface": "^0.41.0", + "@material/menu-surface": "^1.0.1", "@material/notched-outline": "^0.41.0", "@material/radio": "^0.41.0", - "@material/ripple": "^0.41.0", + "@material/ripple": "^1.0.0", "@material/select": "^0.40.1", "@material/snackbar": "^0.43.0", "@material/switch": "^0.41.0", "@material/tab": "^0.41.0", "@material/tab-bar": "^0.41.0", - "@material/tab-indicator": "^0.41.0", - "@material/tab-scroller": "^0.41.0", + "@material/tab-indicator": "^1.0.0", + "@material/tab-scroller": "^1.0.0", "@material/textfield": "^0.41.0", "@material/top-app-bar": "^0.41.0", "@material/typography": "^0.41.0", diff --git a/packages/checkbox/NativeControl.tsx b/packages/checkbox/NativeControl.tsx index dbb6e4b16..eb14b7ef5 100644 --- a/packages/checkbox/NativeControl.tsx +++ b/packages/checkbox/NativeControl.tsx @@ -24,7 +24,7 @@ import * as React from 'react'; export interface NativeControlProps extends React.HTMLProps{ checked: boolean; disabled: boolean; - id: string; + id?: string; rippleActivatorRef: React.RefObject; onChange: (evt: React.ChangeEvent) => void; }; diff --git a/packages/chips/ChipSet.tsx b/packages/chips/ChipSet.tsx index 123156fd7..826093d90 100644 --- a/packages/chips/ChipSet.tsx +++ b/packages/chips/ChipSet.tsx @@ -29,13 +29,13 @@ import {ChipProps} from './Chip'; // eslint-disable-line no-unused-vars type ChipType = React.ReactElement; export interface ChipSetProps { - className: string; - selectedChipIds: string[]; - handleSelect: (selectedChipIds: string[]) => void; - updateChips: (chips: Partial[]) => void; - choice: boolean; - filter: boolean; - input: boolean; + className?: string; + selectedChipIds?: string[]; + handleSelect?: (selectedChipIds: string[]) => void; + updateChips?: (chips: Partial[]) => void; + choice?: boolean; + filter?: boolean; + input?: boolean; children: ChipType | ChipType[]; }; @@ -50,7 +50,7 @@ export default class ChipSet extends React.Component constructor(props: ChipSetProps) { super(props); this.state = { - selectedChipIds: props.selectedChipIds, + selectedChipIds: props.selectedChipIds!, foundation: null, hasInitialized: false, }; @@ -78,7 +78,7 @@ export default class ChipSet extends React.Component this.initChipSelection(); } if (selectedChipIds !== prevProps.selectedChipIds) { - this.setState({selectedChipIds}); + this.setState({selectedChipIds: selectedChipIds!}); } } @@ -101,7 +101,7 @@ export default class ChipSet extends React.Component setSelected: () => { const selectedChipIds = this.state.foundation.getSelectedChipIds().slice(); this.setState({selectedChipIds}, () => { - this.props.handleSelect(selectedChipIds); + this.props.handleSelect!(selectedChipIds); }); }, removeChip: this.removeChip, @@ -143,7 +143,7 @@ export default class ChipSet extends React.Component } } const chipsArray = chips.length ? chips.map((chip) => chip.props) : []; - updateChips(chipsArray); + updateChips!(chipsArray); }; setCheckmarkWidth = (checkmark: ChipCheckmark | null) => { diff --git a/packages/chips/package.json b/packages/chips/package.json index c06cffd6f..6049472c6 100644 --- a/packages/chips/package.json +++ b/packages/chips/package.json @@ -21,7 +21,7 @@ "dependencies": { "@material/chips": "^0.41.0", "@material/react-ripple": "^0.10.0", - "classnames": "^2.2.5", + "classnames": "^2.2.6", "react": "^16.4.2" }, "publishConfig": { diff --git a/packages/dialog/DialogContent.tsx b/packages/dialog/DialogContent.tsx index 922a9b423..bd2f0cbc7 100644 --- a/packages/dialog/DialogContent.tsx +++ b/packages/dialog/DialogContent.tsx @@ -30,7 +30,7 @@ export interface DialogContentProps extends React.HTMLProps { id?: string, }; -const DialogContent: (props: DialogContentProps) => +const DialogContent: (props: DialogContentProps) => React.ReactElement = ({ /* eslint-disable react/prop-types */ className = '', diff --git a/packages/dialog/DialogFooter.tsx b/packages/dialog/DialogFooter.tsx index 34ed5c777..1e1169c37 100644 --- a/packages/dialog/DialogFooter.tsx +++ b/packages/dialog/DialogFooter.tsx @@ -30,7 +30,7 @@ export interface DialogFooterProps extends React.HTMLProps { }; -const DialogFooter: (props: DialogFooterProps) => +const DialogFooter: (props: DialogFooterProps) => React.ReactElement = ({ /* eslint-disable react/prop-types */ className = '', diff --git a/packages/dialog/DialogTitle.tsx b/packages/dialog/DialogTitle.tsx index 2f249a670..4b6ca7cf8 100644 --- a/packages/dialog/DialogTitle.tsx +++ b/packages/dialog/DialogTitle.tsx @@ -30,7 +30,7 @@ export interface DialogTitleProps extends React.HTMLProps { id?: string, }; -const DialogTitle: (props: DialogTitleProps) => +const DialogTitle: (props: DialogTitleProps) => React.ReactElement = ({ /* eslint-disable react/prop-types */ className = '', diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 97ebd6371..5a587234f 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -106,7 +106,7 @@ The Simple Dialog contains a list of potential actions. It does not contain butt ```js import React, {Component} from 'react'; import Dialog, {DialogTitle, DialogContent} from '@material/react-dialog'; -import List, {ListItem, ListItemGraphic, ListItemText} from '@material/react-dialog'; +import List, {ListItem, ListItemGraphic, ListItemText} from '@material/react-list'; import MaterialIcon from '@material/react-material-icon'; class Simple extends Component { diff --git a/packages/dialog/index.tsx b/packages/dialog/index.tsx index 9c44e48fc..e219eb894 100644 --- a/packages/dialog/index.tsx +++ b/packages/dialog/index.tsx @@ -84,7 +84,7 @@ function isDialogContent(element: any): element is DialogContent { return element.type === DialogContent; } -class Dialog extends React.Component< +class Dialog extends React.Component< DialogProps, DialogState > { diff --git a/packages/drawer/index.tsx b/packages/drawer/index.tsx index fed1f6de7..de962cbc6 100644 --- a/packages/drawer/index.tsx +++ b/packages/drawer/index.tsx @@ -40,15 +40,13 @@ import {FocusTrap} from 'focus-trap'; const {cssClasses: listCssClasses} = MDCListFoundation; export interface DrawerProps extends React.HTMLProps{ - className: string; - open: boolean; - onOpen: () => void; - onClose: () => void; - onTransitionEnd: React.TransitionEventHandler; - onKeyDown: React.KeyboardEventHandler; - tag: string; - dismissible: boolean; - modal: boolean; + className?: string; + open?: boolean; + onOpen?: () => void; + onClose?: () => void; + tag?: string; + dismissible?: boolean; + modal?: boolean; }; interface DrawerState { @@ -184,13 +182,13 @@ class Drawer extends React.Component { } handleKeyDown = (evt: React.KeyboardEvent) => { - this.props.onKeyDown(evt); + this.props.onKeyDown!(evt); if (!this.foundation) return; this.foundation.handleKeydown(evt); }; handleTransitionEnd = (evt: React.TransitionEvent) => { - this.props.onTransitionEnd(evt); + this.props.onTransitionEnd!(evt); if (!this.foundation) return; this.foundation.handleTransitionEnd(evt); }; diff --git a/packages/layout-grid/README.md b/packages/layout-grid/README.md index 76dce874f..0eba7259b 100644 --- a/packages/layout-grid/README.md +++ b/packages/layout-grid/README.md @@ -107,8 +107,8 @@ className | String | Classes to be applied to the root element columns | Number (1-12) | The width of the cell on all devices desktopColumns | Number (1-12) | The width of the cell on desktop order | Number (1-12) | The order that the cell is displayed in -phoneColumns | Number (1-8) | The width of the cell on phones -tabletColumns | Number (1-4) | The width of the cell on tablets +phoneColumns | Number (1-4) | The width of the cell on phones +tabletColumns | Number (1-8) | The width of the cell on tablets tag | String | The tag type to render (default `'div'`) ## Sass Mixins diff --git a/packages/line-ripple/index.tsx b/packages/line-ripple/index.tsx index e0f408965..2b314a672 100644 --- a/packages/line-ripple/index.tsx +++ b/packages/line-ripple/index.tsx @@ -21,8 +21,8 @@ // THE SOFTWARE. import * as React from 'react'; import * as classnames from 'classnames'; -// @ts-ignore no mdc .d.ts -import {MDCLineRippleFoundation} from '@material/line-ripple/dist/mdc.lineRipple'; +import {MDCLineRippleFoundation} from '@material/line-ripple/foundation'; +import {MDCLineRippleAdapter} from '@material/line-ripple/adapter'; export interface LineRippleProps extends React.HTMLProps { className?: string; @@ -46,7 +46,7 @@ export default class LineRipple extends React.Component< rippleCenter: 0, }; - foundation_?: MDCLineRippleFoundation; + foundation_!: MDCLineRippleFoundation; state: LineRippleState = { classList: new Set(), @@ -85,7 +85,7 @@ export default class LineRipple extends React.Component< this.foundation_.destroy(); } - get adapter() { + get adapter(): MDCLineRippleAdapter { return { addClass: (className: string) => this.setState({classList: this.state.classList.add(className)}), @@ -96,6 +96,8 @@ export default class LineRipple extends React.Component< }, hasClass: (className: string) => this.state.classList.has(className), setStyle: this.setStyle, + registerEventHandler: () => null, + deregisterEventHandler: () => null, }; } @@ -105,7 +107,7 @@ export default class LineRipple extends React.Component< return classnames('mdc-line-ripple', Array.from(classList), className); } - setStyle = (varName: string, value: React.CSSProperties) => { + setStyle = (varName: string, value: string) => { const styleName = varName.replace(/-(\w)/g, (_, v) => v.toUpperCase()); const updatedStyle: any = Object.assign({}, this.state.style); updatedStyle[styleName] = value; @@ -119,7 +121,7 @@ export default class LineRipple extends React.Component< return Object.assign({}, style, wrappedStyle); }; - onTransitionEnd = (evt: React.TransitionEvent) => this.foundation_.handleTransitionEnd(evt); + onTransitionEnd = (evt: React.TransitionEvent) => this.foundation_.handleTransitionEnd(evt.nativeEvent); render() { const { diff --git a/packages/line-ripple/package.json b/packages/line-ripple/package.json index 4ff4c76b1..ae9876879 100644 --- a/packages/line-ripple/package.json +++ b/packages/line-ripple/package.json @@ -17,7 +17,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/line-ripple": "^0.41.0", + "@material/line-ripple": "^1.0.0", "classnames": "^2.2.5", "react": "^16.4.2" }, diff --git a/packages/linear-progress/index.tsx b/packages/linear-progress/index.tsx index 85f7bf02d..e94d483c1 100644 --- a/packages/linear-progress/index.tsx +++ b/packages/linear-progress/index.tsx @@ -26,14 +26,14 @@ import * as React from 'react'; import {MDCLinearProgressFoundation} from '@material/linear-progress/dist/mdc.linearProgress'; export interface LinearProgressProps extends React.HTMLProps { - buffer: number; - bufferingDots: boolean; - className: string; - closed: boolean; - indeterminate: boolean; - progress: number; - reversed: boolean; - tag: string; + buffer?: number; + bufferingDots?: boolean; + className?: string; + closed?: boolean; + indeterminate?: boolean; + progress?: number; + reversed?: boolean; + tag?: string; }; interface LinearProgressState { diff --git a/packages/list/ListItem.tsx b/packages/list/ListItem.tsx index 4ed892082..cd360d96a 100644 --- a/packages/list/ListItem.tsx +++ b/packages/list/ListItem.tsx @@ -32,10 +32,6 @@ export interface ListItemProps extends React.HTMLProps { shouldFocus: boolean; shouldFollowHref: boolean; shouldToggleCheckbox: boolean; - onKeyDown: React.KeyboardEventHandler; - onClick: React.MouseEventHandler; - onFocus: React.FocusEventHandler; - onBlur: React.FocusEventHandler; tag: string; children: React.ReactNode; }; diff --git a/packages/list/index.tsx b/packages/list/index.tsx index 0435a73cb..aa27cac3f 100644 --- a/packages/list/index.tsx +++ b/packages/list/index.tsx @@ -36,16 +36,16 @@ const VERTICAL = 'vertical'; const CHECKBOX_TYPE = 'checkbox'; export interface ListProps extends React.HTMLProps { - className: string; - nonInteractive: boolean; - dense: boolean; - avatarList: boolean; - twoLine: boolean; - singleSelection: boolean; - selectedIndex: number; - handleSelect: (selectedIndex: number) => void; - wrapFocus: boolean; - tag: string; + className?: string; + nonInteractive?: boolean; + dense?: boolean; + avatarList?: boolean; + twoLine?: boolean; + singleSelection?: boolean; + selectedIndex?: number; + handleSelect?: (selectedIndex: number) => void; + wrapFocus?: boolean; + tag?: string; children: ListItem | ListItem[] | React.ReactNode; }; @@ -240,7 +240,7 @@ export default class List extends React.Com e.key === 'Space' || e.keyCode === 32) ) { - this.props.handleSelect(index); + this.props.handleSelect!(index); } }; @@ -251,7 +251,7 @@ export default class List extends React.Com // Work around until MDC Web issue is resolved: // https://github.com/material-components/material-components-web/issues/4053 if (index >= 0) { - this.props.handleSelect(index); + this.props.handleSelect!(index); } }; @@ -320,19 +320,19 @@ export default class List extends React.Com const props = { ...otherProps, onKeyDown: (e: React.KeyboardEvent) => { - onKeyDown(e); + onKeyDown!(e); this.handleKeyDown(e, index); }, onClick: (e: React.MouseEvent) => { - onClick(e); + onClick!(e); this.handleClick(e, index); }, onFocus: (e: React.FocusEvent) => { - onFocus(e); + onFocus!(e); this.handleFocus(e, index); }, onBlur: (e: React.FocusEvent) => { - onBlur(e); + onBlur!(e); this.handleBlur(e, index); }, shouldFocus: focusListItemAtIndex === index, diff --git a/packages/menu-surface/index.tsx b/packages/menu-surface/index.tsx index bb23ff10d..6e6da5d5d 100644 --- a/packages/menu-surface/index.tsx +++ b/packages/menu-surface/index.tsx @@ -22,35 +22,37 @@ import * as React from 'react'; import * as classnames from 'classnames'; -// @ts-ignore no .d.ts file -import {MDCMenuSurfaceFoundation, MDCMenuSurfaceAdapter, Corner} from '@material/menu-surface/dist/mdc.menuSurface'; +import {MDCMenuSurfaceFoundation} from '@material/menu-surface/foundation'; +import {MDCMenuSurfaceAdapter} from '@material/menu-surface/adapter'; +import {Corner} from '@material/menu-surface/index'; +import {MDCMenuDistance} from '@material/menu-surface/types'; export interface MenuSurfaceProps extends React.HTMLProps { - className: string; + className?: string; anchorElement?: HTMLElement; - anchorCorner: number; + anchorCorner?: number; anchorMargin?: { top?: number; left?: number; bottom?: number; right?: number; }; - styles: React.CSSProperties; + styles?: React.CSSProperties; coordinates?: { x: number; y: number; }; - onClose: () => void; - onOpen: () => void; - onKeyDown: (event: React.KeyboardEvent) => void; - quickOpen: boolean; - open: boolean; - fixed: boolean; + onClose?: () => void; + onOpen?: () => void; + onKeyDown?: (event: React.KeyboardEvent) => void; + quickOpen?: boolean; + open?: boolean; + fixed?: boolean; }; export interface MenuSurfaceState { transformOrigin: string; - maxHeight?: number; + maxHeight?: string; styleLeft?: number; styleRight?: number; styleTop?: number; @@ -58,18 +60,11 @@ export interface MenuSurfaceState { classList: Set; }; -interface Position { - top?: string; - right?: string; - bottom?: string; - left?: string; -}; - class MenuSurface extends React.Component { menuSurfaceElement: React.RefObject = React.createRef(); previousFocus: HTMLElement | null = null; - foundation: MDCMenuSurfaceFoundation; - handleWindowClick?: EventListener; + foundation!: MDCMenuSurfaceFoundation; + handleWindowClick?: (e: MouseEvent) => void; registerWindowClickListener?: () => void; deregisterWindowClickListener?: () => void; firstFocusableElement: HTMLElement | null = null; @@ -107,7 +102,7 @@ class MenuSurface extends React.Component { open, quickOpen, } = this.props; - this.handleWindowClick = (evt) => this.foundation.handleBodyClick(evt); + this.handleWindowClick = (evt: MouseEvent) => this.foundation.handleBodyClick(evt); this.registerWindowClickListener = () => window.addEventListener('click', this.handleWindowClick!); this.deregisterWindowClickListener = () => @@ -115,7 +110,7 @@ class MenuSurface extends React.Component { this.foundation = new MDCMenuSurfaceFoundation(this.adapter); this.foundation.init(); this.hoistToBody(); - this.foundation.setFixedPosition(fixed); + this.foundation.setFixedPosition(fixed!); if (coordinates) { this.setCoordinates(); } @@ -141,13 +136,13 @@ class MenuSurface extends React.Component { this.setCoordinates(); } if (this.props.anchorCorner !== prevProps.anchorCorner) { - this.foundation.setAnchorCorner(this.props.anchorCorner); + this.foundation.setAnchorCorner(this.props.anchorCorner!); } if (this.props.anchorMargin !== prevProps.anchorMargin) { - this.foundation.setAnchorMargin(this.props.anchorMargin); + this.foundation.setAnchorMargin(this.props.anchorMargin!); } if (this.props.quickOpen !== prevProps.quickOpen) { - this.foundation.setQuickOpen(this.props.quickOpen); + this.foundation.setQuickOpen(this.props.quickOpen!); } } @@ -224,15 +219,16 @@ class MenuSurface extends React.Component { this.previousFocus.focus(); }, isFirstElementFocused: () => - this.firstFocusableElement && + Boolean(this.firstFocusableElement) && this.firstFocusableElement === document.activeElement, isLastElementFocused: () => - this.lastFocusableElement && + Boolean(this.lastFocusableElement) && this.lastFocusableElement === document.activeElement, - focusFirstElement: () => - this.firstFocusableElement && - this.firstFocusableElement.focus && - this.firstFocusableElement.focus(), + focusFirstElement: () => { + if (!this.firstFocusableElement) return false; + return this.firstFocusableElement.focus && + this.firstFocusableElement.focus() + }, focusLastElement: () => this.lastFocusableElement && this.lastFocusableElement.focus && @@ -242,12 +238,13 @@ class MenuSurface extends React.Component { const dimensionAdapterMethods = { getInnerDimensions: () => { const element = this.menuSurfaceElement.current; - if (!element) return; + if (!element) return {width: 0, height: 0}; return {width: element.offsetWidth, height: element.offsetHeight}; }, - getAnchorDimensions: () => - this.props.anchorElement && - this.props.anchorElement.getBoundingClientRect(), + getAnchorDimensions: () => { + if (!this.props.anchorElement) return null; + return this.props.anchorElement.getBoundingClientRect() + }, getWindowDimensions: () => { return {width: window.innerWidth, height: window.innerHeight}; }, @@ -260,7 +257,7 @@ class MenuSurface extends React.Component { getWindowScroll: () => { return {x: window.pageXOffset, y: window.pageYOffset}; }, - setPosition: (position: Position) => { + setPosition: (position: Partial) => { this.setState((prevState) => Object.assign(prevState, { styleLeft: 'left' in position ? position.left : null, styleRight: 'right' in position ? position.right : null, @@ -268,54 +265,52 @@ class MenuSurface extends React.Component { styleBottom: 'bottom' in position ? position.bottom : null, })); }, - setMaxHeight: (maxHeight: number) => this.setState({maxHeight}), + setMaxHeight: (maxHeight: string) => this.setState({maxHeight}), }; - return Object.assign( - { - addClass: (className: string) => { - const classList = new Set(this.state.classList); - classList.add(className); - this.setState({classList}); - }, - removeClass: (className: string) => { - const classList = new Set(this.state.classList); - classList.delete(className); - this.setState({classList}); - }, - hasClass: (className: string) => this.classes.split(' ').includes(className), - hasAnchor: () => !!this.props.anchorElement, - notifyOpen: () => { - if (this.registerWindowClickListener) { - this.registerWindowClickListener(); - } - this.props.onOpen(); - }, - notifyClose: () => { - if (this.deregisterWindowClickListener) { - this.deregisterWindowClickListener(); - } - this.props.onClose(); - }, - isElementInContainer: (el: HTMLElement) => { - if (!this.menuSurfaceElement.current) return false; - if (this.menuSurfaceElement.current === el) { - return true; - } - return this.menuSurfaceElement.current.contains(el); - }, - isRtl: () => { - if (!this.menuSurfaceElement) return false; - if (!this.menuSurfaceElement.current) return false; - return window - .getComputedStyle(this.menuSurfaceElement.current) - .getPropertyValue('direction') === 'rtl'; - }, - setTransformOrigin: (transformOrigin: string) => this.setState({transformOrigin}), + return { + addClass: (className: string) => { + const classList = new Set(this.state.classList); + classList.add(className); + this.setState({classList}); }, - focusAdapterMethods, - dimensionAdapterMethods - ); + removeClass: (className: string) => { + const classList = new Set(this.state.classList); + classList.delete(className); + this.setState({classList}); + }, + hasClass: (className: string) => this.classes.split(' ').includes(className), + hasAnchor: () => !!this.props.anchorElement, + notifyOpen: () => { + if (this.registerWindowClickListener) { + this.registerWindowClickListener(); + } + this.props.onOpen!(); + }, + notifyClose: () => { + if (this.deregisterWindowClickListener) { + this.deregisterWindowClickListener(); + } + this.props.onClose!(); + }, + isElementInContainer: (el: HTMLElement) => { + if (!this.menuSurfaceElement.current) return false; + if (this.menuSurfaceElement.current === el) { + return true; + } + return this.menuSurfaceElement.current.contains(el); + }, + isRtl: () => { + if (!this.menuSurfaceElement) return false; + if (!this.menuSurfaceElement.current) return false; + return window + .getComputedStyle(this.menuSurfaceElement.current) + .getPropertyValue('direction') === 'rtl'; + }, + setTransformOrigin: (transformOrigin: string) => this.setState({transformOrigin}), + ...focusAdapterMethods, + ...dimensionAdapterMethods + }; } open_ = (): void => { @@ -325,10 +320,10 @@ class MenuSurface extends React.Component { MDCMenuSurfaceFoundation.strings.FOCUSABLE_ELEMENTS ); this.firstFocusableElement = - focusableElements.length > 0 ? focusableElements[0] : null; + focusableElements.length > 0 ? focusableElements[0] as HTMLElement : null; this.lastFocusableElement = focusableElements.length > 0 - ? focusableElements[focusableElements.length - 1] + ? focusableElements[focusableElements.length - 1] as HTMLElement : null; this.foundation.open(); } else { @@ -337,8 +332,8 @@ class MenuSurface extends React.Component { }; handleKeydown = (evt: React.KeyboardEvent) => { - this.props.onKeyDown(evt); - this.foundation.handleKeydown(evt); + this.props.onKeyDown!(evt); + this.foundation.handleKeydown(evt.nativeEvent); }; render() { diff --git a/packages/menu-surface/package.json b/packages/menu-surface/package.json index 272ad3b44..dc8cd88fb 100644 --- a/packages/menu-surface/package.json +++ b/packages/menu-surface/package.json @@ -17,7 +17,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/menu-surface": "^0.41.0", + "@material/menu-surface": "^1.0.1", "classnames": "^2.2.5", "react": "^16.4.2" }, diff --git a/packages/notched-outline/index.tsx b/packages/notched-outline/index.tsx index d7ff4e264..eaf4305b3 100644 --- a/packages/notched-outline/index.tsx +++ b/packages/notched-outline/index.tsx @@ -25,10 +25,10 @@ import * as classnames from 'classnames'; import {MDCNotchedOutlineFoundation} from '@material/notched-outline/dist/mdc.notchedOutline'; export interface NotchedOutlineProps { - className: string, - isRtl: boolean, - notch: boolean, - notchWidth: number + className?: string, + isRtl?: boolean, + notch?: boolean, + notchWidth?: number }; interface NotchedOutlineState { diff --git a/packages/ripple/index.tsx b/packages/ripple/index.tsx index ccb54bd67..ad34781ab 100644 --- a/packages/ripple/index.tsx +++ b/packages/ripple/index.tsx @@ -23,11 +23,11 @@ import * as React from 'react'; import * as classnames from 'classnames'; import {Subtract} from 'utility-types'; // eslint-disable-line no-unused-vars -// @ts-ignore no mdc .d.ts file -import {MDCRippleFoundation, MDCRippleAdapter, util} from '@material/ripple/dist/mdc.ripple'; - -const HTMLElementShim: any = typeof HTMLElement === 'undefined' ? {} : HTMLElement; -const MATCHES = util.getMatchesProperty(HTMLElementShim.prototype); +import {MDCRippleFoundation} from '@material/ripple/foundation'; +import {MDCRippleAdapter} from '@material/ripple/adapter'; +import * as util from '@material/ripple/util'; +import {SpecificEventListener} from '@material/base/types'; +import {matches} from '@material/dom/ponyfill'; export interface RippledComponentProps { unbounded?: boolean; @@ -55,10 +55,6 @@ export interface InjectedProps extends RippledComponentProps initRipple: React.Ref | ((surface: S | null, activator?: A | null) => void); } -function isElement(element: any): element is Element { - return element[MATCHES as 'matches'] !== undefined; -} - type ActivateEventTypes = React.MouseEvent | React.TouchEvent | React.KeyboardEvent | React.FocusEvent; @@ -76,12 +72,12 @@ export interface RippledComponentInterface { handleKeyDown: React.KeyboardEventHandler; handleKeyUp: React.KeyboardEventHandler; activateRipple: (e: ActivateEventTypes) => void; - deactivateRipple: (e: ActivateEventTypes) => void; + deactivateRipple: () => void; classes: string; style: React.CSSProperties; displayName: string; createAdapter: (surface: Surface, activator?: Activator) => MDCRippleAdapter; - updateCssVariable: (varName: keyof React.CSSProperties, value: string | number) => void; + updateCssVariable: (varName: string, value: string | null) => void; componentDidMount: () => void; componentWillUnmount: () => void; render: () => JSX.Element; @@ -92,7 +88,9 @@ export function withRipple < P extends InjectedProps, Surface extends Element = Element, Activator extends Element = Element ->(WrappedComponent: React.ComponentType

) { +>(WrappedComponent: React.ComponentType

): + React.ComponentType> + & RippledComponentProps> { return class RippledComponent extends React.Component< // Subtract removes any props "InjectedProps" if they are on "P" // This allows the developer to override any props @@ -100,7 +98,7 @@ export function withRipple < Subtract> & RippledComponentProps, RippledComponentState > implements RippledComponentInterface { - foundation?: MDCRippleFoundation; + foundation!: MDCRippleFoundation; isComponentMounted: boolean = true; isTouched: boolean = false; @@ -152,24 +150,18 @@ export function withRipple < this.foundation.init(); }; - createAdapter: MDCRippleAdapter = (surface: Surface, activator?: Activator) => { + createAdapter = (surface: Surface, activator?: Activator): MDCRippleAdapter => { return { browserSupportsCssVars: () => util.supportsCssVariables(window), - isUnbounded: () => this.props.unbounded, + isUnbounded: () => this.props.unbounded! as boolean, isSurfaceActive: () => { if (activator) { - if (isElement(activator)) { - return activator[MATCHES as 'matches'](':active'); - } - return false; + return matches(activator, ':active'); } - if (isElement(surface)) { - return surface[MATCHES as 'matches'](':active'); - } - return false; + return matches(surface, ':active'); }, - isSurfaceDisabled: () => this.props.disabled, + isSurfaceDisabled: () => this.props.disabled as boolean, addClass: (className: string) => { if (!this.isComponentMounted) { return; @@ -196,21 +188,29 @@ export function withRipple < handler, util.applyPassive() ), - registerResizeHandler: (handler: EventListener) => + registerResizeHandler: (handler: SpecificEventListener<'resize'>) => window.addEventListener('resize', handler), - deregisterResizeHandler: (handler: EventListener) => + deregisterResizeHandler: (handler: SpecificEventListener<'resize'>) => window.removeEventListener('resize', handler), updateCssVariable: this.updateCssVariable, computeBoundingRect: () => { if (!this.isComponentMounted) { // need to return object since foundation expects it - return {}; + return new ClientRect(); } if (this.props.computeBoundingRect) { return this.props.computeBoundingRect(surface); } return surface.getBoundingClientRect(); }, + containsEventTarget: (target: EventTarget | null) => { + if (activator && target !== null) { + return activator.contains(target as Node); + } + return false; + }, + registerInteractionHandler: () => null, + deregisterInteractionHandler: () => null, getWindowPageOffset: () => ({ x: window.pageXOffset, y: window.pageYOffset, @@ -237,7 +237,7 @@ export function withRipple < handleMouseUp = (e: React.MouseEvent) => { this.props.onMouseUp && this.props.onMouseUp(e); - this.deactivateRipple(e); + this.deactivateRipple(); }; handleTouchStart = (e: React.TouchEvent) => { @@ -248,7 +248,7 @@ export function withRipple < handleTouchEnd = (e: React.TouchEvent) => { this.props.onTouchEnd && this.props.onTouchEnd(e); - this.deactivateRipple(e); + this.deactivateRipple(); }; handleKeyDown = (e: React.KeyboardEvent) => { @@ -258,26 +258,31 @@ export function withRipple < handleKeyUp = (e: React.KeyboardEvent) => { this.props.onKeyUp && this.props.onKeyUp(e); - this.deactivateRipple(e); + this.deactivateRipple(); }; activateRipple = (e: ActivateEventTypes) => { // https://reactjs.org/docs/events.html#event-pooling e.persist(); - this.foundation.activate(e); + this.foundation.activate(e.nativeEvent); }; - deactivateRipple = (e: ActivateEventTypes) => { - this.foundation.deactivate(e); + deactivateRipple = () => { + this.foundation.deactivate(); }; - updateCssVariable = (varName: keyof React.CSSProperties, value: string | number) => { + updateCssVariable = (varName: string, value: string | null) => { if (!this.isComponentMounted) { return; } this.setState((prevState) => { const updatedStyle = Object.assign({}, this.state.style, prevState.style) as React.CSSProperties; - updatedStyle[varName] = value; + if (value === null) { + delete updatedStyle[varName as keyof React.CSSProperties]; + } else { + updatedStyle[varName as keyof React.CSSProperties] = value; + } + return Object.assign(prevState, { style: updatedStyle, }); @@ -337,7 +342,10 @@ export function withRipple < /> ); } - }; + // there is explicit type provided for the return value of withRipple function + // without type "any" typescript raises an error + // The inferred type of ... cannot be named without a reference ... + } as any; } function getDisplayName

(WrappedComponent: React.ComponentType

): string { diff --git a/packages/ripple/package.json b/packages/ripple/package.json index 0a90a5b45..fe62c93d3 100644 --- a/packages/ripple/package.json +++ b/packages/ripple/package.json @@ -16,7 +16,8 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/ripple": "^0.41.0", + "@material/dom": "^1.0.0", + "@material/ripple": "^1.0.0", "classnames": "^2.2.5", "react": "^16.4.2", "utility-types": "^3.2.1" diff --git a/packages/select/NativeControl.tsx b/packages/select/NativeControl.tsx index 94f800d80..4b18e9282 100644 --- a/packages/select/NativeControl.tsx +++ b/packages/select/NativeControl.tsx @@ -31,6 +31,7 @@ export interface NativeControlProps extends React.HTMLProps { foundation: MDCSelectFoundation; setRippleCenter: (lineRippleCenter: number) => void; handleDisabled: (disabled: boolean) => void; + value: string; } export default class NativeControl extends React.Component< @@ -49,6 +50,7 @@ export default class NativeControl extends React.Component< }, setRippleCenter: () => {}, handleDisabled: () => {}, + value: '', }; diff --git a/packages/select/README.md b/packages/select/README.md index 779c5840e..6ea1f3d4c 100644 --- a/packages/select/README.md +++ b/packages/select/README.md @@ -76,6 +76,7 @@ class MyApp extends React.Component { ` elements passed as `this.props.children`. If its an array of strings, then the string value will be used as the `label` and `value` of the `