react-resizable-panels 0.0.37 → 0.0.39

package/src/hooks/useWindowSplitterBehavior.ts

@@ -1,4 +1,4 @@
-import { RefObject, useEffect } from "react";
+import { RefObject, useEffect } from "../vendor/react";
 import { PRECISION } from "../constants";
 
 import { CommittedValues, PanelDataMap } from "../PanelGroup";
@@ -82,8 +82,14 @@ export function useWindowSplitterPanelGroupBehavior({
       handle.setAttribute("aria-valuenow", "" + Math.round(parseInt(flexGrow)));
 
       const onKeyDown = (event: KeyboardEvent) => {
+        if (event.defaultPrevented) {
+          return;
+        }
+
         switch (event.key) {
           case "Enter": {
+            event.preventDefault();
+
             const index = panelsArray.findIndex(
               (panel) => panel.id === idBefore
             );
@@ -144,7 +150,14 @@ export function useWindowSplitterPanelGroupBehavior({
     return () => {
       cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
     };
-  }, [groupId, panels, sizes]);
+  }, [
+    committedValuesRef,
+    groupId,
+    panels,
+    panelSizeBeforeCollapse,
+    setSizes,
+    sizes,
+  ]);
 }
 
 export function useWindowSplitterResizeHandlerBehavior({
@@ -167,6 +180,10 @@ export function useWindowSplitterResizeHandlerBehavior({
     }
 
     const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+
       switch (event.key) {
         case "ArrowDown":
         case "ArrowLeft":
@@ -174,10 +191,14 @@ export function useWindowSplitterResizeHandlerBehavior({
         case "ArrowUp":
         case "End":
         case "Home": {
+          event.preventDefault();
+
           resizeHandler(event);
           break;
         }
         case "F6": {
+          event.preventDefault();
+
           const handles = getResizeHandles();
           const index = getResizeHandleIndex(handleId);
 

package/src/types.ts

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import { RefObject } from "./vendor/react";
 
 export type Direction = "horizontal" | "vertical";
 

package/src/vendor/react.ts

@@ -0,0 +1,61 @@
+// This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
+// and limitations with ParcelJS parsing of the useId workaround (used below).
+// For the time being, all react-resizable-panels must import "react" with the "* as React" syntax.
+// To avoid mistakes, we use the ESLint "no-restricted-imports" to prevent "react" imports except in this file.
+// See https://github.com/bvaughn/react-resizable-panels/issues/118
+
+// eslint-disable-next-line no-restricted-imports
+import * as React from "react";
+
+// eslint-disable-next-line no-restricted-imports
+import type {
+  CSSProperties,
+  ElementType,
+  ForwardedRef,
+  MouseEvent,
+  ReactNode,
+  RefObject,
+  TouchEvent,
+} from "react";
+
+const {
+  createElement,
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} = React;
+
+// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = (React as any)["useId".toString()] as () => string;
+
+export {
+  createElement,
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+};
+
+export type {
+  CSSProperties,
+  ElementType,
+  ForwardedRef,
+  MouseEvent,
+  ReactNode,
+  RefObject,
+  TouchEvent,
+};