@react-md/transition - npm Package Compare versions

Comparing version 2.0.0-alpha.5 to 2.0.0-alpha.6

es/Collapse.js

@@ -6,4 +6,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -15,2 +17,5 @@ };
     var _a = providedProps, children = _a.children, props = __rest(_a, ["children"]);
+    // it's ok to dynamically do hooks here since I want the app to crash if the
+    // dev is swapping between a clonable child and a children renderer function
+    /* eslint-disable react-hooks/rules-of-hooks */
     if (isValidElement(children)) {
@@ -17,0 +22,0 @@ return useCollapsibleElement(children, props);

es/CrossFade.js

@@ -17,4 +17,6 @@ var __assign = (this && this.__assign) || function () {
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -21,0 +23,0 @@ };

es/useCollapseTransition.js

@@ -186,2 +186,4 @@ var __assign = (this && this.__assign) || function () {
         };
+        // disabled only want to be triggered on transition changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [entering, leaving]);
@@ -188,0 +190,0 @@ var mergedStyle = createTransitionStyle({

es/useFixedPositioning.js

@@ -17,9 +17,10 @@ var __assign = (this && this.__assign) || function () {
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
 import { useCallback, useRef, useState } from "react";
-import { useResizeListener } from "@react-md/sizing";
-import { getFixedPosition, useRefCache, useScrollListener, } from "@react-md/utils";
+import { getFixedPosition, useRefCache, useResizeListener, useScrollListener, } from "@react-md/utils";
 function getFixedTo(fixedTo) {
@@ -58,2 +59,4 @@ if (!fixedTo) {
     var element = useRef(null);
+    /* eslint-disable react-hooks/exhaustive-deps */
+    // these are all guarenteed to not change since using refs or non-updating callbacks
     var updateStyle = useCallback(function () {
@@ -60,0 +63,0 @@ var node = element.current;

lib/Collapse.js

@@ -7,4 +7,6 @@ "use strict";
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -17,2 +19,5 @@ };
     var _a = providedProps, children = _a.children, props = __rest(_a, ["children"]);
+    // it's ok to dynamically do hooks here since I want the app to crash if the
+    // dev is swapping between a clonable child and a children renderer function
+    /* eslint-disable react-hooks/rules-of-hooks */
     if (react_1.isValidElement(children)) {
@@ -19,0 +24,0 @@ return useCollapseTransition_1.useCollapsibleElement(children, props);

lib/CrossFade.js

@@ -18,4 +18,6 @@ "use strict";
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -22,0 +24,0 @@ };

lib/useCollapseTransition.js

@@ -196,2 +196,4 @@ "use strict";
         };
+        // disabled only want to be triggered on transition changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [entering, leaving]);
@@ -198,0 +200,0 @@ var mergedStyle = createTransitionStyle({

lib/useFixedPositioning.js

@@ -18,4 +18,6 @@ "use strict";
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
@@ -25,3 +27,2 @@ };
 var react_1 = require("react");
-var sizing_1 = require("@react-md/sizing");
 var utils_1 = require("@react-md/utils");
@@ -61,2 +62,4 @@ function getFixedTo(fixedTo) {
     var element = react_1.useRef(null);
+    /* eslint-disable react-hooks/exhaustive-deps */
+    // these are all guarenteed to not change since using refs or non-updating callbacks
     var updateStyle = react_1.useCallback(function () {
@@ -113,3 +116,3 @@ var node = element.current;
     }, []);
-    sizing_1.useResizeListener({
+    utils_1.useResizeListener({
         enabled: !!element.current,
@@ -116,0 +119,0 @@ onResize: function (event) {

package.json

 {
   "name": "@react-md/transition",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "description": "A package for working with react-md to use some simple transitions.",
@@ -39,5 +39,4 @@ "scripts": {
   "dependencies": {
-    "@react-md/sizing": "^2.0.0-alpha.5",
-    "@react-md/theme": "^2.0.0-alpha.5",
-    "@react-md/utils": "^2.0.0-alpha.5",
+    "@react-md/theme": "^2.0.0-alpha.6",
+    "@react-md/utils": "^2.0.0-alpha.6",
     "classnames": "^2.2.6"
@@ -54,3 +53,3 @@ },
   },
-  "gitHead": "3210cd3047162980716f1eb07cb25b364a241a70"
+  "gitHead": "e3db6427d83e1a66980662f3656557cc07dfabcc"
 }

README.md

@@ -11,1 +11,8 @@ # @react-md/transition
 ```
+
+The `rmd-transition-shadow-transition` mixin allows you to "performantly"
+transition between two box shadow values using the
+[opacity trick](http://tobiasahlin.com/blog/how-to-animate-box-shadow/). This
+mixin automatically creates a pseudo `::before` or `::after` element with the
+final box shadow and animates the opacity once one of the `$active-selectors`
+are triggered. The code below will help explain this part a bit more.

src/index.ts

@@ -13,2 +13,2 @@ export { default as Collapse } from "./Collapse";
 export * from "./useFixedPositioning";
-export * from "./types.d";
+export * from "./types";

src/useCollapseTransition.ts

@@ -11,2 +11,3 @@ import {
   useState,
+  MutableRefObject,
 } from "react";
@@ -170,3 +171,3 @@ import cn from "classnames";
   minPaddingBottom,
-}: EmptyCollapsedOptions) {
+}: EmptyCollapsedOptions): boolean {
   if (typeof isEmptyCollapsed === "boolean") {
@@ -190,3 +191,3 @@ return isEmptyCollapsed;
  */
-export function isRendered(options: RenderedOptions) {
+export function isRendered(options: RenderedOptions): boolean {
   const { collapsed, entering, leaving } = options;
@@ -262,3 +263,3 @@
   paddingBottom,
-}: TransitionStyleOptions) {
+}: TransitionStyleOptions): CSSProperties | undefined {
   if (
@@ -281,2 +282,11 @@ typeof maxHeight === "undefined" &&
 
+interface CollapseTransitionResult<E extends HTMLElement> {
+  transitionProps: {
+    style?: CSSProperties;
+    className: string;
+    ref: MutableRefObject<E | null>;
+  };
+  rendered: boolean;
+}
+
 /**
@@ -294,3 +304,3 @@ * Creates a collapse transition that will animate between expanded and collapsed
   options: CollapseOptions
-) {
+): CollapseTransitionResult<E> {
   const {
@@ -399,2 +409,4 @@ collapsed,
     };
+    // disabled only want to be triggered on transition changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entering, leaving]);
@@ -409,2 +421,3 @@
   });
+
   return {
@@ -440,5 +453,5 @@ transitionProps: {
 export function useCollapsibleElement(
-  element: ReactElement<any>,
+  element: ReactElement,
   options: CollapseOptions
-) {
+): ReactElement | null {
   const el = Children.only(element);
@@ -445,0 +458,0 @@ const { transitionProps, rendered } = useCollapseTransition({

src/useFixedPositioning.ts

 import { CSSProperties, useCallback, useRef, useState } from "react";
-import { TransitionProps } from "react-transition-group/Transition";
-import { useResizeListener } from "@react-md/sizing";
 import {
@@ -10,4 +8,6 @@ FixedPositionOptions,
   useRefCache,
+  useResizeListener,
   useScrollListener,
 } from "@react-md/utils";
+import { TransitionProps } from "react-transition-group/Transition";
 
@@ -35,5 +35,10 @@ export type FixedToFunction = () => HTMLElement | null;
 
+type TransitionHooks = Pick<
+  TransitionProps,
+  "onEnter" | "onEntering" | "onEntered" | "onExited"
+>;
+
 export interface FixedPositioningOptions
   extends OptionalFixedPositionOptions,
-    Pick<TransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExited"> {
+    TransitionHooks {
   /**
@@ -74,3 +79,3 @@ * The element that the transitioning node should be fixed to.
 
-function getFixedTo(fixedTo: FixedTo) {
+function getFixedTo(fixedTo: FixedTo): HTMLElement | null {
   if (!fixedTo) {
@@ -95,2 +100,6 @@ return null;
 
+interface ReturnValue extends Required<TransitionHooks> {
+  style?: CSSProperties;
+}
+
 /**
@@ -117,3 +126,3 @@ * This hook is used to automatically handle fixed positioning when an element is used alongside a
   ...remainingOptions
-}: FixedPositioningOptions) {
+}: FixedPositioningOptions): ReturnValue {
   const [style, setStyle] = useState<CSSProperties | undefined>();
@@ -125,2 +134,4 @@ const handlers = useRefCache({ onEnter, onEntering, onEntered, onExited });
 
+  /* eslint-disable react-hooks/exhaustive-deps */
+  // these are all guarenteed to not change since using refs or non-updating callbacks
   const updateStyle = useCallback(() => {
@@ -127,0 +138,0 @@ const node = element.current;

types/Collapse.d.ts

@@ -19,9 +19,9 @@ import { CSSProperties, FC, ReactElement, RefObject } from "react";
      */
-    ref: RefObject<any>;
+    ref: RefObject<HTMLElement>;
 }
-export declare type CollapseChildrenRenderer = (props: CollapseChildrenProps) => ReactElement<any>;
+export declare type CollapseChildrenRenderer = (props: CollapseChildrenProps) => ReactElement;
 export interface CollapseProps extends CollapseOptions {
-    children: ReactElement<any> | CollapseChildrenRenderer;
+    children: ReactElement<HTMLElement> | CollapseChildrenRenderer;
 }
 declare const Collapse: FC<CollapseProps>;
 export default Collapse;

types/CrossFade.d.ts

 import { FC } from "react";
 import { CSSTransition } from "react-transition-group";
-export interface CrossFadeProps extends Partial<CSSTransition.CSSTransitionProps> {
-}
+export declare type CrossFadeProps = Partial<CSSTransition.CSSTransitionProps>;
 /**
@@ -6,0 +5,0 @@ * This is a very simpel wrapper for the CSSTransition component from

types/index.d.ts

@@ -8,2 +8,2 @@ export { default as Collapse } from "./Collapse";
 export * from "./useFixedPositioning";
-export * from "./types.d";
+export * from "./types";

types/types.d.ts

@@ -1,82 +0,65 @@
-// these were copied from @types/react-transition-group and renamed to be prefixed with Transition
-// since they currently aren't exported
-export type TransitionEnterHandler = (
-  node: HTMLElement,
-  appearing: boolean
-) => void;
-export type TransitionExitHandler = (node: HTMLElement) => void;
-
-export type TransitionTimeout = number | { enter?: number; exit?: number };
-
-// this was copied over just for simplicity and not requiring adding react-transition-group for this
-export type CSSTransitionClassNames =
-  | string
-  | {
-      appear?: string;
-      appearActive?: string;
-      enter?: string;
-      enterActive?: string;
-      enterDone?: string;
-      exit?: string;
-      exitActive?: string;
-      exitDone?: string;
-    };
-
+export declare type TransitionEnterHandler = (node: HTMLElement, appearing: boolean) => void;
+export declare type TransitionExitHandler = (node: HTMLElement) => void;
+export declare type TransitionTimeout = number | {
+    enter?: number;
+    exit?: number;
+};
+export declare type CSSTransitionClassNames = string | {
+    appear?: string;
+    appearActive?: string;
+    enter?: string;
+    enterActive?: string;
+    enterDone?: string;
+    exit?: string;
+    exitActive?: string;
+    exitDone?: string;
+};
 export interface TransitionProps {
-  /**
-   * The transition duration for the overlay. This should not be changed unless you manually change the
-   * `$rmd-overlay-transition-duration` scss variable.
-   */
-  timeout?: TransitionTimeout;
-
-  /**
-   * Pass-down prop to the `Transition` component from react-transition-group. By default, the overlay will
-   * not be rendered in the DOM until the `visible` prop is `true` but this can be changed by setting this
-   * prop to `false`.
-   */
-  mountOnEnter?: boolean;
-
-  /**
-   * Pass-down prop to the `Transition` component from react-transition-group. By default, the overlay will
-   * be removed from the DOM when the `visible` prop is `false` but this can be changed by setting this
-   * prop to `false`.
-   */
-  unmountOnExit?: boolean;
-
-  /**
-   * Pass-down prop to the `Transition` component from react-transition-group.
-   */
-  onEnter?: TransitionEnterHandler;
-
-  /**
-   * Pass-down prop to the `Transition` component from react-transition-group.
-   */
-  onEntering?: TransitionEnterHandler;
-
-  /**
-   * Pass-down prop to the `Transition` component from react-transition-group.
-   */
-  onEntered?: TransitionEnterHandler;
-
-  /**
-   * Pass-down prop to the `Transition` component from react-transition-group.
-   */
-  onExit?: TransitionExitHandler;
-
-  /**
-   * Pass-down prop to the `Transition` component from react-transition-group.
-   */
-  onExiting?: TransitionExitHandler;
-
-  /**
-   * Pass-down prop to the `Transition` component from react-transition-group.
-   */
-  onExited?: TransitionExitHandler;
+    /**
+     * The transition duration for the overlay. This should not be changed unless you manually change the
+     * `$rmd-overlay-transition-duration` scss variable.
+     */
+    timeout?: TransitionTimeout;
+    /**
+     * Pass-down prop to the `Transition` component from react-transition-group. By default, the overlay will
+     * not be rendered in the DOM until the `visible` prop is `true` but this can be changed by setting this
+     * prop to `false`.
+     */
+    mountOnEnter?: boolean;
+    /**
+     * Pass-down prop to the `Transition` component from react-transition-group. By default, the overlay will
+     * be removed from the DOM when the `visible` prop is `false` but this can be changed by setting this
+     * prop to `false`.
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Pass-down prop to the `Transition` component from react-transition-group.
+     */
+    onEnter?: TransitionEnterHandler;
+    /**
+     * Pass-down prop to the `Transition` component from react-transition-group.
+     */
+    onEntering?: TransitionEnterHandler;
+    /**
+     * Pass-down prop to the `Transition` component from react-transition-group.
+     */
+    onEntered?: TransitionEnterHandler;
+    /**
+     * Pass-down prop to the `Transition` component from react-transition-group.
+     */
+    onExit?: TransitionExitHandler;
+    /**
+     * Pass-down prop to the `Transition` component from react-transition-group.
+     */
+    onExiting?: TransitionExitHandler;
+    /**
+     * Pass-down prop to the `Transition` component from react-transition-group.
+     */
+    onExited?: TransitionExitHandler;
 }
-
 export interface CSSTransitionProps extends TransitionProps {
-  /**
-   * The class names to use during the different parts of the animation.
-   */
-  classNames?: CSSTransitionClassNames;
+    /**
+     * The class names to use during the different parts of the animation.
+     */
+    classNames?: CSSTransitionClassNames;
 }

types/useCollapseTransition.d.ts

@@ -1,2 +0,2 @@
-import { CSSProperties, Dispatch, ReactElement, SetStateAction } from "react";
+import { CSSProperties, Dispatch, ReactElement, SetStateAction, MutableRefObject } from "react";
 export interface CollapseOptions {
@@ -138,2 +138,10 @@ /**
 export declare function createTransitionStyle({ style, transitionDuration, maxHeight, paddingTop, paddingBottom, }: TransitionStyleOptions): CSSProperties | undefined;
+interface CollapseTransitionResult<E extends HTMLElement> {
+    transitionProps: {
+        style?: CSSProperties;
+        className: string;
+        ref: MutableRefObject<E | null>;
+    };
+    rendered: boolean;
+}
 /**
@@ -149,10 +157,3 @@ * Creates a collapse transition that will animate between expanded and collapsed
  */
-export declare function useCollapseTransition<E extends HTMLElement>(options: CollapseOptions): {
-    transitionProps: {
-        style: CSSProperties | undefined;
-        className: string;
-        ref: import("react").MutableRefObject<E | null>;
-    };
-    rendered: boolean;
-};
+export declare function useCollapseTransition<E extends HTMLElement>(options: CollapseOptions): CollapseTransitionResult<E>;
 /**
@@ -169,3 +170,3 @@ * This hook is used to inject the required collapse transition props into
  */
-export declare function useCollapsibleElement(element: ReactElement<any>, options: CollapseOptions): ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null;
+export declare function useCollapsibleElement(element: ReactElement, options: CollapseOptions): ReactElement | null;
 export {};

types/useFixedPositioning.d.ts

 import { CSSProperties } from "react";
+import { FixedPositionOptions, Omit, PositionAnchor } from "@react-md/utils";
 import { TransitionProps } from "react-transition-group/Transition";
-import { FixedPositionOptions, Omit, PositionAnchor } from "@react-md/utils";
 export declare type FixedToFunction = () => HTMLElement | null;
@@ -10,3 +10,4 @@ export declare type FixedTo = string | HTMLElement | null | FixedToFunction;
 export declare type OnFixedPositionScroll = (event: Event, element: HTMLElement | null, fixedTo: HTMLElement | null) => void;
-export interface FixedPositioningOptions extends OptionalFixedPositionOptions, Pick<TransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExited"> {
+declare type TransitionHooks = Pick<TransitionProps, "onEnter" | "onEntering" | "onEntered" | "onExited">;
+export interface FixedPositioningOptions extends OptionalFixedPositionOptions, TransitionHooks {
     /**
@@ -42,2 +43,5 @@ * The element that the transitioning node should be fixed to.
 }
+interface ReturnValue extends Required<TransitionHooks> {
+    style?: CSSProperties;
+}
 /**
@@ -54,8 +58,3 @@ * This hook is used to automatically handle fixed positioning when an element is used alongside a
  */
-export default function useFixedPositioning({ onEnter, onEntering, onEntered, onExited, fixedTo, getOptions, onResize, onScroll, ...remainingOptions }: FixedPositioningOptions): {
-    style: CSSProperties | undefined;
-    onEnter: (node: HTMLElement, appear: boolean) => void;
-    onEntering: (node: HTMLElement, appear: boolean) => void;
-    onEntered: (node: HTMLElement, appear: boolean) => void;
-    onExited: (node: HTMLElement) => void;
-};
+export default function useFixedPositioning({ onEnter, onEntering, onEntered, onExited, fixedTo, getOptions, onResize, onScroll, ...remainingOptions }: FixedPositioningOptions): ReturnValue;
+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

155642

increased by6.45%

Dependency count

5

decreased by-16.67%

Number of package files

59

increased by3.51%

Lines of code

2624

increased by0.15%

Number of lines in readme file

18

increased by63.64%

Dependency changes

• - Removed@react-md/sizing@^2.0.0-alpha.5

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

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