@alisowski/react-resizable-panels - npm Package Compare versions

Comparing version 0.1.22 to 0.1.23

dist/alisowski-react-resizable-panels.browser.cjs.js

@@ -78,3 +78,4 @@ 'use strict';
   style: styleFromProps = {},
-  tagName: Type = "div"
+  tagName: Type = "div",
+  initialLayout
 }) {
@@ -115,3 +116,3 @@ const context = useContext(PanelGroupContext);
   });
-  const style = getPanelStyle(panelId, defaultSize);
+  const style = getPanelStyle(panelId, defaultSize, initialLayout);
   const committedValuesRef = useRef({
@@ -1371,3 +1372,3 @@ size: parseSizeFromStyle(style)
   }, [groupId, sizes]);
-  const getPanelStyle = useCallback((id, defaultSize) => {
+  const getPanelStyle = useCallback((id, defaultSize, initialLayout) => {
     const {
@@ -1381,5 +1382,23 @@ panels
     if (panels.size === 0) {
+      if (defaultSize != null && groupSizeRef.current) {
+        return {
+          flexBasis: 0,
+          flexGrow: normalizePixelValue(units, groupSizeRef.current, defaultSize),
+          flexShrink: 1,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
+      if (initialLayout === "tight") {
+        return {
+          flexBasis: units === "pixels" && defaultSize != null ? `${defaultSize}px` : "auto",
+          flexGrow: 0,
+          flexShrink: 0,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
       return {
         flexBasis: 0,
-        flexGrow: defaultSize != null && groupSizeRef.current ? normalizePixelValue(units, groupSizeRef.current, defaultSize) : 1,
+        flexGrow: 1,
         flexShrink: 1,
@@ -1386,0 +1405,0 @@ // Without this, Panel sizes may be unintentionally overridden by their content.

dist/alisowski-react-resizable-panels.browser.esm.js

@@ -54,3 +54,4 @@ import * as React from 'react';
   style: styleFromProps = {},
-  tagName: Type = "div"
+  tagName: Type = "div",
+  initialLayout
 }) {
@@ -91,3 +92,3 @@ const context = useContext(PanelGroupContext);
   });
-  const style = getPanelStyle(panelId, defaultSize);
+  const style = getPanelStyle(panelId, defaultSize, initialLayout);
   const committedValuesRef = useRef({
@@ -1347,3 +1348,3 @@ size: parseSizeFromStyle(style)
   }, [groupId, sizes]);
-  const getPanelStyle = useCallback((id, defaultSize) => {
+  const getPanelStyle = useCallback((id, defaultSize, initialLayout) => {
     const {
@@ -1357,5 +1358,23 @@ panels
     if (panels.size === 0) {
+      if (defaultSize != null && groupSizeRef.current) {
+        return {
+          flexBasis: 0,
+          flexGrow: normalizePixelValue(units, groupSizeRef.current, defaultSize),
+          flexShrink: 1,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
+      if (initialLayout === "tight") {
+        return {
+          flexBasis: units === "pixels" && defaultSize != null ? `${defaultSize}px` : "auto",
+          flexGrow: 0,
+          flexShrink: 0,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
       return {
         flexBasis: 0,
-        flexGrow: defaultSize != null && groupSizeRef.current ? normalizePixelValue(units, groupSizeRef.current, defaultSize) : 1,
+        flexGrow: 1,
         flexShrink: 1,
@@ -1362,0 +1381,0 @@ // Without this, Panel sizes may be unintentionally overridden by their content.

dist/alisowski-react-resizable-panels.cjs.js

@@ -80,3 +80,4 @@ 'use strict';
   style: styleFromProps = {},
-  tagName: Type = "div"
+  tagName: Type = "div",
+  initialLayout
 }) {
@@ -117,3 +118,3 @@ const context = useContext(PanelGroupContext);
   });
-  const style = getPanelStyle(panelId, defaultSize);
+  const style = getPanelStyle(panelId, defaultSize, initialLayout);
   const committedValuesRef = useRef({
@@ -1373,3 +1374,3 @@ size: parseSizeFromStyle(style)
   }, [groupId, sizes]);
-  const getPanelStyle = useCallback((id, defaultSize) => {
+  const getPanelStyle = useCallback((id, defaultSize, initialLayout) => {
     const {
@@ -1383,5 +1384,23 @@ panels
     if (panels.size === 0) {
+      if (defaultSize != null && groupSizeRef.current) {
+        return {
+          flexBasis: 0,
+          flexGrow: normalizePixelValue(units, groupSizeRef.current, defaultSize),
+          flexShrink: 1,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
+      if (initialLayout === "tight") {
+        return {
+          flexBasis: units === "pixels" && defaultSize != null ? `${defaultSize}px` : "auto",
+          flexGrow: 0,
+          flexShrink: 0,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
       return {
         flexBasis: 0,
-        flexGrow: defaultSize != null && groupSizeRef.current ? normalizePixelValue(units, groupSizeRef.current, defaultSize) : 1,
+        flexGrow: 1,
         flexShrink: 1,
@@ -1388,0 +1407,0 @@ // Without this, Panel sizes may be unintentionally overridden by their content.

dist/alisowski-react-resizable-panels.development.node.cjs.js

@@ -76,3 +76,4 @@ 'use strict';
   style: styleFromProps = {},
-  tagName: Type = "div"
+  tagName: Type = "div",
+  initialLayout
 }) {
@@ -113,3 +114,3 @@ const context = useContext(PanelGroupContext);
   });
-  const style = getPanelStyle(panelId, defaultSize);
+  const style = getPanelStyle(panelId, defaultSize, initialLayout);
   const committedValuesRef = useRef({
@@ -1167,3 +1168,3 @@ size: parseSizeFromStyle(style)
   }, [groupId, sizes]);
-  const getPanelStyle = useCallback((id, defaultSize) => {
+  const getPanelStyle = useCallback((id, defaultSize, initialLayout) => {
     const {
@@ -1185,5 +1186,23 @@ panels
       }
+      if (defaultSize != null && groupSizeRef.current) {
+        return {
+          flexBasis: 0,
+          flexGrow: normalizePixelValue(units, groupSizeRef.current, defaultSize),
+          flexShrink: 1,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
+      if (initialLayout === "tight") {
+        return {
+          flexBasis: units === "pixels" && defaultSize != null ? `${defaultSize}px` : "auto",
+          flexGrow: 0,
+          flexShrink: 0,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
       return {
         flexBasis: 0,
-        flexGrow: defaultSize != null && groupSizeRef.current ? normalizePixelValue(units, groupSizeRef.current, defaultSize) : 1,
+        flexGrow: 1,
         flexShrink: 1,
@@ -1190,0 +1209,0 @@ // Without this, Panel sizes may be unintentionally overridden by their content.

dist/alisowski-react-resizable-panels.development.node.esm.js

@@ -52,3 +52,4 @@ import * as React from 'react';
   style: styleFromProps = {},
-  tagName: Type = "div"
+  tagName: Type = "div",
+  initialLayout
 }) {
@@ -89,3 +90,3 @@ const context = useContext(PanelGroupContext);
   });
-  const style = getPanelStyle(panelId, defaultSize);
+  const style = getPanelStyle(panelId, defaultSize, initialLayout);
   const committedValuesRef = useRef({
@@ -1143,3 +1144,3 @@ size: parseSizeFromStyle(style)
   }, [groupId, sizes]);
-  const getPanelStyle = useCallback((id, defaultSize) => {
+  const getPanelStyle = useCallback((id, defaultSize, initialLayout) => {
     const {
@@ -1161,5 +1162,23 @@ panels
       }
+      if (defaultSize != null && groupSizeRef.current) {
+        return {
+          flexBasis: 0,
+          flexGrow: normalizePixelValue(units, groupSizeRef.current, defaultSize),
+          flexShrink: 1,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
+      if (initialLayout === "tight") {
+        return {
+          flexBasis: units === "pixels" && defaultSize != null ? `${defaultSize}px` : "auto",
+          flexGrow: 0,
+          flexShrink: 0,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
       return {
         flexBasis: 0,
-        flexGrow: defaultSize != null && groupSizeRef.current ? normalizePixelValue(units, groupSizeRef.current, defaultSize) : 1,
+        flexGrow: 1,
         flexShrink: 1,
@@ -1166,0 +1185,0 @@ // Without this, Panel sizes may be unintentionally overridden by their content.

dist/alisowski-react-resizable-panels.esm.js

@@ -56,3 +56,4 @@ import * as React from 'react';
   style: styleFromProps = {},
-  tagName: Type = "div"
+  tagName: Type = "div",
+  initialLayout
 }) {
@@ -93,3 +94,3 @@ const context = useContext(PanelGroupContext);
   });
-  const style = getPanelStyle(panelId, defaultSize);
+  const style = getPanelStyle(panelId, defaultSize, initialLayout);
   const committedValuesRef = useRef({
@@ -1349,3 +1350,3 @@ size: parseSizeFromStyle(style)
   }, [groupId, sizes]);
-  const getPanelStyle = useCallback((id, defaultSize) => {
+  const getPanelStyle = useCallback((id, defaultSize, initialLayout) => {
     const {
@@ -1359,5 +1360,23 @@ panels
     if (panels.size === 0) {
+      if (defaultSize != null && groupSizeRef.current) {
+        return {
+          flexBasis: 0,
+          flexGrow: normalizePixelValue(units, groupSizeRef.current, defaultSize),
+          flexShrink: 1,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
+      if (initialLayout === "tight") {
+        return {
+          flexBasis: units === "pixels" && defaultSize != null ? `${defaultSize}px` : "auto",
+          flexGrow: 0,
+          flexShrink: 0,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
       return {
         flexBasis: 0,
-        flexGrow: defaultSize != null && groupSizeRef.current ? normalizePixelValue(units, groupSizeRef.current, defaultSize) : 1,
+        flexGrow: 1,
         flexShrink: 1,
@@ -1364,0 +1383,0 @@ // Without this, Panel sizes may be unintentionally overridden by their content.

dist/alisowski-react-resizable-panels.node.cjs.js

@@ -76,3 +76,4 @@ 'use strict';
   style: styleFromProps = {},
-  tagName: Type = "div"
+  tagName: Type = "div",
+  initialLayout
 }) {
@@ -113,3 +114,3 @@ const context = useContext(PanelGroupContext);
   });
-  const style = getPanelStyle(panelId, defaultSize);
+  const style = getPanelStyle(panelId, defaultSize, initialLayout);
   const committedValuesRef = useRef({
@@ -1125,3 +1126,3 @@ size: parseSizeFromStyle(style)
   }, [groupId, sizes]);
-  const getPanelStyle = useCallback((id, defaultSize) => {
+  const getPanelStyle = useCallback((id, defaultSize, initialLayout) => {
     const {
@@ -1135,5 +1136,23 @@ panels
     if (panels.size === 0) {
+      if (defaultSize != null && groupSizeRef.current) {
+        return {
+          flexBasis: 0,
+          flexGrow: normalizePixelValue(units, groupSizeRef.current, defaultSize),
+          flexShrink: 1,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
+      if (initialLayout === "tight") {
+        return {
+          flexBasis: units === "pixels" && defaultSize != null ? `${defaultSize}px` : "auto",
+          flexGrow: 0,
+          flexShrink: 0,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
       return {
         flexBasis: 0,
-        flexGrow: defaultSize != null && groupSizeRef.current ? normalizePixelValue(units, groupSizeRef.current, defaultSize) : 1,
+        flexGrow: 1,
         flexShrink: 1,
@@ -1140,0 +1159,0 @@ // Without this, Panel sizes may be unintentionally overridden by their content.

dist/alisowski-react-resizable-panels.node.esm.js

@@ -52,3 +52,4 @@ import * as React from 'react';
   style: styleFromProps = {},
-  tagName: Type = "div"
+  tagName: Type = "div",
+  initialLayout
 }) {
@@ -89,3 +90,3 @@ const context = useContext(PanelGroupContext);
   });
-  const style = getPanelStyle(panelId, defaultSize);
+  const style = getPanelStyle(panelId, defaultSize, initialLayout);
   const committedValuesRef = useRef({
@@ -1101,3 +1102,3 @@ size: parseSizeFromStyle(style)
   }, [groupId, sizes]);
-  const getPanelStyle = useCallback((id, defaultSize) => {
+  const getPanelStyle = useCallback((id, defaultSize, initialLayout) => {
     const {
@@ -1111,5 +1112,23 @@ panels
     if (panels.size === 0) {
+      if (defaultSize != null && groupSizeRef.current) {
+        return {
+          flexBasis: 0,
+          flexGrow: normalizePixelValue(units, groupSizeRef.current, defaultSize),
+          flexShrink: 1,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
+      if (initialLayout === "tight") {
+        return {
+          flexBasis: units === "pixels" && defaultSize != null ? `${defaultSize}px` : "auto",
+          flexGrow: 0,
+          flexShrink: 0,
+          // Without this, Panel sizes may be unintentionally overridden by their content.
+          overflow: "hidden"
+        };
+      }
       return {
         flexBasis: 0,
-        flexGrow: defaultSize != null && groupSizeRef.current ? normalizePixelValue(units, groupSizeRef.current, defaultSize) : 1,
+        flexGrow: 1,
         flexShrink: 1,
@@ -1116,0 +1135,0 @@ // Without this, Panel sizes may be unintentionally overridden by their content.

dist/declarations/src/Panel.d.ts

@@ -17,2 +17,7 @@ import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js";
     tagName?: ElementType;
+    /**
+     * Controls how the initial paint of the group happens when there is no group size
+     * Useful when using pixel based units
+     */
+    initialLayout?: "tight";
 };
@@ -19,0 +24,0 @@ export type ImperativePanelHandle = {

package.json

 {
   "name": "@alisowski/react-resizable-panels",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "publishConfig": {
@@ -5,0 +5,0 @@ "access": "public"

src/Panel.ts

@@ -39,2 +39,7 @@ import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";
   tagName?: ElementType;
+  /**
+   * Controls how the initial paint of the group happens when there is no group size
+   * Useful when using pixel based units
+   */
+  initialLayout?: "tight";
 };
@@ -66,2 +71,3 @@
   tagName: Type = "div",
+  initialLayout,
 }: PanelProps & {
@@ -110,3 +116,3 @@ forwardedRef: ForwardedRef<ImperativePanelHandle>;
 
-  const style = getPanelStyle(panelId, defaultSize);
+  const style = getPanelStyle(panelId, defaultSize, initialLayout);
 
@@ -113,0 +119,0 @@ const committedValuesRef = useRef<{

src/PanelContexts.ts

@@ -11,3 +11,7 @@ import { CSSProperties, createContext } from "./vendor/react";
   getPanelSize: (id: string, units?: Units) => number;
-  getPanelStyle: (id: string, defaultSize: number | null) => CSSProperties;
+  getPanelStyle: (
+    id: string,
+    defaultSize: number | null,
+    initialLayout?: "tight"
+  ) => CSSProperties;
   groupId: string;
@@ -14,0 +18,0 @@ registerPanel: (id: string, panel: PanelData) => void;

src/PanelGroup.ts

@@ -496,3 +496,7 @@ import { isBrowser } from "#is-browser";
   const getPanelStyle = useCallback(
-    (id: string, defaultSize: number | null): CSSProperties => {
+    (
+      id: string,
+      defaultSize: number | null,
+      initialLayout?: "tight"
+    ): CSSProperties => {
       const { panels } = committedValuesRef.current;
@@ -515,8 +519,32 @@
 
+        if (defaultSize != null && groupSizeRef.current) {
+          return {
+            flexBasis: 0,
+            flexGrow: normalizePixelValue(
+              units,
+              groupSizeRef.current,
+              defaultSize
+            ),
+            flexShrink: 1,
+            // Without this, Panel sizes may be unintentionally overridden by their content.
+            overflow: "hidden",
+          };
+        }
+
+        if (initialLayout === "tight") {
+          return {
+            flexBasis:
+              units === "pixels" && defaultSize != null
+                ? `${defaultSize}px`
+                : "auto",
+            flexGrow: 0,
+            flexShrink: 0,
+            // Without this, Panel sizes may be unintentionally overridden by their content.
+            overflow: "hidden",
+          };
+        }
+
         return {
           flexBasis: 0,
-          flexGrow:
-            defaultSize != null && groupSizeRef.current
-              ? normalizePixelValue(units, groupSizeRef.current, defaultSize)
-              : 1,
+          flexGrow: 1,
           flexShrink: 1,
@@ -523,0 +551,0 @@

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

854410

increased by1.01%

Lines of code

23292

increased by1.17%

No dependency changes