npm - react-resizable-panels - Versions diffs - 2.0.5 → 2.0.6 - Mend

react-resizable-panels 2.0.5 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # Changelog
+## 2.0.6
+- Replace `useLayoutEffect` usage with SSR-safe wrapper hook (#294)
 ## 2.0.5
 - Resize handle hit detection considers [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) when determining hit detection (#291)

package/dist/declarations/src/vendor/react.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactElement, ReactNode, RefObject, TouchEvent } from "react";
-declare const createElement: typeof React.createElement, createContext: typeof React.createContext, createRef: typeof React.createRef, forwardRef: typeof React.forwardRef, useCallback: typeof React.useCallback, useContext: typeof React.useContext, useEffect: typeof React.useEffect, useImperativeHandle: typeof React.useImperativeHandle, useLayoutEffect: typeof React.useLayoutEffect, useMemo: typeof React.useMemo, useRef: typeof React.useRef, useState: typeof React.useState;
+declare const createElement: typeof React.createElement, createContext: typeof React.createContext, createRef: typeof React.createRef, forwardRef: typeof React.forwardRef, useCallback: typeof React.useCallback, useContext: typeof React.useContext, useEffect: typeof React.useEffect, useImperativeHandle: typeof React.useImperativeHandle, useMemo: typeof React.useMemo, useRef: typeof React.useRef, useState: typeof React.useState;
 declare const useId: () => string;
-export { createElement, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, };
+declare const useLayoutEffect_do_not_use_directly: typeof React.useLayoutEffect;
+export { createElement, createContext, createRef, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect_do_not_use_directly, useMemo, useRef, useState, };
 export type { CSSProperties, ElementType, ForwardedRef, HTMLAttributes, MouseEvent, PropsWithChildren, ReactElement, ReactNode, RefObject, TouchEvent, };

package/dist/react-resizable-panels.browser.cjs.js CHANGED Viewed

@@ -46,11 +46,12 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
-const useIsomorphicLayoutEffect = useLayoutEffect ;
+const useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -2098,7 +2099,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

package/dist/react-resizable-panels.browser.development.cjs.js CHANGED Viewed

@@ -46,11 +46,12 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
-const useIsomorphicLayoutEffect = useLayoutEffect ;
+const useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -2204,7 +2205,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

package/dist/react-resizable-panels.browser.development.esm.js CHANGED Viewed

@@ -22,11 +22,12 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
-const useIsomorphicLayoutEffect = useLayoutEffect ;
+const useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -2180,7 +2181,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

package/dist/react-resizable-panels.browser.esm.js CHANGED Viewed

@@ -22,11 +22,12 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
-const useIsomorphicLayoutEffect = useLayoutEffect ;
+const useIsomorphicLayoutEffect = useLayoutEffect_do_not_use_directly ;
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -2074,7 +2075,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

package/dist/react-resizable-panels.cjs.js CHANGED Viewed

@@ -48,11 +48,12 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -2100,7 +2101,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

package/dist/react-resizable-panels.development.cjs.js CHANGED Viewed

@@ -48,11 +48,12 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React__namespace["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -2211,7 +2212,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

package/dist/react-resizable-panels.development.esm.js CHANGED Viewed

@@ -24,11 +24,12 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -2187,7 +2188,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

package/dist/react-resizable-panels.development.node.cjs.js CHANGED Viewed

@@ -1980,9 +1980,6 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);

package/dist/react-resizable-panels.development.node.esm.js CHANGED Viewed

@@ -1956,9 +1956,6 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);

package/dist/react-resizable-panels.esm.js CHANGED Viewed

@@ -24,11 +24,12 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = React["useId".toString()];
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 const PanelGroupContext = createContext(null);
 PanelGroupContext.displayName = "PanelGroupContext";
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect_do_not_use_directly : () => {};
 const wrappedUseId = typeof useId === "function" ? useId : () => null;
 let counter = 0;
@@ -2076,7 +2077,7 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });
   useEffect(() => {

package/dist/react-resizable-panels.node.cjs.js CHANGED Viewed

@@ -1879,9 +1879,6 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);

package/dist/react-resizable-panels.node.esm.js CHANGED Viewed

@@ -1855,9 +1855,6 @@ function PanelResizeHandle({
   const committedValuesRef = useRef({
     state
   });
-  useLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "React components for resizable panel groups/layouts",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "license": "MIT",

package/src/PanelResizeHandle.ts CHANGED Viewed

@@ -7,7 +7,6 @@ import {
   ReactElement,
   useContext,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
 } from "./vendor/react";
@@ -24,6 +23,7 @@ import {
   ResizeHandlerAction,
 } from "./PanelResizeHandleRegistry";
 import { assert } from "./utils/assert";
+import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
 export type PanelResizeHandleOnDragging = (isDragging: boolean) => void;
 export type ResizeHandlerState = "drag" | "hover" | "inactive";
@@ -97,7 +97,7 @@ export function PanelResizeHandle({
     state,
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     committedValuesRef.current.state = state;
   });

package/src/hooks/useIsomorphicEffect.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import { isBrowser } from "#is-browser";
-import { useLayoutEffect } from "../vendor/react";
+import { useLayoutEffect_do_not_use_directly } from "../vendor/react";
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+const useIsomorphicLayoutEffect = isBrowser
+  ? useLayoutEffect_do_not_use_directly
+  : () => {};
 export default useIsomorphicLayoutEffect;

package/src/vendor/react.ts CHANGED Viewed

@@ -39,6 +39,8 @@ const {
 // `toString()` prevents bundlers from trying to `import { useId } from 'react'`
 const useId = (React as any)["useId".toString()] as () => string;
+const useLayoutEffect_do_not_use_directly = useLayoutEffect;
 export {
   createElement,
   createContext,
@@ -49,7 +51,7 @@ export {
   useEffect,
   useId,
   useImperativeHandle,
-  useLayoutEffect,
+  useLayoutEffect_do_not_use_directly,
   useMemo,
   useRef,
   useState,