@react-md/states - npm Package Compare versions

Comparing version 3.0.1 to 3.1.0

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+# [3.1.0](https://github.com/mlaursen/react-md/compare/v3.0.1...v3.1.0) (2021-09-10)
+
+
+### Bug Fixes
+
+* **typescript:** updated all array types to be readonly ([8f71bcb](https://github.com/mlaursen/react-md/commit/8f71bcbde12928434975c6836079c3dda7c6ab1f))
+
+
+### Other Internal Changes
+
+* ran `yarn format` to include new files ([48d3d7f](https://github.com/mlaursen/react-md/commit/48d3d7fddb0435edf7dec9d0ba38cf3f0f251709))
+
+
+
+
+
+
 ## [3.0.1](https://github.com/mlaursen/react-md/compare/v3.0.0...v3.0.1) (2021-08-15)
@@ -8,0 +25,0 @@

es/ripples/reducer.js

@@ -12,6 +12,10 @@ var __assign = (this && this.__assign) || function () {
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
@@ -64,3 +68,3 @@ import { useCallback, useReducer } from "react";
     var ripple = createRippleState(event);
-    return __spreadArray(__spreadArray([], state), [ripple]);
+    return __spreadArray(__spreadArray([], state, true), [ripple], false);
 }
@@ -67,0 +71,0 @@ function enteredRipple(state, ripple) {

lib/ripples/reducer.js

@@ -13,6 +13,10 @@ "use strict";
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
@@ -55,7 +59,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 function createRipple(state, event, disableSpacebarClick) {
-    if (!utils_2.isRippleable(event, disableSpacebarClick) || utils_2.isBubbled(event)) {
+    if (!(0, utils_2.isRippleable)(event, disableSpacebarClick) || (0, utils_2.isBubbled)(event)) {
         return state;
     }
     if (state.find(function (r) { return r.holding; }) ||
-        (utils_2.getType(event) !== "touch" && state.find(function (r) { return r.type === "touch"; }))) {
+        ((0, utils_2.getType)(event) !== "touch" && state.find(function (r) { return r.type === "touch"; }))) {
         // keyboard events are a bit different than the others since it is actually
@@ -68,4 +72,4 @@ // spammable since the space or enter key can be held down which triggers click
     }
-    var ripple = utils_2.createRippleState(event);
-    return __spreadArray(__spreadArray([], state), [ripple]);
+    var ripple = (0, utils_2.createRippleState)(event);
+    return __spreadArray(__spreadArray([], state, true), [ripple], false);
 }
@@ -132,5 +136,5 @@ function enteredRipple(state, ripple) {
     if (disableSpacebarClick === void 0) { disableSpacebarClick = false; }
-    var _a = react_1.useReducer(reducer, []), state = _a[0], dispatch = _a[1];
-    var spacebarRef = utils_1.useRefCache(disableSpacebarClick);
-    var create = react_1.useCallback(function (event) {
+    var _a = (0, react_1.useReducer)(reducer, []), state = _a[0], dispatch = _a[1];
+    var spacebarRef = (0, utils_1.useRefCache)(disableSpacebarClick);
+    var create = (0, react_1.useCallback)(function (event) {
         var disableSpacebarClick = spacebarRef.current;
@@ -141,13 +145,13 @@ dispatch(createRippleAction(event, disableSpacebarClick));
     }, []);
-    var release = react_1.useCallback(function (event) {
+    var release = (0, react_1.useCallback)(function (event) {
         dispatch({ type: exports.RELEASE, event: event });
     }, []);
-    var entered = react_1.useCallback(function (ripple) {
+    var entered = (0, react_1.useCallback)(function (ripple) {
         dispatch({ type: exports.ENTERED, ripple: ripple });
     }, []);
-    var cancel = react_1.useCallback(function (ease) {
+    var cancel = (0, react_1.useCallback)(function (ease) {
         if (ease === void 0) { ease = false; }
         dispatch({ type: exports.CANCEL, ease: ease });
     }, []);
-    var remove = react_1.useCallback(function (ripple) {
+    var remove = (0, react_1.useCallback)(function (ripple) {
         dispatch({ type: exports.REMOVE, ripple: ripple });
@@ -154,0 +158,0 @@ }, []);

lib/ripples/Ripple.js

@@ -36,3 +36,3 @@ "use strict";
     var classNames = propClassNames;
-    var context = StatesConfig_1.useStatesConfigContext();
+    var context = (0, StatesConfig_1.useStatesConfigContext)();
     if (typeof timeout === "undefined" || typeof classNames === "undefined") {
@@ -46,4 +46,4 @@ if (typeof timeout === "undefined") {
     }
-    var ref = utils_1.useRefCache({ ripple: ripple, entered: entered, exited: exited });
-    var onEntered = react_1.useCallback(function () {
+    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;
@@ -54,3 +54,3 @@ entered(ripple);
     }, []);
-    var onExited = react_1.useCallback(function () {
+    var onExited = (0, react_1.useCallback)(function () {
         var _a = ref.current, ripple = _a.ripple, exited = _a.exited;
@@ -62,5 +62,5 @@ exited(ripple);
     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: classnames_1.default("rmd-ripple", className) })));
+        react_1.default.createElement("span", { style: style, className: (0, classnames_1.default)("rmd-ripple", className) })));
 }
 exports.Ripple = Ripple;
 //# sourceMappingURL=Ripple.js.map

lib/ripples/RippleContainer.js

@@ -12,5 +12,5 @@ "use strict";
     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: 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 (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 })); })));
 }
 exports.RippleContainer = RippleContainer;
 //# sourceMappingURL=RippleContainer.js.map

lib/ripples/types.d.ts

@@ -19,3 +19,3 @@ import React, { CSSProperties, HTMLAttributes } from "react";
 }
-export declare type RipplesState = RippleState[];
+export declare type RipplesState = readonly RippleState[];
 export declare type MergableRippleHandlerNames = "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onMouseLeave" | "onClick" | "onTouchStart" | "onTouchMove" | "onTouchEnd";
@@ -22,0 +22,0 @@ export declare type MergableRippleHandlers<E extends HTMLElement = HTMLElement> = Pick<HTMLAttributes<E>, MergableRippleHandlerNames>;

lib/ripples/useRippleHandlers.js

@@ -27,8 +27,8 @@ "use strict";
     var disabled = propDisabled || disableRipple;
-    var ref = utils_1.useRefCache(__assign(__assign({}, handlers), { disableProgrammaticRipple: disableProgrammaticRipple }));
+    var ref = (0, utils_1.useRefCache)(__assign(__assign({}, handlers), { disableProgrammaticRipple: disableProgrammaticRipple }));
     // some OS/browser don't actually focus buttons/elements that are focusable after a click
     // event which causes a double ripple effect. This ref is used to disable the programmatic
     // ripple in these cases.
-    var disableProgrammatic = react_1.useRef(false);
-    var onKeyDown = react_1.useCallback(function (event) {
+    var disableProgrammatic = (0, react_1.useRef)(false);
+    var onKeyDown = (0, react_1.useCallback)(function (event) {
         var callback = ref.current.onKeyDown;
@@ -43,3 +43,3 @@ if (callback) {
     [create]);
-    var onKeyUp = react_1.useCallback(function (event) {
+    var onKeyUp = (0, react_1.useCallback)(function (event) {
         var callback = ref.current.onKeyUp;
@@ -54,3 +54,3 @@ if (callback) {
     [release]);
-    var onMouseDown = react_1.useCallback(function (event) {
+    var onMouseDown = (0, react_1.useCallback)(function (event) {
         var callback = ref.current.onMouseDown;
@@ -66,3 +66,3 @@ if (callback) {
     [create]);
-    var onMouseUp = react_1.useCallback(function (event) {
+    var onMouseUp = (0, react_1.useCallback)(function (event) {
         var callback = ref.current.onMouseUp;
@@ -77,3 +77,3 @@ if (callback) {
     [release]);
-    var onMouseLeave = react_1.useCallback(function (event) {
+    var onMouseLeave = (0, react_1.useCallback)(function (event) {
         var callback = ref.current.onMouseLeave;
@@ -88,3 +88,3 @@ if (callback) {
     [cancel]);
-    var onTouchStart = react_1.useCallback(function (event) {
+    var onTouchStart = (0, react_1.useCallback)(function (event) {
         var callback = ref.current.onTouchStart;
@@ -99,3 +99,3 @@ if (callback) {
     [create]);
-    var onTouchMove = react_1.useCallback(function (event) {
+    var onTouchMove = (0, react_1.useCallback)(function (event) {
         var callback = ref.current.onTouchMove;
@@ -110,3 +110,3 @@ if (callback) {
     [cancel]);
-    var onTouchEnd = react_1.useCallback(function (event) {
+    var onTouchEnd = (0, react_1.useCallback)(function (event) {
         var callback = ref.current.onTouchEnd;
@@ -121,3 +121,3 @@ if (callback) {
     [release]);
-    var onClick = react_1.useCallback(function (event) {
+    var onClick = (0, react_1.useCallback)(function (event) {
         var _a = ref.current, callback = _a.onClick, disableProgrammaticRipple = _a.disableProgrammaticRipple;
@@ -124,0 +124,0 @@ if (callback) {

lib/ripples/useRipples.js

@@ -40,4 +40,4 @@ "use strict";
     var rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleContainerClassName = _a.rippleContainerClassName, rippleClassName = _a.rippleClassName, disableRipple = _a.disableRipple, disableSpacebarClick = _a.disableSpacebarClick, options = __rest(_a, ["rippleTimeout", "rippleClassNames", "rippleContainerClassName", "rippleClassName", "disableRipple", "disableSpacebarClick"]);
-    var _b = reducer_1.useRippleTransition(disableSpacebarClick), create = _b.create, state = _b.state, release = _b.release, entered = _b.entered, remove = _b.remove, cancel = _b.cancel;
-    var handlers = useRippleHandlers_1.useRippleHandlers(__assign({ create: create, release: release, cancel: cancel, disableRipple: disableRipple }, options));
+    var _b = (0, reducer_1.useRippleTransition)(disableSpacebarClick), create = _b.create, state = _b.state, release = _b.release, entered = _b.entered, remove = _b.remove, cancel = _b.cancel;
+    var handlers = (0, useRippleHandlers_1.useRippleHandlers)(__assign({ create: create, release: release, cancel: cancel, disableRipple: disableRipple }, options));
     return {
@@ -44,0 +44,0 @@ handlers: handlers,

lib/ripples/utils.js

@@ -118,3 +118,3 @@ "use strict";
 function createRippleState(event) {
-    var element = utils_1.findSizingContainer(event.currentTarget) || event.currentTarget;
+    var element = (0, utils_1.findSizingContainer)(event.currentTarget) || event.currentTarget;
     var offsetWidth = element.offsetWidth, offsetHeight = element.offsetHeight;
@@ -121,0 +121,0 @@ var type = getType(event);

lib/StatesConfig.js

@@ -25,3 +25,3 @@ "use strict";
 var constants_1 = require("./ripples/constants");
-exports.StatesConfigContext = react_1.createContext({
+exports.StatesConfigContext = (0, react_1.createContext)({
     rippleTimeout: constants_1.DEFAULT_RIPPLE_TIMEOUT,
@@ -39,3 +39,3 @@ rippleClassNames: constants_1.DEFAULT_RIPPLE_CLASSNAMES,
 function useStatesConfigContext() {
-    return react_1.useContext(exports.StatesConfigContext);
+    return (0, react_1.useContext)(exports.StatesConfigContext);
 }
@@ -54,3 +54,3 @@ exports.useStatesConfigContext = useStatesConfigContext;
     var _b = _a.rippleTimeout, rippleTimeout = _b === void 0 ? constants_1.DEFAULT_RIPPLE_TIMEOUT : _b, _c = _a.rippleClassNames, rippleClassNames = _c === void 0 ? constants_1.DEFAULT_RIPPLE_CLASSNAMES : _c, _d = _a.disableRipple, disableRipple = _d === void 0 ? false : _d, _e = _a.disableProgrammaticRipple, disableProgrammaticRipple = _e === void 0 ? false : _e, children = _a.children;
-    var value = react_1.useMemo(function () { return ({
+    var value = (0, react_1.useMemo)(function () { return ({
         rippleTimeout: rippleTimeout,
@@ -57,0 +57,0 @@ rippleClassNames: rippleClassNames,

lib/useInteractionStates.js

@@ -60,3 +60,3 @@ "use strict";
     // populate undefined props from their context values
-    var context = StatesConfig_1.useStatesConfigContext();
+    var context = (0, StatesConfig_1.useStatesConfigContext)();
     if (typeof disableRipple === "undefined") {
@@ -76,13 +76,13 @@ (disableRipple = context.disableRipple);
     var ripples = null;
-    var ripplesResult = useRipples_1.useRipples(__assign(__assign({}, options), { disableSpacebarClick: disableSpacebarClick, disableRipple: disableRipple, disableProgrammaticRipple: disableProgrammaticRipple, rippleTimeout: rippleTimeout, rippleClassName: rippleClassName, rippleContainerClassName: rippleContainerClassName }));
+    var ripplesResult = (0, useRipples_1.useRipples)(__assign(__assign({}, options), { disableSpacebarClick: disableSpacebarClick, disableRipple: disableRipple, disableProgrammaticRipple: disableProgrammaticRipple, rippleTimeout: rippleTimeout, rippleClassName: rippleClassName, rippleContainerClassName: rippleContainerClassName }));
     if (!disableRipple) {
         (ripples = ripplesResult.ripples, handlers = ripplesResult.handlers);
     }
-    var pressedResult = usePressedStates_1.usePressedStates(__assign(__assign({}, options), { handlers: handlers || options.handlers, disableSpacebarClick: disableSpacebarClick }));
+    var pressedResult = (0, usePressedStates_1.usePressedStates)(__assign(__assign({}, options), { handlers: handlers || options.handlers, disableSpacebarClick: disableSpacebarClick }));
     if (enablePressedAndRipple || (disableRipple && !disablePressedFallback)) {
         (handlers = pressedResult.handlers);
-        className = classnames_1.default(className, { "rmd-states--pressed": pressedResult.pressed });
+        className = (0, classnames_1.default)(className, { "rmd-states--pressed": pressedResult.pressed });
     }
     handlers = handlers || options.handlers || {};
-    handlers.onKeyDown = useKeyboardClickPolyfill_1.useKeyboardClickPolyfill({
+    handlers.onKeyDown = (0, useKeyboardClickPolyfill_1.useKeyboardClickPolyfill)({
         disabled: disabled,
@@ -89,0 +89,0 @@ disableEnterClick: disableEnterClick,

lib/useKeyboardClickPolyfill.js

@@ -12,3 +12,3 @@ "use strict";
     var _b = _a === void 0 ? {} : _a, onKeyDown = _b.onKeyDown, _c = _b.disabled, disabled = _c === void 0 ? false : _c, _d = _b.disableEnterClick, disableEnterClick = _d === void 0 ? false : _d, _e = _b.disableSpacebarClick, disableSpacebarClick = _e === void 0 ? false : _e;
-    var ref = utils_1.useRefCache({
+    var ref = (0, utils_1.useRefCache)({
         onKeyDown: onKeyDown,
@@ -18,3 +18,3 @@ disableSpacebarClick: disableSpacebarClick,
     });
-    var handleKeyDown = react_1.useCallback(function (event) {
+    var handleKeyDown = (0, react_1.useCallback)(function (event) {
         var _a = ref.current, onKeyDown = _a.onKeyDown, disableSpacebarClick = _a.disableSpacebarClick, disableEnterClick = _a.disableEnterClick;
@@ -21,0 +21,0 @@ if (onKeyDown) {

lib/usePressedStates.js

@@ -32,5 +32,5 @@ "use strict";
     var _b = _a === void 0 ? {} : _a, _c = _b.handlers, handlers = _c === void 0 ? {} : _c, _d = _b.disableSpacebarClick, disableSpacebarClick = _d === void 0 ? false : _d;
-    var _e = react_1.useState(false), pressed = _e[0], setPressed = _e[1];
-    var ref = utils_1.useRefCache(__assign(__assign({}, handlers), { pressed: pressed }));
-    var handleKeyDown = react_1.useCallback(function (event) {
+    var _e = (0, react_1.useState)(false), pressed = _e[0], setPressed = _e[1];
+    var ref = (0, utils_1.useRefCache)(__assign(__assign({}, handlers), { pressed: pressed }));
+    var handleKeyDown = (0, react_1.useCallback)(function (event) {
         var _a = ref.current, onKeyDown = _a.onKeyDown, pressed = _a.pressed;
@@ -49,3 +49,3 @@ if (onKeyDown) {
     [disableSpacebarClick]);
-    var handleKeyUp = react_1.useCallback(function (event) {
+    var handleKeyUp = (0, react_1.useCallback)(function (event) {
         var _a = ref.current, onKeyUp = _a.onKeyUp, pressed = _a.pressed;
@@ -61,3 +61,3 @@ if (onKeyUp) {
     }, []);
-    var handleMouseDown = react_1.useCallback(function (event) {
+    var handleMouseDown = (0, react_1.useCallback)(function (event) {
         var _a = ref.current, onMouseDown = _a.onMouseDown, pressed = _a.pressed;
@@ -67,3 +67,3 @@ if (onMouseDown) {
         }
-        if (!pressed && event.button === 0 && !utils_2.isBubbled(event)) {
+        if (!pressed && event.button === 0 && !(0, utils_2.isBubbled)(event)) {
             setPressed(true);
@@ -74,3 +74,3 @@ }
     }, []);
-    var handleMouseUp = react_1.useCallback(function (event) {
+    var handleMouseUp = (0, react_1.useCallback)(function (event) {
         var _a = ref.current, onMouseUp = _a.onMouseUp, pressed = _a.pressed;
@@ -86,3 +86,3 @@ if (onMouseUp) {
     }, []);
-    var handleMouseLeave = react_1.useCallback(function (event) {
+    var handleMouseLeave = (0, react_1.useCallback)(function (event) {
         var _a = ref.current, onMouseLeave = _a.onMouseLeave, pressed = _a.pressed;
@@ -98,3 +98,3 @@ if (onMouseLeave) {
     }, []);
-    var handleTouchStart = react_1.useCallback(function (event) {
+    var handleTouchStart = (0, react_1.useCallback)(function (event) {
         var _a = ref.current, onTouchStart = _a.onTouchStart, pressed = _a.pressed;
@@ -104,3 +104,3 @@ if (onTouchStart) {
         }
-        if (!pressed && !utils_2.isBubbled(event)) {
+        if (!pressed && !(0, utils_2.isBubbled)(event)) {
             setPressed(true);
@@ -111,3 +111,3 @@ }
     }, []);
-    var handleTouchMove = react_1.useCallback(function (event) {
+    var handleTouchMove = (0, react_1.useCallback)(function (event) {
         var _a = ref.current, onTouchMove = _a.onTouchMove, pressed = _a.pressed;
@@ -123,3 +123,3 @@ if (onTouchMove) {
     }, []);
-    var handleTouchEnd = react_1.useCallback(function (event) {
+    var handleTouchEnd = (0, react_1.useCallback)(function (event) {
         var _a = ref.current, onTouchEnd = _a.onTouchEnd, pressed = _a.pressed;
@@ -126,0 +126,0 @@ if (onTouchEnd) {

package.json

 {
   "name": "@react-md/states",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "A package for adding the different focus, hover, selected, active, etc states to elements",
@@ -31,5 +31,5 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/theme": "^3.0.0",
-    "@react-md/transition": "^3.0.1",
-    "@react-md/utils": "^3.0.0",
+    "@react-md/theme": "^3.1.0",
+    "@react-md/transition": "^3.1.0",
+    "@react-md/utils": "^3.1.0",
     "classnames": "^2.3.1",
@@ -52,3 +52,3 @@ "react-transition-group": "^4.4.2"
   },
-  "gitHead": "68149668ebc79c4bbcbb2875d65b9ac243e12c77"
+  "gitHead": "5891a3255f12fb34d2cc82d81d10f85f712a21e8"
 }

src/ripples/types.ts

@@ -27,3 +27,3 @@ import React, { CSSProperties, HTMLAttributes } from "react";
 }
-export type RipplesState = RippleState[];
+export type RipplesState = readonly RippleState[];
 
@@ -30,0 +30,0 @@ export type MergableRippleHandlerNames =

types/ripples/types.d.ts

@@ -19,3 +19,3 @@ import React, { CSSProperties, HTMLAttributes } from "react";
 }
-export declare type RipplesState = RippleState[];
+export declare type RipplesState = readonly RippleState[];
 export declare type MergableRippleHandlerNames = "onKeyDown" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onMouseLeave" | "onClick" | "onTouchStart" | "onTouchMove" | "onTouchEnd";
@@ -22,0 +22,0 @@ export declare type MergableRippleHandlers<E extends HTMLElement = HTMLElement> = Pick<HTMLAttributes<E>, MergableRippleHandlerNames>;

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

277289

increased by0.51%

Lines of code

4096

increased by0.2%

Dependency changes

• Updated@react-md/theme@^3.1.0

• Updated@react-md/transition@^3.1.0

• Updated@react-md/utils@^3.1.0