react-resizable-panels 1.0.1 → 1.0.2

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 (15) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/react-resizable-panels.browser.cjs.js +3 -3
  3. package/dist/react-resizable-panels.browser.development.cjs.js +3 -3
  4. package/dist/react-resizable-panels.browser.development.esm.js +3 -3
  5. package/dist/react-resizable-panels.browser.esm.js +3 -3
  6. package/dist/react-resizable-panels.cjs.js +3 -3
  7. package/dist/react-resizable-panels.development.cjs.js +3 -3
  8. package/dist/react-resizable-panels.development.esm.js +3 -3
  9. package/dist/react-resizable-panels.development.node.cjs.js +3 -3
  10. package/dist/react-resizable-panels.development.node.esm.js +3 -3
  11. package/dist/react-resizable-panels.esm.js +3 -3
  12. package/dist/react-resizable-panels.node.cjs.js +3 -3
  13. package/dist/react-resizable-panels.node.esm.js +3 -3
  14. package/package.json +1 -1
  15. package/src/utils/serialization.ts +5 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.0.2
4
+
5
+ - Change local storage key for persisted sizes to avoid restoring pixel-based sizes (see #233)
6
+
3
7
  ## 1.0.1
4
8
 
5
9
  - Small bug fix to guard against saving an incorrect panel layout to local storage
package/dist/react-resizable-panels.browser.cjs.js CHANGED
@@ -976,13 +976,13 @@ function getSerializationKey(panels) {
976
976
  if (idIsFromProps) {
977
977
  return id;
978
978
  } else {
979
- return `${order}:${JSON.stringify(constraints)}`;
979
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
980
980
  }
981
981
  }).sort((a, b) => a.localeCompare(b)).join(",");
982
982
  }
983
983
  function loadSerializedPanelGroupState(autoSaveId, storage) {
984
984
  try {
985
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
985
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
986
986
  if (serialized) {
987
987
  const parsed = JSON.parse(serialized);
988
988
  if (typeof parsed === "object" && parsed != null) {
@@ -1006,7 +1006,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
1006
1006
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
1007
1007
  state[key] = sizes;
1008
1008
  try {
1009
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
1009
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
1010
1010
  } catch (error) {
1011
1011
  console.error(error);
1012
1012
  }
package/dist/react-resizable-panels.browser.development.cjs.js CHANGED
@@ -992,13 +992,13 @@ function getSerializationKey(panels) {
992
992
  if (idIsFromProps) {
993
993
  return id;
994
994
  } else {
995
- return `${order}:${JSON.stringify(constraints)}`;
995
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
996
996
  }
997
997
  }).sort((a, b) => a.localeCompare(b)).join(",");
998
998
  }
999
999
  function loadSerializedPanelGroupState(autoSaveId, storage) {
1000
1000
  try {
1001
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
1001
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
1002
1002
  if (serialized) {
1003
1003
  const parsed = JSON.parse(serialized);
1004
1004
  if (typeof parsed === "object" && parsed != null) {
@@ -1022,7 +1022,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
1022
1022
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
1023
1023
  state[key] = sizes;
1024
1024
  try {
1025
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
1025
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
1026
1026
  } catch (error) {
1027
1027
  console.error(error);
1028
1028
  }
package/dist/react-resizable-panels.browser.development.esm.js CHANGED
@@ -968,13 +968,13 @@ function getSerializationKey(panels) {
968
968
  if (idIsFromProps) {
969
969
  return id;
970
970
  } else {
971
- return `${order}:${JSON.stringify(constraints)}`;
971
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
972
972
  }
973
973
  }).sort((a, b) => a.localeCompare(b)).join(",");
974
974
  }
975
975
  function loadSerializedPanelGroupState(autoSaveId, storage) {
976
976
  try {
977
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
977
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
978
978
  if (serialized) {
979
979
  const parsed = JSON.parse(serialized);
980
980
  if (typeof parsed === "object" && parsed != null) {
@@ -998,7 +998,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
998
998
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
999
999
  state[key] = sizes;
1000
1000
  try {
1001
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
1001
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
1002
1002
  } catch (error) {
1003
1003
  console.error(error);
1004
1004
  }
package/dist/react-resizable-panels.browser.esm.js CHANGED
@@ -952,13 +952,13 @@ function getSerializationKey(panels) {
952
952
  if (idIsFromProps) {
953
953
  return id;
954
954
  } else {
955
- return `${order}:${JSON.stringify(constraints)}`;
955
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
956
956
  }
957
957
  }).sort((a, b) => a.localeCompare(b)).join(",");
958
958
  }
959
959
  function loadSerializedPanelGroupState(autoSaveId, storage) {
960
960
  try {
961
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
961
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
962
962
  if (serialized) {
963
963
  const parsed = JSON.parse(serialized);
964
964
  if (typeof parsed === "object" && parsed != null) {
@@ -982,7 +982,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
982
982
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
983
983
  state[key] = sizes;
984
984
  try {
985
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
985
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
986
986
  } catch (error) {
987
987
  console.error(error);
988
988
  }
package/dist/react-resizable-panels.cjs.js CHANGED
@@ -978,13 +978,13 @@ function getSerializationKey(panels) {
978
978
  if (idIsFromProps) {
979
979
  return id;
980
980
  } else {
981
- return `${order}:${JSON.stringify(constraints)}`;
981
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
982
982
  }
983
983
  }).sort((a, b) => a.localeCompare(b)).join(",");
984
984
  }
985
985
  function loadSerializedPanelGroupState(autoSaveId, storage) {
986
986
  try {
987
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
987
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
988
988
  if (serialized) {
989
989
  const parsed = JSON.parse(serialized);
990
990
  if (typeof parsed === "object" && parsed != null) {
@@ -1008,7 +1008,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
1008
1008
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
1009
1009
  state[key] = sizes;
1010
1010
  try {
1011
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
1011
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
1012
1012
  } catch (error) {
1013
1013
  console.error(error);
1014
1014
  }
package/dist/react-resizable-panels.development.cjs.js CHANGED
@@ -999,13 +999,13 @@ function getSerializationKey(panels) {
999
999
  if (idIsFromProps) {
1000
1000
  return id;
1001
1001
  } else {
1002
- return `${order}:${JSON.stringify(constraints)}`;
1002
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
1003
1003
  }
1004
1004
  }).sort((a, b) => a.localeCompare(b)).join(",");
1005
1005
  }
1006
1006
  function loadSerializedPanelGroupState(autoSaveId, storage) {
1007
1007
  try {
1008
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
1008
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
1009
1009
  if (serialized) {
1010
1010
  const parsed = JSON.parse(serialized);
1011
1011
  if (typeof parsed === "object" && parsed != null) {
@@ -1029,7 +1029,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
1029
1029
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
1030
1030
  state[key] = sizes;
1031
1031
  try {
1032
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
1032
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
1033
1033
  } catch (error) {
1034
1034
  console.error(error);
1035
1035
  }
package/dist/react-resizable-panels.development.esm.js CHANGED
@@ -975,13 +975,13 @@ function getSerializationKey(panels) {
975
975
  if (idIsFromProps) {
976
976
  return id;
977
977
  } else {
978
- return `${order}:${JSON.stringify(constraints)}`;
978
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
979
979
  }
980
980
  }).sort((a, b) => a.localeCompare(b)).join(",");
981
981
  }
982
982
  function loadSerializedPanelGroupState(autoSaveId, storage) {
983
983
  try {
984
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
984
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
985
985
  if (serialized) {
986
986
  const parsed = JSON.parse(serialized);
987
987
  if (typeof parsed === "object" && parsed != null) {
@@ -1005,7 +1005,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
1005
1005
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
1006
1006
  state[key] = sizes;
1007
1007
  try {
1008
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
1008
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
1009
1009
  } catch (error) {
1010
1010
  console.error(error);
1011
1011
  }
package/dist/react-resizable-panels.development.node.cjs.js CHANGED
@@ -850,13 +850,13 @@ function getSerializationKey(panels) {
850
850
  if (idIsFromProps) {
851
851
  return id;
852
852
  } else {
853
- return `${order}:${JSON.stringify(constraints)}`;
853
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
854
854
  }
855
855
  }).sort((a, b) => a.localeCompare(b)).join(",");
856
856
  }
857
857
  function loadSerializedPanelGroupState(autoSaveId, storage) {
858
858
  try {
859
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
859
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
860
860
  if (serialized) {
861
861
  const parsed = JSON.parse(serialized);
862
862
  if (typeof parsed === "object" && parsed != null) {
@@ -871,7 +871,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
871
871
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
872
872
  state[key] = sizes;
873
873
  try {
874
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
874
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
875
875
  } catch (error) {
876
876
  console.error(error);
877
877
  }
package/dist/react-resizable-panels.development.node.esm.js CHANGED
@@ -826,13 +826,13 @@ function getSerializationKey(panels) {
826
826
  if (idIsFromProps) {
827
827
  return id;
828
828
  } else {
829
- return `${order}:${JSON.stringify(constraints)}`;
829
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
830
830
  }
831
831
  }).sort((a, b) => a.localeCompare(b)).join(",");
832
832
  }
833
833
  function loadSerializedPanelGroupState(autoSaveId, storage) {
834
834
  try {
835
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
835
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
836
836
  if (serialized) {
837
837
  const parsed = JSON.parse(serialized);
838
838
  if (typeof parsed === "object" && parsed != null) {
@@ -847,7 +847,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
847
847
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
848
848
  state[key] = sizes;
849
849
  try {
850
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
850
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
851
851
  } catch (error) {
852
852
  console.error(error);
853
853
  }
package/dist/react-resizable-panels.esm.js CHANGED
@@ -954,13 +954,13 @@ function getSerializationKey(panels) {
954
954
  if (idIsFromProps) {
955
955
  return id;
956
956
  } else {
957
- return `${order}:${JSON.stringify(constraints)}`;
957
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
958
958
  }
959
959
  }).sort((a, b) => a.localeCompare(b)).join(",");
960
960
  }
961
961
  function loadSerializedPanelGroupState(autoSaveId, storage) {
962
962
  try {
963
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
963
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
964
964
  if (serialized) {
965
965
  const parsed = JSON.parse(serialized);
966
966
  if (typeof parsed === "object" && parsed != null) {
@@ -984,7 +984,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
984
984
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
985
985
  state[key] = sizes;
986
986
  try {
987
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
987
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
988
988
  } catch (error) {
989
989
  console.error(error);
990
990
  }
package/dist/react-resizable-panels.node.cjs.js CHANGED
@@ -839,13 +839,13 @@ function getSerializationKey(panels) {
839
839
  if (idIsFromProps) {
840
840
  return id;
841
841
  } else {
842
- return `${order}:${JSON.stringify(constraints)}`;
842
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
843
843
  }
844
844
  }).sort((a, b) => a.localeCompare(b)).join(",");
845
845
  }
846
846
  function loadSerializedPanelGroupState(autoSaveId, storage) {
847
847
  try {
848
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
848
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
849
849
  if (serialized) {
850
850
  const parsed = JSON.parse(serialized);
851
851
  if (typeof parsed === "object" && parsed != null) {
@@ -860,7 +860,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
860
860
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
861
861
  state[key] = sizes;
862
862
  try {
863
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
863
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
864
864
  } catch (error) {
865
865
  console.error(error);
866
866
  }
package/dist/react-resizable-panels.node.esm.js CHANGED
@@ -815,13 +815,13 @@ function getSerializationKey(panels) {
815
815
  if (idIsFromProps) {
816
816
  return id;
817
817
  } else {
818
- return `${order}:${JSON.stringify(constraints)}`;
818
+ return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
819
819
  }
820
820
  }).sort((a, b) => a.localeCompare(b)).join(",");
821
821
  }
822
822
  function loadSerializedPanelGroupState(autoSaveId, storage) {
823
823
  try {
824
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
824
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
825
825
  if (serialized) {
826
826
  const parsed = JSON.parse(serialized);
827
827
  if (typeof parsed === "object" && parsed != null) {
@@ -836,7 +836,7 @@ function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
836
836
  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
837
837
  state[key] = sizes;
838
838
  try {
839
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
839
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
840
840
  } catch (error) {
841
841
  console.error(error);
842
842
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-resizable-panels",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "React components for resizable panel groups/layouts",
5
5
  "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
6
6
  "license": "MIT",
package/src/utils/serialization.ts CHANGED
@@ -14,7 +14,9 @@ function getSerializationKey(panels: PanelData[]): string {
14
14
  if (idIsFromProps) {
15
15
  return id;
16
16
  } else {
17
- return `${order}:${JSON.stringify(constraints)}`;
17
+ return order
18
+ ? `${order}:${JSON.stringify(constraints)}`
19
+ : JSON.stringify(constraints);
18
20
  }
19
21
  })
20
22
  .sort((a, b) => a.localeCompare(b))
@@ -26,7 +28,7 @@ function loadSerializedPanelGroupState(
26
28
  storage: PanelGroupStorage
27
29
  ): SerializedPanelGroupState | null {
28
30
  try {
29
- const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
31
+ const serialized = storage.getItem(`PanelGroup:layout:${autoSaveId}`);
30
32
  if (serialized) {
31
33
  const parsed = JSON.parse(serialized);
32
34
  if (typeof parsed === "object" && parsed != null) {
@@ -63,7 +65,7 @@ export function savePanelGroupLayout(
63
65
  state[key] = sizes;
64
66
 
65
67
  try {
66
- storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
68
+ storage.setItem(`PanelGroup:layout:${autoSaveId}`, JSON.stringify(state));
67
69
  } catch (error) {
68
70
  console.error(error);
69
71
  }