@react-md/transition - npm Package Compare versions

Comparing version 2.7.1 to 2.8.0

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+# [2.8.0](https://github.com/mlaursen/react-md/compare/v2.7.1...v2.8.0) (2021-04-22)
+
+
+### Features
+
+* **@react-md/transition:** Updated `useFixedPositioning` to merge style objects ([1ab84d7](https://github.com/mlaursen/react-md/commit/1ab84d7e86ed911cb263bb1b25e1085fab3fc2e5))
+* **@react-md/transition:** updated `useFixedPositioning` to support fixedTo ref ([ced550a](https://github.com/mlaursen/react-md/commit/ced550a6ae8525e02d8ce20dde1cf448454ac9ec))
+
+
+### Other Internal Changes
+
+* **@react-md/transition:** bump @types/react-transitition-group from v4.2.4 to v4.4.1 ([f3f5c7b](https://github.com/mlaursen/react-md/commit/f3f5c7be571e87a13f67442a673feb2807cb96ba))
+* **tsconfig:** separate tsconfig by package instead of a single root ([b278230](https://github.com/mlaursen/react-md/commit/b2782303b2a2db07eeaa25b6a3d04337976cffaa))
+
+
+
+
+
+
 ## [2.7.1](https://github.com/mlaursen/react-md/compare/v2.7.0...v2.7.1) (2021-03-23)
@@ -8,0 +27,0 @@

es/useFixedPositioning.js

@@ -12,3 +12,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, } from "react";
 import { getFixedPosition, getViewportSize, useResizeListener, useScrollListener, } from "@react-md/utils";
@@ -19,13 +19,13 @@ function getFixedTo(fixedTo) {
     }
-    var t = typeof fixedTo;
-    switch (t) {
-        case "string":
-            fixedTo = fixedTo;
-            return (document.getElementById(fixedTo) ||
-                document.querySelector(fixedTo));
-        case "function":
-            return fixedTo();
-        default:
-            return fixedTo;
+    if (typeof fixedTo === "string") {
+        return (document.getElementById(fixedTo) ||
+            document.querySelector(fixedTo));
     }
+    if (typeof fixedTo === "function") {
+        return fixedTo();
+    }
+    if ("current" in fixedTo) {
+        return fixedTo.current;
+    }
+    return fixedTo;
 }
@@ -46,3 +46,3 @@ /**
 export function useFixedPositioning(_a) {
-    var onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, fixedTo = _a.fixedTo, getOptions = _a.getOptions, onResize = _a.onResize, onScroll = _a.onScroll, _b = _a.anchor, currentAnchor = _b === void 0 ? {} : _b, initialX = _a.initialX, initialY = _a.initialY, _c = _a.xMargin, xMargin = _c === void 0 ? 0 : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? 16 : _d, _e = _a.yMargin, yMargin = _e === void 0 ? 0 : _e, _f = _a.vhMargin, vhMargin = _f === void 0 ? 16 : _f, _g = _a.width, width = _g === void 0 ? "auto" : _g, onPositionChange = _a.onPositionChange, _h = _a.transformOrigin, transformOrigin = _h === void 0 ? false : _h, _j = _a.preventOverlap, preventOverlap = _j === void 0 ? false : _j, _k = _a.disableSwapping, disableSwapping = _k === void 0 ? false : _k, _l = _a.disableVHBounds, disableVHBounds = _l === void 0 ? false : _l;
+    var propStyle = _a.style, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, fixedTo = _a.fixedTo, getOptions = _a.getOptions, onResize = _a.onResize, onScroll = _a.onScroll, _b = _a.anchor, currentAnchor = _b === void 0 ? {} : _b, initialX = _a.initialX, initialY = _a.initialY, _c = _a.xMargin, xMargin = _c === void 0 ? 0 : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? 16 : _d, _e = _a.yMargin, yMargin = _e === void 0 ? 0 : _e, _f = _a.vhMargin, vhMargin = _f === void 0 ? 16 : _f, _g = _a.width, width = _g === void 0 ? "auto" : _g, onPositionChange = _a.onPositionChange, _h = _a.transformOrigin, transformOrigin = _h === void 0 ? false : _h, _j = _a.preventOverlap, preventOverlap = _j === void 0 ? false : _j, _k = _a.disableSwapping, disableSwapping = _k === void 0 ? false : _k, _l = _a.disableVHBounds, disableVHBounds = _l === void 0 ? false : _l;
     var _m = useState(), style = _m[0], setStyle = _m[1];
@@ -168,3 +168,3 @@ var _o = useState(null), element = _o[0], setElement = _o[1];
     return {
-        style: style,
+        style: __assign(__assign({}, style), propStyle),
         updateStyle: updateStyle,
@@ -171,0 +171,0 @@ onEnter: handleEnter,

lib/useFixedPositioning.d.ts

@@ -1,6 +0,9 @@
-import { CSSProperties } from "react";
+import { CSSProperties, RefObject } from "react";
 import { TransitionProps } from "react-transition-group/Transition";
 import { FixedPositionOptions, PositionAnchor } from "@react-md/utils";
 export declare type FixedToFunction = () => HTMLElement | null;
-export declare type FixedTo = string | HTMLElement | null | FixedToFunction;
+/**
+ * @remarks \@since 2.8.0 Supports `RefObject` implementation.
+ */
+export declare type FixedTo = RefObject<HTMLElement | null> | FixedToFunction | HTMLElement | string | null;
 export declare type OptionalFixedPositionOptions = Omit<FixedPositionOptions, "container" | "element">;
@@ -27,2 +30,18 @@ export declare type GetFixedPositionOptions = (node: HTMLElement) => OptionalFixedPositionOptions;
     /**
+     * An optional style object to merge and override the generated fixed
+     * positioning styles.
+     *
+     * @example
+     * Overriding
+     * ```ts
+     * useFixedPositioning({
+     *   // this will force the `top` to always be `0`
+     *   style: { top: 0 },
+     * });
+     * ```
+     *
+     * @remarks \@since 2.8.0
+     */
+    style?: CSSProperties;
+    /**
      * An optional function to call to dynamically get the options when the node
@@ -39,3 +58,3 @@ * has been added to the DOM. This is helpful if you need to check sizes or other
      */
-    onResize?: (event: Event) => void;
+    onResize?(event: Event): void;
     /**
@@ -54,5 +73,5 @@ * An optional function to call when the element is in the DOM and a window scroll
 }
-interface ReturnValue extends Required<TransitionHooks> {
-    style?: CSSProperties;
-    updateStyle: () => void;
+interface FixedPositioningHookReturnValue extends Required<TransitionHooks> {
+    style: CSSProperties;
+    updateStyle(): void;
 }
@@ -72,3 +91,3 @@ /**
  */
-export declare function useFixedPositioning({ onEnter, onEntering, onEntered, onExited, fixedTo, getOptions, onResize, onScroll, anchor: currentAnchor, initialX, initialY, xMargin, vwMargin, yMargin, vhMargin, width, onPositionChange, transformOrigin, preventOverlap, disableSwapping, disableVHBounds, }: FixedPositioningOptions): ReturnValue;
+export declare function useFixedPositioning({ style: propStyle, onEnter, onEntering, onEntered, onExited, fixedTo, getOptions, onResize, onScroll, anchor: currentAnchor, initialX, initialY, xMargin, vwMargin, yMargin, vhMargin, width, onPositionChange, transformOrigin, preventOverlap, disableSwapping, disableVHBounds, }: FixedPositioningOptions): FixedPositioningHookReturnValue;
 export {};

lib/useFixedPositioning.js

@@ -21,13 +21,13 @@ "use strict";
     }
-    var t = typeof fixedTo;
-    switch (t) {
-        case "string":
-            fixedTo = fixedTo;
-            return (document.getElementById(fixedTo) ||
-                document.querySelector(fixedTo));
-        case "function":
-            return fixedTo();
-        default:
-            return fixedTo;
+    if (typeof fixedTo === "string") {
+        return (document.getElementById(fixedTo) ||
+            document.querySelector(fixedTo));
     }
+    if (typeof fixedTo === "function") {
+        return fixedTo();
+    }
+    if ("current" in fixedTo) {
+        return fixedTo.current;
+    }
+    return fixedTo;
 }
@@ -48,3 +48,3 @@ /**
 function useFixedPositioning(_a) {
-    var onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, fixedTo = _a.fixedTo, getOptions = _a.getOptions, onResize = _a.onResize, onScroll = _a.onScroll, _b = _a.anchor, currentAnchor = _b === void 0 ? {} : _b, initialX = _a.initialX, initialY = _a.initialY, _c = _a.xMargin, xMargin = _c === void 0 ? 0 : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? 16 : _d, _e = _a.yMargin, yMargin = _e === void 0 ? 0 : _e, _f = _a.vhMargin, vhMargin = _f === void 0 ? 16 : _f, _g = _a.width, width = _g === void 0 ? "auto" : _g, onPositionChange = _a.onPositionChange, _h = _a.transformOrigin, transformOrigin = _h === void 0 ? false : _h, _j = _a.preventOverlap, preventOverlap = _j === void 0 ? false : _j, _k = _a.disableSwapping, disableSwapping = _k === void 0 ? false : _k, _l = _a.disableVHBounds, disableVHBounds = _l === void 0 ? false : _l;
+    var propStyle = _a.style, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExited = _a.onExited, fixedTo = _a.fixedTo, getOptions = _a.getOptions, onResize = _a.onResize, onScroll = _a.onScroll, _b = _a.anchor, currentAnchor = _b === void 0 ? {} : _b, initialX = _a.initialX, initialY = _a.initialY, _c = _a.xMargin, xMargin = _c === void 0 ? 0 : _c, _d = _a.vwMargin, vwMargin = _d === void 0 ? 16 : _d, _e = _a.yMargin, yMargin = _e === void 0 ? 0 : _e, _f = _a.vhMargin, vhMargin = _f === void 0 ? 16 : _f, _g = _a.width, width = _g === void 0 ? "auto" : _g, onPositionChange = _a.onPositionChange, _h = _a.transformOrigin, transformOrigin = _h === void 0 ? false : _h, _j = _a.preventOverlap, preventOverlap = _j === void 0 ? false : _j, _k = _a.disableSwapping, disableSwapping = _k === void 0 ? false : _k, _l = _a.disableVHBounds, disableVHBounds = _l === void 0 ? false : _l;
     var _m = react_1.useState(), style = _m[0], setStyle = _m[1];
@@ -170,3 +170,3 @@ var _o = react_1.useState(null), element = _o[0], setElement = _o[1];
     return {
-        style: style,
+        style: __assign(__assign({}, style), propStyle),
         updateStyle: updateStyle,
@@ -173,0 +173,0 @@ onEnter: handleEnter,

package.json

 {
   "name": "@react-md/transition",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "A package for working with react-md to use some simple transitions.",
@@ -39,11 +39,11 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/portal": "^2.7.0",
-    "@react-md/theme": "^2.7.1",
-    "@react-md/utils": "^2.7.1",
-    "@types/react-transition-group": "^4.2.4",
-    "classnames": "^2.2.6",
+    "@react-md/portal": "^2.8.0",
+    "@react-md/theme": "^2.8.0",
+    "@react-md/utils": "^2.8.0",
+    "@types/react-transition-group": "^4.4.1",
+    "classnames": "^2.3.1",
     "react-transition-group": "^4.4.1"
   },
   "devDependencies": {
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-dom": "^17.0.1"
@@ -60,3 +60,3 @@ },
   },
-  "gitHead": "4fb8828b048fd2472096d5f55033cc4a7ba24e1a"
+  "gitHead": "20e013ae17ebccaaac74e246b9cde88df11d5c84"
 }

src/useFixedPositioning.ts

@@ -1,2 +0,8 @@
-import { CSSProperties, useCallback, useEffect, useState } from "react";
+import {
+  CSSProperties,
+  RefObject,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { TransitionProps } from "react-transition-group/Transition";
@@ -13,3 +19,12 @@ import {
 export type FixedToFunction = () => HTMLElement | null;
-export type FixedTo = string | HTMLElement | null | FixedToFunction;
+
+/**
+ * @remarks \@since 2.8.0 Supports `RefObject` implementation.
+ */
+export type FixedTo =
+  | RefObject<HTMLElement | null>
+  | FixedToFunction
+  | HTMLElement
+  | string
+  | null;
 export type OptionalFixedPositionOptions = Omit<
@@ -56,2 +71,19 @@ FixedPositionOptions,
   /**
+   * An optional style object to merge and override the generated fixed
+   * positioning styles.
+   *
+   * @example
+   * Overriding
+   * ```ts
+   * useFixedPositioning({
+   *   // this will force the `top` to always be `0`
+   *   style: { top: 0 },
+   * });
+   * ```
+   *
+   * @remarks \@since 2.8.0
+   */
+  style?: CSSProperties;
+
+  /**
    * An optional function to call to dynamically get the options when the node
@@ -69,3 +101,3 @@ * has been added to the DOM. This is helpful if you need to check sizes or other
    */
-  onResize?: (event: Event) => void;
+  onResize?(event: Event): void;
 
@@ -92,20 +124,23 @@ /**
 
-  const t = typeof fixedTo;
-  switch (t) {
-    case "string":
-      fixedTo = fixedTo as string;
-      return (
-        document.getElementById(fixedTo) ||
-        document.querySelector<HTMLElement>(fixedTo)
-      );
-    case "function":
-      return (fixedTo as FixedToFunction)();
-    default:
-      return fixedTo as HTMLElement;
+  if (typeof fixedTo === "string") {
+    return (
+      document.getElementById(fixedTo) ||
+      document.querySelector<HTMLElement>(fixedTo)
+    );
   }
+
+  if (typeof fixedTo === "function") {
+    return fixedTo();
+  }
+
+  if ("current" in fixedTo) {
+    return fixedTo.current;
+  }
+
+  return fixedTo;
 }
 
-interface ReturnValue extends Required<TransitionHooks> {
-  style?: CSSProperties;
-  updateStyle: () => void;
+interface FixedPositioningHookReturnValue extends Required<TransitionHooks> {
+  style: CSSProperties;
+  updateStyle(): void;
 }
@@ -127,2 +162,3 @@
 export function useFixedPositioning({
+  style: propStyle,
   onEnter,
@@ -149,3 +185,3 @@ onEntering,
   disableVHBounds = false,
-}: FixedPositioningOptions): ReturnValue {
+}: FixedPositioningOptions): FixedPositioningHookReturnValue {
   const [style, setStyle] = useState<CSSProperties | undefined>();
@@ -317,3 +353,3 @@ const [element, setElement] = useState<HTMLElement | null>(null);
   return {
-    style,
+    style: { ...style, ...propStyle },
     updateStyle,
@@ -320,0 +356,0 @@ onEnter: handleEnter,

types/useFixedPositioning.d.ts

@@ -1,6 +0,9 @@
-import { CSSProperties } from "react";
+import { CSSProperties, RefObject } from "react";
 import { TransitionProps } from "react-transition-group/Transition";
 import { FixedPositionOptions, PositionAnchor } from "@react-md/utils";
 export declare type FixedToFunction = () => HTMLElement | null;
-export declare type FixedTo = string | HTMLElement | null | FixedToFunction;
+/**
+ * @remarks \@since 2.8.0 Supports `RefObject` implementation.
+ */
+export declare type FixedTo = RefObject<HTMLElement | null> | FixedToFunction | HTMLElement | string | null;
 export declare type OptionalFixedPositionOptions = Omit<FixedPositionOptions, "container" | "element">;
@@ -27,2 +30,18 @@ export declare type GetFixedPositionOptions = (node: HTMLElement) => OptionalFixedPositionOptions;
     /**
+     * An optional style object to merge and override the generated fixed
+     * positioning styles.
+     *
+     * @example
+     * Overriding
+     * ```ts
+     * useFixedPositioning({
+     *   // this will force the `top` to always be `0`
+     *   style: { top: 0 },
+     * });
+     * ```
+     *
+     * @remarks \@since 2.8.0
+     */
+    style?: CSSProperties;
+    /**
      * An optional function to call to dynamically get the options when the node
@@ -39,3 +58,3 @@ * has been added to the DOM. This is helpful if you need to check sizes or other
      */
-    onResize?: (event: Event) => void;
+    onResize?(event: Event): void;
     /**
@@ -54,5 +73,5 @@ * An optional function to call when the element is in the DOM and a window scroll
 }
-interface ReturnValue extends Required<TransitionHooks> {
-    style?: CSSProperties;
-    updateStyle: () => void;
+interface FixedPositioningHookReturnValue extends Required<TransitionHooks> {
+    style: CSSProperties;
+    updateStyle(): void;
 }
@@ -72,3 +91,3 @@ /**
  */
-export declare function useFixedPositioning({ onEnter, onEntering, onEntered, onExited, fixedTo, getOptions, onResize, onScroll, anchor: currentAnchor, initialX, initialY, xMargin, vwMargin, yMargin, vhMargin, width, onPositionChange, transformOrigin, preventOverlap, disableSwapping, disableVHBounds, }: FixedPositioningOptions): ReturnValue;
+export declare function useFixedPositioning({ style: propStyle, onEnter, onEntering, onEntered, onExited, fixedTo, getOptions, onResize, onScroll, anchor: currentAnchor, initialX, initialY, xMargin, vwMargin, yMargin, vhMargin, width, onPositionChange, transformOrigin, preventOverlap, disableSwapping, disableVHBounds, }: FixedPositioningOptions): FixedPositioningHookReturnValue;
 export {};

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

382491

increased by0.71%

Lines of code

7245

increased by0.96%

Dependency changes

• Updated@react-md/portal@^2.8.0

• Updated@react-md/theme@^2.8.0

• Updated@react-md/utils@^2.8.0

• Updated@types/react-transition-group@^4.4.1

• Updatedclassnames@^2.3.1