From 23bdb77e492faf3266a27f234024dcbd91e100a8 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 8 Mar 2019 23:54:24 +0300 Subject: [PATCH 01/16] feat(line-ripple): mdc-web typescript support (#716) --- package-lock.json | 223 ++++++++++++++++----------- package.json | 2 +- packages/line-ripple/index.tsx | 14 +- packages/line-ripple/package.json | 2 +- test/unit/line-ripple/index.test.tsx | 38 +++-- 5 files changed, 169 insertions(+), 110 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1a3d2146f..70f5ce09b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -518,6 +518,12 @@ "@material/typography": "^0.41.0" } }, + "@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", @@ -549,14 +555,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": { @@ -900,6 +936,19 @@ "@material/shape": "^0.41.0", "@material/theme": "^0.41.0", "@material/typography": "^0.41.0" + }, + "dependencies": { + "@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/theme": { @@ -16857,7 +16906,7 @@ }, "ts-loader": { "version": "3.5.0", - "resolved": "http://registry.npmjs.org/ts-loader/-/ts-loader-3.5.0.tgz", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-3.5.0.tgz", "integrity": "sha512-JTia3kObhTk36wPFgy0RnkZReiusYx7Le9IhcUWRrCTcFcr6Dy1zGsFd3x8DG4gevlbN65knI8W50FfoykXcng==", "dev": true, "requires": { @@ -17881,28 +17930,28 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": false, + "resolved": "", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": false, + "resolved": "", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.4", - "resolved": false, + "resolved": "", "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=", "dev": true, "optional": true, @@ -17913,14 +17962,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": false, + "resolved": "", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -17931,28 +17980,28 @@ }, "chownr": { "version": "1.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=", "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true @@ -17966,7 +18015,7 @@ }, "debug": { "version": "2.6.9", - "resolved": false, + "resolved": "", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, "optional": true, @@ -17976,28 +18025,28 @@ }, "deep-extend": { "version": "0.5.1", - "resolved": false, + "resolved": "", "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": false, + "resolved": "", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true }, "fs-minipass": { "version": "1.2.5", - "resolved": false, + "resolved": "", "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "dev": true, "optional": true, @@ -18007,14 +18056,14 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": false, + "resolved": "", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -18031,7 +18080,7 @@ }, "glob": { "version": "7.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "dev": true, "optional": true, @@ -18046,14 +18095,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.21", - "resolved": false, + "resolved": "", "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==", "dev": true, "optional": true, @@ -18063,7 +18112,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": false, + "resolved": "", "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -18073,7 +18122,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": false, + "resolved": "", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -18084,21 +18133,21 @@ }, "inherits": { "version": "2.0.3", - "resolved": false, + "resolved": "", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": false, + "resolved": "", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "optional": true, @@ -18115,7 +18164,7 @@ }, "minimatch": { "version": "3.0.4", - "resolved": false, + "resolved": "", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, @@ -18125,14 +18174,14 @@ }, "minimist": { "version": "0.0.8", - "resolved": false, + "resolved": "", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true, "optional": true }, "minipass": { "version": "2.2.4", - "resolved": false, + "resolved": "", "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "dev": true, "optional": true, @@ -18143,7 +18192,7 @@ }, "minizlib": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==", "dev": true, "optional": true, @@ -18153,7 +18202,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": false, + "resolved": "", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "optional": true, @@ -18163,14 +18212,14 @@ }, "ms": { "version": "2.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true, "optional": true }, "needle": { "version": "2.2.0", - "resolved": false, + "resolved": "", "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==", "dev": true, "optional": true, @@ -18182,7 +18231,7 @@ }, "node-pre-gyp": { "version": "0.10.0", - "resolved": false, + "resolved": "", "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==", "dev": true, "optional": true, @@ -18201,7 +18250,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -18212,14 +18261,14 @@ }, "npm-bundled": { "version": "1.0.3", - "resolved": false, + "resolved": "", "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==", "dev": true, "optional": true }, "npm-packlist": { "version": "1.1.10", - "resolved": false, + "resolved": "", "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==", "dev": true, "optional": true, @@ -18230,7 +18279,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -18243,21 +18292,21 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": false, + "resolved": "", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": false, + "resolved": "", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, @@ -18267,21 +18316,21 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": false, + "resolved": "", "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -18292,7 +18341,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true @@ -18306,7 +18355,7 @@ }, "rc": { "version": "1.2.7", - "resolved": false, + "resolved": "", "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==", "dev": true, "optional": true, @@ -18319,7 +18368,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": false, + "resolved": "", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -18344,7 +18393,7 @@ }, "rimraf": { "version": "2.6.2", - "resolved": false, + "resolved": "", "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==", "dev": true, "optional": true, @@ -18354,49 +18403,49 @@ }, "safe-buffer": { "version": "5.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": false, + "resolved": "", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true }, "semver": { "version": "5.5.0", - "resolved": false, + "resolved": "", "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "optional": true, @@ -18418,7 +18467,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "optional": true, @@ -18428,14 +18477,14 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true }, "tar": { "version": "4.4.1", - "resolved": false, + "resolved": "", "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==", "dev": true, "optional": true, @@ -18458,7 +18507,7 @@ }, "wide-align": { "version": "1.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", "dev": true, "optional": true, @@ -18468,14 +18517,14 @@ }, "wrappy": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true, "optional": true }, "yallist": { "version": "3.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", "dev": true, "optional": true @@ -18938,21 +18987,21 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": false, + "resolved": "", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": false, + "resolved": "", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true @@ -18970,14 +19019,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": false, + "resolved": "", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -18988,35 +19037,35 @@ }, "chownr": { "version": "1.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=", "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true @@ -19033,21 +19082,21 @@ }, "deep-extend": { "version": "0.5.1", - "resolved": false, + "resolved": "", "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": false, + "resolved": "", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true @@ -19064,7 +19113,7 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true @@ -19103,7 +19152,7 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true @@ -19120,7 +19169,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": false, + "resolved": "", "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -19141,14 +19190,14 @@ }, "inherits": { "version": "2.0.3", - "resolved": false, + "resolved": "", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": false, + "resolved": "", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true @@ -19165,14 +19214,14 @@ }, "isarray": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": false, + "resolved": "", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, diff --git a/package.json b/package.json index c6846a8f4..9766fa52e 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "@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", diff --git a/packages/line-ripple/index.tsx b/packages/line-ripple/index.tsx index 92d04ddcd..ba12b547e 100644 --- a/packages/line-ripple/index.tsx +++ b/packages/line-ripple/index.tsx @@ -22,8 +22,8 @@ import * as React from 'react'; import 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; @@ -47,7 +47,7 @@ export default class LineRipple extends React.Component< rippleCenter: 0, }; - foundation_?: MDCLineRippleFoundation; + foundation_!: MDCLineRippleFoundation; state: LineRippleState = { classList: new Set(), @@ -86,7 +86,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)}), @@ -97,6 +97,8 @@ export default class LineRipple extends React.Component< }, hasClass: (className: string) => this.state.classList.has(className), setStyle: this.setStyle, + registerEventHandler: () => null, + deregisterEventHandler: () => null, }; } @@ -106,7 +108,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; @@ -120,7 +122,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 c60782cd0..d2d229cc4 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.6", "react": "^16.4.2" }, diff --git a/test/unit/line-ripple/index.test.tsx b/test/unit/line-ripple/index.test.tsx index c8bd9dad2..f89c90daa 100644 --- a/test/unit/line-ripple/index.test.tsx +++ b/test/unit/line-ripple/index.test.tsx @@ -3,10 +3,16 @@ import * as td from 'testdouble'; import {assert} from 'chai'; import {shallow} from 'enzyme'; import LineRipple from '../../../packages/line-ripple/index'; +import {MDCLineRippleAdapter} from '@material/line-ripple/adapter'; import {coerceForTesting} from '../helpers/types'; suite('LineRipple'); +function getAdapter(instance: LineRipple): MDCLineRippleAdapter { + // @ts-ignore adapter_ property is protected, we need to bypass this check for testing purposes + return instance.foundation_.adapter_; +} + test('classNames adds classes', () => { const wrapper = shallow(); assert.isTrue(wrapper.hasClass('test-class-name')); @@ -38,8 +44,8 @@ test( 'are called when active updates', () => { const wrapper = shallow(); - wrapper.instance().foundation_.activate = td.func(); - wrapper.instance().foundation_.deactivate = td.func(); + wrapper.instance().foundation_.activate = td.func<() => void>(); + wrapper.instance().foundation_.deactivate = td.func<() => void>(); wrapper.setProps({active: true}); td.verify(wrapper.instance().foundation_.activate(), {times: 1}); td.verify(wrapper.instance().foundation_.deactivate(), {times: 0}); @@ -54,7 +60,7 @@ test( '#foundation.setRippleCenter', () => { const wrapper = shallow(); - wrapper.instance().foundation_.setRippleCenter = td.func(); + wrapper.instance().foundation_.setRippleCenter = td.func<(xCoordinate: number) => null>(); wrapper.setProps({rippleCenter: 10}); td.verify(wrapper.instance().foundation_.setRippleCenter(10), {times: 1}); } @@ -62,7 +68,7 @@ test( test('does not call #foundation.setRippleCenter when props.rippleCenter is NaN', () => { const wrapper = shallow(); - wrapper.instance().foundation_.setRippleCenter = td.func(); + wrapper.instance().foundation_.setRippleCenter = td.func<(xCoordinate: number) => null>(); wrapper.setProps({rippleCenter: NaN}); td.verify( wrapper.instance().foundation_.setRippleCenter(td.matchers.anything()), @@ -72,7 +78,7 @@ test('does not call #foundation.setRippleCenter when props.rippleCenter is NaN', test('#adapter.addClass updates state.classList', () => { const wrapper = shallow(); - wrapper.instance().foundation_.adapter_.addClass('test-color-class'); + getAdapter(wrapper.instance()).addClass('test-color-class'); assert.isTrue(wrapper.state().classList.has('test-color-class')); }); @@ -81,7 +87,7 @@ test('#adapter.removeClass updates state.classList', () => { const classList = new Set(); classList.add('test-color-class'); wrapper.setState({classList}); - wrapper.instance().foundation_.adapter_.removeClass('test-color-class'); + getAdapter(wrapper.instance()).removeClass('test-color-class'); assert.isFalse(wrapper.state().classList.has('test-color-class')); }); @@ -90,25 +96,27 @@ test('#adapter.hasClass returns true if exists in classList', () => { const classList = new Set(); classList.add('test-color-class'); wrapper.setState({classList}); - const hasClass = wrapper - .instance() - .foundation_.adapter_.hasClass('test-color-class'); + const hasClass = getAdapter(wrapper.instance()).hasClass('test-color-class'); assert.isTrue(hasClass); }); test('#adapter.setStyle updates style', () => { const wrapper = shallow(); - wrapper.instance().foundation_.adapter_.setStyle('color', 'blue'); + getAdapter(wrapper.instance()).setStyle('color', 'blue'); const style = coerceForTesting(wrapper.state().style); assert.equal(style.color, 'blue'); }); test('onTransitionEnd calls the #foundation.handleTransitionEnd', () => { const wrapper = shallow(); - wrapper.instance().foundation_.handleTransitionEnd = td.func(); - const event = {test: '123'}; + wrapper.instance().foundation_.handleTransitionEnd = td.func<(env: TransitionEvent) => null>(); + const event: React.TransitionEvent = coerceForTesting({ + nativeEvent: { + test: '123', + }, + }); wrapper.simulate('transitionEnd', event); - td.verify(wrapper.instance().foundation_.handleTransitionEnd(event), { + td.verify(wrapper.instance().foundation_.handleTransitionEnd(event.nativeEvent), { times: 1, }); }); @@ -116,14 +124,14 @@ test('onTransitionEnd calls the #foundation.handleTransitionEnd', () => { test('#componentWillUnmount destroys foundation', () => { const wrapper = shallow(); const foundation = wrapper.instance().foundation_; - foundation.destroy = td.func(); + foundation.destroy = td.func<() => void>(); wrapper.unmount(); td.verify(foundation.destroy()); }); test('#adapter.setStyle updates style names to camel case', () => { const wrapper = shallow(); - wrapper.instance().foundation_.adapter_.setStyle('transform-origin', 25); + getAdapter(wrapper.instance()).setStyle('transform-origin', '25'); const style = coerceForTesting(wrapper.state().style); assert.equal(style.transformOrigin, 25); // @ts-ignore From e14f309d92cf6533299e1299bca8df3fff28bd52 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Thu, 14 Mar 2019 19:45:11 +0300 Subject: [PATCH 02/16] feat(ripple) mdc-web typescript conversion (#711) --- package-lock.json | 365 +++++++++++++++++++++++++++++++- package.json | 3 +- packages/ripple/index.tsx | 61 ++++-- packages/ripple/package.json | 4 +- packages/tab/TabRipple.tsx | 4 +- test/unit/ripple/index.test.tsx | 146 +++++++------ test/unit/tab/index.test.tsx | 1 + 7 files changed, 482 insertions(+), 102 deletions(-) diff --git a/package-lock.json b/package-lock.json index 70f5ce09b..86d88f4b8 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,6 +611,27 @@ "@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": { @@ -535,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": { @@ -546,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": { @@ -604,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": { @@ -619,6 +770,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/menu-surface": { @@ -633,6 +803,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/notched-outline": { @@ -646,6 +824,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": { @@ -659,17 +845,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": { @@ -783,6 +1020,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": { @@ -809,6 +1067,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", @@ -870,6 +1134,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": { @@ -884,6 +1167,25 @@ "@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-bar": { @@ -896,6 +1198,14 @@ "@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-indicator": { @@ -907,6 +1217,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/tab-scroller": { @@ -918,6 +1236,14 @@ "@material/animation": "^0.41.0", "@material/base": "^0.41.0", "@material/tab": "^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/textfield": { @@ -971,6 +1297,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 9766fa52e..f631ad007 100644 --- a/package.json +++ b/package.json @@ -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", @@ -77,7 +78,7 @@ "@material/menu-surface": "^0.41.0", "@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", diff --git a/packages/ripple/index.tsx b/packages/ripple/index.tsx index 839ce9ffa..384a01945 100644 --- a/packages/ripple/index.tsx +++ b/packages/ripple/index.tsx @@ -23,9 +23,10 @@ import * as React from 'react'; import 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'; -// @ts-ignore no mdc .d.ts file +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 { @@ -71,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; @@ -87,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 @@ -95,7 +98,7 @@ export function withRipple < Subtract> & RippledComponentProps, RippledComponentState > implements RippledComponentInterface { - foundation?: MDCRippleFoundation; + foundation!: MDCRippleFoundation; isComponentMounted: boolean = true; isTouched: boolean = false; @@ -147,10 +150,10 @@ 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) { return matches(activator, ':active'); @@ -158,7 +161,7 @@ export function withRipple < return matches(surface, ':active'); }, - isSurfaceDisabled: () => this.props.disabled, + isSurfaceDisabled: () => this.props.disabled as boolean, addClass: (className: string) => { if (!this.isComponentMounted) { return; @@ -185,9 +188,9 @@ 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: () => { @@ -211,6 +214,14 @@ export function withRipple < } 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 +248,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 +259,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 +269,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 +353,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 a3a3be470..0450f600b 100644 --- a/packages/ripple/package.json +++ b/packages/ripple/package.json @@ -16,8 +16,8 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/dom": "^0.41.0", - "@material/ripple": "^0.41.0", + "@material/dom": "^1.0.0", + "@material/ripple": "^1.0.0", "classnames": "^2.2.6", "react": "^16.4.2", "utility-types": "^3.2.1" diff --git a/packages/tab/TabRipple.tsx b/packages/tab/TabRipple.tsx index 96fc59487..8f3d498bf 100644 --- a/packages/tab/TabRipple.tsx +++ b/packages/tab/TabRipple.tsx @@ -28,8 +28,10 @@ import { RippledComponentInterface, RippledComponentState, // eslint-disable-line no-unused-vars } from '@material/react-ripple'; -export interface TabRippleProps extends React.HTMLAttributes, Ripple.InjectedProps { +export interface TabRippleProps extends React.HTMLAttributes, + Ripple.InjectedProps { className: string; + ref?: React.RefObject; } class TabRippleBase extends React.Component { diff --git a/test/unit/ripple/index.test.tsx b/test/unit/ripple/index.test.tsx index 754ea7a1b..284b9c445 100644 --- a/test/unit/ripple/index.test.tsx +++ b/test/unit/ripple/index.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import {assert} from 'chai'; import * as td from 'testdouble'; -// @ts-ignore no mdc .d.ts file -import {MDCRippleFoundation} from '@material/ripple/dist/mdc.ripple'; +import {MDCRippleFoundation} from '@material/ripple/foundation'; +import {MDCRippleAdapter} from '@material/ripple/adapter'; +import {SpecificEventListener} from '@material/base/types'; import {mount} from 'enzyme'; import {withRipple, InjectedProps} from '../../../packages/ripple/index'; import {createMockRaf} from '../helpers/raf'; @@ -39,6 +40,11 @@ interface RippledComponent extends React.Component isComponentMounted: boolean; } +function getAdapter(foundation: MDCRippleFoundation): MDCRippleAdapter { + // @ts-ignore adapter_ property is marked as protected in mdc-web. We need to override this behaviour for testing + return foundation.adapter_; +} + suite('Ripple'); test('classNames adds classes', () => { @@ -61,7 +67,7 @@ test('mouseDown event triggers activateRipple', () => { const mouseDownHandler = coerceForTesting(td.func()); const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.activate = td.func(); + foundation.activate = td.func<(evt?: Event) => void>(); wrapper.simulate('mouseDown'); mockRaf.flush(); td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1}); @@ -73,18 +79,18 @@ test('mouseUp event triggers deactivateRipple', () => { const mouseUpHandler = coerceForTesting(td.func()); const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.deactivate = td.func(); + foundation.deactivate = td.func<() => void>(); wrapper.simulate('mouseUp'); - td.verify(foundation.deactivate(td.matchers.isA(Object)), {times: 1}); + td.verify(foundation.deactivate(), {times: 1}); td.verify(mouseUpHandler(td.matchers.isA(Object)), {times: 1}); }); test('mouseUp event triggers deactivateRipple with no onMouseUp handler', () => { const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.deactivate = td.func(); + foundation.deactivate = td.func<() => void>(); wrapper.simulate('mouseUp'); - td.verify(foundation.deactivate(td.matchers.isA(Object)), {times: 1}); + td.verify(foundation.deactivate(), {times: 1}); }); test('touchStart event triggers activateRipple', () => { @@ -92,7 +98,7 @@ test('touchStart event triggers activateRipple', () => { const touchStartHandler = coerceForTesting(td.func()); const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.activate = td.func(); + foundation.activate = td.func<(evt?: Event) => void>(); wrapper.simulate('touchStart'); mockRaf.flush(); td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1}); @@ -104,7 +110,7 @@ test('touchStart event triggers activateRipple with no onTouchStart handler', () const mockRaf = createMockRaf(); const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.activate = td.func(); + foundation.activate = td.func<(evt?: Event) => void>(); wrapper.simulate('touchStart'); mockRaf.flush(); td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1}); @@ -115,18 +121,18 @@ test('touchEnd event triggers deactivateRipple', () => { const touchEndHandler = coerceForTesting(td.func()); const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.deactivate = td.func(); + foundation.deactivate = td.func<() => void>(); wrapper.simulate('touchEnd'); - td.verify(foundation.deactivate(td.matchers.isA(Object)), {times: 1}); + td.verify(foundation.deactivate(), {times: 1}); td.verify(touchEndHandler(td.matchers.isA(Object)), {times: 1}); }); test('touchEnd event triggers deactivateRipple with no onTouchEnd handler', () => { const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.deactivate = td.func(); + foundation.deactivate = td.func<() => void>(); wrapper.simulate('touchEnd'); - td.verify(foundation.deactivate(td.matchers.isA(Object)), {times: 1}); + td.verify(foundation.deactivate(), {times: 1}); }); test('keyDown event triggers activateRipple', () => { @@ -134,7 +140,7 @@ test('keyDown event triggers activateRipple', () => { const keyDownHandler = coerceForTesting(td.func()); const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.activate = td.func(); + foundation.activate = td.func<(evt?: Event) => void>(); wrapper.simulate('keyDown'); mockRaf.flush(); td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1}); @@ -146,7 +152,7 @@ test('keyDown event triggers activateRipple with no onKeyDown handler', () => { const mockRaf = createMockRaf(); const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.activate = td.func(); + foundation.activate = td.func<(evt?: Event) => void>(); wrapper.simulate('keyDown'); mockRaf.flush(); td.verify(foundation.activate(td.matchers.isA(Object)), {times: 1}); @@ -157,25 +163,25 @@ test('keyUp event triggers deactivateRipple', () => { const keyUpHandler = coerceForTesting(td.func()); const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.deactivate = td.func(); + foundation.deactivate = td.func<() => void>(); wrapper.simulate('keyUp'); - td.verify(foundation.deactivate(td.matchers.isA(Object)), {times: 1}); + td.verify(foundation.deactivate(), {times: 1}); td.verify(keyUpHandler(td.matchers.isA(Object)), {times: 1}); }); test('keyUp event triggers deactivateRipple with no onKeyUp handler', () => { const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.deactivate = td.func(); + foundation.deactivate = td.func<() => void>(); wrapper.simulate('keyUp'); - td.verify(foundation.deactivate(td.matchers.isA(Object)), {times: 1}); + td.verify(foundation.deactivate(), {times: 1}); }); test('focus event proxies to foundation focus handler', () => { const focusHandler = coerceForTesting(td.func()); const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.handleFocus = td.func(); + foundation.handleFocus = td.func<() => void>(); wrapper.simulate('focus'); td.verify(foundation.handleFocus(), {times: 1}); td.verify(focusHandler(td.matchers.isA(Object)), {times: 1}); @@ -184,7 +190,7 @@ test('focus event proxies to foundation focus handler', () => { test('focus event proxies to foundation focus handler with no onFocus handler', () => { const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.handleFocus = td.func(); + foundation.handleFocus = td.func<() => void>(); wrapper.simulate('focus'); td.verify(foundation.handleFocus(), {times: 1}); }); @@ -193,7 +199,7 @@ test('blur event proxies to foundation blur handler', () => { const blurHandler = coerceForTesting(td.func()); const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.handleBlur = td.func(); + foundation.handleBlur = td.func<() => void>(); wrapper.simulate('blur'); td.verify(foundation.handleBlur(), {times: 1}); td.verify(blurHandler(td.matchers.isA(Object)), {times: 1}); @@ -202,34 +208,34 @@ test('blur event proxies to foundation blur handler', () => { test('blur event proxies to foundation blur handler with no onBlur handler', () => { const wrapper = mount(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.handleBlur = td.func(); + foundation.handleBlur = td.func<() => void>(); wrapper.simulate('blur'); td.verify(foundation.handleBlur(), {times: 1}); }); test('#adapter.isUnbounded returns true is prop is set', () => { const wrapper = mount(); - assert.isTrue(coerceForTesting(wrapper.instance()).foundation.adapter_.isUnbounded()); + assert.isTrue(getAdapter(coerceForTesting(wrapper.instance()).foundation).isUnbounded()); }); test('#adapter.isUnbounded returns false prop is not set', () => { const wrapper = mount(); - assert.isFalse(coerceForTesting(wrapper.instance()).foundation.adapter_.isUnbounded()); + assert.isFalse(getAdapter(coerceForTesting(wrapper.instance()).foundation).isUnbounded()); }); test('#adapter.isSurfaceDisabled returns true is prop is set', () => { const wrapper = mount(); - assert.isTrue(coerceForTesting(wrapper.instance()).foundation.adapter_.isSurfaceDisabled()); + assert.isTrue(getAdapter(coerceForTesting(wrapper.instance()).foundation).isSurfaceDisabled()); }); test('#adapter.isSurfaceDisabled returns false prop is not set', () => { const wrapper = mount(); - assert.isFalse(coerceForTesting(wrapper.instance()).foundation.adapter_.isSurfaceDisabled()); + assert.isFalse(getAdapter(coerceForTesting(wrapper.instance()).foundation).isSurfaceDisabled()); }); test('#adapter.addClass adds a class to the root element', () => { const wrapper = mount(); - coerceForTesting(wrapper.instance()).foundation.adapter_.addClass('test-class'); + getAdapter(coerceForTesting(wrapper.instance()).foundation).addClass('test-class'); assert.isTrue( wrapper .update() @@ -241,7 +247,7 @@ test('#adapter.addClass adds a class to the root element', () => { test('#adapter.addClass does not add class if isMounted is false', () => { const wrapper = mount(); coerceForTesting(wrapper.instance()).isComponentMounted = false; - coerceForTesting(wrapper.instance()).foundation.adapter_.addClass('test-class'); + getAdapter(coerceForTesting(wrapper.instance()).foundation).addClass('test-class'); assert.isFalse( wrapper .update() @@ -252,9 +258,9 @@ test('#adapter.addClass does not add class if isMounted is false', () => { test('#adapter.removeClass removes a class to the root element', () => { const wrapper = mount(); - coerceForTesting(wrapper.instance()).foundation.adapter_.addClass('test-class'); + getAdapter(coerceForTesting(wrapper.instance()).foundation).addClass('test-class'); wrapper.update(); - coerceForTesting(wrapper.instance()).foundation.adapter_.removeClass('test-class'); + getAdapter(coerceForTesting(wrapper.instance()).foundation).removeClass('test-class'); assert.isFalse( wrapper .update() @@ -265,10 +271,10 @@ test('#adapter.removeClass removes a class to the root element', () => { test('#adapter.removeClass removes a class to the root element', () => { const wrapper = mount(); - coerceForTesting(wrapper.instance()).foundation.adapter_.addClass('test-class'); + getAdapter(coerceForTesting(wrapper.instance()).foundation).addClass('test-class'); coerceForTesting(wrapper.instance()).isComponentMounted = false; wrapper.update(); - coerceForTesting(wrapper.instance()).foundation.adapter_.removeClass('test-class'); + getAdapter(coerceForTesting(wrapper.instance()).foundation).removeClass('test-class'); assert.isTrue( wrapper .update() @@ -279,53 +285,56 @@ test('#adapter.removeClass removes a class to the root element', () => { test('#adapter.updateCssVariable updates style', () => { const wrapper = mount(); - coerceForTesting(wrapper.instance()).foundation.adapter_.updateCssVariable('color', 'blue'); + getAdapter(coerceForTesting(wrapper.instance()).foundation).updateCssVariable('color', 'blue'); assert.equal(wrapper.state().style.color, 'blue'); }); test('#adapter.updateCssVariable does not update style if isComponentMounted is false', () => { const wrapper = mount(); coerceForTesting(wrapper.instance()).isComponentMounted = false; - coerceForTesting(wrapper.instance()).foundation.adapter_.updateCssVariable('color', 'blue'); + getAdapter(coerceForTesting(wrapper.instance()).foundation).updateCssVariable('color', 'blue'); assert.notEqual(wrapper.state().style.color, 'blue'); }); test('#adapter.registerDocumentInteractionHandler triggers handler on document scroll', () => { const wrapper = mount(); - const testHandler = td.func(); - coerceForTesting(wrapper.instance()) - .foundation.adapter_.registerDocumentInteractionHandler( - 'scroll', - testHandler - ); - const event = new Event('scroll'); + const testHandler = td.func>(); + getAdapter( + coerceForTesting(wrapper.instance()).foundation + ).registerDocumentInteractionHandler( + 'scroll', + testHandler + ); + const event = new UIEvent('scroll'); document.documentElement.dispatchEvent(event); td.verify(testHandler(event), {times: 1}); }); test('#adapter.deregisterDocumentInteractionHandler does not trigger handler on document scroll', () => { const wrapper = mount(); - const testHandler = td.func(); - coerceForTesting(wrapper.instance()) - .foundation.adapter_.registerDocumentInteractionHandler( - 'scroll', - testHandler - ); - const event = new Event('scroll'); - coerceForTesting(wrapper.instance()) - .foundation.adapter_.deregisterDocumentInteractionHandler( - 'scroll', - testHandler - ); + const testHandler = td.func>(); + getAdapter( + coerceForTesting(wrapper.instance()).foundation + ).registerDocumentInteractionHandler( + 'scroll', + testHandler + ); + const event = new UIEvent('scroll'); + getAdapter( + coerceForTesting(wrapper.instance()).foundation + ).deregisterDocumentInteractionHandler( + 'scroll', + testHandler + ); document.documentElement.dispatchEvent(event); td.verify(testHandler(event), {times: 0}); }); test('#adapter.registerResizeHandler triggers handler on window resize', () => { const wrapper = mount(); - const testHandler = td.func(); - coerceForTesting(wrapper.instance()).foundation.adapter_.registerResizeHandler(testHandler); - const event = new Event('resize'); + const testHandler = td.func>(); + getAdapter(coerceForTesting(wrapper.instance()).foundation).registerResizeHandler(testHandler); + const event = new UIEvent('resize'); window.dispatchEvent(event); td.verify(testHandler(event), {times: 1}); }); @@ -334,11 +343,12 @@ test( 'after registering resize handler', () => { const wrapper = mount(); - const testHandler = td.func(); - coerceForTesting(wrapper.instance()).foundation.adapter_.registerResizeHandler(testHandler); - const event = new Event('resize'); - coerceForTesting(wrapper.instance()) - .foundation.adapter_.deregisterResizeHandler(testHandler); + const testHandler = td.func>(); + getAdapter(coerceForTesting(wrapper.instance()).foundation).registerResizeHandler(testHandler); + const event = new UIEvent('resize'); + getAdapter( + coerceForTesting(wrapper.instance()).foundation + ).deregisterResizeHandler(testHandler); window.dispatchEvent(event); td.verify(testHandler(event), {times: 0}); } @@ -357,8 +367,9 @@ test('#adapter.computeBoundingRect returns height and width', () => { left: 0, }; assert.deepInclude( - coerceForTesting(wrapper.update().instance()) - .foundation.adapter_.computeBoundingRect(), + getAdapter( + coerceForTesting(wrapper.update().instance()).foundation + ).computeBoundingRect(), domRect ); }); @@ -367,8 +378,9 @@ test('#adapter.getWindowPageOffset returns height and width', () => { const wrapper = mount(); const offset = {x: 0, y: 0}; assert.deepEqual( - coerceForTesting(wrapper.update().instance()) - .foundation.adapter_.getWindowPageOffset(), + getAdapter( + coerceForTesting(wrapper.update().instance()).foundation + ).getWindowPageOffset(), offset ); }); @@ -378,7 +390,7 @@ test('#componentWillUnmount destroys foundation', () => { const wrapper = mount(); mockRaf.flush(); const foundation = coerceForTesting(wrapper.instance()).foundation; - foundation.destroy = td.func(); + foundation.destroy = td.func<() => void>(); wrapper.unmount(); td.verify(foundation.destroy()); mockRaf.restore(); diff --git a/test/unit/tab/index.test.tsx b/test/unit/tab/index.test.tsx index 92797aed7..5b2ff48b6 100644 --- a/test/unit/tab/index.test.tsx +++ b/test/unit/tab/index.test.tsx @@ -382,3 +382,4 @@ test('on blur event calls handleBlur on TabRippleRef', () => { wrapper.simulate('blur'); td.verify(ripple!.handleBlur(td.matchers.isA(Object)), {times: 1}); }); + From 9523dc29196fb1e0dd27ef67ae6b228174e9c35c Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Thu, 14 Mar 2019 20:32:18 +0300 Subject: [PATCH 03/16] fix(tab-indicator): upgrade mdc-web to 1.0.0 (#742) --- package-lock.json | 288 ++++++++++++++----------- package.json | 2 +- packages/tab-indicator/index.tsx | 22 +- packages/tab-indicator/package.json | 2 +- test/unit/tab-indicator/index.test.tsx | 6 +- 5 files changed, 182 insertions(+), 138 deletions(-) diff --git a/package-lock.json b/package-lock.json index 86d88f4b8..1e9818d95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -369,6 +369,12 @@ "@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", @@ -378,14 +384,6 @@ "@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 - } } } } @@ -613,6 +611,12 @@ "@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", @@ -622,14 +626,6 @@ "@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 - } } } } @@ -867,14 +863,14 @@ } }, "@material/ripple": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-1.0.0.tgz", - "integrity": "sha512-WUjc6LU2D9mRjfHJPQgj8ljG0NuppwOAM6bIt5wyJ3aiUyYQqW05cvB7YCbYE7WHgfxFtL6UOrGuUG4Z+izJDw==", + "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.0", + "@material/dom": "^1.0.1", "@material/feature-targeting": "^0.44.1", "@material/theme": "^1.0.0", "tslib": "^1.9.3" @@ -890,9 +886,9 @@ } }, "@material/dom": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@material/dom/-/dom-1.0.0.tgz", - "integrity": "sha512-P2WDLk/9iZxg4RCvwqCtrObm0Qm0EF5G6X/rw21FKTg6uhwmPR75tCj2Zr1yyvVS9rjLxXZf0bQRsgvKxVE6Zw==", + "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" @@ -1022,6 +1018,12 @@ "@material/ripple": "^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", @@ -1031,14 +1033,6 @@ "@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 - } } } } @@ -1185,6 +1179,17 @@ "@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" + } } } }, @@ -1209,21 +1214,43 @@ } }, "@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/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/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" + } } } }, @@ -1264,6 +1291,12 @@ "@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", @@ -1274,6 +1307,17 @@ "@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" + } } } }, @@ -17251,7 +17295,7 @@ }, "ts-loader": { "version": "3.5.0", - "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-3.5.0.tgz", + "resolved": "http://registry.npmjs.org/ts-loader/-/ts-loader-3.5.0.tgz", "integrity": "sha512-JTia3kObhTk36wPFgy0RnkZReiusYx7Le9IhcUWRrCTcFcr6Dy1zGsFd3x8DG4gevlbN65knI8W50FfoykXcng==", "dev": true, "requires": { @@ -18275,28 +18319,28 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": "", + "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": "", + "resolved": false, "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.4", - "resolved": "", + "resolved": false, "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=", "dev": true, "optional": true, @@ -18307,14 +18351,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": "", + "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -18325,28 +18369,28 @@ }, "chownr": { "version": "1.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=", "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true @@ -18360,7 +18404,7 @@ }, "debug": { "version": "2.6.9", - "resolved": "", + "resolved": false, "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, "optional": true, @@ -18370,28 +18414,28 @@ }, "deep-extend": { "version": "0.5.1", - "resolved": "", + "resolved": false, "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": "", + "resolved": false, "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true }, "fs-minipass": { "version": "1.2.5", - "resolved": "", + "resolved": false, "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "dev": true, "optional": true, @@ -18401,14 +18445,14 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": "", + "resolved": false, "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -18425,7 +18469,7 @@ }, "glob": { "version": "7.1.2", - "resolved": "", + "resolved": false, "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "dev": true, "optional": true, @@ -18440,14 +18484,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.21", - "resolved": "", + "resolved": false, "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==", "dev": true, "optional": true, @@ -18457,7 +18501,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": "", + "resolved": false, "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -18467,7 +18511,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": "", + "resolved": false, "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -18478,21 +18522,21 @@ }, "inherits": { "version": "2.0.3", - "resolved": "", + "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": "", + "resolved": false, "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "optional": true, @@ -18509,7 +18553,7 @@ }, "minimatch": { "version": "3.0.4", - "resolved": "", + "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, @@ -18519,14 +18563,14 @@ }, "minimist": { "version": "0.0.8", - "resolved": "", + "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true, "optional": true }, "minipass": { "version": "2.2.4", - "resolved": "", + "resolved": false, "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "dev": true, "optional": true, @@ -18537,7 +18581,7 @@ }, "minizlib": { "version": "1.1.0", - "resolved": "", + "resolved": false, "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==", "dev": true, "optional": true, @@ -18547,7 +18591,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "", + "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "optional": true, @@ -18557,14 +18601,14 @@ }, "ms": { "version": "2.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true, "optional": true }, "needle": { "version": "2.2.0", - "resolved": "", + "resolved": false, "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==", "dev": true, "optional": true, @@ -18576,7 +18620,7 @@ }, "node-pre-gyp": { "version": "0.10.0", - "resolved": "", + "resolved": false, "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==", "dev": true, "optional": true, @@ -18595,7 +18639,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -18606,14 +18650,14 @@ }, "npm-bundled": { "version": "1.0.3", - "resolved": "", + "resolved": false, "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==", "dev": true, "optional": true }, "npm-packlist": { "version": "1.1.10", - "resolved": "", + "resolved": false, "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==", "dev": true, "optional": true, @@ -18624,7 +18668,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": "", + "resolved": false, "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -18637,21 +18681,21 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": "", + "resolved": false, "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": "", + "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, @@ -18661,21 +18705,21 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": "", + "resolved": false, "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -18686,7 +18730,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true @@ -18700,7 +18744,7 @@ }, "rc": { "version": "1.2.7", - "resolved": "", + "resolved": false, "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==", "dev": true, "optional": true, @@ -18713,7 +18757,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "", + "resolved": false, "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -18738,7 +18782,7 @@ }, "rimraf": { "version": "2.6.2", - "resolved": "", + "resolved": false, "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==", "dev": true, "optional": true, @@ -18748,49 +18792,49 @@ }, "safe-buffer": { "version": "5.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": "", + "resolved": false, "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": "", + "resolved": false, "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true }, "semver": { "version": "5.5.0", - "resolved": "", + "resolved": false, "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "optional": true, @@ -18812,7 +18856,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "optional": true, @@ -18822,14 +18866,14 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true }, "tar": { "version": "4.4.1", - "resolved": "", + "resolved": false, "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==", "dev": true, "optional": true, @@ -18852,7 +18896,7 @@ }, "wide-align": { "version": "1.1.2", - "resolved": "", + "resolved": false, "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", "dev": true, "optional": true, @@ -18862,14 +18906,14 @@ }, "wrappy": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true, "optional": true }, "yallist": { "version": "3.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", "dev": true, "optional": true @@ -19332,21 +19376,21 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": "", + "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": "", + "resolved": false, "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true @@ -19364,14 +19408,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": "", + "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -19382,35 +19426,35 @@ }, "chownr": { "version": "1.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=", "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true @@ -19427,21 +19471,21 @@ }, "deep-extend": { "version": "0.5.1", - "resolved": "", + "resolved": false, "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": "", + "resolved": false, "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true @@ -19458,7 +19502,7 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true @@ -19497,7 +19541,7 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true @@ -19514,7 +19558,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": "", + "resolved": false, "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -19535,14 +19579,14 @@ }, "inherits": { "version": "2.0.3", - "resolved": "", + "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": "", + "resolved": false, "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true @@ -19559,14 +19603,14 @@ }, "isarray": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": "", + "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, diff --git a/package.json b/package.json index f631ad007..6f85b2f42 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "@material/switch": "^0.41.0", "@material/tab": "^0.41.0", "@material/tab-bar": "^0.41.0", - "@material/tab-indicator": "^0.41.0", + "@material/tab-indicator": "^1.0.0", "@material/tab-scroller": "^0.41.0", "@material/textfield": "^0.41.0", "@material/top-app-bar": "^0.41.0", diff --git a/packages/tab-indicator/index.tsx b/packages/tab-indicator/index.tsx index 5e0dc1266..b62b52007 100644 --- a/packages/tab-indicator/index.tsx +++ b/packages/tab-indicator/index.tsx @@ -22,11 +22,9 @@ import * as React from 'react'; import classnames from 'classnames'; -import { - MDCFadingTabIndicatorFoundation, - MDCSlidingTabIndicatorFoundation, -// @ts-ignore no .d.ts file -} from '@material/tab-indicator/dist/mdc.tabIndicator'; +import {MDCSlidingTabIndicatorFoundation} from '@material/tab-indicator/sliding-foundation'; +import {MDCFadingTabIndicatorFoundation} from '@material/tab-indicator/fading-foundation'; +import {MDCTabIndicatorAdapter} from '@material/tab-indicator/adapter'; export interface TabIndicatorProps extends React.HTMLAttributes { active?: boolean; @@ -38,7 +36,7 @@ export interface TabIndicatorProps extends React.HTMLAttributes export default class TabIndicator extends React.Component { private tabIndicatorElement: React.RefObject = React.createRef(); - foundation?: MDCFadingTabIndicatorFoundation | MDCSlidingTabIndicatorFoundation; + foundation!: MDCFadingTabIndicatorFoundation | MDCSlidingTabIndicatorFoundation; static defaultProps: Partial = { active: false, @@ -88,7 +86,7 @@ export default class TabIndicator extends React.Component }); } - get adapter() { + get adapter(): MDCTabIndicatorAdapter { return { addClass: (className: string) => { if (!this.tabIndicatorElement.current) return; @@ -109,15 +107,17 @@ export default class TabIndicator extends React.Component computeContentClientRect: this.computeContentClientRect, // setContentStyleProperty was using setState, but due to the method's // async nature, its not condusive to the FLIP technique - setContentStyleProperty: (prop: keyof CSSStyleDeclaration, value: string) => { + setContentStyleProperty: (prop: string, value: string) => { const contentElement = this.getNativeContentElement() as HTMLElement; + // we need to cast prop from string (interface requirement) to CSSStyleDeclaration; + const typedProp = prop as keyof CSSStyleDeclaration; // length and parentRule are readonly properties of CSSStyleDeclaration that // cannot be set - if (!contentElement || prop === 'length' || prop === 'parentRule') { + if (!contentElement || typedProp === 'length' || typedProp === 'parentRule') { return; } // https://github.com/Microsoft/TypeScript/issues/11914 - contentElement.style[prop] = value; + contentElement.style[typedProp] = value; }, }; } @@ -132,7 +132,7 @@ export default class TabIndicator extends React.Component computeContentClientRect = () => { const contentElement = this.getNativeContentElement(); - if (!(contentElement && contentElement.getBoundingClientRect)) return; + if (!(contentElement && contentElement.getBoundingClientRect)) return new ClientRect(); return contentElement.getBoundingClientRect(); }; diff --git a/packages/tab-indicator/package.json b/packages/tab-indicator/package.json index df5ae8a75..7e7ac15ab 100644 --- a/packages/tab-indicator/package.json +++ b/packages/tab-indicator/package.json @@ -18,7 +18,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/tab-indicator": "^0.41.0", + "@material/tab-indicator": "^1.0.0", "classnames": "^2.2.6", "react": "^16.4.2" }, diff --git a/test/unit/tab-indicator/index.test.tsx b/test/unit/tab-indicator/index.test.tsx index 163d0a7c7..0b9385dc3 100644 --- a/test/unit/tab-indicator/index.test.tsx +++ b/test/unit/tab-indicator/index.test.tsx @@ -40,7 +40,7 @@ test('adds the underline class to the content element by default', () => { test('if props.active changes from true to false, it calls deactivate', () => { const wrapper = mount(); - wrapper.instance().foundation.deactivate = td.func(); + wrapper.instance().foundation.deactivate = td.func<() => null>(); wrapper.setProps({active: false}); td.verify(wrapper.instance().foundation.deactivate(), {times: 1}); }); @@ -48,7 +48,7 @@ test('if props.active changes from true to false, it calls deactivate', () => { test('if props.active changes from false to true, it calls activate', () => { const previousIndicatorClientRect = coerceForTesting({width: 20}); const wrapper = shallow(); - wrapper.instance().foundation.activate = td.func(); + wrapper.instance().foundation.activate = td.func<() => null>(); wrapper.setProps({active: true}); td.verify(wrapper.instance().foundation.activate(previousIndicatorClientRect), {times: 1}); }); @@ -135,7 +135,7 @@ test('child custom element should have content classes', () => { test('#componentWillUnmount destroys foundation', () => { const wrapper = shallow(); const foundation = wrapper.instance().foundation; - foundation.destroy = td.func(); + foundation.destroy = td.func<() => null>(); wrapper.unmount(); td.verify(foundation.destroy(), {times: 1}); }); From 45926d9d00a7842cbd55ea8924cb1d089fd0d237 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Thu, 14 Mar 2019 20:53:28 +0300 Subject: [PATCH 04/16] fix(tab-scroller): upgrade mdc-web to 1.0.0 (#743) --- package-lock.json | 163 +++++++++++++++++++------- package.json | 3 +- packages/tab-scroller/index.tsx | 49 ++++---- packages/tab-scroller/package.json | 4 +- test/unit/tab-bar/index.test.tsx | 2 +- test/unit/tab-scroller/index.test.tsx | 65 +++++----- 6 files changed, 182 insertions(+), 104 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1e9818d95..22825162c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -369,12 +369,6 @@ "@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", @@ -384,6 +378,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 + } } } } @@ -611,12 +613,6 @@ "@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", @@ -626,6 +622,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 + } } } } @@ -863,14 +867,14 @@ } }, "@material/ripple": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-1.0.1.tgz", - "integrity": "sha512-aBigRoVMjIU2lLDq7TMocI2H2YFbO1hICs5FTdSRp4Yis/QFTrgaW32q8yuHdZI56j+b2BWIWapqA2xpSmCMXQ==", + "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": "^1.0.0", "@material/base": "^1.0.0", - "@material/dom": "^1.0.1", + "@material/dom": "^1.0.0", "@material/feature-targeting": "^0.44.1", "@material/theme": "^1.0.0", "tslib": "^1.9.3" @@ -886,9 +890,9 @@ } }, "@material/dom": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@material/dom/-/dom-1.0.1.tgz", - "integrity": "sha512-7gb9Tk8YBn2fLEa5fJfvDexG0QxvRGDb8c6uZEhvK4bTd2ZHCfHg9KrO+smC6Trbn5jC+FsBvdRZBbMjtS/E4g==", + "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" @@ -1018,12 +1022,6 @@ "@material/ripple": "^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", @@ -1033,6 +1031,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 + } } } } @@ -1210,6 +1216,17 @@ "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" + } } } }, @@ -1234,15 +1251,6 @@ "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", @@ -1255,21 +1263,88 @@ } }, "@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/base": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", - "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "@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" + } } } }, diff --git a/package.json b/package.json index 6f85b2f42..860f5f6bc 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "@material/tab": "^0.41.0", "@material/tab-bar": "^0.41.0", "@material/tab-indicator": "^1.0.0", - "@material/tab-scroller": "^0.41.0", + "@material/tab-scroller": "^1.0.0", "@material/textfield": "^0.41.0", "@material/top-app-bar": "^0.41.0", "@material/typography": "^0.41.0", @@ -162,3 +162,4 @@ "webpack-dev-server": "^2.11.2" } } + diff --git a/packages/tab-scroller/index.tsx b/packages/tab-scroller/index.tsx index b7c559b22..dd44f0200 100644 --- a/packages/tab-scroller/index.tsx +++ b/packages/tab-scroller/index.tsx @@ -22,12 +22,9 @@ import * as React from 'react'; import classnames from 'classnames'; -import { - MDCTabScrollerFoundation, - util, -// @ts-ignore no .d.ts file -} from '@material/tab-scroller/dist/mdc.tabScroller'; -// @ts-ignore no mdc .d.ts file +import {MDCTabScrollerFoundation} from '@material/tab-scroller/foundation'; +import {MDCTabScrollerAdapter} from '@material/tab-scroller/adapter'; +import * as util from '@material/tab-scroller/util'; import {matches} from '@material/dom/ponyfill'; const convertDashToCamelCase = (propName: string) => @@ -55,7 +52,7 @@ export default class TabScroller extends React.Component< > { areaElement: React.RefObject = React.createRef(); contentElement: React.RefObject = React.createRef(); - foundation?: MDCTabScrollerFoundation; + foundation!: MDCTabScrollerFoundation; state: TabScrollerState = { classList: new Set(), @@ -113,7 +110,7 @@ export default class TabScroller extends React.Component< }); }; - get adapter() { + get adapter(): MDCTabScrollerAdapter { return { eventTargetMatchesSelector: (evtTarget: HTMLDivElement, selector: string) => { if (selector) { @@ -141,25 +138,27 @@ export default class TabScroller extends React.Component< setScrollContentStyleProperty: (prop: string, value: string) => this.setStyleToElement(prop, value, 'scrollContentStyleProperty'), getScrollContentStyleValue: (propName: string) => - this.contentElement.current && - window - .getComputedStyle(this.contentElement.current) - .getPropertyValue(propName), + this.contentElement.current ? + window + .getComputedStyle(this.contentElement.current) + .getPropertyValue(propName) : '', setScrollAreaScrollLeft: (scrollX: number) => { if (!this.areaElement.current) return; this.areaElement.current.scrollLeft = scrollX; }, getScrollAreaScrollLeft: () => - this.areaElement.current && this.areaElement.current.scrollLeft, + this.areaElement.current ? this.areaElement.current.scrollLeft : 0, getScrollContentOffsetWidth: this.getScrollContentWidth, getScrollAreaOffsetWidth: () => - this.areaElement.current && this.areaElement.current.offsetWidth, + this.areaElement.current ? this.areaElement.current.offsetWidth : 0, computeScrollAreaClientRect: () => - this.areaElement.current && - this.areaElement.current.getBoundingClientRect(), + this.areaElement.current ? + this.areaElement.current.getBoundingClientRect() : + new ClientRect(), computeScrollContentClientRect: () => - this.contentElement.current && - this.contentElement.current.getBoundingClientRect(), + this.contentElement.current ? + this.contentElement.current.getBoundingClientRect() : + new ClientRect(), computeHorizontalScrollbarHeight: () => util.computeHorizontalScrollbarHeight(document), }; @@ -172,7 +171,7 @@ export default class TabScroller extends React.Component< // needs to be public class method for react tab-bar getScrollContentWidth = () => { return ( - this.contentElement.current && this.contentElement.current.offsetWidth + this.contentElement.current ? this.contentElement.current.offsetWidth : 0 ); }; @@ -186,32 +185,32 @@ export default class TabScroller extends React.Component< handleWheel_ = (evt: React.WheelEvent) => { this.props.onWheel && this.props.onWheel(evt); - this.foundation.handleInteraction(evt); + this.foundation.handleInteraction(); }; handleTouchStart_ = (evt: React.TouchEvent) => { this.props.onTouchStart && this.props.onTouchStart(evt); - this.foundation.handleInteraction(evt); + this.foundation.handleInteraction(); }; handlePointerDown_ = (evt: React.PointerEvent) => { this.props.onPointerDown && this.props.onPointerDown(evt); - this.foundation.handleInteraction(evt); + this.foundation.handleInteraction(); }; handleMouseDown_ = (evt: React.MouseEvent) => { this.props.onMouseDown && this.props.onMouseDown(evt); - this.foundation.handleInteraction(evt); + this.foundation.handleInteraction(); }; handleKeyDown_ = (evt: React.KeyboardEvent) => { this.props.onKeyDown && this.props.onKeyDown(evt); - this.foundation.handleInteraction(evt); + this.foundation.handleInteraction(); }; handleTransitionEnd_ = (evt: React.TransitionEvent) => { this.props.onTransitionEnd && this.props.onTransitionEnd(evt); - this.foundation.handleTransitionEnd(evt); + this.foundation.handleTransitionEnd(evt.nativeEvent); }; render() { diff --git a/packages/tab-scroller/package.json b/packages/tab-scroller/package.json index 8cd9dcc7b..1c82a544f 100644 --- a/packages/tab-scroller/package.json +++ b/packages/tab-scroller/package.json @@ -18,8 +18,8 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/dom": "^0.41.0", - "@material/tab-scroller": "^0.41.0", + "@material/dom": "^1.0.0", + "@material/tab-scroller": "^1.0.0", "classnames": "^2.2.6", "react": "^16.4.2" }, diff --git a/test/unit/tab-bar/index.test.tsx b/test/unit/tab-bar/index.test.tsx index a891189f9..ac379b06d 100644 --- a/test/unit/tab-bar/index.test.tsx +++ b/test/unit/tab-bar/index.test.tsx @@ -93,7 +93,7 @@ test('#adapter.incrementScroll calls incrementScroll on tab scroller', () => { test('#adapter.getScrollPosition calls getScrollPosition on tab scroller', () => { const wrapper = mount(); const scroller = wrapper.instance().tabScrollerRef.current; - scroller!.getScrollPosition = coerceForTesting<() => void>(td.func()); + scroller!.getScrollPosition = coerceForTesting<() => number>(td.func()); wrapper.instance().adapter.getScrollPosition(); td.verify(scroller!.getScrollPosition()); }); diff --git a/test/unit/tab-scroller/index.test.tsx b/test/unit/tab-scroller/index.test.tsx index 7e312cde1..46ac1527b 100644 --- a/test/unit/tab-scroller/index.test.tsx +++ b/test/unit/tab-scroller/index.test.tsx @@ -19,6 +19,11 @@ const clientRectShape = [ suite('TabScroller'); +function getAdapter(instance: TabScroller) { + // @ts-ignore adapter_ property is protected and we need to override this + return instance.foundation.adapter_; +} + test('classNames adds classes', () => { const wrapper = shallow(); assert.isTrue(wrapper.hasClass('test-class-name')); @@ -185,9 +190,7 @@ test('#adapter.getScrollContentStyleValue adds to state.scrollAreaStyleProperty' .instance() .contentElement.current!.style.setProperty('color', 'lightblue'); const content = document.querySelector('.mdc-tab-scroller__scroll-content'); - const contentStyleValue = wrapper - .instance() - .foundation.adapter_.getScrollContentStyleValue('color'); + const contentStyleValue = getAdapter(wrapper.instance()).getScrollContentStyleValue('color'); assert.equal( contentStyleValue, window.getComputedStyle(content!).getPropertyValue('color') @@ -217,7 +220,7 @@ const setupScrolling = () => { test('#adapter.setScrollAreaScrollLeft adds to state.scrollAreaStyleProperty', () => { const {div, wrapper} = setupScrolling(); - wrapper.instance().foundation.adapter_.setScrollAreaScrollLeft(101); + getAdapter(wrapper.instance()).setScrollAreaScrollLeft(101); assert.equal(wrapper.instance().areaElement.current!.scrollLeft, 101); div.remove(); }); @@ -227,7 +230,7 @@ test('#adapter.getScrollAreaScrollLeft returns the areaElement scrollLeft proper const areaElement = div.querySelector(AREA_SELECTOR); areaElement!.scrollLeft = 20; assert.equal( - wrapper.instance().foundation.adapter_.getScrollAreaScrollLeft(), + getAdapter(wrapper.instance()).getScrollAreaScrollLeft(), 20 ); div.remove(); @@ -236,7 +239,7 @@ test('#adapter.getScrollAreaScrollLeft returns the areaElement scrollLeft proper test('#adapter.getScrollContentOffsetWidth returns the contentElement offsetWidth property', () => { const {div, wrapper} = setupScrolling(); assert.isAbove( - wrapper.instance().foundation.adapter_.getScrollContentOffsetWidth(), + getAdapter(wrapper.instance()).getScrollContentOffsetWidth(), 0 ); div.remove(); @@ -245,7 +248,7 @@ test('#adapter.getScrollContentOffsetWidth returns the contentElement offsetWidt test('#adapter.getScrollAreaOffsetWidth returns the areaElement offsetWidth property', () => { const {div, wrapper} = setupScrolling(); assert.isAbove( - wrapper.instance().foundation.adapter_.getScrollAreaOffsetWidth(), + getAdapter(wrapper.instance()).getScrollAreaOffsetWidth(), 0 ); div.remove(); @@ -253,25 +256,21 @@ test('#adapter.getScrollAreaOffsetWidth returns the areaElement offsetWidth prop test('#adapter.computeScrollAreaClientRect returns the areaElement clientRect', () => { const wrapper = mount(); - const clientRect = wrapper - .instance() - .foundation.adapter_.computeScrollAreaClientRect(); + const clientRect = getAdapter(wrapper.instance()).computeScrollAreaClientRect(); const jsonClientRect = JSON.parse(JSON.stringify(clientRect)); assert.containsAllKeys(jsonClientRect, clientRectShape); }); test('#adapter.computeScrollContentClientRect returns the contentElement clientRect', () => { const wrapper = mount(); - const clientRect = wrapper - .instance() - .foundation.adapter_.computeScrollContentClientRect(); + const clientRect = getAdapter(wrapper.instance()).computeScrollContentClientRect(); const jsonClientRect = JSON.parse(JSON.stringify(clientRect)); assert.containsAllKeys(jsonClientRect, clientRectShape); }); test('#getScrollPosition calls foundation.getScrollPosition', () => { const wrapper = shallow(); - wrapper.instance().foundation.getScrollPosition = td.func(); + wrapper.instance().foundation.getScrollPosition = td.func<() => number>(); wrapper.instance().getScrollPosition(); td.verify(wrapper.instance().foundation.getScrollPosition(), {times: 1}); }); @@ -285,14 +284,14 @@ test('#getScrollContentWidth returns the contentElement offsetWidth', () => { test('#incrementScroll calls foundation.incrementScroll', () => { const wrapper = shallow(); - wrapper.instance().foundation.incrementScroll = td.func(); + wrapper.instance().foundation.incrementScroll = td.func<(scrollXIncrement: number) => null>(); wrapper.instance().incrementScroll(50); td.verify(wrapper.instance().foundation.incrementScroll(50), {times: 1}); }); test('#scrollTo calls foundation.scrollTo', () => { const wrapper = shallow(); - wrapper.instance().foundation.scrollTo = td.func(); + wrapper.instance().foundation.scrollTo = td.func<(scrollX: number) => null>(); wrapper.instance().scrollTo(50); td.verify(wrapper.instance().foundation.scrollTo(50), {times: 1}); }); @@ -306,10 +305,10 @@ test('areaElement gets areaClassList', () => { test('wheel event triggers foundation.handleInteraction', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleInteraction = td.func(); + wrapper.instance().foundation.handleInteraction = td.func<() => void>(); const evt = {}; wrapper.simulate('wheel', evt); - td.verify(wrapper.instance().foundation.handleInteraction(evt), { + td.verify(wrapper.instance().foundation.handleInteraction(), { times: 1, }); }); @@ -324,10 +323,10 @@ test('wheel event triggers props.onWheel', () => { test('touchstart event triggers foundation.handleInteraction', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleInteraction = td.func(); + wrapper.instance().foundation.handleInteraction = td.func<() => void>(); const evt = {}; wrapper.simulate('touchstart', evt); - td.verify(wrapper.instance().foundation.handleInteraction(evt), { + td.verify(wrapper.instance().foundation.handleInteraction(), { times: 1, }); }); @@ -342,10 +341,10 @@ test('touchstart event triggers props.onTouchStart', () => { test('pointerdown event triggers foundation.handleInteraction', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleInteraction = td.func(); + wrapper.instance().foundation.handleInteraction = td.func<() => void>(); const evt = coerceForTesting>({}); wrapper.simulate('pointerDown', evt); - td.verify(wrapper.instance().foundation.handleInteraction(evt), { + td.verify(wrapper.instance().foundation.handleInteraction(), { times: 1, }); }); @@ -360,10 +359,10 @@ test('pointerdown event triggers props.onPointerDown', () => { test('mousedown event triggers foundation.handleInteraction', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleInteraction = td.func(); + wrapper.instance().foundation.handleInteraction = td.func<() => null>(); const evt = {}; wrapper.simulate('mousedown', evt); - td.verify(wrapper.instance().foundation.handleInteraction(evt), { + td.verify(wrapper.instance().foundation.handleInteraction(), { times: 1, }); }); @@ -378,10 +377,10 @@ test('mousedown event triggers props.onMouseDown', () => { test('keydown event triggers foundation.handleInteraction', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleInteraction = td.func(); + wrapper.instance().foundation.handleInteraction = td.func<() => void>(); const evt = {}; wrapper.simulate('keydown', evt); - td.verify(wrapper.instance().foundation.handleInteraction(evt), { + td.verify(wrapper.instance().foundation.handleInteraction(), { times: 1, }); }); @@ -396,10 +395,12 @@ test('keydown event triggers props.onKeyDown', () => { test('transitionend event triggers foundation.handleTransitionEnd', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleTransitionEnd = td.func(); - const evt = {}; + wrapper.instance().foundation.handleTransitionEnd = td.func<(evt: Event) => null>(); + const evt = coerceForTesting({ + nativeEvent: {}, + }); wrapper.simulate('transitionend', evt); - td.verify(wrapper.instance().foundation.handleTransitionEnd(evt), { + td.verify(wrapper.instance().foundation.handleTransitionEnd(evt.nativeEvent), { times: 1, }); }); @@ -407,7 +408,9 @@ test('transitionend event triggers foundation.handleTransitionEnd', () => { test('transitionend event triggers props.onTransitionEnd', () => { const onTransitionEnd = coerceForTesting>(td.func()); const wrapper = shallow(); - const evt = coerceForTesting>({}); + const evt = coerceForTesting>({ + nativeEvent: {}, + }); wrapper.simulate('transitionend', evt); td.verify(onTransitionEnd(evt), {times: 1}); }); @@ -426,7 +429,7 @@ test('renders child components', () => { test('#componentWillUnmount destroys foundation', () => { const wrapper = shallow(); const foundation = wrapper.instance().foundation; - foundation.destroy = td.func(); + foundation.destroy = td.func<() => void>(); wrapper.unmount(); td.verify(foundation.destroy(), {times: 1}); }); From 007acf6c254e792689204111d44a71715f6f44fa Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Fri, 15 Mar 2019 10:05:03 -0700 Subject: [PATCH 05/16] fix: classnames@2.2.5 --> classnames@2.2.6 & update imports (#709) --- packages/card/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/card/package.json b/packages/card/package.json index c6e23dd11..100c44851 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -18,7 +18,6 @@ }, "dependencies": { "@material/card": "^0.41.0", - "@material/react-ripple": "^0.11.0", "classnames": "^2.2.6", "react": "^16.4.2" }, From 5c762e573d712518197f298902f0191a9fbfdc93 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Fri, 15 Mar 2019 19:05:44 +0200 Subject: [PATCH 06/16] fix(chips): upgrade mdc-web to v1.0.0 (#750) --- package-lock.json | 282 ++++++++++++++++++++----------- package.json | 3 +- packages/chips/Chip.tsx | 36 ++-- packages/chips/ChipSet.tsx | 17 +- packages/chips/package.json | 2 +- test/unit/chips/Chip.test.tsx | 87 ++++++---- test/unit/chips/ChipSet.test.tsx | 18 +- 7 files changed, 275 insertions(+), 170 deletions(-) diff --git a/package-lock.json b/package-lock.json index 22825162c..58f8905dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -424,36 +424,112 @@ } }, "@material/chips": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/chips/-/chips-0.41.0.tgz", - "integrity": "sha512-Z2q01n4JdRR2f2fdYNCftmgu0M8wu8PZUeQTK3e3zVkQyRdmXcbqMbLHRawVWuXORC8/mIA6tuTtOEqle/Qj9w==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/chips/-/chips-1.0.1.tgz", + "integrity": "sha512-UcCEkuFEE8c3zdzAnv7kdU7hG6QNOJpVgmrphWBgoPG92+yFFb8b5Wo+3MWT+SIF/wKNSNAo8a+BER9DsCOOjw==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/checkbox": "^0.41.0", - "@material/elevation": "^0.41.0", - "@material/ripple": "^0.41.0", - "@material/shape": "^0.41.0", - "@material/theme": "^0.41.0", - "@material/typography": "^0.41.0" + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/checkbox": "^1.0.1", + "@material/elevation": "^1.0.0", + "@material/ripple": "^1.0.1", + "@material/shape": "^1.0.0", + "@material/theme": "^1.0.0", + "@material/typography": "^1.0.0", + "tslib": "^1.9.3" }, "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/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/checkbox": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/checkbox/-/checkbox-1.0.1.tgz", + "integrity": "sha512-/FMQEM5aT3S63Rp2gWgq0/WnMl9tNpSBs222r/3YT9Aqesbdp56mcDG9rk9rq2Ph74sWxlI5+9MVwL4CZ3nCyg==", + "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/ripple": "^1.0.1", + "@material/rtl": "^0.42.0", + "@material/theme": "^1.0.0", + "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/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/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.1", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-1.0.1.tgz", + "integrity": "sha512-aBigRoVMjIU2lLDq7TMocI2H2YFbO1hICs5FTdSRp4Yis/QFTrgaW32q8yuHdZI56j+b2BWIWapqA2xpSmCMXQ==", "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.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/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/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" } } } @@ -17370,7 +17446,7 @@ }, "ts-loader": { "version": "3.5.0", - "resolved": "http://registry.npmjs.org/ts-loader/-/ts-loader-3.5.0.tgz", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-3.5.0.tgz", "integrity": "sha512-JTia3kObhTk36wPFgy0RnkZReiusYx7Le9IhcUWRrCTcFcr6Dy1zGsFd3x8DG4gevlbN65knI8W50FfoykXcng==", "dev": true, "requires": { @@ -18394,28 +18470,28 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": false, + "resolved": "", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": false, + "resolved": "", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.4", - "resolved": false, + "resolved": "", "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=", "dev": true, "optional": true, @@ -18426,14 +18502,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": false, + "resolved": "", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -18444,28 +18520,28 @@ }, "chownr": { "version": "1.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=", "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true @@ -18479,7 +18555,7 @@ }, "debug": { "version": "2.6.9", - "resolved": false, + "resolved": "", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dev": true, "optional": true, @@ -18489,28 +18565,28 @@ }, "deep-extend": { "version": "0.5.1", - "resolved": false, + "resolved": "", "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": false, + "resolved": "", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true }, "fs-minipass": { "version": "1.2.5", - "resolved": false, + "resolved": "", "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "dev": true, "optional": true, @@ -18520,14 +18596,14 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": false, + "resolved": "", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -18544,7 +18620,7 @@ }, "glob": { "version": "7.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "dev": true, "optional": true, @@ -18559,14 +18635,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.21", - "resolved": false, + "resolved": "", "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==", "dev": true, "optional": true, @@ -18576,7 +18652,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": false, + "resolved": "", "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -18586,7 +18662,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": false, + "resolved": "", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -18597,21 +18673,21 @@ }, "inherits": { "version": "2.0.3", - "resolved": false, + "resolved": "", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": false, + "resolved": "", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "optional": true, @@ -18628,7 +18704,7 @@ }, "minimatch": { "version": "3.0.4", - "resolved": false, + "resolved": "", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, @@ -18638,14 +18714,14 @@ }, "minimist": { "version": "0.0.8", - "resolved": false, + "resolved": "", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true, "optional": true }, "minipass": { "version": "2.2.4", - "resolved": false, + "resolved": "", "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "dev": true, "optional": true, @@ -18656,7 +18732,7 @@ }, "minizlib": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==", "dev": true, "optional": true, @@ -18666,7 +18742,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": false, + "resolved": "", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "optional": true, @@ -18676,14 +18752,14 @@ }, "ms": { "version": "2.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true, "optional": true }, "needle": { "version": "2.2.0", - "resolved": false, + "resolved": "", "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==", "dev": true, "optional": true, @@ -18695,7 +18771,7 @@ }, "node-pre-gyp": { "version": "0.10.0", - "resolved": false, + "resolved": "", "integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==", "dev": true, "optional": true, @@ -18714,7 +18790,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -18725,14 +18801,14 @@ }, "npm-bundled": { "version": "1.0.3", - "resolved": false, + "resolved": "", "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==", "dev": true, "optional": true }, "npm-packlist": { "version": "1.1.10", - "resolved": false, + "resolved": "", "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==", "dev": true, "optional": true, @@ -18743,7 +18819,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -18756,21 +18832,21 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": false, + "resolved": "", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": false, + "resolved": "", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, @@ -18780,21 +18856,21 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": false, + "resolved": "", "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -18805,7 +18881,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true @@ -18819,7 +18895,7 @@ }, "rc": { "version": "1.2.7", - "resolved": false, + "resolved": "", "integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==", "dev": true, "optional": true, @@ -18832,7 +18908,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": false, + "resolved": "", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -18857,7 +18933,7 @@ }, "rimraf": { "version": "2.6.2", - "resolved": false, + "resolved": "", "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==", "dev": true, "optional": true, @@ -18867,49 +18943,49 @@ }, "safe-buffer": { "version": "5.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": false, + "resolved": "", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true }, "semver": { "version": "5.5.0", - "resolved": false, + "resolved": "", "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==", "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "optional": true, @@ -18931,7 +19007,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "optional": true, @@ -18941,14 +19017,14 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true }, "tar": { "version": "4.4.1", - "resolved": false, + "resolved": "", "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==", "dev": true, "optional": true, @@ -18971,7 +19047,7 @@ }, "wide-align": { "version": "1.1.2", - "resolved": false, + "resolved": "", "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", "dev": true, "optional": true, @@ -18981,14 +19057,14 @@ }, "wrappy": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true, "optional": true }, "yallist": { "version": "3.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", "dev": true, "optional": true @@ -19451,21 +19527,21 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": false, + "resolved": "", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": false, + "resolved": "", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": false, + "resolved": "", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true @@ -19483,14 +19559,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": false, + "resolved": "", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -19501,35 +19577,35 @@ }, "chownr": { "version": "1.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=", "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": false, + "resolved": "", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": false, + "resolved": "", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true @@ -19546,21 +19622,21 @@ }, "deep-extend": { "version": "0.5.1", - "resolved": false, + "resolved": "", "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": false, + "resolved": "", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true @@ -19577,7 +19653,7 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true @@ -19616,7 +19692,7 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": false, + "resolved": "", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true @@ -19633,7 +19709,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": false, + "resolved": "", "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -19654,14 +19730,14 @@ }, "inherits": { "version": "2.0.3", - "resolved": false, + "resolved": "", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": false, + "resolved": "", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true @@ -19678,14 +19754,14 @@ }, "isarray": { "version": "1.0.0", - "resolved": false, + "resolved": "", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": false, + "resolved": "", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, diff --git a/package.json b/package.json index 860f5f6bc..a68f470e4 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "@material/button": "^0.43.0", "@material/card": "^0.41.0", "@material/checkbox": "^0.41.0", - "@material/chips": "^0.41.0", + "@material/chips": "^1.0.0", "@material/dialog": "^0.43.0", "@material/dom": "^0.41.0", "@material/drawer": "^0.41.0", @@ -162,4 +162,3 @@ "webpack-dev-server": "^2.11.2" } } - diff --git a/packages/chips/Chip.tsx b/packages/chips/Chip.tsx index 73ab59485..3e3efbb4a 100644 --- a/packages/chips/Chip.tsx +++ b/packages/chips/Chip.tsx @@ -22,8 +22,8 @@ import * as React from 'react'; import classnames from 'classnames'; import * as Ripple from '@material/react-ripple'; -// @ts-ignore no mdc .d.ts file -import {MDCChipFoundation} from '@material/chips/dist/mdc.chips'; +import {MDCChipFoundation} from '@material/chips/chip/foundation'; +import {MDCChipAdapter} from '@material/chips/chip/adapter'; export interface ChipProps extends Ripple.InjectedProps { id?: string; @@ -51,7 +51,7 @@ type ChipState = { export class Chip extends React.Component { chipElement: HTMLDivElement | null = null; - foundation?: MDCChipFoundation; + foundation!: MDCChipFoundation; static defaultProps: Partial = { id: '', @@ -78,9 +78,9 @@ export class Chip extends React.Component { const {selected, shouldRemoveOnTrailingIconClick} = this.props; this.foundation = new MDCChipFoundation(this.adapter); this.foundation.init(); - this.foundation.setSelected(selected); + this.foundation.setSelected(selected!); if (shouldRemoveOnTrailingIconClick !== this.foundation.getShouldRemoveOnTrailingIconClick()) { - this.foundation.setShouldRemoveOnTrailingIconClick(shouldRemoveOnTrailingIconClick); + this.foundation.setShouldRemoveOnTrailingIconClick(shouldRemoveOnTrailingIconClick!); } } @@ -88,11 +88,11 @@ export class Chip extends React.Component { const {selected, shouldRemoveOnTrailingIconClick} = this.props; if (selected !== prevProps.selected) { - this.foundation.setSelected(selected); + this.foundation.setSelected(selected!); } if (shouldRemoveOnTrailingIconClick !== prevProps.shouldRemoveOnTrailingIconClick) { - this.foundation.setShouldRemoveOnTrailingIconClick(shouldRemoveOnTrailingIconClick); + this.foundation.setShouldRemoveOnTrailingIconClick(shouldRemoveOnTrailingIconClick!); } } @@ -111,7 +111,7 @@ export class Chip extends React.Component { return classnames('mdc-chip', Array.from(classList), className); } - get adapter() { + get adapter(): MDCChipAdapter { return { addClass: (className: string) => { const classList = new Set(this.state.classList); @@ -124,14 +124,24 @@ export class Chip extends React.Component { this.setState({classList}); }, hasClass: (className: string) => this.classes.split(' ').includes(className), + hasLeadingIcon: () => Boolean(this.props.leadingIcon), eventTargetHasClass: (target: HTMLElement, className: string) => target.classList.contains(className), getComputedStyleValue: (propertyName: string) => { - if (!this.chipElement) return; + if (!this.chipElement) return ''; return window .getComputedStyle(this.chipElement) .getPropertyValue(propertyName); }, + getRootBoundingClientRect: () => { + if (!this.chipElement) return new ClientRect(); + return this.chipElement.getBoundingClientRect(); + }, + getCheckmarkBoundingClientRect: () => { + const {chipCheckmark} = this.props; + if (!chipCheckmark) return new ClientRect(); + return chipCheckmark.props.getBoundingClientRect(); + }, setStyleProperty: (propertyName: keyof React.CSSProperties, value: string | null) => { if (!this.chipElement) return; this.chipElement.style.setProperty(propertyName, value); @@ -156,19 +166,19 @@ export class Chip extends React.Component { onClick = (e: React.MouseEvent) => { this.props.onClick!(e); - this.foundation.handleInteraction(e); + this.foundation.handleInteraction(e.nativeEvent); }; onKeyDown = (e: React.KeyboardEvent) => { this.props.onKeyDown!(e); - this.foundation.handleInteraction(e); + this.foundation.handleInteraction(e.nativeEvent); }; - handleTrailingIconClick = (e: React.MouseEvent) => this.foundation.handleTrailingIconInteraction(e); + handleTrailingIconClick = (e: React.MouseEvent) => this.foundation.handleTrailingIconInteraction(e.nativeEvent); handleTransitionEnd = (e: React.TransitionEvent) => { this.props.onTransitionEnd!(e); - this.foundation.handleTransitionEnd(e); + this.foundation.handleTransitionEnd(e.nativeEvent); }; renderLeadingIcon = (leadingIcon: React.ReactElement) => { diff --git a/packages/chips/ChipSet.tsx b/packages/chips/ChipSet.tsx index 826093d90..8ff6f3a7a 100644 --- a/packages/chips/ChipSet.tsx +++ b/packages/chips/ChipSet.tsx @@ -21,8 +21,7 @@ // THE SOFTWARE. import * as React from 'react'; import classnames from 'classnames'; -// @ts-ignore no mdc .d.ts file -import {MDCChipSetFoundation} from '@material/chips/dist/mdc.chips'; +import {MDCChipSetFoundation} from '@material/chips/chip-set/foundation'; import ChipCheckmark from './ChipCheckmark'; import {ChipProps} from './Chip'; // eslint-disable-line no-unused-vars @@ -40,7 +39,7 @@ export interface ChipSetProps { }; interface ChipSetState { - foundation: MDCChipSetFoundation; + foundation: MDCChipSetFoundation | null; selectedChipIds: string[]; hasInitialized: boolean; }; @@ -83,7 +82,7 @@ export default class ChipSet extends React.Component } componentWillUnmount() { - this.state.foundation.destroy(); + this.state.foundation!.destroy(); } get classes() { @@ -99,7 +98,7 @@ export default class ChipSet extends React.Component return { hasClass: (className: string) => this.classes.split(' ').includes(className), setSelected: () => { - const selectedChipIds = this.state.foundation.getSelectedChipIds().slice(); + const selectedChipIds = this.state.foundation!.getSelectedChipIds().slice(); this.setState({selectedChipIds}, () => { this.props.handleSelect!(selectedChipIds); }); @@ -113,22 +112,22 @@ export default class ChipSet extends React.Component const {id} = (child as ChipType).props; const selected = this.state.selectedChipIds.indexOf(id!) > -1; if (selected) { - this.state.foundation.select(id); + this.state.foundation!.select(id!); } }); this.setState({hasInitialized: true}); } handleInteraction = (chipId: string) => { - this.state.foundation.handleChipInteraction(chipId); + this.state.foundation!.handleChipInteraction(chipId); }; handleSelect = (chipId: string, selected: boolean) => { - this.state.foundation.handleChipSelection(chipId, selected); + this.state.foundation!.handleChipSelection(chipId, selected); }; handleRemove = (chipId: string) => { - this.state.foundation.handleChipRemoval(chipId); + this.state.foundation!.handleChipRemoval(chipId); }; removeChip = (chipId: string) => { diff --git a/packages/chips/package.json b/packages/chips/package.json index f47cfe540..ab4606d2f 100644 --- a/packages/chips/package.json +++ b/packages/chips/package.json @@ -19,7 +19,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/chips": "^0.41.0", + "@material/chips": "^1.0.0", "@material/react-ripple": "^0.11.0", "classnames": "^2.2.6", "react": "^16.4.2" diff --git a/test/unit/chips/Chip.test.tsx b/test/unit/chips/Chip.test.tsx index 45f976796..49545696d 100644 --- a/test/unit/chips/Chip.test.tsx +++ b/test/unit/chips/Chip.test.tsx @@ -5,9 +5,16 @@ import * as td from 'testdouble'; import {Chip} from '../../../packages/chips/Chip'; import ChipCheckmark from '../../../packages/chips/ChipCheckmark'; import {coerceForTesting} from '../helpers/types'; +import {MDCChipAdapter} from '@material/chips/chip/adapter'; + suite('Chip'); +function getAdapter(instance: Chip): MDCChipAdapter { + // @ts-ignore adapter_ is protected property, we need to override it + return instance.foundation.adapter_; +} + test('creates foundation', () => { const wrapper = mount(); assert.exists(wrapper.instance().foundation); @@ -16,7 +23,7 @@ test('creates foundation', () => { test('#componentWillUnmount destroys foundation', () => { const wrapper = shallow(); const foundation = wrapper.instance().foundation; - foundation.destroy = td.func(); + foundation.destroy = td.func<() => void>(); wrapper.unmount(); td.verify(foundation.destroy(), {times: 1}); }); @@ -45,7 +52,8 @@ test('when props.shouldRemoveOnTrailingIconClick updates to false, ' + ' #foundation.setShouldRemoveOnTrailingIconClick is called ', () => { const wrapper = shallow(); assert.isTrue(wrapper.instance().foundation.getShouldRemoveOnTrailingIconClick()); - wrapper.instance().foundation.setShouldRemoveOnTrailingIconClick = td.func(); + wrapper.instance().foundation.setShouldRemoveOnTrailingIconClick = + td.func<(shouldRemove: boolean) => void>(); wrapper.setProps({shouldRemoveOnTrailingIconClick: false}); td.verify(wrapper.instance().foundation.setShouldRemoveOnTrailingIconClick(false), {times: 1}); }); @@ -55,7 +63,8 @@ test('when props.shouldRemoveOnTrailingIconClick updates to true, ' + ' #foundation.setShouldRemoveOnTrailingIconClick is called ', () => { const wrapper = shallow(); assert.isFalse(wrapper.instance().foundation.getShouldRemoveOnTrailingIconClick()); - wrapper.instance().foundation.setShouldRemoveOnTrailingIconClick = td.func(); + wrapper.instance().foundation.setShouldRemoveOnTrailingIconClick = + td.func<(shouldRemove: boolean) => void>(); wrapper.setProps({shouldRemoveOnTrailingIconClick: true}); td.verify(wrapper.instance().foundation.setShouldRemoveOnTrailingIconClick(true), {times: 1}); }); @@ -126,9 +135,7 @@ test('#adapter.setStyleProperty should add styles to chip', () => { test('#adapter.addClassToLeadingIcon adds to state.leadingIconClassList', () => { const wrapper = shallow(); - wrapper - .instance() - .foundation.adapter_.addClassToLeadingIcon('test-leading-icon-class'); + getAdapter(wrapper.instance()).addClassToLeadingIcon('test-leading-icon-class'); assert.isTrue( wrapper.state().leadingIconClassList.has('test-leading-icon-class') ); @@ -139,9 +146,7 @@ test('#adapter.removeClassFromLeadingIcon removes from state.leadingIconClassLis wrapper.setState({ leadingIconClassList: new Set('test-leading-icon-class'), }); - wrapper - .instance() - .foundation.adapter_.removeClassFromLeadingIcon('test-leading-icon-class'); + getAdapter(wrapper.instance()).removeClassFromLeadingIcon('test-leading-icon-class'); assert.isFalse( wrapper.state().leadingIconClassList.has('test-leading-icon-class') ); @@ -152,52 +157,56 @@ test('#adapter.notifyInteraction calls #props.handleInteraction w/ chipId', () = const wrapper = shallow( ); - wrapper.instance().foundation.adapter_.notifyInteraction(); + getAdapter(wrapper.instance()).notifyInteraction(); td.verify(handleInteraction('123'), {times: 1}); }); test('#adapter.notifyRemoval calls #props.handleRemove w/ chipId', () => { const handleRemove = coerceForTesting<(id: string) => void>(td.func()); const wrapper = shallow(); - wrapper.instance().foundation.adapter_.notifyRemoval(); + getAdapter(wrapper.instance()).notifyRemoval(); td.verify(handleRemove('123'), {times: 1}); }); test('#adapter.notifySelection calls #props.handleSelect w/ chipId and selected false', () => { const handleSelect = coerceForTesting<(id: string, selected: boolean) => void>(td.func()); const wrapper = shallow(); - wrapper.instance().foundation.adapter_.notifySelection(false); + getAdapter(wrapper.instance()).notifySelection(false); td.verify(handleSelect('123', false), {times: 2}); }); test('#adapter.notifySelection calls #props.handleSelect w/ chipId and selected true', () => { const handleSelect = coerceForTesting<(id: string, selected: boolean) => void>(td.func()); const wrapper = shallow(); - wrapper.instance().foundation.adapter_.notifySelection(true); + getAdapter(wrapper.instance()).notifySelection(true); td.verify(handleSelect('123', true), {times: 1}); }); test('#adapter.notifyTrailingIconInteraction calls #props.handleTrailingIconInteraction w/ chipId', () => { const handleTrailingIconInteraction = coerceForTesting<(id: string) => void>(td.func()); const wrapper = shallow(); - wrapper.instance().foundation.adapter_.notifyTrailingIconInteraction(); + getAdapter(wrapper.instance()).notifyTrailingIconInteraction(); td.verify(handleTrailingIconInteraction('123'), {times: 1}); }); test('on click calls #props.onClick', () => { const onClick = coerceForTesting<(event: React.MouseEvent) => void>(td.func()); const wrapper = shallow(); - const evt = coerceForTesting({}); + const evt = coerceForTesting({ + nativeEvent: {}, + }); wrapper.simulate('click', evt); td.verify(onClick(evt), {times: 1}); }); test('on click calls #foudation.handleInteraction', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleInteraction = td.func(); - const evt = {}; + wrapper.instance().foundation.handleInteraction = td.func<(evt: MouseEvent | KeyboardEvent) => null>(); + const evt = coerceForTesting({ + nativeEvent: {}, + }); wrapper.simulate('click', evt); - td.verify(wrapper.instance().foundation.handleInteraction(evt), { + td.verify(wrapper.instance().foundation.handleInteraction(evt.nativeEvent), { times: 1, }); }); @@ -205,17 +214,21 @@ test('on click calls #foudation.handleInteraction', () => { test('on keydown calls #props.onKeyDown', () => { const onKeyDown = coerceForTesting<(event: React.KeyboardEvent) => void>(td.func()); const wrapper = shallow(); - const evt = coerceForTesting({}); + const evt = coerceForTesting({ + nativeEvent: {}, + }); wrapper.simulate('keydown', evt); td.verify(onKeyDown(evt), {times: 1}); }); test('on keydown calls #foudation.handleInteraction', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleInteraction = td.func(); - const evt = {}; + wrapper.instance().foundation.handleInteraction = td.func<(evt: MouseEvent | KeyboardEvent) => null>(); + const evt = coerceForTesting({ + nativeEvent: {}, + }); wrapper.simulate('keydown', evt); - td.verify(wrapper.instance().foundation.handleInteraction(evt), { + td.verify(wrapper.instance().foundation.handleInteraction(evt.nativeEvent), { times: 1, }); }); @@ -317,13 +330,16 @@ test('renders trailing icon with base class names', () => { test('trailing icon click calls #foundation.handleTrailingIconInteraction', () => { const trailingIcon = ; const wrapper = shallow(); - wrapper.instance().foundation.handleTrailingIconInteraction = td.func(); - const evt = {}; + wrapper.instance().foundation.handleTrailingIconInteraction = + td.func<(evt: MouseEvent | KeyboardEvent) => null>(); + const evt = coerceForTesting({ + nativeEvent: {}, + }); wrapper .children() .last() .simulate('click', evt); - td.verify(wrapper.instance().foundation.handleTrailingIconInteraction(evt), { + td.verify(wrapper.instance().foundation.handleTrailingIconInteraction(evt.nativeEvent), { times: 1, }); }); @@ -331,13 +347,16 @@ test('trailing icon click calls #foundation.handleTrailingIconInteraction', () = test('trailing icon keydown calls #foundation.handleTrailingIconInteraction', () => { const trailingIcon = ; const wrapper = shallow(); - wrapper.instance().foundation.handleTrailingIconInteraction = td.func(); - const evt = {}; + wrapper.instance().foundation.handleTrailingIconInteraction = + td.func<(evt: MouseEvent | KeyboardEvent) => null>(); + const evt = coerceForTesting({ + nativeEvent: {}, + }); wrapper .children() .last() .simulate('keydown', evt); - td.verify(wrapper.instance().foundation.handleTrailingIconInteraction(evt), { + td.verify(wrapper.instance().foundation.handleTrailingIconInteraction(evt.nativeEvent), { times: 1, }); }); @@ -345,10 +364,12 @@ test('trailing icon keydown calls #foundation.handleTrailingIconInteraction', () test('calls #foundation.handleTransitionEnd on transitionend event', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleTransitionEnd = td.func(); - const evt = {target: {}}; + wrapper.instance().foundation.handleTransitionEnd = td.func<(evt: TransitionEvent) => null>(); + const evt = coerceForTesting({ + nativeEvent: { + target: {}}}); wrapper.simulate('transitionend', evt); - td.verify(wrapper.instance().foundation.handleTransitionEnd(evt), { + td.verify(wrapper.instance().foundation.handleTransitionEnd(evt.nativeEvent), { times: 1, }); }); @@ -358,7 +379,7 @@ test('calls #props.onTransitionEnd on transitionend event', () => { const wrapper = shallow(); // need to remove foundation, since React.TransitionEvent does not have classList on EventTarget // see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239 - wrapper.instance().foundation = {handleTransitionEnd: () => {}}; + wrapper.instance().foundation = coerceForTesting({handleTransitionEnd: () => {}}); const evt = coerceForTesting({}); wrapper.simulate('transitionend', evt); td.verify(onTransitionEnd(evt), {times: 1}); @@ -394,7 +415,7 @@ test('renders label text', () => { test('#componentWillUnmount destroys foundation', () => { const wrapper = shallow(); const foundation = wrapper.instance().foundation; - foundation.destroy = td.func(); + foundation.destroy = td.func<() => void>(); wrapper.unmount(); td.verify(foundation.destroy()); }); diff --git a/test/unit/chips/ChipSet.test.tsx b/test/unit/chips/ChipSet.test.tsx index e10e24674..2409b1364 100644 --- a/test/unit/chips/ChipSet.test.tsx +++ b/test/unit/chips/ChipSet.test.tsx @@ -74,7 +74,7 @@ test('#adapter.hasClass returns false if component does not contains class', () test('#adapter.setSelected adds selectedChipId to state', () => { const getSelectedChipIds = td.func(); const handleSelect = coerceForTesting<(selectedChipIds: string[]) => void>(td.func()); - const foundation = {getSelectedChipIds}; + const foundation = coerceForTesting({getSelectedChipIds}); const wrapper = shallow(

@@ -120,22 +120,22 @@ test(
); - wrapper.state().foundation.select = td.func(); + wrapper.state().foundation!.select = td.func<(chipId: string) => null>(); const selectedChipIds = ['1']; wrapper.setState({selectedChipIds}); wrapper.instance().initChipSelection(); - td.verify(wrapper.state().foundation.select('1'), {times: 1}); + td.verify(wrapper.state().foundation!.select('1'), {times: 1}); } ); test('#handleSelect calls foundation.handleChipSelection with selectedChipId and selected=true', () => { const handleChipSelection = td.func(); - const foundation = {handleChipSelection}; const wrapper = shallow(
); + const foundation = coerceForTesting({handleChipSelection}); wrapper.setState({foundation}); wrapper.instance().handleSelect('1', true); td.verify(handleChipSelection('1', true), {times: 1}); @@ -143,7 +143,7 @@ test('#handleSelect calls foundation.handleChipSelection with selectedChipId and test('#handleSelect calls foundation.handleChipSelection with selectedChipId and selected=false', () => { const handleChipSelection = td.func(); - const foundation = {handleChipSelection}; + const foundation = coerceForTesting({handleChipSelection}); const wrapper = shallow(
@@ -211,7 +211,7 @@ test('#chip.props.handleInteraction calls both #chip.handleInteraction calls #fo test('#handleInteraction calls #foundation.handleChipInteraction', () => { const handleChipInteraction = td.func(); - const foundation = {handleChipInteraction}; + const foundation = coerceForTesting({handleChipInteraction}); const wrapper = shallow(
@@ -224,7 +224,7 @@ test('#handleInteraction calls #foundation.handleChipInteraction', () => { test('#handleRemove calls foundation.handleChipRemoval with chipId', () => { const handleChipRemoval = td.func(); - const foundation = {handleChipRemoval}; + const foundation = coerceForTesting({handleChipRemoval}); const wrapper = shallow(
@@ -447,8 +447,8 @@ test('input variant of ChipSet will throw error if chip missing id', () => { test('#componentWillUnmount destroys foundation', () => { const wrapper = shallow(); - const foundation = wrapper.state().foundation; - foundation.destroy = td.func(); + const foundation = wrapper.state().foundation!; + foundation.destroy = td.func<() => null>(); wrapper.unmount(); td.verify(foundation.destroy()); }); From aeb44aabab730f42c2d0d46f5cefed12809683d7 Mon Sep 17 00:00:00 2001 From: Lucas Cordeiro Date: Mon, 18 Mar 2019 17:46:29 -0300 Subject: [PATCH 07/16] feat(drawer): add innerRef prop (#749) --- package-lock.json | 139 +++++++++++++++++++++++++------- package.json | 4 +- packages/drawer/index.tsx | 18 ++--- packages/drawer/package.json | 2 +- test/unit/drawer/index.test.tsx | 95 ++++++++++++++-------- 5 files changed, 181 insertions(+), 77 deletions(-) diff --git a/package-lock.json b/package-lock.json index 58f8905dd..cd8664b6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -628,38 +628,115 @@ "dev": true }, "@material/drawer": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/drawer/-/drawer-0.41.0.tgz", - "integrity": "sha512-XMKrr9Ci7z69xwYsT1P/JH/BRccwB+HL9UiYzym8SAfZG/4XtP0b5qw+vYMrIZ/NeF0nOEaE8pNHq2XrUz0csA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/drawer/-/drawer-1.0.1.tgz", + "integrity": "sha512-xgpWg2MZVFWU0MX+H4MmWA0XQO0cxF1XFA0KdyV+7W0bdzpI1x8itM8Xh0suyzqyqDc+GMHG/OxP8KYUv40jeg==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/elevation": "^0.41.0", - "@material/list": "^0.41.0", - "@material/ripple": "^0.41.0", - "@material/rtl": "^0.40.1", - "@material/shape": "^0.41.0", - "@material/theme": "^0.41.0", - "@material/typography": "^0.41.0", - "focus-trap": "^3.0.0" + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/elevation": "^1.0.0", + "@material/list": "^1.0.1", + "@material/ripple": "^1.0.1", + "@material/rtl": "^0.42.0", + "@material/shape": "^1.0.0", + "@material/theme": "^1.0.0", + "@material/typography": "^1.0.0", + "focus-trap": "^4.0.2", + "tslib": "^1.9.3" }, "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/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/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/list": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/list/-/list-1.0.1.tgz", + "integrity": "sha512-u9Bx+mghPy2qCHcSH2b0+0jbjTtkXNdiWjb8JDQcYmOUTfFoeQ16GqvjTybRPwoKA0UC9Hc/4U8gYvnK+bReRw==", + "dev": true, + "requires": { + "@material/base": "^1.0.0", + "@material/dom": "^1.0.1", + "@material/feature-targeting": "^0.44.1", + "@material/ripple": "^1.0.1", + "@material/rtl": "^0.42.0", + "@material/shape": "^1.0.0", + "@material/theme": "^1.0.0", + "@material/typography": "^1.0.0", + "tslib": "^1.9.3" + } }, "@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.1", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-1.0.1.tgz", + "integrity": "sha512-aBigRoVMjIU2lLDq7TMocI2H2YFbO1hICs5FTdSRp4Yis/QFTrgaW32q8yuHdZI56j+b2BWIWapqA2xpSmCMXQ==", "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.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/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/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" } } } @@ -8017,12 +8094,12 @@ "dev": true }, "focus-trap": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-3.0.0.tgz", - "integrity": "sha512-jTFblf0tLWbleGjj2JZsAKbgtZTdL1uC48L8FcmSDl4c2vDoU4NycN1kgV5vJhuq1mxNFkw7uWZ1JAGlINWvyw==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-4.0.2.tgz", + "integrity": "sha512-HtLjfAK7Hp2qbBtLS6wEznID1mPT+48ZnP2nkHzgjpL4kroYHg0CdqJ5cTXk+UO5znAxF5fRUkhdyfgrhh8Lzw==", "dev": true, "requires": { - "tabbable": "^3.1.0", + "tabbable": "^3.1.2", "xtend": "^4.0.1" } }, @@ -16837,9 +16914,9 @@ } }, "tabbable": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.1.tgz", - "integrity": "sha512-583MHIOwictf7+zbxqO/L5fBqMN6Li4SJ1XTKQA9WzHRA7c2BB+D+Ny7Y6kGqU2u+rHK59+oRzrBvMU53aZz+A==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-3.1.2.tgz", + "integrity": "sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ==", "dev": true }, "table": { diff --git a/package.json b/package.json index a68f470e4..4c1152d64 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "@material/chips": "^1.0.0", "@material/dialog": "^0.43.0", "@material/dom": "^0.41.0", - "@material/drawer": "^0.41.0", + "@material/drawer": "^1.0.1", "@material/fab": "^0.41.0", "@material/floating-label": "^0.41.0", "@material/icon-button": "^0.41.0", @@ -147,8 +147,8 @@ "react-dom": "^16.4.2", "react-router-dom": "^4.3.1", "remap-istanbul": "^0.12.0", - "rimraf": "^2.6.3", "resemblejs": "^3.0.1", + "rimraf": "^2.6.3", "sass-loader": "^6.0.7", "testdouble": "^3.6.0", "ts-loader": "^3.5.0", diff --git a/packages/drawer/index.tsx b/packages/drawer/index.tsx index 3741ca423..6c5cad6c2 100644 --- a/packages/drawer/index.tsx +++ b/packages/drawer/index.tsx @@ -26,8 +26,7 @@ import { MDCDismissibleDrawerFoundation, MDCModalDrawerFoundation, util, -// @ts-ignore no .d.ts file -} from '@material/drawer/dist/mdc.drawer'; +} from '@material/drawer'; // @ts-ignore no .d.ts file import {MDCListFoundation} from '@material/list/dist/mdc.list'; import DrawerHeader from './Header'; @@ -62,7 +61,7 @@ const isRefObject = function(ref: DrawerProps['innerRef']): ref is React.RefObje class Drawer extends React.Component { previousFocus: HTMLElement | null = null; - foundation: MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation; + foundation?: MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation; focusTrap?: FocusTrap; drawerElement: React.RefObject = React.createRef(); @@ -113,7 +112,7 @@ class Drawer extends React.Component { if (changedToModal || changedToDismissible) { this.initFoundation(); } - if (open !== prevProps.open) { + if (open !== prevProps.open && this.foundation) { open ? this.foundation.open() : this.foundation.close(); } } @@ -124,7 +123,7 @@ class Drawer extends React.Component { } private initializeFocusTrap = () => { - this.focusTrap = util.createFocusTrapInstance(this.drawerElement.current); + this.focusTrap = util.createFocusTrapInstance(this.drawerElement.current!); }; get classes() { @@ -191,13 +190,13 @@ class Drawer extends React.Component { handleKeyDown = (evt: React.KeyboardEvent) => { this.props.onKeyDown!(evt); if (!this.foundation) return; - this.foundation.handleKeydown(evt); + this.foundation.handleKeydown(evt.nativeEvent); }; handleTransitionEnd = (evt: React.TransitionEvent) => { this.props.onTransitionEnd!(evt); if (!this.foundation) return; - this.foundation.handleTransitionEnd(evt); + this.foundation.handleTransitionEnd(evt.nativeEvent); }; attachRef = (node: HTMLElement) => { @@ -230,9 +229,9 @@ class Drawer extends React.Component { children, className, innerRef, + modal, /* eslint-enable no-unused-vars */ tag: Tag, - modal, ...otherProps } = this.props; @@ -253,11 +252,12 @@ class Drawer extends React.Component { ); } + renderScrim() { return (
this.foundation.handleScrimClick()} + onClick={() => (this.foundation as MDCModalDrawerFoundation).handleScrimClick()} /> ); } diff --git a/packages/drawer/package.json b/packages/drawer/package.json index e51545ad8..ca462a80a 100644 --- a/packages/drawer/package.json +++ b/packages/drawer/package.json @@ -17,7 +17,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/drawer": "^0.41.0", + "@material/drawer": "^1.0.1", "@material/list": "^0.41.0", "classnames": "^2.2.6", "focus-trap": "^3.0.0", diff --git a/test/unit/drawer/index.test.tsx b/test/unit/drawer/index.test.tsx index 3686f7d95..b029a673b 100644 --- a/test/unit/drawer/index.test.tsx +++ b/test/unit/drawer/index.test.tsx @@ -2,10 +2,16 @@ import * as React from 'react'; import {assert} from 'chai'; import {shallow, mount} from 'enzyme'; import * as td from 'testdouble'; +import {MDCModalDrawerFoundation, MDCDismissibleDrawerFoundation, MDCDrawerAdapter} from '@material/drawer'; import Drawer from '../../../packages/drawer/index'; import {Options, DeactivateOptions, FocusTrap} from 'focus-trap'; // eslint-disable-line no-unused-vars import {coerceForTesting} from '../helpers/types'; +function getAdapter(foundation: MDCModalDrawerFoundation | MDCDismissibleDrawerFoundation): MDCDrawerAdapter { + // @ts-ignore adapter_ property is marked as protected in mdc-web. We need to override this behaviour for testing + return foundation.adapter_; +} + suite('Drawer'); test('creates foundation if dismissible', () => { @@ -25,30 +31,30 @@ test('doesnot create foundation if standard', () => { test('when props.open updates to true, #foundation.open is called when dismissible', () => { const wrapper = shallow(); - wrapper.instance().foundation.open = td.func(); + wrapper.instance().foundation!.open = coerceForTesting<() => void>(td.func()); wrapper.setProps({open: true}); - td.verify(wrapper.instance().foundation.open(), {times: 1}); + td.verify(wrapper.instance().foundation!.open(), {times: 1}); }); test('when props.open updates to false from true, #foundation.close is called when dismissible', () => { const wrapper = shallow(); - wrapper.instance().foundation.close = td.func(); + wrapper.instance().foundation!.close = coerceForTesting<() => void>(td.func()); wrapper.setProps({open: false}); - td.verify(wrapper.instance().foundation.close(), {times: 1}); + td.verify(wrapper.instance().foundation!.close(), {times: 1}); }); test('when props.open updates to true, #foundation.open is called when modal', () => { const wrapper = shallow(); - wrapper.instance().foundation.open = td.func(); + wrapper.instance().foundation!.open = coerceForTesting<() => void>(td.func()); wrapper.setProps({open: true}); - td.verify(wrapper.instance().foundation.open(), {times: 1}); + td.verify(wrapper.instance().foundation!.open(), {times: 1}); }); test('when props.open updates to false from true, #foundation.close is called when modal', () => { const wrapper = shallow(); - wrapper.instance().foundation.close = td.func(); + wrapper.instance().foundation!.close = coerceForTesting<() => void>(td.func()); wrapper.setProps({open: false}); - td.verify(wrapper.instance().foundation.close(), {times: 1}); + td.verify(wrapper.instance().foundation!.close(), {times: 1}); }); test('when changes from permanent to modal drawer with no foundation, creates a foundation', () => { @@ -75,18 +81,18 @@ test('when the drawer changes from dismissible to modal the foundation changes ' test('when the drawer changes from dismissible to modal the original foundation calls destroy', () => { const wrapper = shallow(); - const destroy = td.func(); - wrapper.instance().foundation = {destroy}; + const foundation = wrapper.instance().foundation; + foundation!.destroy = coerceForTesting<() => void>(td.func()); wrapper.setProps({modal: true}); - td.verify(destroy(), {times: 1}); + td.verify(foundation!.destroy(), {times: 1}); }); test('#componentWillUnmount destroys foundation', () => { const wrapper = shallow(); const foundation = wrapper.instance().foundation; - foundation.destroy = td.func(); + foundation!.destroy = coerceForTesting<() => void>(td.func()); wrapper.unmount(); - td.verify(foundation.destroy(), {times: 1}); + td.verify(foundation!.destroy(), {times: 1}); }); test('has dismissible drawer class when props.dismissible is true', () => { @@ -106,21 +112,21 @@ test('has mdc drawer class', () => { test('#adapter.addClass should update state with new className', () => { const wrapper = mount(); - wrapper.instance().foundation.adapter_.addClass('test-class'); + getAdapter(wrapper.instance().foundation!).addClass('test-class'); assert.isTrue(wrapper.state().classList.has('test-class')); }); test('#adapter.removeClass should update state with new className', () => { const wrapper = mount(); wrapper.setState({classList: new Set(['test-class'])}); - wrapper.instance().foundation.adapter_.removeClass('test-class'); + getAdapter(wrapper.instance().foundation!).removeClass('test-class'); assert.isFalse(wrapper.state().classList.has('test-class')); }); test('#adapter.hasClass returns true if class is contained in classes', () => { const wrapper = mount(); wrapper.setState({classList: new Set(['test-class'])}); - assert.isTrue(wrapper.instance().foundation.adapter_.hasClass('test-class')); + assert.isTrue(getAdapter(wrapper.instance().foundation!).hasClass('test-class')); }); test('#adapter.elementHasClass should return true when element has class', () => { @@ -142,15 +148,15 @@ test('#adapter.elementHasClass should return false when element does not have cl .childAt(0) .childAt(0) .getDOMNode(); - const hasClass = wrapper - .instance() - .foundation.adapter_.elementHasClass(element, 'test-class'); + const hasClass = getAdapter( + wrapper.instance().foundation! + ).elementHasClass(element, 'test-class'); assert.isFalse(hasClass); }); test('#adapter.saveFocus updates previousFocus', () => { const wrapper = shallow(); - wrapper.instance().foundation.adapter_.saveFocus(); + getAdapter(wrapper.instance().foundation!).saveFocus(); assert.exists(wrapper.instance().previousFocus); }); test( @@ -174,7 +180,7 @@ test( .childAt(0) .getDOMNode()); drawerButtonElement.focus(); - wrapper.instance().foundation.adapter_.restoreFocus(); + getAdapter(wrapper.instance().foundation!).restoreFocus(); assert.equal(focusedElement, document.activeElement); div.remove(); focusedElement.remove(); @@ -195,7 +201,7 @@ test('#adapter.focusActiveNavigationItem focuses on first list item in drawer', , options ); - wrapper.instance().foundation.adapter_.focusActiveNavigationItem(); + getAdapter(wrapper.instance().foundation!).focusActiveNavigationItem(); assert.isTrue( document.activeElement!.classList.contains('mdc-list-item--activated') ); @@ -205,14 +211,14 @@ test('#adapter.focusActiveNavigationItem focuses on first list item in drawer', test('#adapter.notifyClose calls props.onClose', () => { const onClose = coerceForTesting<() => void>(td.func()); const wrapper = shallow(); - wrapper.instance().foundation.adapter_.notifyClose(); + getAdapter(wrapper.instance().foundation!).notifyClose(); td.verify(onClose(), {times: 1}); }); test('#adapter.notifyOpen calls props.onOpen', () => { const onOpen = coerceForTesting<() => void>(td.func()); const wrapper = shallow(); - wrapper.instance().foundation.adapter_.notifyOpen(); + getAdapter(wrapper.instance().foundation!).notifyOpen(); td.verify(onOpen(), {times: 1}); }); @@ -220,7 +226,7 @@ test('#adapter.trapFocus calls focusTrap.activate if modal variant', () => { const wrapper = shallow(); const activate = coerceForTesting<(activateOptions?: Pick) => void>(td.func()); wrapper.instance().focusTrap = coerceForTesting({activate}); - wrapper.instance().foundation.adapter_.trapFocus(); + getAdapter(wrapper.instance().foundation!).trapFocus(); td.verify(activate(), {times: 1}); }); @@ -228,7 +234,7 @@ test('#adapter.releaseFocus calls focusTrap.deactivate if modal variant', () => const wrapper = shallow(); const deactivate = coerceForTesting<(deactivateOptions?: DeactivateOptions) => void>(td.func()); wrapper.instance().focusTrap = coerceForTesting({deactivate}); - wrapper.instance().foundation.adapter_.releaseFocus(); + getAdapter(wrapper.instance().foundation!).releaseFocus(); td.verify(deactivate(), {times: 1}); }); @@ -242,10 +248,14 @@ test('event keydown triggers props.onKeyDown', () => { test('event keydown triggers foundation.handleKeydown', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleKeydown = td.func(); - const evt = coerceForTesting({}); + const foundation = wrapper.instance().foundation as MDCModalDrawerFoundation; + foundation.handleKeydown = coerceForTesting<(event: KeyboardEvent) => void>( + td.func() + ); + const nativeEvent = coerceForTesting({}); + const evt = coerceForTesting({nativeEvent}); wrapper.childAt(0).simulate('keydown', evt); - td.verify(wrapper.instance().foundation.handleKeydown(evt), {times: 1}); + td.verify(foundation.handleKeydown(nativeEvent), {times: 1}); }); test('event transitionend triggers props.onTransitionEnd', () => { @@ -258,10 +268,12 @@ test('event transitionend triggers props.onTransitionEnd', () => { test('event transitionend triggers foundation.handleTransitionEnd', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleTransitionEnd = td.func(); - const evt = coerceForTesting({}); + const foundation = wrapper.instance().foundation as MDCModalDrawerFoundation; + foundation.handleTransitionEnd = coerceForTesting<() => void>(td.func()); + const nativeEvent = coerceForTesting({}); + const evt = coerceForTesting({nativeEvent}); wrapper.childAt(0).simulate('transitionend', evt); - td.verify(wrapper.instance().foundation.handleTransitionEnd(evt), { + td.verify(foundation.handleTransitionEnd(nativeEvent), { times: 1, }); }); @@ -278,10 +290,25 @@ test('renders scrim when props.modal is true', () => { test('click on scrim calls #foundation.handleScrimClick', () => { const wrapper = shallow(); - wrapper.instance().foundation.handleScrimClick = td.func(); + const foundation = wrapper.instance().foundation as MDCModalDrawerFoundation; + foundation.handleScrimClick = coerceForTesting<() => void>(td.func()); const scrim = wrapper.childAt(1); scrim.simulate('click'); - td.verify(wrapper.instance().foundation.handleScrimClick(), {times: 1}); + td.verify(foundation.handleScrimClick(), {times: 1}); +}); + +test('handles object refs correctly', () => { + const myRef = React.createRef(); + const wrapper = mount(); + assert.isNotNull(myRef.current); + assert.isNotNull(wrapper.instance().drawerElement.current); +}); + +test('it handles function refs correctly', () => { + const refFn = coerceForTesting<(node: HTMLElement) => void>(td.func()); + const wrapper = mount(); + assert.isNotNull(wrapper.instance().drawerElement.current); + td.verify(refFn(wrapper.instance().drawerElement.current!), {times: 1}); }); test('handles object refs correctly', () => { From b41bb5381c003bf25bb0580b6f1be748cfc2541b Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Mon, 18 Mar 2019 23:27:39 +0200 Subject: [PATCH 08/16] fix(tab): mdc-web v1.0.0 upgrade (#748) --- package-lock.json | 119 +++++++++++++++++++++++++++-------- package.json | 2 +- packages/tab-bar/index.tsx | 13 +++- packages/tab/README.md | 1 + packages/tab/index.tsx | 32 ++++++---- packages/tab/package.json | 2 +- test/unit/tab/index.test.tsx | 17 ++--- 7 files changed, 135 insertions(+), 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index cd8664b6e..c538721a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1309,45 +1309,74 @@ } }, "@material/tab": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/tab/-/tab-0.41.0.tgz", - "integrity": "sha512-yM6eYD8Kgrk2cHa+zN3GYIK4Mt6EsSxDIpaArE6JopqRpalULjiOk83hWVPR1V95xphnzYAWM1YF6I6JexE9kw==", + "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": "^0.41.0", - "@material/ripple": "^0.41.0", - "@material/rtl": "^0.40.1", - "@material/tab-indicator": "^0.41.0", - "@material/theme": "^0.41.0", - "@material/typography": "^0.41.0" + "@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" }, "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/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": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", - "integrity": "sha512-rxEUVWM4AByDlTCH0kkthZQmUuY6eeN0X6cOHBoioFN2vUDk0D0Nfzz/N9FF2AlAf8C2lDDLrTuqnJPVIn+NHA==", + "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": "^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.1", + "@material/feature-targeting": "^0.44.1", + "@material/theme": "^1.0.0", + "tslib": "^1.9.3" } }, - "@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==", + "@material/rtl": { + "version": "0.42.0", + "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-0.42.0.tgz", + "integrity": "sha512-VrnrKJzhmspsN8WXHuxxBZ69yM5IwhCUqWr1t1eNfw3ZEvEj7i1g3P31HGowKThIN1dc1Wh4LE14rCISWCtv5w==", + "dev": true + }, + "@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/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/theme": "^0.41.0" + "@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" } } } @@ -1370,6 +1399,42 @@ "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": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/tab/-/tab-0.41.0.tgz", + "integrity": "sha512-yM6eYD8Kgrk2cHa+zN3GYIK4Mt6EsSxDIpaArE6JopqRpalULjiOk83hWVPR1V95xphnzYAWM1YF6I6JexE9kw==", + "dev": true, + "requires": { + "@material/base": "^0.41.0", + "@material/ripple": "^0.41.0", + "@material/rtl": "^0.40.1", + "@material/tab-indicator": "^0.41.0", + "@material/theme": "^0.41.0", + "@material/typography": "^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-scroller": { "version": "0.41.0", "resolved": "https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.41.0.tgz", diff --git a/package.json b/package.json index 4c1152d64..6e38fa887 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "@material/select": "^0.40.1", "@material/snackbar": "^0.43.0", "@material/switch": "^0.41.0", - "@material/tab": "^0.41.0", + "@material/tab": "^1.0.0", "@material/tab-bar": "^0.41.0", "@material/tab-indicator": "^1.0.0", "@material/tab-scroller": "^1.0.0", diff --git a/packages/tab-bar/index.tsx b/packages/tab-bar/index.tsx index c2d5d58a1..fa95ec124 100644 --- a/packages/tab-bar/index.tsx +++ b/packages/tab-bar/index.tsx @@ -47,7 +47,18 @@ class TabBar extends React.Component< this.foundation.init(); const {activeIndex, indexInView} = this.props; if (this.tabList[activeIndex]) { - this.tabList[activeIndex].activate({} /* previousIndicatorClientRect */); + // new DOMRect is not IE11 compatible + const defaultDOMRect = { + bottom: 0, + height: 0, + left: 0, + right: 0, + top: 0, + width: 0, + x: 0, + y: 0, + }; + this.tabList[activeIndex].activate(defaultDOMRect /* previousIndicatorClientRect */); } this.foundation.scrollIntoView(indexInView); } diff --git a/packages/tab/README.md b/packages/tab/README.md index c0a65e7e5..bd476348d 100644 --- a/packages/tab/README.md +++ b/packages/tab/README.md @@ -86,6 +86,7 @@ minWidth | boolean | If true will display the `` as narrow as possible. isMinWidthIndicator | boolean | If true will display the `` to the size of the longest content element. isIconIndicator | boolean | If true will display the indicator content in the center of the tab. previousIndicatorClientRect | ClientRect | The indicator's clientRect that was previously activated. +onInteraction | Function | The function is called if the tab receives any interaction stacked | boolean | If true will display the tab icon and label to flow vertically instead of horizontally. onTransitionEnd | function | transitionend event callback handler. diff --git a/packages/tab/index.tsx b/packages/tab/index.tsx index f9c9104db..76e9ab96d 100644 --- a/packages/tab/index.tsx +++ b/packages/tab/index.tsx @@ -24,8 +24,8 @@ import * as React from 'react'; import classnames from 'classnames'; import TabIndicator from '@material/react-tab-indicator'; -// @ts-ignore No mdc .d.ts files -import {MDCTabFoundation} from '@material/tab/dist/mdc.tab'; +import {MDCTabFoundation} from '@material/tab/foundation'; +import {MDCTabAdapter} from '@material/tab/adapter'; import TabRipple, {TabRippleProps} from './TabRipple'; @@ -38,10 +38,11 @@ export interface TabProps extends React.HTMLProps { isMinWidthIndicator?: boolean; stacked?: boolean; previousIndicatorClientRect?: ClientRect; + onInteraction?: () => void; } interface MDCTabElementAttributes { - 'aria-selected': boolean; + 'aria-selected'?: 'false' | 'true'; tabIndex?: number; } @@ -52,7 +53,7 @@ interface TabState extends MDCTabElementAttributes { } export default class Tab extends React.Component { - foundation?: MDCTabFoundation; + foundation!: MDCTabFoundation; tabRef: React.RefObject = React.createRef(); tabContentRef: React.RefObject = React.createRef(); tabIndicatorRef: React.RefObject = React.createRef(); @@ -67,11 +68,12 @@ export default class Tab extends React.Component { minWidth: false, isMinWidthIndicator: false, stacked: false, + onInteraction: () => null, }; state: TabState = { 'classList': new Set(), - 'aria-selected': false, + 'aria-selected': 'false', 'activateIndicator': false, 'previousIndicatorClientRect': this.props.previousIndicatorClientRect, 'tabIndex': -1, @@ -81,7 +83,7 @@ export default class Tab extends React.Component { const {active, focusOnActivate} = this.props; this.foundation = new MDCTabFoundation(this.adapter); this.foundation.init(); - this.foundation.setFocusOnActivate(focusOnActivate); + this.foundation.setFocusOnActivate(focusOnActivate!); if (active) { this.foundation.activate(); } @@ -94,7 +96,7 @@ export default class Tab extends React.Component { componentDidUpdate(prevProps: TabProps) { const {active, focusOnActivate, previousIndicatorClientRect} = this.props; if (focusOnActivate !== prevProps.focusOnActivate) { - this.foundation.setFocusOnActivate(focusOnActivate); + this.foundation.setFocusOnActivate(focusOnActivate!); } if (active !== prevProps.active) { if (active) { @@ -115,7 +117,7 @@ export default class Tab extends React.Component { }); } - get adapter() { + get adapter(): MDCTabAdapter { return { addClass: (className: string) => { const classList = new Set(this.state.classList); @@ -136,12 +138,15 @@ export default class Tab extends React.Component { getOffsetWidth: () => Number(this.tabRef.current && this.tabRef.current.offsetWidth), getContentOffsetLeft: () => - this.tabContentRef.current && - this.tabContentRef.current.offsetLeft, + this.tabContentRef.current ? + this.tabContentRef.current.offsetLeft : + 0, getContentOffsetWidth: () => - this.tabContentRef.current && - this.tabContentRef.current.offsetWidth, + this.tabContentRef.current ? + this.tabContentRef.current.offsetWidth : + 0, focus: () => this.tabRef.current && this.tabRef.current.focus(), + notifyInteracted: this.props.onInteraction!, activateIndicator: (previousIndicatorClientRect: ClientRect) => this.setState({ activateIndicator: true, @@ -151,7 +156,7 @@ export default class Tab extends React.Component { }; } - activate(computeIndicatorClientRect?: ClientRect | {}) { + activate(computeIndicatorClientRect?: ClientRect) { this.foundation.activate(computeIndicatorClientRect); } @@ -190,6 +195,7 @@ export default class Tab extends React.Component { isFadingIndicator, indicatorContent, minWidth, + onInteraction, stacked, /* eslint-enable */ children, diff --git a/packages/tab/package.json b/packages/tab/package.json index ef3e59d22..42893e69c 100644 --- a/packages/tab/package.json +++ b/packages/tab/package.json @@ -19,7 +19,7 @@ "dependencies": { "@material/react-ripple": "^0.11.0", "@material/react-tab-indicator": "^0.11.0", - "@material/tab": "^0.41.0", + "@material/tab": "^1.0.0", "classnames": "^2.2.6", "react": "^16.3.2" }, diff --git a/test/unit/tab/index.test.tsx b/test/unit/tab/index.test.tsx index 5b2ff48b6..0493bdd18 100644 --- a/test/unit/tab/index.test.tsx +++ b/test/unit/tab/index.test.tsx @@ -4,6 +4,7 @@ import * as td from 'testdouble'; import {mount, shallow} from 'enzyme'; import Tab from '../../../packages/tab/index'; import TabIndicatorRef from '../../../packages/tab-indicator/index'; +import {MDCTabDimensions} from '@material/tab/types'; import {coerceForTesting} from '../helpers/types'; suite('Tab'); @@ -67,14 +68,14 @@ test('if props.active updates to false, foundation.deactivate is called', () => test('calls foundation.setFocusOnActivate when props.focusOnActivate changes from false to true', () => { const wrapper = shallow(); - wrapper.instance().foundation.setFocusOnActivate = td.func(); + wrapper.instance().foundation.setFocusOnActivate = td.func<(focusOnActivate: boolean) => null>(); wrapper.setProps({focusOnActivate: true}); td.verify(wrapper.instance().foundation.setFocusOnActivate(true), {times: 1}); }); test('calls foundation.setFocusOnActivate when props.focusOnActivate changes from true to false', () => { const wrapper = shallow(); - wrapper.instance().foundation.setFocusOnActivate = td.func(); + wrapper.instance().foundation.setFocusOnActivate = td.func<(focusOnActivate: boolean) => null>(); wrapper.setProps({focusOnActivate: false}); td.verify(wrapper.instance().foundation.setFocusOnActivate(false), {times: 1}); }); @@ -149,8 +150,8 @@ test('#adapter.setAttr sets tabIndex on state', () => { test('#adapter.setAttr sets aria-selected on state', () => { const wrapper = shallow(); - wrapper.instance().adapter.setAttr('aria-selected', true); - assert.isTrue(wrapper.state()['aria-selected']); + wrapper.instance().adapter.setAttr('aria-selected', 'true'); + assert.equal(wrapper.state()['aria-selected'], 'true'); }); test('#adapter.getOffsetLeft returns tabRef.offsetLeft', () => { @@ -199,14 +200,14 @@ test('#adapter.deactivateIndicator sets state.activateIndicator', () => { test('#activate calls foundation.activate', () => { const clientRect = {test: 1} as unknown as ClientRect; ; const wrapper = shallow(); - wrapper.instance().foundation.activate = td.func(); + wrapper.instance().foundation.activate = td.func<(previousIndicatorClientRect?: ClientRect) => null>(); wrapper.instance().activate(clientRect); td.verify(wrapper.instance().foundation.activate(clientRect), {times: 1}); }); test('#deactivate calls foundation.deactivate', () => { const wrapper = shallow(); - wrapper.instance().foundation.deactivate = td.func(); + wrapper.instance().foundation.deactivate = td.func<() => null>(); wrapper.instance().deactivate(); td.verify(wrapper.instance().foundation.deactivate(), {times: 1}); }); @@ -220,7 +221,7 @@ test('#computeIndicatorClientRect returns the tabIndicatorRef clientRect', () => test('#computeDimensions calls foundation.computeDimensions', () => { const wrapper = shallow(); - wrapper.instance().foundation.computeDimensions = td.func(); + wrapper.instance().foundation.computeDimensions = td.func<() => MDCTabDimensions>(); wrapper.instance().computeDimensions(); td.verify(wrapper.instance().foundation.computeDimensions(), {times: 1}); }); @@ -362,7 +363,7 @@ test('props.isMinWidthIndicator renders indicator within the content element', ( test('#componentWillUnmount destroys foundation', () => { const wrapper = shallow(); const foundation = wrapper.instance().foundation; - foundation.destroy = td.func(); + foundation.destroy = td.func<() => null>(); wrapper.unmount(); td.verify(foundation.destroy(), {times: 1}); }); From 4e8338a1278982046b171c21b641f2f2b40d3759 Mon Sep 17 00:00:00 2001 From: Andrii Kostenko Date: Mon, 18 Mar 2019 23:38:34 +0200 Subject: [PATCH 09/16] feat(snackbar): MDC Web v1.0.0 (#755) --- package-lock.json | 134 +++++++++++++++++++++--------- package.json | 3 +- packages/snackbar/index.tsx | 11 +-- packages/snackbar/package.json | 2 +- packages/snackbar/types.tsx | 49 ----------- test/unit/snackbar/index.test.tsx | 14 +++- 6 files changed, 110 insertions(+), 103 deletions(-) delete mode 100644 packages/snackbar/types.tsx diff --git a/package-lock.json b/package-lock.json index c538721a4..32ae7f2f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1203,49 +1203,92 @@ "dev": true }, "@material/snackbar": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-0.43.0.tgz", - "integrity": "sha512-jmyQSDRLHeZWitrQJM26gySxBeY47zuAyouVsdm0HioYiElQWsn2LJLvl74kLwYByHtK+sFNkcJkKUh+Xm36OQ==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-1.0.1.tgz", + "integrity": "sha512-Gts1N3DA7uEac7JZ1kNwTN+ljgrMDzVGgLAwgcPFSssndW08GSkmZSAko8Lk0Zb4hDY90WtI4jPwuzekixIrWw==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/button": "^0.43.0", - "@material/dom": "^0.41.0", - "@material/icon-button": "^0.43.0", - "@material/ripple": "^0.43.0", + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/button": "^1.0.1", + "@material/dom": "^1.0.1", + "@material/icon-button": "^1.0.1", + "@material/ripple": "^1.0.1", "@material/rtl": "^0.42.0", - "@material/shape": "^0.43.0", - "@material/theme": "^0.43.0", - "@material/typography": "^0.43.0" + "@material/shape": "^1.0.0", + "@material/theme": "^1.0.0", + "@material/typography": "^1.0.0", + "tslib": "^1.9.3" }, "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/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/button": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/button/-/button-1.0.1.tgz", + "integrity": "sha512-gMGuAlG9ETKH14Up4RAH87Z+51NkU725C4H7J0AnICzG75Rto8PtpMqNu5+w/c1cQM1Hudc8JfsflneMEZ10oA==", + "dev": true, + "requires": { + "@material/elevation": "^1.0.0", + "@material/feature-targeting": "^0.44.1", + "@material/ripple": "^1.0.1", + "@material/rtl": "^0.42.0", + "@material/shape": "^1.0.0", + "@material/theme": "^1.0.0", + "@material/typography": "^1.0.0" + } + }, + "@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/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/icon-button": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-0.43.0.tgz", - "integrity": "sha512-muldr6pmX2peY9ECYxcZfnmDWLqinT+HRVuND2ltCKUqgLBGi4DETQQE0PEOzsChePJothbyqeQorXgcBP8EgQ==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-1.0.1.tgz", + "integrity": "sha512-a2jnwYMTDwPVsOIc4+osZIbXwQM7ujy1grQtjvvS0CVogsOdLXYzqUYrI8V9aHxdAdndos3ssm3JAziQhbsuEQ==", "dev": true, "requires": { - "@material/base": "^0.41.0", - "@material/ripple": "^0.43.0", - "@material/theme": "^0.43.0" + "@material/base": "^1.0.0", + "@material/ripple": "^1.0.1", + "@material/theme": "^1.0.0", + "tslib": "^1.9.3" } }, "@material/ripple": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.43.0.tgz", - "integrity": "sha512-5X5xJtE1tM5QYrsvIe5coZNk7nt++vi40CDBVxS2abO+83ky91I5mH/djcm0vcSFmkHM/QOymEQBR3XDjA3XXQ==", + "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": "^0.41.0", - "@material/base": "^0.41.0", - "@material/theme": "^0.43.0" + "@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": { @@ -1255,22 +1298,31 @@ "dev": true }, "@material/shape": { - "version": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/shape/-/shape-0.43.0.tgz", - "integrity": "sha512-KGnoQV4G2OQbMe5Lr5Xbk8XNlO93Qi/juxXtd2wrAfiaPmktD8ug0CwdVDOPBOmj9a0gX3Ofi9XWcoU+tLEVjg==", - "dev": true + "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": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/theme/-/theme-0.43.0.tgz", - "integrity": "sha512-/zndZL6EihI18v2mYd4O8xvOBAAXmLeHyHVK28LozSAaJ9okQgD25wq5Ktk95oMTmPIC+rH66KcK6371ivNk8g==", - "dev": true + "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": "0.43.0", - "resolved": "https://registry.npmjs.org/@material/typography/-/typography-0.43.0.tgz", - "integrity": "sha512-WSg8vDoC2rnmOWbhNdDmSoT1jV0QQSw7CFps1DFbnIe57UaUxgWuGdhc+9XlEPctXUFto4FU4DfnRcdW4ydAig==", - "dev": true + "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" + } } } }, diff --git a/package.json b/package.json index 6e38fa887..e474420fb 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "radio", "ripple", "select", + "snackbar", "top-app-bar", "switch", "tab", @@ -80,7 +81,7 @@ "@material/radio": "^0.41.0", "@material/ripple": "^1.0.0", "@material/select": "^0.40.1", - "@material/snackbar": "^0.43.0", + "@material/snackbar": "^1.0.0", "@material/switch": "^0.41.0", "@material/tab": "^1.0.0", "@material/tab-bar": "^0.41.0", diff --git a/packages/snackbar/index.tsx b/packages/snackbar/index.tsx index 14dccb597..af35732d1 100644 --- a/packages/snackbar/index.tsx +++ b/packages/snackbar/index.tsx @@ -23,11 +23,8 @@ import * as React from 'react'; import classnames from 'classnames'; -// TODO: replace with MDC Web types when available -import {IMDCSnackbarAdapter, IMDCSnackbarFoundation} from './types'; - -// @ts-ignore no .d.ts file -import {MDCSnackbarFoundation} from '@material/snackbar'; +import {MDCSnackbarFoundation} from '@material/snackbar/foundation'; +import {MDCSnackbarAdapter} from '@material/snackbar/adapter'; export interface Props { message: string; @@ -51,7 +48,7 @@ type State = { }; export class Snackbar extends React.Component { - foundation: IMDCSnackbarFoundation + foundation: MDCSnackbarFoundation static defaultProps: Partial = { open: true, @@ -84,7 +81,7 @@ export class Snackbar extends React.Component { this.foundation.setCloseOnEscape(closeOnEscape); } } - get adapter(): IMDCSnackbarAdapter { + get adapter(): MDCSnackbarAdapter { return { addClass: (className: string) => { const {classes} = this.state; diff --git a/packages/snackbar/package.json b/packages/snackbar/package.json index 55760ca77..ecb5722cd 100644 --- a/packages/snackbar/package.json +++ b/packages/snackbar/package.json @@ -17,7 +17,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/snackbar": "^0.43.0", + "@material/snackbar": "^1.0.0", "classnames": "^2.2.6", "react": "^16.4.2" }, diff --git a/packages/snackbar/types.tsx b/packages/snackbar/types.tsx deleted file mode 100644 index 31964ea71..000000000 --- a/packages/snackbar/types.tsx +++ /dev/null @@ -1,49 +0,0 @@ -// The MIT License -// -// Copyright (c) 2019 Google, Inc. -// -// Permission is hereby granted, free of charge, to any person obtaining a copy -// of this software and associated documentation files (the "Software"), to deal -// in the Software without restriction, including without limitation the rights -// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -// copies of the Software, and to permit persons to whom the Software is -// furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in -// all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -// THE SOFTWARE. - -// TODO: remove this when MDC Web types are added. - -export interface IMDCSnackbarAdapter { - addClass(className: string): void - removeClass(className: string): void - announce(): void - notifyOpening(): void - notifyOpened(): void - notifyClosing(reason: string): void - notifyClosed(reason: string): void -} - -export interface IMDCSnackbarFoundation { - open(): void; - close(action: string): void; - isOpen(): boolean - getTimeoutMs(): number - setTimeoutMs(timeoutMs: number): void - getCloseOnEscape(): boolean - setCloseOnEscape(closeOnEscape: boolean): void - handleKeyDown(event: KeyboardEvent): void - handleActionButtonClick(event: MouseEvent): void - handleActionIconClick(event: MouseEvent): void - init(): void - destroy(): void - adapter_: IMDCSnackbarAdapter -} diff --git a/test/unit/snackbar/index.test.tsx b/test/unit/snackbar/index.test.tsx index 09e3de349..884e0ed2c 100644 --- a/test/unit/snackbar/index.test.tsx +++ b/test/unit/snackbar/index.test.tsx @@ -3,6 +3,12 @@ import * as td from 'testdouble'; import {assert} from 'chai'; import {shallow} from 'enzyme'; import {Snackbar} from '../../../packages/snackbar/index'; +import {MDCSnackbarAdapter} from '@material/snackbar/adapter'; + +function getAdapter(instance: Snackbar): MDCSnackbarAdapter { + // @ts-ignore adapter_ is a protected property, we need to override it + return instance.foundation.adapter_; +} suite('Snackbar'); @@ -71,7 +77,7 @@ test('opening notification works', () => { const openingHandler = td.func<() => void>(); const wrapper = shallow( ); - wrapper.instance().foundation.adapter_.notifyOpening(); + getAdapter(wrapper.instance()).notifyOpening(); td.verify(openingHandler(), {times: 1}); wrapper.unmount(); }); @@ -80,7 +86,7 @@ test('open notification works', () => { const openHandler = td.func<() => void>(); const wrapper = shallow( ); - wrapper.instance().foundation.adapter_.notifyOpened(); + getAdapter(wrapper.instance()).notifyOpened(); td.verify(openHandler(), {times: 1}); wrapper.unmount(); }); @@ -89,7 +95,7 @@ test('closing notification works', () => { const closingHandler = td.func<(reason: string) => void>(); const wrapper = shallow( ); - wrapper.instance().foundation.adapter_.notifyClosing('unit_test'); + getAdapter(wrapper.instance()).notifyClosing('unit_test'); td.verify(closingHandler('unit_test'), {times: 1}); wrapper.unmount(); }); @@ -98,7 +104,7 @@ test('close notification works', () => { const closeHandler = td.func<(reason: string) => void>(); const wrapper = shallow( ); - wrapper.instance().foundation.adapter_.notifyClosed('unit_test'); + getAdapter(wrapper.instance()).notifyClosed('unit_test'); td.verify(closeHandler('unit_test'), {times: 1}); wrapper.unmount(); }); From 293e39f9cc80debbd08ff8738c8cfe4db83a06f1 Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Tue, 19 Mar 2019 12:36:06 -0700 Subject: [PATCH 10/16] feat(floating-label): update mdc web to v1.0.0 (#741) --- package.json | 2 +- packages/floating-label/index.tsx | 38 +++++++++++++++---------- packages/floating-label/package.json | 2 +- test/unit/floating-label/index.test.tsx | 22 ++++++++------ 4 files changed, 39 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index e474420fb..eea626b97 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "@material/dom": "^0.41.0", "@material/drawer": "^1.0.1", "@material/fab": "^0.41.0", - "@material/floating-label": "^0.41.0", + "@material/floating-label": "^1.0.0", "@material/icon-button": "^0.41.0", "@material/layout-grid": "^0.41.0", "@material/line-ripple": "^1.0.0", diff --git a/packages/floating-label/index.tsx b/packages/floating-label/index.tsx index 645abacc0..923d45194 100644 --- a/packages/floating-label/index.tsx +++ b/packages/floating-label/index.tsx @@ -22,8 +22,8 @@ import * as React from 'react'; import classnames from 'classnames'; -// @ts-ignore no mdc .d.ts -import {MDCFloatingLabelFoundation} from '@material/floating-label/dist/mdc.floatingLabel'; +import {MDCFloatingLabelFoundation} from '@material/floating-label/foundation'; +import {MDCFloatingLabelAdapter} from '@material/floating-label/adapter'; export interface FloatingLabelProps extends React.LabelHTMLAttributes { className?: string; @@ -39,8 +39,8 @@ export default class FloatingLabel extends React.Component< FloatingLabelProps, FloatingLabelState > { - foundation_?: MDCFloatingLabelFoundation; - labelElement_: React.RefObject = React.createRef(); + foundation!: MDCFloatingLabelFoundation; + labelElement: React.RefObject = React.createRef(); static defaultProps: Partial = { className: '', @@ -55,12 +55,12 @@ export default class FloatingLabel extends React.Component< this.initializeFoundation(); this.handleWidthChange(); if (this.props.float) { - this.foundation_.float(true); + this.foundation.float(true); } } componentWillUnmount() { - this.foundation_.destroy(); + this.foundation.destroy(); } componentDidUpdate(prevProps: FloatingLabelProps) { @@ -68,13 +68,13 @@ export default class FloatingLabel extends React.Component< this.handleWidthChange(); } if (this.props.float !== prevProps.float) { - this.foundation_.float(this.props.float); + this.foundation.float(this.props.float!); } } initializeFoundation = () => { - this.foundation_ = new MDCFloatingLabelFoundation(this.adapter); - this.foundation_.init(); + this.foundation = new MDCFloatingLabelFoundation(this.adapter); + this.foundation.init(); }; get classes() { @@ -83,17 +83,26 @@ export default class FloatingLabel extends React.Component< return classnames('mdc-floating-label', Array.from(classList), className); } - get adapter() { + get adapter(): MDCFloatingLabelAdapter { return { addClass: (className: string) => this.setState({classList: this.state.classList.add(className)}), removeClass: this.removeClassFromClassList, + // the adapter methods below are effectively useless since React + // handles events and width differently + registerInteractionHandler: () => undefined, + deregisterInteractionHandler: () => undefined, + // Always returns 0 beacuse MDC Web component does + // only proxies to foundation.getWidth. + // MDC React instead passes it from the text-field + // component to floating-label component. + getWidth: () => 0, }; } // must be called via ref shake = () => { - this.foundation_.shake(true); + this.foundation.shake(true); }; removeClassFromClassList = (className: string) => { @@ -103,9 +112,8 @@ export default class FloatingLabel extends React.Component< }; handleWidthChange = () => { - const {handleWidthChange} = this.props; - if (handleWidthChange && this.labelElement_.current) { - handleWidthChange(this.labelElement_.current.offsetWidth); + if (this.props.handleWidthChange && this.labelElement.current) { + this.props.handleWidthChange(this.labelElement.current.offsetWidth); } }; @@ -126,7 +134,7 @@ export default class FloatingLabel extends React.Component< return (