react-spinners - npm Package Compare versions

Comparing version 0.13.8 to 0.14.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Change Log
 
+## 0.14.0
+
+- feat: color prop can accept rgb colors [#586](https://github.com/davidhu2000/react-spinners/pull/586)
+- fix: multiple hash loader with different color renders as the same color [#602](https://github.com/davidhu2000/react-spinners/pull/602)
+- fix: moon loader wobble if size is not divisible by 7 [#603](https://github.com/davidhu2000/react-spinners/pull/603)
+
 ## 0.13.8
@@ -7,0 +13,0 @@

cjs/helpers/animation.js

@@ -5,3 +5,3 @@ "use strict";
 var createAnimation = function (loaderName, frames, suffix) {
-    var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix);
+    var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix, "-").concat(animationSuffix(10));
     if (typeof window == "undefined" || !window.document) {
@@ -20,1 +20,12 @@ return animationName;
 exports.createAnimation = createAnimation;
+function animationSuffix(length) {
+    var result = "";
+    var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    var charactersLength = characters.length;
+    var counter = 0;
+    while (counter < length) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+        counter += 1;
+    }
+    return result;
+}

cjs/helpers/animation.server.test.js

@@ -10,4 +10,4 @@ "use strict";
         var name = (0, animation_1.createAnimation)("TestLoader", "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}", "my-suffix");
-        expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+        expect(name).toMatch(/^react-spinners-TestLoader-my-suffix/);
     });
 });

cjs/helpers/animation.test.js

@@ -7,4 +7,4 @@ "use strict";
         var name = (0, animation_1.createAnimation)("TestLoader", "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}", "my-suffix");
-        expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+        expect(name).toMatch(/^react-spinners-TestLoader-my-suffix/);
     });
 });

cjs/helpers/colors.js

@@ -24,3 +24,24 @@ "use strict";
 })(BasicColors || (BasicColors = {}));
+var handleRgbColorString = function (color, opacity) {
+    // rgb(a)(255 255 255 / 80%)
+    if (color.includes("/")) {
+        return color.replace("rgb(", "rgba(");
+    }
+    var rgbValues = color.substring(color.startsWith("rgba(") ? 5 : 4, color.length - 1).trim();
+    var splittedByCommas = rgbValues.split(",");
+    // rgb(a)(255, 255, 255, 0.8)
+    if (splittedByCommas.length === 4) {
+        return color.replace("rgb(", "rgba(");
+    }
+    // rgb(a)(255, 255, 255)
+    if (splittedByCommas.length === 3) {
+        return "rgba(".concat(rgbValues, ", ").concat(opacity, ")");
+    }
+    // rgb(a)(255 255 255)
+    return "rgba(".concat(rgbValues, " / ").concat(opacity, ")");
+};
 var calculateRgba = function (color, opacity) {
+    if (color.startsWith("rgb")) {
+        return handleRgbColorString(color, opacity);
+    }
     if (Object.keys(BasicColors).includes(color)) {
@@ -27,0 +48,0 @@ color = BasicColors[color];

cjs/helpers/colors.test.js

@@ -8,2 +8,18 @@ "use strict";
     });
+    it("returns the same passed in rgb value with custom opacity in old syntax", function () {
+        expect((0, colors_1.calculateRgba)("rgb(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+        expect((0, colors_1.calculateRgba)("rgba(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+    });
+    it("returns the same passed in rgb value with custom opacity in new syntax", function () {
+        expect((0, colors_1.calculateRgba)("rgb(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+        expect((0, colors_1.calculateRgba)("rgba(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+    });
+    it("adds passed in opacity to the rgb values in old syntax", function () {
+        expect((0, colors_1.calculateRgba)("rgb(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+        expect((0, colors_1.calculateRgba)("rgba(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+    });
+    it("adds passed in opacity to the rgb values in new syntax", function () {
+        expect((0, colors_1.calculateRgba)("rgb(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+        expect((0, colors_1.calculateRgba)("rgba(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+    });
     it("converts hash values to rgb", function () {
@@ -10,0 +26,0 @@ expect((0, colors_1.calculateRgba)("#ffffff", 1)).toEqual("rgba(255, 255, 255, 1)");

cjs/MoonLoader.js

@@ -55,3 +55,3 @@ "use strict";
     var _g = (0, unitConverter_1.parseLengthAndUnit)(size), value = _g.value, unit = _g.unit;
-    var moonSize = value / 7;
+    var moonSize = Math.round(value / 7);
     var wrapper = __assign({ display: "inherit", position: "relative", width: "".concat("".concat(value + moonSize * 2).concat(unit)), height: "".concat("".concat(value + moonSize * 2).concat(unit)), animation: "".concat(moon, " ").concat(0.6 / speedMultiplier, "s 0s infinite linear"), animationFillMode: "forwards" }, cssOverride);
@@ -58,0 +58,0 @@ var ballStyle = function (size) {

esm/helpers/animation.js

 export var createAnimation = function (loaderName, frames, suffix) {
-    var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix);
+    var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix, "-").concat(animationSuffix(10));
     if (typeof window == "undefined" || !window.document) {
@@ -15,1 +15,12 @@ return animationName;
 };
+function animationSuffix(length) {
+    var result = "";
+    var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    var charactersLength = characters.length;
+    var counter = 0;
+    while (counter < length) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+        counter += 1;
+    }
+    return result;
+}

esm/helpers/animation.server.test.js

@@ -8,4 +8,4 @@ /**
         var name = createAnimation("TestLoader", "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}", "my-suffix");
-        expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+        expect(name).toMatch(/^react-spinners-TestLoader-my-suffix/);
     });
 });

esm/helpers/animation.test.js

@@ -5,4 +5,4 @@ import { createAnimation } from "./animation";
         var name = createAnimation("TestLoader", "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}", "my-suffix");
-        expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+        expect(name).toMatch(/^react-spinners-TestLoader-my-suffix/);
     });
 });

esm/helpers/colors.js

@@ -21,3 +21,24 @@ var BasicColors;
 })(BasicColors || (BasicColors = {}));
+var handleRgbColorString = function (color, opacity) {
+    // rgb(a)(255 255 255 / 80%)
+    if (color.includes("/")) {
+        return color.replace("rgb(", "rgba(");
+    }
+    var rgbValues = color.substring(color.startsWith("rgba(") ? 5 : 4, color.length - 1).trim();
+    var splittedByCommas = rgbValues.split(",");
+    // rgb(a)(255, 255, 255, 0.8)
+    if (splittedByCommas.length === 4) {
+        return color.replace("rgb(", "rgba(");
+    }
+    // rgb(a)(255, 255, 255)
+    if (splittedByCommas.length === 3) {
+        return "rgba(".concat(rgbValues, ", ").concat(opacity, ")");
+    }
+    // rgb(a)(255 255 255)
+    return "rgba(".concat(rgbValues, " / ").concat(opacity, ")");
+};
 export var calculateRgba = function (color, opacity) {
+    if (color.startsWith("rgb")) {
+        return handleRgbColorString(color, opacity);
+    }
     if (Object.keys(BasicColors).includes(color)) {
@@ -24,0 +45,0 @@ color = BasicColors[color];

esm/helpers/colors.test.js

@@ -6,2 +6,18 @@ import { calculateRgba } from "./colors";
     });
+    it("returns the same passed in rgb value with custom opacity in old syntax", function () {
+        expect(calculateRgba("rgb(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+        expect(calculateRgba("rgba(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+    });
+    it("returns the same passed in rgb value with custom opacity in new syntax", function () {
+        expect(calculateRgba("rgb(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+        expect(calculateRgba("rgba(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+    });
+    it("adds passed in opacity to the rgb values in old syntax", function () {
+        expect(calculateRgba("rgb(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+        expect(calculateRgba("rgba(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+    });
+    it("adds passed in opacity to the rgb values in new syntax", function () {
+        expect(calculateRgba("rgb(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+        expect(calculateRgba("rgba(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+    });
     it("converts hash values to rgb", function () {
@@ -8,0 +24,0 @@ expect(calculateRgba("#ffffff", 1)).toEqual("rgba(255, 255, 255, 1)");

esm/MoonLoader.js

@@ -30,3 +30,3 @@ var __assign = (this && this.__assign) || function () {
     var _g = parseLengthAndUnit(size), value = _g.value, unit = _g.unit;
-    var moonSize = value / 7;
+    var moonSize = Math.round(value / 7);
     var wrapper = __assign({ display: "inherit", position: "relative", width: "".concat("".concat(value + moonSize * 2).concat(unit)), height: "".concat("".concat(value + moonSize * 2).concat(unit)), animation: "".concat(moon, " ").concat(0.6 / speedMultiplier, "s 0s infinite linear"), animationFillMode: "forwards" }, cssOverride);
@@ -33,0 +33,0 @@ var ballStyle = function (size) {

helpers/animation.js

@@ -5,3 +5,3 @@ "use strict";
 var createAnimation = function (loaderName, frames, suffix) {
-    var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix);
+    var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix, "-").concat(animationSuffix(10));
     if (typeof window == "undefined" || !window.document) {
@@ -20,1 +20,12 @@ return animationName;
 exports.createAnimation = createAnimation;
+function animationSuffix(length) {
+    var result = "";
+    var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    var charactersLength = characters.length;
+    var counter = 0;
+    while (counter < length) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+        counter += 1;
+    }
+    return result;
+}

helpers/animation.server.test.js

@@ -10,4 +10,4 @@ "use strict";
         var name = (0, animation_1.createAnimation)("TestLoader", "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}", "my-suffix");
-        expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+        expect(name).toMatch(/^react-spinners-TestLoader-my-suffix/);
     });
 });

helpers/animation.test.js

@@ -7,4 +7,4 @@ "use strict";
         var name = (0, animation_1.createAnimation)("TestLoader", "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}", "my-suffix");
-        expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+        expect(name).toMatch(/^react-spinners-TestLoader-my-suffix/);
     });
 });

helpers/colors.js

@@ -24,3 +24,24 @@ "use strict";
 })(BasicColors || (BasicColors = {}));
+var handleRgbColorString = function (color, opacity) {
+    // rgb(a)(255 255 255 / 80%)
+    if (color.includes("/")) {
+        return color.replace("rgb(", "rgba(");
+    }
+    var rgbValues = color.substring(color.startsWith("rgba(") ? 5 : 4, color.length - 1).trim();
+    var splittedByCommas = rgbValues.split(",");
+    // rgb(a)(255, 255, 255, 0.8)
+    if (splittedByCommas.length === 4) {
+        return color.replace("rgb(", "rgba(");
+    }
+    // rgb(a)(255, 255, 255)
+    if (splittedByCommas.length === 3) {
+        return "rgba(".concat(rgbValues, ", ").concat(opacity, ")");
+    }
+    // rgb(a)(255 255 255)
+    return "rgba(".concat(rgbValues, " / ").concat(opacity, ")");
+};
 var calculateRgba = function (color, opacity) {
+    if (color.startsWith("rgb")) {
+        return handleRgbColorString(color, opacity);
+    }
     if (Object.keys(BasicColors).includes(color)) {
@@ -27,0 +48,0 @@ color = BasicColors[color];

helpers/colors.test.js

@@ -8,2 +8,18 @@ "use strict";
     });
+    it("returns the same passed in rgb value with custom opacity in old syntax", function () {
+        expect((0, colors_1.calculateRgba)("rgb(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+        expect((0, colors_1.calculateRgba)("rgba(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+    });
+    it("returns the same passed in rgb value with custom opacity in new syntax", function () {
+        expect((0, colors_1.calculateRgba)("rgb(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+        expect((0, colors_1.calculateRgba)("rgba(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+    });
+    it("adds passed in opacity to the rgb values in old syntax", function () {
+        expect((0, colors_1.calculateRgba)("rgb(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+        expect((0, colors_1.calculateRgba)("rgba(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+    });
+    it("adds passed in opacity to the rgb values in new syntax", function () {
+        expect((0, colors_1.calculateRgba)("rgb(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+        expect((0, colors_1.calculateRgba)("rgba(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+    });
     it("converts hash values to rgb", function () {
@@ -10,0 +26,0 @@ expect((0, colors_1.calculateRgba)("#ffffff", 1)).toEqual("rgba(255, 255, 255, 1)");

MoonLoader.js

@@ -55,3 +55,3 @@ "use strict";
     var _g = (0, unitConverter_1.parseLengthAndUnit)(size), value = _g.value, unit = _g.unit;
-    var moonSize = value / 7;
+    var moonSize = Math.round(value / 7);
     var wrapper = __assign({ display: "inherit", position: "relative", width: "".concat("".concat(value + moonSize * 2).concat(unit)), height: "".concat("".concat(value + moonSize * 2).concat(unit)), animation: "".concat(moon, " ").concat(0.6 / speedMultiplier, "s 0s infinite linear"), animationFillMode: "forwards" }, cssOverride);
@@ -58,0 +58,0 @@ var ballStyle = function (size) {

package.json

 {
   "name": "react-spinners",
-  "version": "0.13.8",
+  "version": "0.14.0",
   "description": "A collection of react loading spinners",
@@ -40,10 +40,9 @@ "repository": {
     "build:umd": "tsc --project tsconfig.umd.json --outDir umd",
-    "build:demo": "npm run remove:demo; babel-node ./node_modules/.bin/webpack --config ./webpack.config.js",
-    "remove:demo": "rm docs/index.html; rm docs/javascripts/*",
+    "build:demo": "$npm_execpath run vite build",
+    "dev:demo": "vite dev",
     "patch": "npm version patch && npm publish && npm run clean",
     "minor": "npm version minor && npm publish && npm run clean",
     "major": "npm version major && npm publish && npm run clean",
-    "watch": "babel-node ./node_modules/.bin/webpack --watch --config ./webpack.config.dev.js & open docs/index.html",
     "clean": "rm -rf helpers/; rm -f *Loader.js; rm -f *Loader.d.ts; rm -f index.js; rm -f index.d.ts; rm -rf docs/js; rm -rf cjs; rm -rf esm; rm -rf umd",
-    "lint": "./node_modules/.bin/eslint src examples",
+    "lint": "eslint",
     "test": "jest",
@@ -53,56 +52,45 @@ "coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls",
     "publish:next": "npm publish --tag next && npm run clean",
-    "storybook": "start-storybook --docs -p 6006",
-    "build-storybook": "build-storybook --docs -o ./docs/storybook"
+    "storybook": "storybook dev --docs -p 6006",
+    "build-storybook": "storybook build --docs -o ./dist/storybook"
   },
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.5",
-    "@babel/node": "^7.20.5",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@mdx-js/react": "^2.1.5",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-docs": "^6.5.14",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-google-analytics": "^6.2.9",
-    "@storybook/addon-interactions": "^6.5.14",
-    "@storybook/addon-links": "^6.5.14",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.14",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-docs": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
+    "@storybook/addons": "7.6.17",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.3",
-    "@types/react": "^18.0.26",
-    "@types/react-click-outside": "^3.0.3",
-    "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "babel-loader": "^9.1.0",
-    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-click-outside": "^3.0.7",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "coveralls": "^3.1.1",
-    "eslint": "^8.29.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest-dom": "^4.0.3",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-storybook": "^0.6.7",
-    "eslint-plugin-testing-library": "^5.9.1",
-    "eslint-plugin-unicorn": "^45.0.1",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
-    "html-webpack-plugin": "^5.5.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "prettier": "^2.8.0",
-    "react": "^18.2.0",
+    "eslint": "^9.5.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-unicorn": "^54.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.3.2",
+    "react": "^18.3.1",
     "react-click-outside": "^3.0.1",
     "react-colorful": "^5.6.1",
-    "react-dom": "^18.2.0",
-    "react-ga4": "^1.4.1",
-    "storybook-dark-mode": "^1.1.2",
-    "ts-jest": "^29.0.3",
-    "ts-loader": "^9.4.2",
-    "typescript": "^4.9.3",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0"
+    "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
+    "storybook": "^8.1.10",
+    "storybook-dark-mode": "^4.0.2",
+    "ts-jest": "^29.1.5",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1"
   },
@@ -114,3 +102,3 @@ "peerDependencies": {
   "sideEffects": false,
-  "packageManager": "yarn@3.3.0"
+  "packageManager": "yarn@4.3.1"
 }

umd/helpers/animation.js

@@ -14,3 +14,3 @@ (function (factory) {
     var createAnimation = function (loaderName, frames, suffix) {
-        var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix);
+        var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix, "-").concat(animationSuffix(10));
         if (typeof window == "undefined" || !window.document) {
@@ -29,2 +29,13 @@ return animationName;
     exports.createAnimation = createAnimation;
+    function animationSuffix(length) {
+        var result = "";
+        var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        var charactersLength = characters.length;
+        var counter = 0;
+        while (counter < length) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            counter += 1;
+        }
+        return result;
+    }
 });

umd/helpers/animation.server.test.js

@@ -19,5 +19,5 @@ /**
             var name = (0, animation_1.createAnimation)("TestLoader", "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}", "my-suffix");
-            expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+            expect(name).toMatch(/^react-spinners-TestLoader-my-suffix/);
         });
     });
 });

umd/helpers/animation.test.js

@@ -16,5 +16,5 @@ (function (factory) {
             var name = (0, animation_1.createAnimation)("TestLoader", "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}", "my-suffix");
-            expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+            expect(name).toMatch(/^react-spinners-TestLoader-my-suffix/);
         });
     });
 });

umd/helpers/colors.js

@@ -33,3 +33,24 @@ (function (factory) {
     })(BasicColors || (BasicColors = {}));
+    var handleRgbColorString = function (color, opacity) {
+        // rgb(a)(255 255 255 / 80%)
+        if (color.includes("/")) {
+            return color.replace("rgb(", "rgba(");
+        }
+        var rgbValues = color.substring(color.startsWith("rgba(") ? 5 : 4, color.length - 1).trim();
+        var splittedByCommas = rgbValues.split(",");
+        // rgb(a)(255, 255, 255, 0.8)
+        if (splittedByCommas.length === 4) {
+            return color.replace("rgb(", "rgba(");
+        }
+        // rgb(a)(255, 255, 255)
+        if (splittedByCommas.length === 3) {
+            return "rgba(".concat(rgbValues, ", ").concat(opacity, ")");
+        }
+        // rgb(a)(255 255 255)
+        return "rgba(".concat(rgbValues, " / ").concat(opacity, ")");
+    };
     var calculateRgba = function (color, opacity) {
+        if (color.startsWith("rgb")) {
+            return handleRgbColorString(color, opacity);
+        }
         if (Object.keys(BasicColors).includes(color)) {
@@ -36,0 +57,0 @@ color = BasicColors[color];

umd/helpers/colors.test.js

@@ -17,2 +17,18 @@ (function (factory) {
         });
+        it("returns the same passed in rgb value with custom opacity in old syntax", function () {
+            expect((0, colors_1.calculateRgba)("rgb(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+            expect((0, colors_1.calculateRgba)("rgba(255, 255, 255, 0.5)", 1)).toEqual("rgba(255, 255, 255, 0.5)");
+        });
+        it("returns the same passed in rgb value with custom opacity in new syntax", function () {
+            expect((0, colors_1.calculateRgba)("rgb(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+            expect((0, colors_1.calculateRgba)("rgba(255 255 255 / 0.5)", 1)).toEqual("rgba(255 255 255 / 0.5)");
+        });
+        it("adds passed in opacity to the rgb values in old syntax", function () {
+            expect((0, colors_1.calculateRgba)("rgb(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+            expect((0, colors_1.calculateRgba)("rgba(255, 255, 255)", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+        });
+        it("adds passed in opacity to the rgb values in new syntax", function () {
+            expect((0, colors_1.calculateRgba)("rgb(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+            expect((0, colors_1.calculateRgba)("rgba(255 255 255)", 0.5)).toEqual("rgba(255 255 255 / 0.5)");
+        });
         it("converts hash values to rgb", function () {
@@ -19,0 +35,0 @@ expect((0, colors_1.calculateRgba)("#ffffff", 1)).toEqual("rgba(255, 255, 255, 1)");

umd/MoonLoader.js

@@ -64,3 +64,3 @@ var __assign = (this && this.__assign) || function () {
         var _g = (0, unitConverter_1.parseLengthAndUnit)(size), value = _g.value, unit = _g.unit;
-        var moonSize = value / 7;
+        var moonSize = Math.round(value / 7);
         var wrapper = __assign({ display: "inherit", position: "relative", width: "".concat("".concat(value + moonSize * 2).concat(unit)), height: "".concat("".concat(value + moonSize * 2).concat(unit)), animation: "".concat(moon, " ").concat(0.6 / speedMultiplier, "s 0s infinite linear"), animationFillMode: "forwards" }, cssOverride);
@@ -67,0 +67,0 @@ var ballStyle = function (size) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

517735

increased by2.09%

Dev dependency count

39

decreased by-22%

Number of package files

274

increased by1.11%

Lines of code

9313

increased by2.61%

No dependency changes