Replace "unset" styles with safer override values (#588)

Resolves #585

Author: bvaughn

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Replace `"unset"` styles with safer override values
+
 ## 4.3.0
 
 - [583](https://github.com/bvaughn/react-resizable-panels/pull/583): `Group` component now sets default `width`, `height`, and `overflow` styles; (both can be overridden using the `style` property)

lib/components/panel/Panel.test.tsx

@@ -117,18 +117,18 @@ describe("Panel", () => {
 
       const panel = container.querySelector("[data-panel]") as HTMLElement;
 
-      expect(panel.style.minHeight).toBe("unset");
-      expect(panel.style.maxHeight).toBe("unset");
-      expect(panel.style.height).toBe("unset");
-
-      expect(panel.style.minWidth).toBe("unset");
-      expect(panel.style.maxWidth).toBe("unset");
-      expect(panel.style.width).toBe("unset");
-
-      expect(panel.style.border).toBe("unset");
-      expect(panel.style.borderWidth).toBe("unset");
-      expect(panel.style.padding).toBe("unset");
-      expect(panel.style.margin).toBe("unset");
+      expect(panel.style.minHeight).toBe("0");
+      expect(panel.style.maxHeight).toBe("100%");
+      expect(panel.style.height).toBe("auto");
+
+      expect(panel.style.minWidth).toBe("0");
+      expect(panel.style.maxWidth).toBe("100%");
+      expect(panel.style.width).toBe("auto");
+
+      expect(panel.style.border).toBe("0px");
+      expect(panel.style.borderWidth).toBe("0px");
+      expect(panel.style.padding).toBe("0px");
+      expect(panel.style.margin).toBe("0px");
     });
 
     describe("ARIA attributes", () => {

lib/components/panel/Panel.tsx

@@ -153,21 +153,16 @@ export function Panel({
 Panel.displayName = "Panel";
 
 const PROHIBITED_CSS_PROPERTIES: CSSProperties = {
-  minHeight: "unset",
-  maxHeight: "unset",
-  height: "unset",
-
-  minWidth: "unset",
-  maxWidth: "unset",
-  width: "unset",
-
-  flex: "unset",
-  flexBasis: "unset",
-  flexShrink: "unset",
-  flexGrow: "unset",
-
-  border: "unset",
-  borderWidth: "unset",
-  padding: "unset",
-  margin: "unset"
+  minHeight: 0,
+  maxHeight: "100%",
+  height: "auto",
+
+  minWidth: 0,
+  maxWidth: "100%",
+  width: "auto",
+
+  border: "none",
+  borderWidth: 0,
+  padding: 0,
+  margin: 0
 };