@restart/ui - npm Package Compare versions

Comparing version 1.5.1 to 1.5.2

cjs/ImperativeTransition.d.ts

@@ -14,10 +14,16 @@ import React from 'react';
 }
-export declare function useTransition({ in: inProp, onTransition, initial, }: UseTransitionOptions): React.RefObject<HTMLElement>;
+export declare function useTransition({ in: inProp, onTransition, }: UseTransitionOptions): React.RefObject<HTMLElement>;
 export interface ImperativeTransitionProps extends TransitionProps {
     transition: TransitionHandler;
+    appear: true;
+    mountOnEnter: true;
+    unmountOnExit: true;
 }
 /**
  * Adapts an imperative transition function to a subset of the RTG `<Transition>` component API.
+ *
+ * ImperativeTransition does not support mounting options or `appear` at the moment, meaning
+ * that it always acts like: `mountOnEnter={true} unmountOnExit={true} appear={true}`
  */
-export default function ImperativeTransition({ children, in: inProp, appear, onExited, onEntered, transition, }: ImperativeTransitionProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export declare function renderTransition(Component: TransitionComponent | undefined, runTransition: TransitionHandler | undefined, props: TransitionProps): JSX.Element;
+export default function ImperativeTransition({ children, in: inProp, onExited, onEntered, transition, }: ImperativeTransitionProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare function renderTransition(Component: TransitionComponent | undefined, runTransition: TransitionHandler | undefined, props: TransitionProps & Omit<ImperativeTransitionProps, 'transition'>): JSX.Element;

cjs/ImperativeTransition.js

@@ -10,2 +10,3 @@ "use strict";
 var _react = _interopRequireWildcard(require("react"));
+var _NoopTransition = _interopRequireDefault(require("./NoopTransition"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -17,4 +18,3 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
   in: inProp,
-  onTransition,
-  initial = true
+  onTransition
 }) {
@@ -25,3 +25,3 @@ const ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    if (isInitialRef.current && !initial) {
+    if (!ref.current) {
       return;
@@ -34,5 +34,6 @@ }
     });
-  }, [inProp, initial, handleTransition]);
+  }, [inProp, handleTransition]);
   (0, _react.useEffect)(() => {
     isInitialRef.current = false;
+    // this is for strict mode
     return () => {
@@ -46,2 +47,5 @@ isInitialRef.current = true;
  * Adapts an imperative transition function to a subset of the RTG `<Transition>` component API.
+ *
+ * ImperativeTransition does not support mounting options or `appear` at the moment, meaning
+ * that it always acts like: `mountOnEnter={true} unmountOnExit={true} appear={true}`
  */
@@ -51,3 +55,2 @@ function ImperativeTransition({
   in: inProp,
-  appear,
   onExited,
@@ -57,8 +60,14 @@ onEntered,
 }) {
+  const [exited, setExited] = (0, _react.useState)(!inProp);
   const ref = useTransition({
     in: !!inProp,
-    initial: appear,
     onTransition: options => {
       const onFinish = () => {
-        if (options.in) onEntered == null ? void 0 : onEntered(options.element, options.initial);else onExited == null ? void 0 : onExited(options.element);
+        if (options.in) {
+          setExited(false);
+          onEntered == null ? void 0 : onEntered(options.element, options.initial);
+        } else {
+          setExited(true);
+          onExited == null ? void 0 : onExited(options.element);
+        }
       };
@@ -69,3 +78,3 @@ Promise.resolve(transition(options)).then(onFinish);
   const combinedRef = (0, _useMergedRefs.default)(ref, children.ref);
-  return /*#__PURE__*/(0, _react.cloneElement)(children, {
+  return exited && !inProp ? null : /*#__PURE__*/(0, _react.cloneElement)(children, {
     ref: combinedRef
@@ -83,3 +92,3 @@ });
   }
-  return props.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoopTransition.default, Object.assign({}, props));
 }

cjs/Modal.js

@@ -90,3 +90,2 @@ "use strict";
   const lastFocusRef = (0, React.useRef)(null);
-  const hasTransition = !!(transition || runTransition);
   (0, React.useImperativeHandle)(ref, () => modal, [modal]);
@@ -96,5 +95,5 @@ if (_canUseDOM.default && !prevShow && show) {
   }
-  if (!hasTransition && !show && !exited) {
-    setExited(true);
-  } else if (show && exited) {
+
+  // TODO: I think this needs to be in an effect
+  if (show && exited) {
     setExited(false);
@@ -189,3 +188,3 @@ }
   };
-  if (!container || !(show || hasTransition && !exited)) {
+  if (!container) {
     return null;
@@ -210,2 +209,3 @@ }
     unmountOnExit: true,
+    mountOnEnter: true,
     appear: true,
@@ -230,2 +230,3 @@ in: !!show,
       appear: true,
+      mountOnEnter: true,
       unmountOnExit: true,
@@ -232,0 +233,0 @@ children: backdropElement

cjs/NoopTransition.d.ts

 /// <reference types="react" />
 import { TransitionProps } from './types';
-declare function NoopTransition({ children, in: inProp, mountOnEnter, unmountOnExit, }: TransitionProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+declare function NoopTransition({ children, in: inProp, onExited, mountOnEnter, unmountOnExit, }: TransitionProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default NoopTransition;

cjs/NoopTransition.js

@@ -5,20 +5,26 @@ "use strict";
 exports.default = void 0;
+var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
+var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs"));
 var _react = require("react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function NoopTransition({
   children,
   in: inProp,
+  onExited,
   mountOnEnter,
   unmountOnExit
 }) {
+  const ref = (0, _react.useRef)(null);
   const hasEnteredRef = (0, _react.useRef)(inProp);
+  const handleExited = (0, _useEventCallback.default)(onExited);
   (0, _react.useEffect)(() => {
-    if (inProp) hasEnteredRef.current = true;
-  }, [inProp]);
-  if (inProp) return children;
-
-  // not in
-  //
-  // if (!mountOnEnter && !unmountOnExit) {
-  //   return children;
-  // }
+    if (inProp) hasEnteredRef.current = true;else {
+      handleExited(ref.current);
+    }
+  }, [inProp, handleExited]);
+  const combinedRef = (0, _useMergedRefs.default)(ref, children.ref);
+  const child = /*#__PURE__*/(0, _react.cloneElement)(children, {
+    ref: combinedRef
+  });
+  if (inProp) return child;
   if (unmountOnExit) {
@@ -30,5 +36,5 @@ return null;
   }
-  return children;
+  return child;
 }
 var _default = NoopTransition;
 exports.default = _default;

cjs/Overlay.js

@@ -37,3 +37,2 @@ "use strict";
   const [exited, setExited] = (0, React.useState)(!props.show);
-  const hasTransition = !!(Transition || runTransition);
   const popper = (0, _usePopper.default)(target, rootElement, (0, _mergeOptionsWithPopperConfig.default)({
@@ -48,6 +47,6 @@ placement,
   }));
-  if (props.show) {
-    if (exited) setExited(false);
-  } else if (!hasTransition && !exited) {
-    setExited(true);
+
+  // TODO: I think this needs to be in an effect
+  if (props.show && exited) {
+    setExited(false);
   }
@@ -62,3 +61,3 @@ const handleHidden = (...args) => {
   // Don't un-render the overlay while it's transitioning out.
-  const mountOverlay = props.show || hasTransition && !exited;
+  const mountOverlay = props.show || !exited;
   (0, _useRootClose.default)(rootElement, props.onHide, {
@@ -93,2 +92,5 @@ disabled: !props.rootClose || props.rootCloseDisabled,
     in: !!props.show,
+    appear: true,
+    mountOnEnter: true,
+    unmountOnExit: true,
     children: child,
@@ -95,0 +97,0 @@ onExit,

esm/ImperativeTransition.d.ts

@@ -14,10 +14,16 @@ import React from 'react';
 }
-export declare function useTransition({ in: inProp, onTransition, initial, }: UseTransitionOptions): React.RefObject<HTMLElement>;
+export declare function useTransition({ in: inProp, onTransition, }: UseTransitionOptions): React.RefObject<HTMLElement>;
 export interface ImperativeTransitionProps extends TransitionProps {
     transition: TransitionHandler;
+    appear: true;
+    mountOnEnter: true;
+    unmountOnExit: true;
 }
 /**
  * Adapts an imperative transition function to a subset of the RTG `<Transition>` component API.
+ *
+ * ImperativeTransition does not support mounting options or `appear` at the moment, meaning
+ * that it always acts like: `mountOnEnter={true} unmountOnExit={true} appear={true}`
  */
-export default function ImperativeTransition({ children, in: inProp, appear, onExited, onEntered, transition, }: ImperativeTransitionProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export declare function renderTransition(Component: TransitionComponent | undefined, runTransition: TransitionHandler | undefined, props: TransitionProps): JSX.Element;
+export default function ImperativeTransition({ children, in: inProp, onExited, onEntered, transition, }: ImperativeTransitionProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare function renderTransition(Component: TransitionComponent | undefined, runTransition: TransitionHandler | undefined, props: TransitionProps & Omit<ImperativeTransitionProps, 'transition'>): JSX.Element;

esm/ImperativeTransition.js

 import useMergedRefs from '@restart/hooks/useMergedRefs';
 import useEventCallback from '@restart/hooks/useEventCallback';
-import React, { useRef, useEffect, cloneElement } from 'react';
+import React, { useRef, useEffect, cloneElement, useState } from 'react';
+import NoopTransition from './NoopTransition';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function useTransition({
   in: inProp,
-  onTransition,
-  initial = true
+  onTransition
 }) {
@@ -14,3 +14,3 @@ const ref = useRef(null);
   useEffect(() => {
-    if (isInitialRef.current && !initial) {
+    if (!ref.current) {
       return;
@@ -23,5 +23,6 @@ }
     });
-  }, [inProp, initial, handleTransition]);
+  }, [inProp, handleTransition]);
   useEffect(() => {
     isInitialRef.current = false;
+    // this is for strict mode
     return () => {
@@ -35,2 +36,5 @@ isInitialRef.current = true;
  * Adapts an imperative transition function to a subset of the RTG `<Transition>` component API.
+ *
+ * ImperativeTransition does not support mounting options or `appear` at the moment, meaning
+ * that it always acts like: `mountOnEnter={true} unmountOnExit={true} appear={true}`
  */
@@ -40,3 +44,2 @@ export default function ImperativeTransition({
   in: inProp,
-  appear,
   onExited,
@@ -46,8 +49,14 @@ onEntered,
 }) {
+  const [exited, setExited] = useState(!inProp);
   const ref = useTransition({
     in: !!inProp,
-    initial: appear,
     onTransition: options => {
       const onFinish = () => {
-        if (options.in) onEntered == null ? void 0 : onEntered(options.element, options.initial);else onExited == null ? void 0 : onExited(options.element);
+        if (options.in) {
+          setExited(false);
+          onEntered == null ? void 0 : onEntered(options.element, options.initial);
+        } else {
+          setExited(true);
+          onExited == null ? void 0 : onExited(options.element);
+        }
       };
@@ -58,3 +67,3 @@ Promise.resolve(transition(options)).then(onFinish);
   const combinedRef = useMergedRefs(ref, children.ref);
-  return /*#__PURE__*/cloneElement(children, {
+  return exited && !inProp ? null : /*#__PURE__*/cloneElement(children, {
     ref: combinedRef
@@ -72,3 +81,3 @@ });
   }
-  return props.children;
+  return /*#__PURE__*/_jsx(NoopTransition, Object.assign({}, props));
 }

esm/Modal.js

@@ -88,3 +88,2 @@ const _excluded = ["show", "role", "className", "style", "children", "backdrop", "keyboard", "onBackdropClick", "onEscapeKeyDown", "transition", "runTransition", "backdropTransition", "runBackdropTransition", "autoFocus", "enforceFocus", "restoreFocus", "restoreFocusOptions", "renderDialog", "renderBackdrop", "manager", "container", "onShow", "onHide", "onExit", "onExited", "onExiting", "onEnter", "onEntering", "onEntered"];
   const lastFocusRef = useRef(null);
-  const hasTransition = !!(transition || runTransition);
   useImperativeHandle(ref, () => modal, [modal]);
@@ -94,5 +93,5 @@ if (canUseDOM && !prevShow && show) {
   }
-  if (!hasTransition && !show && !exited) {
-    setExited(true);
-  } else if (show && exited) {
+
+  // TODO: I think this needs to be in an effect
+  if (show && exited) {
     setExited(false);
@@ -187,3 +186,3 @@ }
   };
-  if (!container || !(show || hasTransition && !exited)) {
+  if (!container) {
     return null;
@@ -208,2 +207,3 @@ }
     unmountOnExit: true,
+    mountOnEnter: true,
     appear: true,
@@ -228,2 +228,3 @@ in: !!show,
       appear: true,
+      mountOnEnter: true,
       unmountOnExit: true,
@@ -230,0 +231,0 @@ children: backdropElement

esm/NoopTransition.d.ts

 /// <reference types="react" />
 import { TransitionProps } from './types';
-declare function NoopTransition({ children, in: inProp, mountOnEnter, unmountOnExit, }: TransitionProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+declare function NoopTransition({ children, in: inProp, onExited, mountOnEnter, unmountOnExit, }: TransitionProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
 export default NoopTransition;

esm/NoopTransition.js

@@ -1,19 +0,24 @@
-import { useEffect, useRef } from 'react';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import { cloneElement, useEffect, useRef } from 'react';
 function NoopTransition({
   children,
   in: inProp,
+  onExited,
   mountOnEnter,
   unmountOnExit
 }) {
+  const ref = useRef(null);
   const hasEnteredRef = useRef(inProp);
+  const handleExited = useEventCallback(onExited);
   useEffect(() => {
-    if (inProp) hasEnteredRef.current = true;
-  }, [inProp]);
-  if (inProp) return children;
-
-  // not in
-  //
-  // if (!mountOnEnter && !unmountOnExit) {
-  //   return children;
-  // }
+    if (inProp) hasEnteredRef.current = true;else {
+      handleExited(ref.current);
+    }
+  }, [inProp, handleExited]);
+  const combinedRef = useMergedRefs(ref, children.ref);
+  const child = /*#__PURE__*/cloneElement(children, {
+    ref: combinedRef
+  });
+  if (inProp) return child;
   if (unmountOnExit) {
@@ -25,4 +30,4 @@ return null;
   }
-  return children;
+  return child;
 }
 export default NoopTransition;

esm/Overlay.js

@@ -31,3 +31,2 @@ import * as React from 'react';
   const [exited, setExited] = useState(!props.show);
-  const hasTransition = !!(Transition || runTransition);
   const popper = usePopper(target, rootElement, mergeOptionsWithPopperConfig({
@@ -42,6 +41,6 @@ placement,
   }));
-  if (props.show) {
-    if (exited) setExited(false);
-  } else if (!hasTransition && !exited) {
-    setExited(true);
+
+  // TODO: I think this needs to be in an effect
+  if (props.show && exited) {
+    setExited(false);
   }
@@ -56,3 +55,3 @@ const handleHidden = (...args) => {
   // Don't un-render the overlay while it's transitioning out.
-  const mountOverlay = props.show || hasTransition && !exited;
+  const mountOverlay = props.show || !exited;
   useRootClose(rootElement, props.onHide, {
@@ -87,2 +86,5 @@ disabled: !props.rootClose || props.rootCloseDisabled,
     in: !!props.show,
+    appear: true,
+    mountOnEnter: true,
+    unmountOnExit: true,
     children: child,
@@ -89,0 +91,0 @@ onExit,

package.json

 {
   "name": "@restart/ui",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Utilities for creating robust overlay components",
@@ -5,0 +5,0 @@ "author": {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

347909

increased by0.62%

Lines of code

8330

increased by0.54%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes