@react-md/states - npm Package Compare versions

Comparing version 2.0.0-alpha.10 to 2.0.0-alpha.11

dist/scssVariables.d.ts

 declare const _default: {
     "rmd-states-use-ripple": boolean;
     "rmd-states-use-pressed-states-fallback": boolean;
+    "rmd-states-use-focus-shadow": boolean;
     "rmd-states-light-theme-background-color": string;
@@ -21,2 +22,5 @@ "rmd-states-dark-theme-background-color": string;
     "rmd-states-selected-color": string;
+    "rmd-states-focus-shadow-width": string;
+    "rmd-states-focus-shadow-color": string;
+    "rmd-states-focus-shadow": string;
     "rmd-states-ripple-background-color": string;
@@ -30,2 +34,3 @@ "rmd-states-ripple-transform-duration": string;
         "focus-color": string;
+        "focus-shadow": string;
         "pressed-color": string;
@@ -32,0 +37,0 @@ "selected-color": string;

dist/scssVariables.js

@@ -7,2 +7,3 @@ "use strict";
     "rmd-states-use-pressed-states-fallback": true,
+    "rmd-states-use-focus-shadow": true,
     "rmd-states-light-theme-background-color": "#000",
@@ -25,2 +26,5 @@ "rmd-states-dark-theme-background-color": "#000",
     "rmd-states-selected-color": "rgba(0, 0, 0, 0.16)",
+    "rmd-states-focus-shadow-width": "0.125rem",
+    "rmd-states-focus-shadow-color": "#2196f3",
+    "rmd-states-focus-shadow": "inset 0 0 0 0.125rem #2196f3",
     "rmd-states-ripple-background-color": "rgba(0, 0, 0, 0.08)",
@@ -34,2 +38,3 @@ "rmd-states-ripple-transform-duration": "0.45s",
         "focus-color": "rgba(0, 0, 0, 0.24)",
+        "focus-shadow": "inset 0 0 0 0.125rem #2196f3",
         "pressed-color": "rgba(0, 0, 0, 0.32)",
@@ -36,0 +41,0 @@ "selected-color": "rgba(0, 0, 0, 0.16)",

es/ripples/reducer.js

@@ -12,2 +12,9 @@ var __assign = (this && this.__assign) || function () {
 };
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 import { useCallback, useReducer } from "react";
@@ -59,3 +66,3 @@ import { useRefCache } from "@react-md/utils";
     var ripple = createRippleState(event);
-    return state.concat([ripple]);
+    return __spreadArrays(state, [ripple]);
 }
@@ -69,3 +76,3 @@ function enteredRipple(state, ripple) {
     var exiting = !ripple.holding || Date.now() - ripple.startTime > 300;
-    nextState[i] = __assign({}, ripple, { exiting: exiting, entered: true });
+    nextState[i] = __assign(__assign({}, ripple), { exiting: exiting, entered: true });
     return nextState;
@@ -81,3 +88,3 @@ }
     var nextState = state.slice();
-    nextState[i] = __assign({}, ripple, { exiting: exiting, holding: false });
+    nextState[i] = __assign(__assign({}, ripple), { exiting: exiting, holding: false });
     return nextState;
@@ -96,3 +103,3 @@ }
     if (ease) {
-        return state.map(function (r) { return (__assign({}, r, { exiting: true, mounted: true, holding: false })); });
+        return state.map(function (r) { return (__assign(__assign({}, r), { exiting: true, mounted: true, holding: false })); });
     }
@@ -99,0 +106,0 @@ return [];

es/ripples/useRippleHandlers.js

@@ -24,3 +24,3 @@ var __assign = (this && this.__assign) || function () {
     var disabled = propDisabled || disableRipple;
-    var ref = useRefCache(__assign({}, handlers, { disableProgrammaticRipple: disableProgrammaticRipple }));
+    var ref = useRefCache(__assign(__assign({}, handlers), { disableProgrammaticRipple: disableProgrammaticRipple }));
     // some OS/browser don't actually focus buttons/elements that are focusable after a click
@@ -27,0 +27,0 @@ // event which causes a double ripple effect. This ref is used to disable the programmatic

es/useInteractionStates.js

@@ -62,3 +62,3 @@ var __assign = (this && this.__assign) || function () {
     var ripples = null;
-    var ripplesResult = useRipples(__assign({}, options, { disableSpacebarClick: disableSpacebarClick,
+    var ripplesResult = useRipples(__assign(__assign({}, options), { disableSpacebarClick: disableSpacebarClick,
         disableRipple: disableRipple,
@@ -72,3 +72,3 @@ disableProgrammaticRipple: disableProgrammaticRipple,
     }
-    var pressedResult = usePressedStates(__assign({}, options, { handlers: handlers || options.handlers, disableSpacebarClick: disableSpacebarClick }));
+    var pressedResult = usePressedStates(__assign(__assign({}, options), { handlers: handlers || options.handlers, disableSpacebarClick: disableSpacebarClick }));
     if (enablePressedAndRipple || (disableRipple && !disablePressedFallback)) {
@@ -75,0 +75,0 @@ (handlers = pressedResult.handlers);

es/usePressedStates.js

@@ -28,3 +28,3 @@ var __assign = (this && this.__assign) || function () {
     var _e = useState(false), pressed = _e[0], setPressed = _e[1];
-    var ref = useRefCache(__assign({}, handlers, { pressed: pressed }));
+    var ref = useRefCache(__assign(__assign({}, handlers), { pressed: pressed }));
     var handleKeyDown = useCallback(function (event) {
@@ -31,0 +31,0 @@ var _a = ref.current, onKeyDown = _a.onKeyDown, pressed = _a.pressed;

lib/ripples/reducer.js

@@ -13,2 +13,9 @@ "use strict";
 };
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -62,3 +69,3 @@ var react_1 = require("react");
     var ripple = utils_2.createRippleState(event);
-    return state.concat([ripple]);
+    return __spreadArrays(state, [ripple]);
 }
@@ -72,3 +79,3 @@ function enteredRipple(state, ripple) {
     var exiting = !ripple.holding || Date.now() - ripple.startTime > 300;
-    nextState[i] = __assign({}, ripple, { exiting: exiting, entered: true });
+    nextState[i] = __assign(__assign({}, ripple), { exiting: exiting, entered: true });
     return nextState;
@@ -84,3 +91,3 @@ }
     var nextState = state.slice();
-    nextState[i] = __assign({}, ripple, { exiting: exiting, holding: false });
+    nextState[i] = __assign(__assign({}, ripple), { exiting: exiting, holding: false });
     return nextState;
@@ -99,3 +106,3 @@ }
     if (ease) {
-        return state.map(function (r) { return (__assign({}, r, { exiting: true, mounted: true, holding: false })); });
+        return state.map(function (r) { return (__assign(__assign({}, r), { exiting: true, mounted: true, holding: false })); });
     }
@@ -102,0 +109,0 @@ return [];

lib/ripples/useRippleHandlers.js

@@ -26,3 +26,3 @@ "use strict";
     var disabled = propDisabled || disableRipple;
-    var ref = utils_1.useRefCache(__assign({}, handlers, { disableProgrammaticRipple: disableProgrammaticRipple }));
+    var ref = utils_1.useRefCache(__assign(__assign({}, handlers), { disableProgrammaticRipple: disableProgrammaticRipple }));
     // some OS/browser don't actually focus buttons/elements that are focusable after a click
@@ -29,0 +29,0 @@ // event which causes a double ripple effect. This ref is used to disable the programmatic

lib/useInteractionStates.js

@@ -67,3 +67,3 @@ "use strict";
     var ripples = null;
-    var ripplesResult = useRipples_1.default(__assign({}, options, { disableSpacebarClick: disableSpacebarClick,
+    var ripplesResult = useRipples_1.default(__assign(__assign({}, options), { disableSpacebarClick: disableSpacebarClick,
         disableRipple: disableRipple,
@@ -77,3 +77,3 @@ disableProgrammaticRipple: disableProgrammaticRipple,
     }
-    var pressedResult = usePressedStates_1.default(__assign({}, options, { handlers: handlers || options.handlers, disableSpacebarClick: disableSpacebarClick }));
+    var pressedResult = usePressedStates_1.default(__assign(__assign({}, options), { handlers: handlers || options.handlers, disableSpacebarClick: disableSpacebarClick }));
     if (enablePressedAndRipple || (disableRipple && !disablePressedFallback)) {
@@ -80,0 +80,0 @@ (handlers = pressedResult.handlers);

lib/usePressedStates.js

@@ -30,3 +30,3 @@ "use strict";
     var _e = react_1.useState(false), pressed = _e[0], setPressed = _e[1];
-    var ref = utils_1.useRefCache(__assign({}, handlers, { pressed: pressed }));
+    var ref = utils_1.useRefCache(__assign(__assign({}, handlers), { pressed: pressed }));
     var handleKeyDown = react_1.useCallback(function (event) {
@@ -33,0 +33,0 @@ var _a = ref.current, onKeyDown = _a.onKeyDown, pressed = _a.pressed;

package.json

 {
   "name": "@react-md/states",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "description": "A package for adding the different focus, hover, selected, active, etc states to elements",
@@ -38,5 +38,5 @@ "scripts": {
   "dependencies": {
-    "@react-md/theme": "^2.0.0-alpha.10",
-    "@react-md/transition": "^2.0.0-alpha.10",
-    "@react-md/utils": "^2.0.0-alpha.10",
+    "@react-md/theme": "^2.0.0-alpha.11",
+    "@react-md/transition": "^2.0.0-alpha.11",
+    "@react-md/utils": "^2.0.0-alpha.11",
     "react-transition-group": "^4.3.0"
@@ -53,3 +53,3 @@ },
   },
-  "gitHead": "d42497f9e2e5c6e7f37774e140a5bf80c644081d"
+  "gitHead": "740017d534dece692a4520df98de74df4d2e55c7"
 }

README.md

@@ -33,4 +33,2 @@ # @react-md/states
 
-<!-- INCLUDING_STYLES -->
-
 ## Usage
@@ -37,0 +35,0 @@

src/ripples/__tests__/utils.ts

@@ -209,2 +209,3 @@ import {
       y: 0,
+      toJSON: () => "",
     }));
@@ -251,2 +252,3 @@
       y: 0,
+      toJSON: () => "",
     }));
@@ -297,2 +299,3 @@ expect(
       y: 0,
+      toJSON: () => "",
     }));
@@ -361,2 +364,3 @@
       y: 0,
+      toJSON: () => "",
     }));
@@ -363,0 +367,0 @@

src/scssVariables.ts

@@ -5,2 +5,3 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-states-use-pressed-states-fallback": true,
+  "rmd-states-use-focus-shadow": true,
   "rmd-states-light-theme-background-color": "#000",
@@ -23,2 +24,5 @@ "rmd-states-dark-theme-background-color": "#000",
   "rmd-states-selected-color": "rgba(0, 0, 0, 0.16)",
+  "rmd-states-focus-shadow-width": "0.125rem",
+  "rmd-states-focus-shadow-color": "#2196f3",
+  "rmd-states-focus-shadow": "inset 0 0 0 0.125rem #2196f3",
   "rmd-states-ripple-background-color": "rgba(0, 0, 0, 0.08)",
@@ -32,2 +36,3 @@ "rmd-states-ripple-transform-duration": "0.45s",
     "focus-color": "rgba(0, 0, 0, 0.24)",
+    "focus-shadow": "inset 0 0 0 0.125rem #2196f3",
     "pressed-color": "rgba(0, 0, 0, 0.32)",
@@ -34,0 +39,0 @@ "selected-color": "rgba(0, 0, 0, 0.16)",

types/ripples/reducer.d.ts

@@ -37,3 +37,3 @@ import { RippleEvent, RipplesState, RippleState } from "./types";
 export declare function createRippleAction<E extends HTMLElement>(event: RippleEvent<E>, disableSpacebarClick: boolean): CreateAction<E>;
-export declare function reducer<E extends HTMLElement>(state: RippleState[] | undefined, action: RippleStateAction<E>): RipplesState;
+export declare function reducer<E extends HTMLElement>(state: RipplesState | undefined, action: RippleStateAction<E>): RipplesState;
 interface ReturnValue<E extends HTMLElement> {
@@ -40,0 +40,0 @@ state: RipplesState;

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

633844

increased by131.41%

Number of package files

104

increased by1.96%

Lines of code

4645

increased by0.67%

Worsened metrics

Number of lines in readme file

147

decreased by-1.34%

Dependency changes

• Updated@react-md/theme@^2.0.0-alpha.11

• Updated@react-md/transition@^2.0.0-alpha.11

• Updated@react-md/utils@^2.0.0-alpha.11