@react-md/states - npm Package Compare versions

Comparing version 3.1.0 to 4.0.0

CHANGELOG.md

@@ -6,2 +6,29 @@ # Change Log
 
+# [4.0.0](https://github.com/mlaursen/react-md/compare/v3.1.1...v4.0.0) (2021-11-24)
+
+
+### Features
+
+* Update to use new JSX Transform and latest `eslint` ([8111cd3](https://github.com/mlaursen/react-md/commit/8111cd31e45bf60c1b92509264af1b71dfba5696))
+* **@react-md/transition:** No longer use findDOMNode for transitions ([cb952da](https://github.com/mlaursen/react-md/commit/cb952da5b0cd0a67b9650e45d1e29896d66f01e1))
+
+
+### Other Internal Changes
+
+* always skip lib check ([229cef1](https://github.com/mlaursen/react-md/commit/229cef1e3d338ea362c1a2eaac06204c84ff21a6))
+* **react-md:** Remove prop-types package and usage ([2637a6f](https://github.com/mlaursen/react-md/commit/2637a6f43d681a06054e3a4518f692cf51baf997))
+* **stylelint:** Updated to use `stylelint` ([22d1598](https://github.com/mlaursen/react-md/commit/22d15985061df76d827d4ca9319198526e320f11))
+
+
+### Breaking Changes
+
+* Minimum React version is now 16.14 instead of 16.8
+* **react-md:** There will no longer be run-time prop validation with
+the `prop-types` package.
+
+
+
+
+
+
 # [3.1.0](https://github.com/mlaursen/react-md/compare/v3.0.1...v3.1.0) (2021-09-10)
@@ -8,0 +35,0 @@

es/ripples/Ripple.js

@@ -1,5 +0,15 @@
-import React, { useCallback } from "react";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
 import cn from "classnames";
-import CSSTransition from "react-transition-group/CSSTransition";
-import { useRefCache } from "@react-md/utils";
+import { useCSSTransition, } from "@react-md/transition";
 import { useStatesConfigContext } from "../StatesConfig";
@@ -20,18 +30,20 @@ export function Ripple(_a) {
     }
-    var ref = useRefCache({ ripple: ripple, entered: entered, exited: exited });
-    var onEntered = useCallback(function () {
-        var _a = ref.current, ripple = _a.ripple, entered = _a.entered;
-        entered(ripple);
-        // disabled since useRefCache
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    var onExited = useCallback(function () {
-        var _a = ref.current, ripple = _a.ripple, exited = _a.exited;
-        exited(ripple);
-        // disabled since useRefCache
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return (React.createElement(CSSTransition, { in: !exiting, appear: true, classNames: classNames, timeout: timeout, onEntered: onEntered, onExited: onExited },
-        React.createElement("span", { style: style, className: cn("rmd-ripple", className) })));
+    var _b = useCSSTransition({
+        appear: true,
+        transitionIn: !exiting,
+        timeout: timeout,
+        className: cn("rmd-ripple", className),
+        classNames: classNames,
+        onEntered: function () {
+            entered(ripple);
+        },
+        onExited: function () {
+            exited(ripple);
+        },
+    }), elementProps = _b.elementProps, rendered = _b.rendered;
+    if (!rendered) {
+        return null;
+    }
+    return _jsx("span", __assign({}, elementProps, { style: style }), void 0);
 }
 //# sourceMappingURL=Ripple.js.map

es/ripples/RippleContainer.js

@@ -1,2 +0,13 @@
-import React from "react";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
 import cn from "classnames";
@@ -6,4 +17,4 @@ import { Ripple } from "./Ripple";
     var ripples = _a.ripples, className = _a.className, rippleClassName = _a.rippleClassName, timeout = _a.timeout, classNames = _a.classNames, entered = _a.entered, exited = _a.exited;
-    return (React.createElement("span", { className: cn("rmd-ripple-container", className) }, ripples.map(function (ripple) { return (React.createElement(Ripple, { key: ripple.startTime, ripple: ripple, className: rippleClassName, entered: entered, exited: exited, timeout: timeout, classNames: classNames })); })));
+    return (_jsx("span", __assign({ className: cn("rmd-ripple-container", className) }, { children: ripples.map(function (ripple) { return (_jsx(Ripple, { ripple: ripple, className: rippleClassName, entered: entered, exited: exited, timeout: timeout, classNames: classNames }, ripple.startTime)); }) }), void 0));
 }
 //# sourceMappingURL=RippleContainer.js.map

es/ripples/useRipples.js

@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useRippleTransition } from "./reducer";
@@ -39,5 +39,5 @@ import { RippleContainer } from "./RippleContainer";
         handlers: handlers,
-        ripples: disableRipple ? null : (React.createElement(RippleContainer, { key: "ripples", ripples: state, className: rippleContainerClassName, rippleClassName: rippleClassName, timeout: rippleTimeout, classNames: rippleClassNames, entered: entered, exited: remove })),
+        ripples: disableRipple ? null : (_jsx(RippleContainer, { ripples: state, className: rippleContainerClassName, rippleClassName: rippleClassName, timeout: rippleTimeout, classNames: rippleClassNames, entered: entered, exited: remove }, "ripples")),
     };
 }
 //# sourceMappingURL=useRipples.js.map

es/StatesConfig.js

@@ -1,2 +0,14 @@
-import React, { createContext, useContext, useMemo, } from "react";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, } from "react";
 import { DEFAULT_RIPPLE_CLASSNAMES, DEFAULT_RIPPLE_TIMEOUT, } from "./ripples/constants";
@@ -35,33 +47,4 @@ export var StatesConfigContext = createContext({
     }); }, [rippleTimeout, rippleClassNames, disableRipple, disableProgrammaticRipple]);
-    return (React.createElement(StatesConfigContext.Provider, { value: value }, children));
+    return (_jsx(StatesConfigContext.Provider, __assign({ value: value }, { children: children }), void 0));
 }
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        StatesConfig.propTypes = {
-            rippleTimeout: PropTypes.oneOfType([
-                PropTypes.number,
-                PropTypes.shape({
-                    enter: PropTypes.number,
-                    exit: PropTypes.number,
-                }),
-            ]),
-            rippleClassNames: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.shape({
-                    enter: PropTypes.string,
-                    enterActive: PropTypes.string,
-                    enterDone: PropTypes.string,
-                    exit: PropTypes.string,
-                    exitActive: PropTypes.string,
-                }),
-            ]),
-            disableRipple: PropTypes.bool,
-            disableProgrammaticRipple: PropTypes.bool,
-            children: PropTypes.node.isRequired,
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=StatesConfig.js.map

lib/ripples/constants.d.ts

@@ -1,4 +0,3 @@
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
-export declare const DEFAULT_RIPPLE_CLASSNAMES: CSSTransitionClassNames;
-export declare const DEFAULT_RIPPLE_TIMEOUT: TransitionTimeout;
+import type { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
+export declare const DEFAULT_RIPPLE_CLASSNAMES: Readonly<CSSTransitionClassNames>;
+export declare const DEFAULT_RIPPLE_TIMEOUT: Readonly<TransitionTimeout>;

lib/ripples/Ripple.d.ts

@@ -1,4 +0,3 @@
-import { ReactElement } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import type { ReactElement } from "react";
+import { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
 import { RippleState } from "./types";
@@ -13,2 +12,2 @@ export interface RippleProps {
 }
-export declare function Ripple({ className, classNames: propClassNames, timeout: propTimeout, ripple, entered, exited, }: RippleProps): ReactElement;
+export declare function Ripple({ className, classNames: propClassNames, timeout: propTimeout, ripple, entered, exited, }: RippleProps): ReactElement | null;

lib/ripples/Ripple.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
@@ -26,6 +18,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.Ripple = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = __importDefault(require("classnames"));
-var CSSTransition_1 = __importDefault(require("react-transition-group/CSSTransition"));
-var utils_1 = require("@react-md/utils");
+var transition_1 = require("@react-md/transition");
 var StatesConfig_1 = require("../StatesConfig");
@@ -46,19 +37,21 @@ function Ripple(_a) {
     }
-    var ref = (0, utils_1.useRefCache)({ ripple: ripple, entered: entered, exited: exited });
-    var onEntered = (0, react_1.useCallback)(function () {
-        var _a = ref.current, ripple = _a.ripple, entered = _a.entered;
-        entered(ripple);
-        // disabled since useRefCache
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    var onExited = (0, react_1.useCallback)(function () {
-        var _a = ref.current, ripple = _a.ripple, exited = _a.exited;
-        exited(ripple);
-        // disabled since useRefCache
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return (react_1.default.createElement(CSSTransition_1.default, { in: !exiting, appear: true, classNames: classNames, timeout: timeout, onEntered: onEntered, onExited: onExited },
-        react_1.default.createElement("span", { style: style, className: (0, classnames_1.default)("rmd-ripple", className) })));
+    var _b = (0, transition_1.useCSSTransition)({
+        appear: true,
+        transitionIn: !exiting,
+        timeout: timeout,
+        className: (0, classnames_1.default)("rmd-ripple", className),
+        classNames: classNames,
+        onEntered: function () {
+            entered(ripple);
+        },
+        onExited: function () {
+            exited(ripple);
+        },
+    }), elementProps = _b.elementProps, rendered = _b.rendered;
+    if (!rendered) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)("span", __assign({}, elementProps, { style: style }), void 0);
 }
 exports.Ripple = Ripple;
 //# sourceMappingURL=Ripple.js.map

lib/ripples/RippleContainer.d.ts

 import { ReactElement } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import type { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
 import { RipplesState, RippleState } from "./types";
@@ -5,0 +4,0 @@ export interface RippleContainerProps {

lib/ripples/RippleContainer.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,3 +18,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 exports.RippleContainer = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var classnames_1 = __importDefault(require("classnames"));
@@ -13,5 +24,5 @@ var Ripple_1 = require("./Ripple");
     var ripples = _a.ripples, className = _a.className, rippleClassName = _a.rippleClassName, timeout = _a.timeout, classNames = _a.classNames, entered = _a.entered, exited = _a.exited;
-    return (react_1.default.createElement("span", { className: (0, classnames_1.default)("rmd-ripple-container", className) }, ripples.map(function (ripple) { return (react_1.default.createElement(Ripple_1.Ripple, { key: ripple.startTime, ripple: ripple, className: rippleClassName, entered: entered, exited: exited, timeout: timeout, classNames: classNames })); })));
+    return ((0, jsx_runtime_1.jsx)("span", __assign({ className: (0, classnames_1.default)("rmd-ripple-container", className) }, { children: ripples.map(function (ripple) { return ((0, jsx_runtime_1.jsx)(Ripple_1.Ripple, { ripple: ripple, className: rippleClassName, entered: entered, exited: exited, timeout: timeout, classNames: classNames }, ripple.startTime)); }) }), void 0));
 }
 exports.RippleContainer = RippleContainer;
 //# sourceMappingURL=RippleContainer.js.map

lib/ripples/types.d.ts

@@ -1,4 +0,3 @@
-import React, { CSSProperties, HTMLAttributes } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import type { CSSProperties, HTMLAttributes } from "react";
+import type { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
 export declare type RippleType = "mouse" | "touch" | "keyboard" | "programmatic";
@@ -5,0 +4,0 @@ export declare type RippleEvent<E extends HTMLElement> = Pick<React.MouseEvent<E>, "target" | "currentTarget" | "type"> & Partial<Pick<React.MouseEvent<E>, "pageX" | "pageY" | "button">> & Partial<Pick<React.KeyboardEvent<E>, "key">> & Partial<Pick<React.TouchEvent<E>, "touches">>;

lib/ripples/useRipples.js

@@ -24,8 +24,5 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRipples = void 0;
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var reducer_1 = require("./reducer");
@@ -45,3 +42,3 @@ var RippleContainer_1 = require("./RippleContainer");
         handlers: handlers,
-        ripples: disableRipple ? null : (react_1.default.createElement(RippleContainer_1.RippleContainer, { key: "ripples", ripples: state, className: rippleContainerClassName, rippleClassName: rippleClassName, timeout: rippleTimeout, classNames: rippleClassNames, entered: entered, exited: remove })),
+        ripples: disableRipple ? null : ((0, jsx_runtime_1.jsx)(RippleContainer_1.RippleContainer, { ripples: state, className: rippleContainerClassName, rippleClassName: rippleClassName, timeout: rippleTimeout, classNames: rippleClassNames, entered: entered, exited: remove }, "ripples")),
     };
@@ -48,0 +45,0 @@ }

lib/StatesConfig.d.ts

@@ -1,4 +0,3 @@
-import React, { ReactElement, ReactNode } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import { ReactElement, ReactNode } from "react";
+import { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
 /**
@@ -31,3 +30,3 @@ * Contains all the values in the `StatesConfig` component.
 }
-export declare const StatesConfigContext: React.Context<StatesConfigContextType>;
+export declare const StatesConfigContext: import("react").Context<StatesConfigContextType>;
 /**
@@ -53,10 +52,1 @@ * A simple hook that can be used to get the Ripple context. This is used behind
 export declare function StatesConfig({ rippleTimeout, rippleClassNames, disableRipple, disableProgrammaticRipple, children, }: StatesConfigProps): ReactElement;
-export declare namespace StatesConfig {
-    var propTypes: {
-        rippleTimeout: any;
-        rippleClassNames: any;
-        disableRipple: any;
-        disableProgrammaticRipple: any;
-        children: any;
-    };
-}

lib/StatesConfig.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatesConfig = exports.useStatesConfigContext = exports.StatesConfigContext = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var constants_1 = require("./ripples/constants");
@@ -58,34 +51,5 @@ exports.StatesConfigContext = (0, react_1.createContext)({
     }); }, [rippleTimeout, rippleClassNames, disableRipple, disableProgrammaticRipple]);
-    return (react_1.default.createElement(exports.StatesConfigContext.Provider, { value: value }, children));
+    return ((0, jsx_runtime_1.jsx)(exports.StatesConfigContext.Provider, __assign({ value: value }, { children: children }), void 0));
 }
 exports.StatesConfig = StatesConfig;
-/* istanbul ignore next */
-if (process.env.NODE_ENV !== "production") {
-    try {
-        var PropTypes = require("prop-types");
-        StatesConfig.propTypes = {
-            rippleTimeout: PropTypes.oneOfType([
-                PropTypes.number,
-                PropTypes.shape({
-                    enter: PropTypes.number,
-                    exit: PropTypes.number,
-                }),
-            ]),
-            rippleClassNames: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.shape({
-                    enter: PropTypes.string,
-                    enterActive: PropTypes.string,
-                    enterDone: PropTypes.string,
-                    exit: PropTypes.string,
-                    exitActive: PropTypes.string,
-                }),
-            ]),
-            disableRipple: PropTypes.bool,
-            disableProgrammaticRipple: PropTypes.bool,
-            children: PropTypes.node.isRequired,
-        };
-    }
-    catch (e) { }
-}
 //# sourceMappingURL=StatesConfig.js.map

package.json

 {
   "name": "@react-md/states",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "A package for adding the different focus, hover, selected, active, etc states to elements",
@@ -31,7 +31,6 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/theme": "^3.1.0",
-    "@react-md/transition": "^3.1.0",
-    "@react-md/utils": "^3.1.0",
-    "classnames": "^2.3.1",
-    "react-transition-group": "^4.4.2"
+    "@react-md/theme": "^4.0.0",
+    "@react-md/transition": "^4.0.0",
+    "@react-md/utils": "^4.0.0",
+    "classnames": "^2.3.1"
   },
@@ -43,12 +42,9 @@ "devDependencies": {
   "peerDependencies": {
-    "react": ">= 16.8",
-    "react-dom": ">= 16.8"
+    "react": ">= 16.14",
+    "react-dom": ">= 16.14"
   },
-  "optionalDependencies": {
-    "prop-types": ">= 15.6"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5891a3255f12fb34d2cc82d81d10f85f712a21e8"
+  "gitHead": "a9f2d64a777698fa65bb3196f6063cdd8321f5cb"
 }

README.md

@@ -48,3 +48,2 @@ # @react-md/states
 ```tsx
-import React from "react";
 import { render } from "react-dom";
@@ -70,3 +69,2 @@ import { StatesConfig } from "@react-md/states";
 ```tsx
-import React from "react";
 import { render } from "react-dom";
@@ -100,3 +98,3 @@ import { StatesConfig } from "@react-md/states";
 ```tsx
-import React, { HTMLAttributes, ReactElement } from "react";
+import type { HTMLAttributes, ReactElement } from "react";
 import { render } from "react-dom";
@@ -103,0 +101,0 @@ import {

src/ripples/constants.ts

@@ -1,5 +0,7 @@
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import type {
+  CSSTransitionClassNames,
+  TransitionTimeout,
+} from "@react-md/transition";
 
-export const DEFAULT_RIPPLE_CLASSNAMES: CSSTransitionClassNames = {
+export const DEFAULT_RIPPLE_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
   enter: "rmd-ripple--animating",
@@ -12,5 +14,5 @@ enterActive: "rmd-ripple--scaling",
 
-export const DEFAULT_RIPPLE_TIMEOUT: TransitionTimeout = {
+export const DEFAULT_RIPPLE_TIMEOUT: Readonly<TransitionTimeout> = {
   enter: 150,
   exit: 300,
 };

src/ripples/types.ts

@@ -1,4 +0,6 @@
-import React, { CSSProperties, HTMLAttributes } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import type { CSSProperties, HTMLAttributes } from "react";
+import type {
+  CSSTransitionClassNames,
+  TransitionTimeout,
+} from "@react-md/transition";
 
@@ -5,0 +7,0 @@ export type RippleType = "mouse" | "touch" | "keyboard" | "programmatic";

types/ripples/constants.d.ts

@@ -1,4 +0,3 @@
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
-export declare const DEFAULT_RIPPLE_CLASSNAMES: CSSTransitionClassNames;
-export declare const DEFAULT_RIPPLE_TIMEOUT: TransitionTimeout;
+import type { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
+export declare const DEFAULT_RIPPLE_CLASSNAMES: Readonly<CSSTransitionClassNames>;
+export declare const DEFAULT_RIPPLE_TIMEOUT: Readonly<TransitionTimeout>;

types/ripples/Ripple.d.ts

@@ -1,4 +0,3 @@
-import { ReactElement } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import type { ReactElement } from "react";
+import { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
 import { RippleState } from "./types";
@@ -13,2 +12,2 @@ export interface RippleProps {
 }
-export declare function Ripple({ className, classNames: propClassNames, timeout: propTimeout, ripple, entered, exited, }: RippleProps): ReactElement;
+export declare function Ripple({ className, classNames: propClassNames, timeout: propTimeout, ripple, entered, exited, }: RippleProps): ReactElement | null;

types/ripples/RippleContainer.d.ts

 import { ReactElement } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import type { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
 import { RipplesState, RippleState } from "./types";
@@ -5,0 +4,0 @@ export interface RippleContainerProps {

types/ripples/types.d.ts

@@ -1,4 +0,3 @@
-import React, { CSSProperties, HTMLAttributes } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import type { CSSProperties, HTMLAttributes } from "react";
+import type { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
 export declare type RippleType = "mouse" | "touch" | "keyboard" | "programmatic";
@@ -5,0 +4,0 @@ export declare type RippleEvent<E extends HTMLElement> = Pick<React.MouseEvent<E>, "target" | "currentTarget" | "type"> & Partial<Pick<React.MouseEvent<E>, "pageX" | "pageY" | "button">> & Partial<Pick<React.KeyboardEvent<E>, "key">> & Partial<Pick<React.TouchEvent<E>, "touches">>;

types/StatesConfig.d.ts

@@ -1,4 +0,3 @@
-import React, { ReactElement, ReactNode } from "react";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TransitionTimeout } from "@react-md/transition";
+import { ReactElement, ReactNode } from "react";
+import { CSSTransitionClassNames, TransitionTimeout } from "@react-md/transition";
 /**
@@ -31,3 +30,3 @@ * Contains all the values in the `StatesConfig` component.
 }
-export declare const StatesConfigContext: React.Context<StatesConfigContextType>;
+export declare const StatesConfigContext: import("react").Context<StatesConfigContextType>;
 /**
@@ -53,10 +52,1 @@ * A simple hook that can be used to get the Ripple context. This is used behind
 export declare function StatesConfig({ rippleTimeout, rippleClassNames, disableRipple, disableProgrammaticRipple, children, }: StatesConfigProps): ReactElement;
-export declare namespace StatesConfig {
-    var propTypes: {
-        rippleTimeout: any;
-        rippleClassNames: any;
-        disableRipple: any;
-        disableProgrammaticRipple: any;
-        children: any;
-    };
-}

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dependency count

6

decreased by-25%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

271323

decreased by-2.15%

Lines of code

4011

decreased by-2.08%

Number of lines in readme file

148

decreased by-1.33%

Dependency changes

• + Added@react-md/portal@4.0.3(transitive)

• + Added@react-md/theme@4.0.3(transitive)

• + Added@react-md/transition@4.0.3(transitive)

• + Added@react-md/utils@4.0.3(transitive)

• - Removedreact-transition-group@^4.4.2

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@react-md/portal@3.1.0(transitive)

• - Removed@react-md/theme@3.1.0(transitive)

• - Removed@react-md/transition@3.1.0(transitive)

• - Removed@react-md/utils@3.1.0(transitive)

• - Removed@types/prop-types@15.7.13(transitive)

• - Removed@types/react@18.3.12(transitive)

• - Removed@types/react-transition-group@4.4.11(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removeddom-helpers@5.2.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-transition-group@4.4.5(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@react-md/theme@^4.0.0

• Updated@react-md/transition@^4.0.0

• Updated@react-md/utils@^4.0.0