@react-md/utils - npm Package Compare versions

Comparing version 2.9.1 to 3.0.0-alpha.0

CHANGELOG.md

@@ -6,2 +6,24 @@ # Change Log
 
+# [3.0.0-alpha.0](https://github.com/mlaursen/react-md/compare/v2.9.1...v3.0.0-alpha.0) (2021-08-11)
+
+
+### Other Internal Changes
+
+* Added additional tests to bump test coverage ([e78f668](https://github.com/mlaursen/react-md/commit/e78f668d28ad0e1ff99feb9538c6a6b9e765d72c))
+* **@react-md/dev-utils:** updated variables command to work with `sass` ([d95f55a](https://github.com/mlaursen/react-md/commit/d95f55a78846726debe9f4ac4daeaefd6036c8d8))
+* **@react-md/utils:** remove ResizeObserver component and useResizeObserverV1 implementation ([ce55dbc](https://github.com/mlaursen/react-md/commit/ce55dbc129d415219d8e839c57e216f4d85775b5))
+* **@react-md/utils:** removed InteractionModeListener alias ([5528589](https://github.com/mlaursen/react-md/commit/5528589563a27b46eedf54c9142d0ed9dace7bea))
+* **react-md.dev:** removed tilde from imports ([f0e5dee](https://github.com/mlaursen/react-md/commit/f0e5dee0c7da49792ac66dd04e78e1608a1867d5))
+
+
+### BREAKING CHANGES
+
+* **@react-md/utils:** Removed `InteractionModeListener` since it was an alias for `UserInteractionModeListener`
+* **@react-md/utils:** Removed `ResizeObserver` component and `useResizeObserverV1` implementation
+
+
+
+
+
+
 ## [2.9.1](https://github.com/mlaursen/react-md/compare/v2.9.0...v2.9.1) (2021-07-27)
@@ -8,0 +30,0 @@

dist/scssVariables.d.ts

@@ -21,3 +21,3 @@ declare const _default: {
     "rmd-grid-cell-margin": string;
-    "rmd-grid-columns": string;
+    "rmd-grid-columns": null;
     "rmd-grid-phone-columns": number;
@@ -24,0 +24,0 @@ "rmd-grid-tablet-columns": number;

dist/scssVariables.js

@@ -27,3 +27,3 @@ "use strict";
     "rmd-grid-cell-margin": "1rem",
-    "rmd-grid-columns": "",
+    "rmd-grid-columns": null,
     "rmd-grid-phone-columns": 4,
@@ -30,0 +30,0 @@ "rmd-grid-tablet-columns": 8,

es/mode/UserInteractionModeListener.js

@@ -60,7 +60,2 @@ import React, { createContext, useContext, } from "react";
 }
-/**
- * @deprecated Use the `UserInteractionModeListener` component instead.
- * @remarks \@since 2.6.0
- */
-export var InteractionModeListener = UserInteractionModeListener;
 /* istanbul ignore next */
@@ -67,0 +62,0 @@ if (process.env.NODE_ENV !== "production") {

es/sizing/index.js

 export * from "./AppSizeListener";
-export * from "./ResizeObserver";
 export * from "./ResizeListener";
@@ -4,0 +3,0 @@ export * from "./MediaOnly";

es/sizing/useResizeObserver.js

@@ -15,3 +15,2 @@ var __assign = (this && this.__assign) || function () {
 import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect";
-import { useResizeObserverV1, } from "./useResizeObserverV1";
 /**
@@ -139,20 +138,14 @@ * @internal
 /**
- * This is currently a version that supports the "v1" and "v2" behavior of the
- * resize observer. **This hook with crash if you switch between the v1 and v2
- * behavior** during runtime.
+ * The new resize observer API that returns a `refHandler` to attach to a DOM
+ * node instead of using the weird `target` API.
  *
- * Please migrate to the v2 behavior with the ref handler when possible.
- *
  * @remarks \@since 2.3.0
+ * @param onResize - The resize handler to call when the element has changed
+ * height or width. If you notice performance issues or other oddities, it is
+ * recommended to wrap this function in `useCallback`.
+ * @param options - Any additional options to use for the resize observer.
  */
-export function useResizeObserver(arg1, arg2) {
-    if (arg2 === void 0) { arg2 = {}; }
-    // the app **should** crash if the user is switching between v1 and v2 behavior
-    /* eslint-disable react-hooks/rules-of-hooks */
-    if (typeof arg1 !== "function") {
-        useResizeObserverV1(arg1);
-        return;
-    }
-    var onResize = arg1;
-    var propRef = arg2.ref, _a = arg2.disableHeight, disableHeight = _a === void 0 ? false : _a, _b = arg2.disableWidth, disableWidth = _b === void 0 ? false : _b;
+export function useResizeObserver(onResize, options) {
+    if (options === void 0) { options = {}; }
+    var propRef = options.ref, _a = options.disableWidth, disableWidth = _a === void 0 ? false : _a, _b = options.disableHeight, disableHeight = _b === void 0 ? false : _b;
     var _c = useEnsuredRef(propRef), ref = _c[0], refHandler = _c[1];
@@ -159,0 +152,0 @@ useIsomorphicLayoutEffect(function () {

lib/mode/UserInteractionModeListener.d.ts

@@ -44,6 +44,1 @@ import { ReactElement, ReactNode } from "react";
 }
-/**
- * @deprecated Use the `UserInteractionModeListener` component instead.
- * @remarks \@since 2.6.0
- */
-export declare const InteractionModeListener: typeof UserInteractionModeListener;

lib/mode/UserInteractionModeListener.js

@@ -22,3 +22,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InteractionModeListener = exports.UserInteractionModeListener = exports.useIsUserInteractionMode = exports.useUserInteractionMode = void 0;
+exports.UserInteractionModeListener = exports.useIsUserInteractionMode = exports.useUserInteractionMode = void 0;
 var react_1 = __importStar(require("react"));
@@ -86,7 +86,2 @@ var useInteractionMode_1 = require("./useInteractionMode");
 exports.UserInteractionModeListener = UserInteractionModeListener;
-/**
- * @deprecated Use the `UserInteractionModeListener` component instead.
- * @remarks \@since 2.6.0
- */
-exports.InteractionModeListener = UserInteractionModeListener;
 /* istanbul ignore next */
@@ -93,0 +88,0 @@ if (process.env.NODE_ENV !== "production") {

lib/sizing/index.d.ts

 export * from "./AppSizeListener";
-export * from "./ResizeObserver";
 export * from "./ResizeListener";
@@ -4,0 +3,0 @@ export * from "./MediaOnly";

lib/sizing/index.js

@@ -14,3 +14,2 @@ "use strict";
 __exportStar(require("./AppSizeListener"), exports);
-__exportStar(require("./ResizeObserver"), exports);
 __exportStar(require("./ResizeListener"), exports);
@@ -17,0 +16,0 @@ __exportStar(require("./MediaOnly"), exports);

lib/sizing/useResizeObserver.d.ts

 import { Ref } from "react";
 import { EnsuredRefs } from "../useEnsuredRef";
-import { UseResizeObserverV1Options } from "./useResizeObserverV1";
 /**
@@ -60,10 +59,2 @@ * @remarks \@since 2.3.0
 /**
- * This uses the deprecated v1 behavior of providing a `target` element for the
- * resize observer. It is recommended to use the newer API that returns a ref
- * handler instead.
- *
- * @deprecated 2.3.0
- */
-export declare function useResizeObserver<E extends HTMLElement>(options: UseResizeObserverV1Options<E>): void;
-/**
  * The new resize observer API that returns a `refHandler` to attach to a DOM
@@ -70,0 +61,0 @@ * node instead of using the weird `target` API.

lib/sizing/useResizeObserver.js

@@ -18,3 +18,2 @@ "use strict";
 var useIsomorphicLayoutEffect_1 = require("../useIsomorphicLayoutEffect");
-var useResizeObserverV1_1 = require("./useResizeObserverV1");
 /**
@@ -142,20 +141,14 @@ * @internal
 /**
- * This is currently a version that supports the "v1" and "v2" behavior of the
- * resize observer. **This hook with crash if you switch between the v1 and v2
- * behavior** during runtime.
+ * The new resize observer API that returns a `refHandler` to attach to a DOM
+ * node instead of using the weird `target` API.
  *
- * Please migrate to the v2 behavior with the ref handler when possible.
- *
  * @remarks \@since 2.3.0
+ * @param onResize - The resize handler to call when the element has changed
+ * height or width. If you notice performance issues or other oddities, it is
+ * recommended to wrap this function in `useCallback`.
+ * @param options - Any additional options to use for the resize observer.
  */
-function useResizeObserver(arg1, arg2) {
-    if (arg2 === void 0) { arg2 = {}; }
-    // the app **should** crash if the user is switching between v1 and v2 behavior
-    /* eslint-disable react-hooks/rules-of-hooks */
-    if (typeof arg1 !== "function") {
-        useResizeObserverV1_1.useResizeObserverV1(arg1);
-        return;
-    }
-    var onResize = arg1;
-    var propRef = arg2.ref, _a = arg2.disableHeight, disableHeight = _a === void 0 ? false : _a, _b = arg2.disableWidth, disableWidth = _b === void 0 ? false : _b;
+function useResizeObserver(onResize, options) {
+    if (options === void 0) { options = {}; }
+    var propRef = options.ref, _a = options.disableWidth, disableWidth = _a === void 0 ? false : _a, _b = options.disableHeight, disableHeight = _b === void 0 ? false : _b;
     var _c = useEnsuredRef_1.useEnsuredRef(propRef), ref = _c[0], refHandler = _c[1];
@@ -162,0 +155,0 @@ useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect(function () {

package.json

 {
   "name": "@react-md/utils",
-  "version": "2.9.1",
+  "version": "3.0.0-alpha.0",
   "description": "General utils for react-md.",
@@ -43,3 +43,3 @@ "main": "./lib/index.js",
   },
-  "gitHead": "9a1f1f2c7bb8d7c88a200d134d123ef3f5ecf208"
+  "gitHead": "f5d2f34a10b8066949a787387d9d0e2f19051671"
 }

README.md

@@ -34,3 +34,3 @@ # @react-md/utils
 ```scss
-@import "~@react-md/utils/dist/mixins";
+@import "@react-md/utils/dist/mixins";
 
@@ -60,7 +60,7 @@ @include rmd-utils-base;
 ```scss
-@import "~@react-md/app-bar/dist/mixins";
-@import "~@react-md/avatar/dist/mixins";
-@import "~@react-md/button/dist/mixins";
-@import "~@react-md/elevation/dist/mixins";
-@import "~@react-md/utils/dist/mixins";
+@import "@react-md/app-bar/dist/mixins";
+@import "@react-md/avatar/dist/mixins";
+@import "@react-md/button/dist/mixins";
+@import "@react-md/elevation/dist/mixins";
+@import "@react-md/utils/dist/mixins";
 
@@ -67,0 +67,0 @@ @include react-md-utils;

src/scssVariables.ts

@@ -26,3 +26,3 @@ /*
   "rmd-grid-cell-margin": "1rem",
-  "rmd-grid-columns": "",
+  "rmd-grid-columns": null,
   "rmd-grid-phone-columns": 4,
@@ -29,0 +29,0 @@ "rmd-grid-tablet-columns": 8,

src/sizing/index.ts

 export * from "./AppSizeListener";
-export * from "./ResizeObserver";
 export * from "./ResizeListener";
@@ -4,0 +3,0 @@ export * from "./MediaOnly";

src/sizing/useResizeObserver.ts

@@ -6,6 +6,2 @@ import { Ref } from "react";
 import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect";
-import {
-  useResizeObserverV1,
-  UseResizeObserverV1Options,
-} from "./useResizeObserverV1";
 
@@ -242,13 +238,2 @@ /**
 /**
- * This uses the deprecated v1 behavior of providing a `target` element for the
- * resize observer. It is recommended to use the newer API that returns a ref
- * handler instead.
- *
- * @deprecated 2.3.0
- */
-export function useResizeObserver<E extends HTMLElement>(
-  options: UseResizeObserverV1Options<E>
-): void;
-
-/**
  * The new resize observer API that returns a `refHandler` to attach to a DOM
@@ -265,28 +250,5 @@ * node instead of using the weird `target` API.
   onResize: OnResizeObserverChange<E>,
-  options?: UseResizeObserverOptions<E>
-): EnsuredRefs<E>;
-
-/**
- * This is currently a version that supports the "v1" and "v2" behavior of the
- * resize observer. **This hook with crash if you switch between the v1 and v2
- * behavior** during runtime.
- *
- * Please migrate to the v2 behavior with the ref handler when possible.
- *
- * @remarks \@since 2.3.0
- */
-export function useResizeObserver<E extends HTMLElement>(
-  arg1: UseResizeObserverV1Options<E> | OnResizeObserverChange<E>,
-  arg2: UseResizeObserverOptions<E> = {}
-): EnsuredRefs<E> | void {
-  // the app **should** crash if the user is switching between v1 and v2 behavior
-  /* eslint-disable react-hooks/rules-of-hooks */
-  if (typeof arg1 !== "function") {
-    useResizeObserverV1(arg1);
-    return;
-  }
-
-  const onResize = arg1;
-  const { ref: propRef, disableHeight = false, disableWidth = false } = arg2;
-
+  options: UseResizeObserverOptions<E> = {}
+): EnsuredRefs<E> {
+  const { ref: propRef, disableWidth = false, disableHeight = false } = options;
   const [ref, refHandler] = useEnsuredRef<E>(propRef);
@@ -293,0 +255,0 @@

types/mode/UserInteractionModeListener.d.ts

@@ -44,6 +44,1 @@ import { ReactElement, ReactNode } from "react";
 }
-/**
- * @deprecated Use the `UserInteractionModeListener` component instead.
- * @remarks \@since 2.6.0
- */
-export declare const InteractionModeListener: typeof UserInteractionModeListener;

types/sizing/index.d.ts

 export * from "./AppSizeListener";
-export * from "./ResizeObserver";
 export * from "./ResizeListener";
@@ -4,0 +3,0 @@ export * from "./MediaOnly";

types/sizing/useResizeObserver.d.ts

 import { Ref } from "react";
 import { EnsuredRefs } from "../useEnsuredRef";
-import { UseResizeObserverV1Options } from "./useResizeObserverV1";
 /**
@@ -60,10 +59,2 @@ * @remarks \@since 2.3.0
 /**
- * This uses the deprecated v1 behavior of providing a `target` element for the
- * resize observer. It is recommended to use the newer API that returns a ref
- * handler instead.
- *
- * @deprecated 2.3.0
- */
-export declare function useResizeObserver<E extends HTMLElement>(options: UseResizeObserverV1Options<E>): void;
-/**
  * The new resize observer API that returns a `refHandler` to attach to a DOM
@@ -70,0 +61,0 @@ * node instead of using the weird `target` API.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Number of low supply chain risk alerts

28

decreased by-12.5%

Worsened metrics

Total package byte prevSize

1384225

decreased by-3.33%

Number of package files

779

decreased by-1.77%

Lines of code

27051

decreased by-3.98%

Number of low quality alerts

1

increased byInfinity%

No dependency changes