@linzjs/windows 3.4.4 → 3.5.1
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.
|
@@ -10,7 +10,7 @@ dialog.LuiModalAsync, div.LuiModalAsync {
|
|
|
10
10
|
display: flex;
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
border-radius: 9px;
|
|
13
|
-
padding: lui.$unit-md;
|
|
13
|
+
padding: lui.$unit-md lui.$unit-md lui.$unit-md lui.$unit-lg;
|
|
14
14
|
min-width: 400px;
|
|
15
15
|
max-width: 80vw;
|
|
16
16
|
max-height: 80vh;
|
|
@@ -24,6 +24,10 @@ dialog.LuiModalAsync, div.LuiModalAsync {
|
|
|
24
24
|
fill: lui.$info;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
.LuiModalAsync-help-icon * {
|
|
28
|
+
fill: lui.$gray;
|
|
29
|
+
}
|
|
30
|
+
|
|
27
31
|
&.LuiModalPrefab-success {
|
|
28
32
|
.LuiModalAsync-header .LuiModalAsync-header-icon {
|
|
29
33
|
fill: lui.$success;
|
|
@@ -37,7 +41,8 @@ dialog.LuiModalAsync, div.LuiModalAsync {
|
|
|
37
41
|
fill: lui.$info;
|
|
38
42
|
}
|
|
39
43
|
|
|
40
|
-
|
|
44
|
+
padding-left: lui.$unit-md;
|
|
45
|
+
border-left: 0;
|
|
41
46
|
}
|
|
42
47
|
|
|
43
48
|
&.LuiModalPrefab-warning {
|
|
@@ -53,6 +58,7 @@ dialog.LuiModalAsync, div.LuiModalAsync {
|
|
|
53
58
|
fill: lui.$error;
|
|
54
59
|
}
|
|
55
60
|
|
|
61
|
+
padding-left: 36px;
|
|
56
62
|
border-left: lui.$unit-sm solid lui.$error;
|
|
57
63
|
}
|
|
58
64
|
|
package/dist/panel/Panel.tsx
CHANGED
|
@@ -7,7 +7,16 @@ import { PanelInstanceContext, PanelSize } from "./PanelInstanceContext";
|
|
|
7
7
|
import { PanelPosition, PanelsContext } from "./PanelsContext";
|
|
8
8
|
import { PopoutWindow } from "./PopoutWindow";
|
|
9
9
|
import clsx from "clsx";
|
|
10
|
-
import React, {
|
|
10
|
+
import React, {
|
|
11
|
+
PropsWithChildren,
|
|
12
|
+
ReactElement,
|
|
13
|
+
ReactNode,
|
|
14
|
+
useCallback,
|
|
15
|
+
useContext,
|
|
16
|
+
useEffect,
|
|
17
|
+
useRef,
|
|
18
|
+
useState,
|
|
19
|
+
} from "react";
|
|
11
20
|
import { createPortal } from "react-dom";
|
|
12
21
|
import { Rnd } from "react-rnd";
|
|
13
22
|
|
|
@@ -17,16 +26,16 @@ export interface PanelProps {
|
|
|
17
26
|
size?: PanelSize;
|
|
18
27
|
className?: string;
|
|
19
28
|
children: ReactNode;
|
|
20
|
-
maxHeight?: number;
|
|
21
|
-
maxWidth?: number;
|
|
22
|
-
minHeight?: number;
|
|
23
|
-
minWidth?: number;
|
|
29
|
+
maxHeight?: number | string;
|
|
30
|
+
maxWidth?: number | string;
|
|
31
|
+
minHeight?: number | string;
|
|
32
|
+
minWidth?: number | string;
|
|
24
33
|
modal?: boolean;
|
|
34
|
+
resizeable?: boolean;
|
|
25
35
|
}
|
|
26
36
|
|
|
27
37
|
export const Panel = ({
|
|
28
38
|
title,
|
|
29
|
-
position = "tile",
|
|
30
39
|
size = { width: 320, height: 200 },
|
|
31
40
|
maxHeight,
|
|
32
41
|
maxWidth,
|
|
@@ -34,8 +43,12 @@ export const Panel = ({
|
|
|
34
43
|
minWidth = 100,
|
|
35
44
|
modal,
|
|
36
45
|
className,
|
|
46
|
+
position = modal ? "center" : "tile",
|
|
47
|
+
resizeable = modal !== true,
|
|
37
48
|
children,
|
|
38
49
|
}: PanelProps): ReactElement => {
|
|
50
|
+
const panelRef = useRef<Rnd>(null);
|
|
51
|
+
|
|
39
52
|
const { nextStackPosition, dockElements } = useContext(PanelsContext);
|
|
40
53
|
const { panelPoppedOut, bounds, zIndex, bringPanelToFront, uniqueId, setTitle, dockId, docked } =
|
|
41
54
|
useContext(PanelInstanceContext);
|
|
@@ -44,8 +57,8 @@ export const Panel = ({
|
|
|
44
57
|
switch (position) {
|
|
45
58
|
case "center":
|
|
46
59
|
return {
|
|
47
|
-
x: (window.innerWidth - size.width) / 2,
|
|
48
|
-
y: (window.innerHeight - size.height) / 2,
|
|
60
|
+
x: Math.max((window.innerWidth - size.width) / 2, 0),
|
|
61
|
+
y: Math.max((window.innerHeight - size.height) / 2, 0),
|
|
49
62
|
};
|
|
50
63
|
case "tile":
|
|
51
64
|
return nextStackPosition();
|
|
@@ -54,6 +67,24 @@ export const Panel = ({
|
|
|
54
67
|
}
|
|
55
68
|
});
|
|
56
69
|
|
|
70
|
+
const centerWindow = useCallback(() => {
|
|
71
|
+
const b = panelRef.current?.getSelfElement()?.getBoundingClientRect();
|
|
72
|
+
setPanelPosition({
|
|
73
|
+
x: Math.max((window.innerWidth - (b?.width ?? size.width)) / 2, 0),
|
|
74
|
+
y: Math.max((window.innerHeight - (b?.height ?? size.height)) / 2, 0),
|
|
75
|
+
});
|
|
76
|
+
}, [size]);
|
|
77
|
+
|
|
78
|
+
useEffect(() => {
|
|
79
|
+
if (!panelPoppedOut && position === "center" && !resizeable) {
|
|
80
|
+
centerWindow();
|
|
81
|
+
|
|
82
|
+
window.addEventListener("resize", centerWindow);
|
|
83
|
+
return () => window.removeEventListener("resize", centerWindow);
|
|
84
|
+
}
|
|
85
|
+
return;
|
|
86
|
+
}, [centerWindow, panelPoppedOut, position, resizeable]);
|
|
87
|
+
|
|
57
88
|
const [panelSize, setPanelSize] = useState(size ?? { width: 320, height: 200 });
|
|
58
89
|
|
|
59
90
|
const resizePanel = (newPanelSize: Partial<PanelSize>) => {
|
|
@@ -71,7 +102,7 @@ export const Panel = ({
|
|
|
71
102
|
const dockElement = docked && dockId && dockElements[dockId];
|
|
72
103
|
|
|
73
104
|
return (
|
|
74
|
-
<PanelContext.Provider value={{ resizePanel }}>
|
|
105
|
+
<PanelContext.Provider value={{ resizePanel, resizeable }}>
|
|
75
106
|
{dockElement && dockElement.isConnected ? (
|
|
76
107
|
createPortal(children, dockElement)
|
|
77
108
|
) : panelPoppedOut ? (
|
|
@@ -104,6 +135,7 @@ export const Panel = ({
|
|
|
104
135
|
/>
|
|
105
136
|
)}
|
|
106
137
|
<Rnd
|
|
138
|
+
ref={panelRef}
|
|
107
139
|
className={clsx("WindowPanel", className)}
|
|
108
140
|
dragHandleClassName={"draggable-handle"}
|
|
109
141
|
maxHeight={maxHeight}
|
|
@@ -113,6 +145,8 @@ export const Panel = ({
|
|
|
113
145
|
position={panelPosition}
|
|
114
146
|
size={panelSize}
|
|
115
147
|
style={{ zIndex }}
|
|
148
|
+
disableDragging={!resizeable}
|
|
149
|
+
enableResizing={resizeable}
|
|
116
150
|
bounds={bounds ?? document.body}
|
|
117
151
|
onDragStop={(_evt, data) => {
|
|
118
152
|
setPanelPosition({ x: data.x, y: data.y });
|
|
@@ -3,6 +3,7 @@ import { createContext } from "react";
|
|
|
3
3
|
|
|
4
4
|
export interface PanelContextType {
|
|
5
5
|
resizePanel: (size: Partial<PanelSize>) => void;
|
|
6
|
+
resizeable: boolean;
|
|
6
7
|
}
|
|
7
8
|
|
|
8
9
|
const NoContextError = () => {
|
|
@@ -14,4 +15,5 @@ const NoContextError = () => {
|
|
|
14
15
|
*/
|
|
15
16
|
export const PanelContext = createContext<PanelContextType>({
|
|
16
17
|
resizePanel: NoContextError,
|
|
18
|
+
resizeable: true,
|
|
17
19
|
});
|
|
@@ -4,6 +4,8 @@ import { ReactNode, useContext, useState } from "react";
|
|
|
4
4
|
|
|
5
5
|
import { LuiIcon } from "@linzjs/lui";
|
|
6
6
|
import { LuiIconName } from "@linzjs/lui/dist/assets/svg-content";
|
|
7
|
+
import { PanelContext } from "./PanelContext";
|
|
8
|
+
import clsx from "clsx";
|
|
7
9
|
|
|
8
10
|
export interface PanelHeaderProps {
|
|
9
11
|
icon?: LuiIconName;
|
|
@@ -26,6 +28,7 @@ export const PanelHeader = ({
|
|
|
26
28
|
disableClose,
|
|
27
29
|
disablePopout,
|
|
28
30
|
}: PanelHeaderProps) => {
|
|
31
|
+
const { resizeable } = useContext(PanelContext);
|
|
29
32
|
const { panelClose, panelTogglePopout, panelPoppedOut, title, dock, undock, docked } =
|
|
30
33
|
useContext(PanelInstanceContext);
|
|
31
34
|
const [cursor, setCursor] = useState<"grab" | "grabbing">("grab");
|
|
@@ -36,10 +39,10 @@ export const PanelHeader = ({
|
|
|
36
39
|
|
|
37
40
|
return (
|
|
38
41
|
<div
|
|
39
|
-
className={"WindowPanel-header draggable-handle"}
|
|
42
|
+
className={clsx("WindowPanel-header", resizeable && "draggable-handle")}
|
|
40
43
|
onMouseDown={headerMouseDown}
|
|
41
44
|
onMouseUp={() => !panelPoppedOut && setCursor("grab")}
|
|
42
|
-
style={{ cursor }}
|
|
45
|
+
style={resizeable ? { cursor } : {}}
|
|
43
46
|
>
|
|
44
47
|
<div className={"WindowPanel-header-title"}>
|
|
45
48
|
{icon && <LuiIcon name={icon} alt={"icon"} size={"md"} className={"WindowPanel-header-title-icon"} />}
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"popout"
|
|
14
14
|
],
|
|
15
15
|
"main": "./dist/index.ts",
|
|
16
|
-
"version": "3.
|
|
16
|
+
"version": "3.5.1",
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"@linzjs/lui": "^21",
|
|
19
19
|
"lodash-es": ">=4",
|
|
@@ -46,57 +46,57 @@
|
|
|
46
46
|
"semantic-release": "semantic-release"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@emotion/cache": "^11.13.
|
|
50
|
-
"@emotion/react": "^11.13.
|
|
51
|
-
"@emotion/styled": "^11.13.
|
|
49
|
+
"@emotion/cache": "^11.13.5",
|
|
50
|
+
"@emotion/react": "^11.13.5",
|
|
51
|
+
"@emotion/styled": "^11.13.5",
|
|
52
52
|
"lodash-es": ">=4",
|
|
53
53
|
"react-rnd": "^10.4.13",
|
|
54
54
|
"usehooks-ts": "^3.1.0",
|
|
55
|
-
"uuid": "^
|
|
55
|
+
"uuid": "^11.0.3"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
|
-
"@chromatic-com/storybook": "^2.
|
|
58
|
+
"@chromatic-com/storybook": "^3.2.2",
|
|
59
59
|
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
|
|
60
60
|
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
|
|
61
|
-
"@linzjs/lui": "^
|
|
62
|
-
"@linzjs/step-ag-grid": "^22.
|
|
61
|
+
"@linzjs/lui": "^22.0.1",
|
|
62
|
+
"@linzjs/step-ag-grid": "^22.3.0",
|
|
63
63
|
"@rollup/plugin-commonjs": "^28.0.1",
|
|
64
64
|
"@rollup/plugin-json": "^6.1.0",
|
|
65
65
|
"@rollup/plugin-node-resolve": "^15.3.0",
|
|
66
|
-
"@storybook/addon-docs": "^8.
|
|
67
|
-
"@storybook/addon-essentials": "^8.
|
|
68
|
-
"@storybook/addon-interactions": "^8.
|
|
69
|
-
"@storybook/addon-links": "^8.
|
|
70
|
-
"@storybook/addon-mdx-gfm": "^8.
|
|
71
|
-
"@storybook/blocks": "^8.
|
|
72
|
-
"@storybook/react": "^8.
|
|
73
|
-
"@storybook/react-vite": "^8.
|
|
74
|
-
"@storybook/test": "^8.
|
|
75
|
-
"@storybook/test-runner": "^0.
|
|
76
|
-
"@testing-library/jest-dom": "^6.6.
|
|
66
|
+
"@storybook/addon-docs": "^8.4.6",
|
|
67
|
+
"@storybook/addon-essentials": "^8.4.6",
|
|
68
|
+
"@storybook/addon-interactions": "^8.4.6",
|
|
69
|
+
"@storybook/addon-links": "^8.4.6",
|
|
70
|
+
"@storybook/addon-mdx-gfm": "^8.4.6",
|
|
71
|
+
"@storybook/blocks": "^8.4.6",
|
|
72
|
+
"@storybook/react": "^8.4.6",
|
|
73
|
+
"@storybook/react-vite": "^8.4.6",
|
|
74
|
+
"@storybook/test": "^8.4.6",
|
|
75
|
+
"@storybook/test-runner": "^0.20.0",
|
|
76
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
77
77
|
"@testing-library/react": "^16.0.1",
|
|
78
78
|
"@testing-library/user-event": "^14.5.2",
|
|
79
79
|
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
|
|
80
|
-
"@types/jest": "^29.5.
|
|
80
|
+
"@types/jest": "^29.5.14",
|
|
81
81
|
"@types/lodash-es": "^4.17.12",
|
|
82
|
-
"@types/node": "^22.
|
|
83
|
-
"@types/react": "^18.3.
|
|
82
|
+
"@types/node": "^22.10.1",
|
|
83
|
+
"@types/react": "^18.3.12",
|
|
84
84
|
"@types/react-dom": "^18.3.1",
|
|
85
85
|
"@types/uuid": "^10.0.0",
|
|
86
86
|
"@typescript-eslint/eslint-plugin": "^7.17.0",
|
|
87
87
|
"@typescript-eslint/parser": "^7.17.0",
|
|
88
|
-
"ag-grid-community": "^32.
|
|
89
|
-
"ag-grid-react": "^32.
|
|
88
|
+
"ag-grid-community": "^32.3.3",
|
|
89
|
+
"ag-grid-react": "^32.3.3",
|
|
90
90
|
"esbuild": "^0.24.0",
|
|
91
91
|
"eslint": "^8.57.0",
|
|
92
92
|
"eslint-config-prettier": "^9.1.0",
|
|
93
93
|
"eslint-config-react-app": "^7.0.1",
|
|
94
94
|
"eslint-plugin-deprecation": "^3.0.0",
|
|
95
95
|
"eslint-plugin-import": "^2.31.0",
|
|
96
|
-
"eslint-plugin-jest": "^28.
|
|
97
|
-
"eslint-plugin-jsx-a11y": "^6.10.
|
|
96
|
+
"eslint-plugin-jest": "^28.9.0",
|
|
97
|
+
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
98
98
|
"eslint-plugin-prettier": "^5.2.1",
|
|
99
|
-
"eslint-plugin-react": "^7.37.
|
|
99
|
+
"eslint-plugin-react": "^7.37.2",
|
|
100
100
|
"eslint-plugin-react-hooks": "^4.6.2",
|
|
101
101
|
"eslint-plugin-storybook": "^0.8.0",
|
|
102
102
|
"eslint-plugin-testing-library": "^6.3.0",
|
|
@@ -106,25 +106,25 @@
|
|
|
106
106
|
"jest-expect-message": "^1.1.3",
|
|
107
107
|
"mkdirp": "^3.0.1",
|
|
108
108
|
"npm-run-all": "^4.1.5",
|
|
109
|
-
"prettier": "^3.
|
|
109
|
+
"prettier": "^3.4.1",
|
|
110
110
|
"react": "^18.3.1",
|
|
111
111
|
"react-app-polyfill": "^3.0.0",
|
|
112
112
|
"react-dom": "^18.3.1",
|
|
113
|
-
"rollup": "^4.
|
|
113
|
+
"rollup": "^4.28.0",
|
|
114
114
|
"rollup-plugin-copy": "^3.5.0",
|
|
115
|
-
"sass": "^1.
|
|
115
|
+
"sass": "^1.81.0",
|
|
116
116
|
"sass-loader": "^14.2.1",
|
|
117
117
|
"semantic-release": "^22.0.12",
|
|
118
|
-
"storybook": "^8.
|
|
118
|
+
"storybook": "^8.4.6",
|
|
119
119
|
"style-loader": "^4.0.0",
|
|
120
|
-
"stylelint": "^16.
|
|
120
|
+
"stylelint": "^16.11.0",
|
|
121
121
|
"stylelint-config-recommended": "^14.0.1",
|
|
122
122
|
"stylelint-config-recommended-scss": "^14.1.0",
|
|
123
123
|
"stylelint-config-standard": "^36.0.1",
|
|
124
124
|
"stylelint-prettier": "5.0.2",
|
|
125
|
-
"stylelint-scss": "6.
|
|
126
|
-
"typescript": "^5.
|
|
127
|
-
"vite": "^5.4.
|
|
125
|
+
"stylelint-scss": "6.10.0",
|
|
126
|
+
"typescript": "^5.7.2",
|
|
127
|
+
"vite": "^5.4.11"
|
|
128
128
|
},
|
|
129
129
|
"eslintConfig": {
|
|
130
130
|
"extends": [
|