react-resizable-panels - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19

CHANGELOG.md

 # Changelog
 
+## 0.0.19
+* Add optional `style` and `tagName` props to `Panel`, `PanelGroup`, and `PanelResizeHandle` to simplify custom styling.
+* Add `data-panel-group-direction` attribute to `PanelGroup` and `PanelResizeHandle` to simplify custom drag handle styling.
+
 ## 0.0.18
@@ -4,0 +8,0 @@ * `Panel` and `PanelGroup` now use `overflow: hidden` style by default to avoid potential scrollbar flickers while resizing.

dist/react-resizable-panels.d.ts

@@ -1,4 +0,4 @@
-import { ReactNode } from "react";
+import { CSSProperties, ElementType, ReactNode } from "react";
 type Direction = "horizontal" | "vertical";
-export function Panel({ children, className, defaultSize, id: idFromProps, minSize, order, }: {
+export function Panel({ children, className: classNameFromProps, defaultSize, id: idFromProps, minSize, order, style: styleFromProps, tagName: Type, }: {
     children?: ReactNode;
@@ -10,4 +10,6 @@ className?: string;
     order?: number | null;
+    style?: CSSProperties;
+    tagName?: ElementType;
 }): JSX.Element;
-type Props = {
+export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, id: idFromProps, style: styleFromProps, tagName: Type, }: {
     autoSaveId?: string;
@@ -18,5 +20,6 @@ children?: ReactNode;
     id?: string | null;
-};
-export function PanelGroup({ autoSaveId, children, className, direction, id: idFromProps, }: Props): JSX.Element;
-export function PanelResizeHandle({ children, className, disabled, id: idFromProps, }: {
+    style?: CSSProperties;
+    tagName?: ElementType;
+}): JSX.Element;
+export function PanelResizeHandle({ children, className: classNameFromProps, disabled, id: idFromProps, style: styleFromProps, tagName: Type, }: {
     children?: ReactNode;
@@ -26,4 +29,6 @@ className?: string;
     id?: string | null;
+    style?: CSSProperties;
+    tagName?: ElementType;
 }): JSX.Element;
 
 //# sourceMappingURL=react-resizable-panels.d.ts.map

dist/react-resizable-panels.js

@@ -27,3 +27,3 @@ var $b2QPe$reactjsxruntime = require("react/jsx-runtime");
 
-function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = null , id: idFromProps = null , minSize: minSize = 10 , order: order = null  }) {
+function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , defaultSize: defaultSize = null , id: idFromProps = null , minSize: minSize = 10 , order: order = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
@@ -61,7 +61,10 @@ if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
     const style = getPanelStyle(panelId);
-    return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)("div", {
-        className: className,
+    return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)(Type, {
+        className: classNameFromProps,
         "data-panel-id": panelId,
         id: `data-panel-id-${panelId}`,
-        style: style,
+        style: {
+            ...style,
+            ...styleFromProps
+        },
         children: children
@@ -359,3 +362,3 @@ });
 
-function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , id: idFromProps = null  }) {
+function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const groupId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
@@ -516,6 +519,10 @@ const [activeHandleId, setActiveHandleId] = (0, $b2QPe$react.useState)(null);
         value: context,
-        children: /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)("div", {
-            className: className,
+        children: /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)(Type, {
+            className: classNameFromProps,
+            "data-panel-group-direction": direction,
             "data-panel-group-id": groupId,
-            style: style,
+            style: {
+                ...style,
+                ...styleFromProps
+            },
             children: children
@@ -532,3 +539,3 @@ })
 
-function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , id: idFromProps = null  }) {
+function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const divElementRef = (0, $b2QPe$react.useRef)(null);
@@ -593,5 +600,11 @@ const panelGroupContext = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
     });
-    return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)("div", {
-        className: className,
+    const style = {
+        cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
+        touchAction: "none",
+        userSelect: "none"
+    };
+    return /*#__PURE__*/ (0, $b2QPe$reactjsxruntime.jsx)(Type, {
+        className: classNameFromProps,
         "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
+        "data-panel-group-direction": direction,
         "data-panel-group-id": groupId,
@@ -610,5 +623,4 @@ "data-panel-resize-handle-enabled": !disabled,
         style: {
-            cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
-            touchAction: "none",
-            userSelect: "none"
+            ...style,
+            ...styleFromProps
         },
@@ -615,0 +627,0 @@ tabIndex: 0,

dist/react-resizable-panels.module.js

@@ -20,3 +20,3 @@ import {jsx as $fpI56$jsx} from "react/jsx-runtime";
 
-function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = null , id: idFromProps = null , minSize: minSize = 10 , order: order = null  }) {
+function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , defaultSize: defaultSize = null , id: idFromProps = null , minSize: minSize = 10 , order: order = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const context = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
@@ -54,7 +54,10 @@ if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
     const style = getPanelStyle(panelId);
-    return /*#__PURE__*/ (0, $fpI56$jsx)("div", {
-        className: className,
+    return /*#__PURE__*/ (0, $fpI56$jsx)(Type, {
+        className: classNameFromProps,
         "data-panel-id": panelId,
         id: `data-panel-id-${panelId}`,
-        style: style,
+        style: {
+            ...style,
+            ...styleFromProps
+        },
         children: children
@@ -352,3 +355,3 @@ });
 
-function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , id: idFromProps = null  }) {
+function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const groupId = (0, $968185313205dcfa$export$2e2bcd8739ae039)(idFromProps);
@@ -509,6 +512,10 @@ const [activeHandleId, setActiveHandleId] = (0, $fpI56$useState)(null);
         value: context,
-        children: /*#__PURE__*/ (0, $fpI56$jsx)("div", {
-            className: className,
+        children: /*#__PURE__*/ (0, $fpI56$jsx)(Type, {
+            className: classNameFromProps,
+            "data-panel-group-direction": direction,
             "data-panel-group-id": groupId,
-            style: style,
+            style: {
+                ...style,
+                ...styleFromProps
+            },
             children: children
@@ -525,3 +532,3 @@ })
 
-function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , id: idFromProps = null  }) {
+function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const divElementRef = (0, $fpI56$useRef)(null);
@@ -586,5 +593,11 @@ const panelGroupContext = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
     });
-    return /*#__PURE__*/ (0, $fpI56$jsx)("div", {
-        className: className,
+    const style = {
+        cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
+        touchAction: "none",
+        userSelect: "none"
+    };
+    return /*#__PURE__*/ (0, $fpI56$jsx)(Type, {
+        className: classNameFromProps,
         "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
+        "data-panel-group-direction": direction,
         "data-panel-group-id": groupId,
@@ -603,5 +616,4 @@ "data-panel-resize-handle-enabled": !disabled,
         style: {
-            cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
-            touchAction: "none",
-            userSelect: "none"
+            ...style,
+            ...styleFromProps
         },
@@ -608,0 +620,0 @@ tabIndex: 0,

package.json

 {
   "name": "react-resizable-panels",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "React components for resizable panel groups/layouts",
@@ -5,0 +5,0 @@ "author": "Brian Vaughn <[e-mail]>",

README.md

@@ -29,22 +29,28 @@ # react-resizable-panels
 | `children`   | `ReactNode`                 | Arbitrary React element(s)
-| `className`  | `?string`                   | Class name
+| `className`  | `?string`                   | Optional class name to attach to root element
 | `direction`  | `"horizontal" \| "vertical"` | Group orientation
 | `id`         | `?string`                   | Optional group id; falls back to `useId` when not provided
+| `style`      | `?CSSProperties`            | Optional CSS style to attach to root element
+| `tagName`    | `?string = "div"`           | Optional HTML element tag name for root element
 
 ### `Panel`
-| prop          | type        | description
-| :------------ | :---------- | :---
-| `children`    | `ReactNode` | Arbitrary React element(s)
-| `className`   | `?string`   | Class name
-| `defaultSize` | `?number`   | Initial size of panel (numeric value between 1-100)
-| `id`          | `?string`   | Optional panel id (unique within group); falls back to `useId` when not provided
-| `minSize`     | `?number`   | Minimum allowable size of panel (numeric value between 1-100)
-| `order`       | `?number`   | Order of panel within group; required for groups with conditionally rendered panels
+| prop          | type              | description
+| :------------ | :---------------- | :---
+| `children`    | `ReactNode`       | Arbitrary React element(s)
+| `className`   | `?string`         | Optional class name to attach to root element
+| `defaultSize` | `?number`         | Initial size of panel (numeric value between 1-100)
+| `id`          | `?string`         | Optional panel id (unique within group); falls back to `useId` when not provided
+| `minSize`     | `?number`         | Minimum allowable size of panel (numeric value between 1-100)
+| `order`       | `?number`         | Order of panel within group; required for groups with conditionally rendered panels
+| `style`       | `?CSSProperties`  | Optional CSS style to attach to root element
+| `tagName`     | `?string = "div"` | Optional HTML element tag name for root element
 
 ### `PanelResizeHandle`
-| prop          | type         | description
-| :------------ | :----------- | :---
-| `children`    | `?ReactNode` | Custom drag UI; can be any arbitrary React element(s)
-| `className`   | `?string`    | Class name
-| `disabled`    | `?boolean`   | Disable drag handle
-| `id`          | `?string`    | Optional resize handle id (unique within group); falls back to `useId` when not provided
+| prop          | type              | description
+| :------------ | :---------------- | :---
+| `children`    | `?ReactNode`      | Custom drag UI; can be any arbitrary React element(s)
+| `className`   | `?string`         | Optional class name to attach to root element
+| `disabled`    | `?boolean`        | Disable drag handle
+| `id`          | `?string`         | Optional resize handle id (unique within group); falls back to `useId` when not provided
+| `style`       | `?CSSProperties`  | Optional CSS style to attach to root element
+| `tagName`     | `?string = "div"` | Optional HTML element tag name for root element

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

187997

increased by3.29%

Lines of code

2147

increased by3.27%

Number of lines in readme file

55

increased by10%

No dependency changes