@refinedev/devtools 1.1.33 → 1.1.35

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 (28) hide show
  1. package/dist/components/devtools-pin.d.ts.map +1 -1
  2. package/dist/components/devtools-selector.d.ts.map +1 -1
  3. package/dist/components/resizable-pane.d.ts.map +1 -1
  4. package/dist/components/selector-box.d.ts.map +1 -1
  5. package/dist/esm/index.js +1 -1
  6. package/dist/esm/index.js.map +1 -1
  7. package/dist/iife/index.js +1 -1
  8. package/dist/iife/index.js.map +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/index.js.map +1 -1
  11. package/dist/panel.d.ts.map +1 -1
  12. package/dist/provider.d.ts.map +1 -1
  13. package/dist/utilities/index.d.ts.map +1 -1
  14. package/dist/utilities/use-selector.d.ts.map +1 -1
  15. package/package.json +4 -4
  16. package/src/components/devtools-pin.tsx +51 -51
  17. package/src/components/devtools-selector.tsx +85 -88
  18. package/src/components/icons/arrow-union-icon.tsx +28 -28
  19. package/src/components/icons/devtools-icon.tsx +30 -30
  20. package/src/components/icons/resize-handle-icon.tsx +23 -23
  21. package/src/components/icons/selector-button.tsx +15 -15
  22. package/src/components/resizable-pane.tsx +245 -245
  23. package/src/components/selector-box.tsx +94 -94
  24. package/src/components/selector-hint.tsx +53 -53
  25. package/src/panel.tsx +86 -90
  26. package/src/provider.tsx +5 -7
  27. package/src/utilities/index.ts +88 -89
  28. package/src/utilities/use-selector.tsx +218 -228
package/src/utilities/index.ts CHANGED
@@ -1,124 +1,123 @@
1
1
  import { Placement } from "src/interfaces/placement";
2
2
 
3
3
  export const getPanelToggleTransforms = (visible: boolean) => {
4
- return visible ? "scaleX(1) translateY(0)" : `scaleX(0) translateY(25vw)`;
4
+ return visible ? "scaleX(1) translateY(0)" : "scaleX(0) translateY(25vw)";
5
5
  };
6
6
 
7
7
  export const SIZE = 50;
8
8
  export const BUFFER = 10;
9
9
 
10
10
  const PREFERRED_DEFAULT_WIDTH = () =>
11
- typeof window !== "undefined" ? window.innerWidth * 0.7 : 1440 * 0.7; // 70% of window width
11
+ typeof window !== "undefined" ? window.innerWidth * 0.7 : 1440 * 0.7; // 70% of window width
12
12
  const PREFERRED_DEFAULT_HEIGHT = () =>
13
- typeof window !== "undefined" ? window.innerHeight * 0.7 : 900 * 0.7; // 70% of window height
13
+ typeof window !== "undefined" ? window.innerHeight * 0.7 : 900 * 0.7; // 70% of window height
14
14
 
15
15
  export const MIN_PANEL_WIDTH = 640;
16
16
  export const MIN_PANEL_HEIGHT = 360;
17
17
 
18
18
  export const getPinButtonTransform = (hover?: boolean) => {
19
- return `translateY(${hover ? "0" : "50%"})`;
19
+ return `translateY(${hover ? "0" : "50%"})`;
20
20
  };
21
21
 
22
22
  export const getPanelPosition = (placement: Placement) => {
23
- switch (placement) {
24
- case "left":
25
- return {
26
- left: `calc(${SIZE}px + ${BUFFER}px)`,
27
- top: "50%",
28
- transform: "translateY(-50%)",
29
- };
30
- case "right":
31
- return {
32
- right: `calc(${SIZE}px + ${BUFFER}px)`,
33
- top: "50%",
34
- transform: "translateY(-50%)",
35
- };
36
- case "top":
37
- return {
38
- left: "50%",
39
- top: `calc(${SIZE}px + ${BUFFER}px)`,
40
- transform: "translateX(-50%)",
41
- };
42
- default:
43
- case "bottom":
44
- return {
45
- left: "50%",
46
- bottom: `calc(${SIZE}px + ${BUFFER}px)`,
47
- transform: "translateX(-50%)",
48
- };
49
- }
23
+ switch (placement) {
24
+ case "left":
25
+ return {
26
+ left: `calc(${SIZE}px + ${BUFFER}px)`,
27
+ top: "50%",
28
+ transform: "translateY(-50%)",
29
+ };
30
+ case "right":
31
+ return {
32
+ right: `calc(${SIZE}px + ${BUFFER}px)`,
33
+ top: "50%",
34
+ transform: "translateY(-50%)",
35
+ };
36
+ case "top":
37
+ return {
38
+ left: "50%",
39
+ top: `calc(${SIZE}px + ${BUFFER}px)`,
40
+ transform: "translateX(-50%)",
41
+ };
42
+ case "bottom":
43
+ return {
44
+ left: "50%",
45
+ bottom: `calc(${SIZE}px + ${BUFFER}px)`,
46
+ transform: "translateX(-50%)",
47
+ };
48
+ }
50
49
  };
51
50
 
52
51
  export const getMaxPanelWidth = (placement: Placement) => {
53
- switch (placement) {
54
- case "left":
55
- case "right":
56
- return (
57
- -BUFFER -
58
- SIZE -
59
- BUFFER +
60
- (typeof window !== "undefined" ? window.innerWidth : 1440) -
61
- BUFFER
62
- );
63
- case "top":
64
- case "bottom":
65
- return (
66
- -BUFFER +
67
- (typeof window !== "undefined" ? window.innerWidth : 1440) -
68
- BUFFER
69
- );
70
- }
52
+ switch (placement) {
53
+ case "left":
54
+ case "right":
55
+ return (
56
+ -BUFFER -
57
+ SIZE -
58
+ BUFFER +
59
+ (typeof window !== "undefined" ? window.innerWidth : 1440) -
60
+ BUFFER
61
+ );
62
+ case "top":
63
+ case "bottom":
64
+ return (
65
+ -BUFFER +
66
+ (typeof window !== "undefined" ? window.innerWidth : 1440) -
67
+ BUFFER
68
+ );
69
+ }
71
70
  };
72
71
 
73
72
  export const getMaxPanelHeight = (placement: Placement) => {
74
- switch (placement) {
75
- case "left":
76
- case "right":
77
- return (
78
- -BUFFER +
79
- (typeof window !== "undefined" ? window.innerHeight : 900) -
80
- BUFFER
81
- );
82
- case "top":
83
- case "bottom":
84
- return (
85
- -BUFFER -
86
- SIZE -
87
- BUFFER +
88
- (typeof window !== "undefined" ? window.innerHeight : 900) -
89
- BUFFER
90
- );
91
- }
73
+ switch (placement) {
74
+ case "left":
75
+ case "right":
76
+ return (
77
+ -BUFFER +
78
+ (typeof window !== "undefined" ? window.innerHeight : 900) -
79
+ BUFFER
80
+ );
81
+ case "top":
82
+ case "bottom":
83
+ return (
84
+ -BUFFER -
85
+ SIZE -
86
+ BUFFER +
87
+ (typeof window !== "undefined" ? window.innerHeight : 900) -
88
+ BUFFER
89
+ );
90
+ }
92
91
  };
93
92
 
94
93
  export const getDefaultPanelSize = (
95
- placement: Placement,
96
- preferredSize?: { width: number; height: number },
94
+ placement: Placement,
95
+ preferredSize?: { width: number; height: number },
97
96
  ): { width: number; height: number } => {
98
- const defaultPreferred = {
99
- width: PREFERRED_DEFAULT_WIDTH(),
100
- height: PREFERRED_DEFAULT_HEIGHT(),
101
- };
97
+ const defaultPreferred = {
98
+ width: PREFERRED_DEFAULT_WIDTH(),
99
+ height: PREFERRED_DEFAULT_HEIGHT(),
100
+ };
102
101
 
103
- const maxPanelWidth = getMaxPanelWidth(placement);
104
- const maxPanelHeight = getMaxPanelHeight(placement);
102
+ const maxPanelWidth = getMaxPanelWidth(placement);
103
+ const maxPanelHeight = getMaxPanelHeight(placement);
105
104
 
106
- const width = Math.min(
107
- maxPanelWidth,
108
- (preferredSize ?? defaultPreferred).width,
109
- );
110
- const height = Math.min(
111
- maxPanelHeight,
112
- (preferredSize ?? defaultPreferred).height,
113
- );
105
+ const width = Math.min(
106
+ maxPanelWidth,
107
+ (preferredSize ?? defaultPreferred).width,
108
+ );
109
+ const height = Math.min(
110
+ maxPanelHeight,
111
+ (preferredSize ?? defaultPreferred).height,
112
+ );
114
113
 
115
- return {
116
- width: width,
117
- height: height,
118
- };
114
+ return {
115
+ width: width,
116
+ height: height,
117
+ };
119
118
  };
120
119
 
121
120
  export const roundToEven = (num: number) => {
122
- const rounded = Math.round(num);
123
- return rounded % 2 === 0 ? rounded : rounded + 1;
121
+ const rounded = Math.round(num);
122
+ return rounded % 2 === 0 ? rounded : rounded + 1;
124
123
  };