@linzjs/windows 3.2.3 → 3.3.0

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 (8) hide show
  1. package/README.md +2 -2
  2. package/dist/LuiModalAsync/LuiModalAsync.scss +2 -2
  3. package/dist/LuiModalAsync/LuiModalAsyncContextProvider.tsx +1 -3
  4. package/dist/LuiModalAsync/useShowAsyncModal.ts +1 -1
  5. package/dist/panel/Panel.scss +3 -3
  6. package/dist/panel/Panel.tsx +65 -35
  7. package/dist/panel/PanelHeader.tsx +21 -8
  8. package/package.json +29 -29
package/README.md CHANGED
@@ -9,8 +9,8 @@ React state based modals/windows are painful because they require:
9
9
  - shared states for open/closed.
10
10
  - callbacks/states for return values.
11
11
  - inline modal/window includes, which prevent you from closing the invoking component before the modal/window has completed.
12
- - multi-window dialogs
13
- - html5 dialog based
12
+ - multi-window dialogs.
13
+ - html5 dialog based.
14
14
 
15
15
  This module gives you promise based modals/windows which don't require all the state
16
16
  based boilerplate / inline-components.
package/dist/LuiModalAsync/LuiModalAsync.scss CHANGED
@@ -9,7 +9,7 @@ dialog.LuiModalAsync, div.LuiModalAsync {
9
9
  border: none;
10
10
  display: flex;
11
11
  flex-direction: column;
12
- border-radius: lui.$unit-xs;
12
+ border-radius: 9px;
13
13
  padding: lui.$unit-md;
14
14
  min-width: 400px;
15
15
  max-width: 80vw;
@@ -29,7 +29,7 @@ dialog.LuiModalAsync, div.LuiModalAsync {
29
29
  }
30
30
 
31
31
  &.LuiModalPrefab-error {
32
- border-left: lui.$unit-xs solid lui.$error;
32
+ border-left: lui.$unit-sm solid lui.$error;
33
33
  }
34
34
 
35
35
  h4 {
package/dist/LuiModalAsync/LuiModalAsyncContextProvider.tsx CHANGED
@@ -134,9 +134,7 @@ export const LuiModalAsyncContextProvider = ({ children }: PropsWithChildren<unk
134
134
  */
135
135
  const modalHasView = useCallback(
136
136
  (modalInstance: LuiModalAsyncInstance): boolean =>
137
- modalInstance.ownerRef === openModalOnAllWindows ||
138
- modalInstance.ownerRef.current === null || // document.body
139
- !!modalInstance.ownerRef.current.ownerDocument?.defaultView,
137
+ modalInstance.ownerRef === openModalOnAllWindows || !!modalInstance.ownerRef.current?.ownerDocument.defaultView,
140
138
  [],
141
139
  );
142
140
 
package/dist/LuiModalAsync/useShowAsyncModal.ts CHANGED
@@ -9,7 +9,7 @@ export interface ShowModalProps {
9
9
  export const useShowAsyncModal = () => {
10
10
  const { showModal } = useContext(LuiModalAsyncContext);
11
11
 
12
- const modalOwnerRef = useRef<any>(null);
12
+ const modalOwnerRef = useRef<any>(document.body);
13
13
 
14
14
  const showModalAsync = useCallback(
15
15
  <CT extends ComponentType>(
package/dist/panel/Panel.scss CHANGED
@@ -91,8 +91,8 @@
91
91
  display: flex;
92
92
  align-items: center;
93
93
 
94
- a.lui-button,
95
- button.lui-button {
94
+ a.lui-button,
95
+ button.lui-button {
96
96
  display: flex;
97
97
  align-items: center;
98
98
 
@@ -118,4 +118,4 @@
118
118
  flex: 1;
119
119
  overflow: auto;
120
120
  display: flex;
121
- }
121
+ }
package/dist/panel/Panel.tsx CHANGED
@@ -13,7 +13,7 @@ import { Rnd } from "react-rnd";
13
13
 
14
14
  export interface PanelProps {
15
15
  title: string;
16
- position?: PanelPosition;
16
+ position?: PanelPosition | "tile" | "center";
17
17
  size?: PanelSize;
18
18
  className?: string;
19
19
  children: ReactNode;
@@ -21,16 +21,18 @@ export interface PanelProps {
21
21
  maxWidth?: number;
22
22
  minHeight?: number;
23
23
  minWidth?: number;
24
+ modal?: boolean;
24
25
  }
25
26
 
26
27
  export const Panel = ({
27
28
  title,
28
- position,
29
+ position = "tile",
29
30
  size = { width: 320, height: 200 },
30
31
  maxHeight,
31
32
  maxWidth,
32
33
  minHeight = 100,
33
34
  minWidth = 100,
35
+ modal,
34
36
  className,
35
37
  children,
36
38
  }: PanelProps): ReactElement => {
@@ -38,7 +40,20 @@ export const Panel = ({
38
40
  const { panelPoppedOut, bounds, zIndex, bringPanelToFront, uniqueId, setTitle, dockId, docked } =
39
41
  useContext(PanelInstanceContext);
40
42
 
41
- const [panelPosition, setPanelPosition] = useState(() => position ?? nextStackPosition());
43
+ const [panelPosition, setPanelPosition] = useState(() => {
44
+ switch (position) {
45
+ case "center":
46
+ return {
47
+ x: (window.innerWidth - size.width) / 2,
48
+ y: (window.innerHeight - size.height) / 2,
49
+ };
50
+ case "tile":
51
+ return nextStackPosition();
52
+ default:
53
+ return position ?? nextStackPosition();
54
+ }
55
+ });
56
+
42
57
  const [panelSize, setPanelSize] = useState(size ?? { width: 320, height: 200 });
43
58
 
44
59
  const resizePanel = (newPanelSize: Partial<PanelSize>) => {
@@ -74,40 +89,55 @@ export const Panel = ({
74
89
  </div>
75
90
  </PopoutWindow>
76
91
  ) : (
77
- <Rnd
78
- className={clsx("WindowPanel", className)}
79
- dragHandleClassName={"draggable-handle"}
80
- maxHeight={maxHeight}
81
- maxWidth={maxWidth}
82
- minWidth={minWidth}
83
- minHeight={minHeight}
84
- position={panelPosition}
85
- size={panelSize}
86
- style={{ zIndex }}
87
- bounds={bounds ?? document.body}
88
- onDragStop={(_evt, data) => {
89
- setPanelPosition({ x: data.x, y: data.y });
90
- }}
91
- onResizeStop={(_evt, _dir, ref, _delta, position) => {
92
- setPanelPosition(position);
93
- setPanelSize({
94
- width: parseInt(ref.style.width),
95
- height: parseInt(ref.style.height),
96
- });
97
- }}
98
- onMouseDown={bringPanelToFront}
99
- >
100
- <div
101
- style={{
102
- display: "flex",
103
- flexDirection: "column",
104
- width: "100%",
105
- height: "100%",
92
+ <>
93
+ {modal && (
94
+ <div
95
+ style={{
96
+ position: "absolute",
97
+ top: 0,
98
+ left: 0,
99
+ bottom: 0,
100
+ right: 0,
101
+ backgroundColor: "rgb(0,0,0,0.1)",
102
+ zIndex,
103
+ }}
104
+ />
105
+ )}
106
+ <Rnd
107
+ className={clsx("WindowPanel", className)}
108
+ dragHandleClassName={"draggable-handle"}
109
+ maxHeight={maxHeight}
110
+ maxWidth={maxWidth}
111
+ minWidth={minWidth}
112
+ minHeight={minHeight}
113
+ position={panelPosition}
114
+ size={panelSize}
115
+ style={{ zIndex }}
116
+ bounds={bounds ?? document.body}
117
+ onDragStop={(_evt, data) => {
118
+ setPanelPosition({ x: data.x, y: data.y });
119
+ }}
120
+ onResizeStop={(_evt, _dir, ref, _delta, position) => {
121
+ setPanelPosition(position);
122
+ setPanelSize({
123
+ width: parseInt(ref.style.width),
124
+ height: parseInt(ref.style.height),
125
+ });
106
126
  }}
127
+ onMouseDown={bringPanelToFront}
107
128
  >
108
- {children}
109
- </div>
110
- </Rnd>
129
+ <div
130
+ style={{
131
+ display: "flex",
132
+ flexDirection: "column",
133
+ width: "100%",
134
+ height: "100%",
135
+ }}
136
+ >
137
+ {children}
138
+ </div>
139
+ </Rnd>
140
+ </>
111
141
  )}
112
142
  </PanelContext.Provider>
113
143
  );
package/dist/panel/PanelHeader.tsx CHANGED
@@ -12,9 +12,20 @@ export interface PanelHeaderProps {
12
12
  helpUrl?: string;
13
13
  onHelpClick?: () => void;
14
14
  dockTo?: string;
15
+ disableClose?: boolean;
16
+ disablePopout?: boolean;
15
17
  }
16
18
 
17
- export const PanelHeader = ({ icon, extraLeft, extraRight, helpUrl, onHelpClick, dockTo }: PanelHeaderProps) => {
19
+ export const PanelHeader = ({
20
+ icon,
21
+ extraLeft,
22
+ extraRight,
23
+ helpUrl,
24
+ onHelpClick,
25
+ dockTo,
26
+ disableClose,
27
+ disablePopout,
28
+ }: PanelHeaderProps) => {
18
29
  const { panelClose, panelTogglePopout, panelPoppedOut, title, dock, undock, docked } =
19
30
  useContext(PanelInstanceContext);
20
31
  const [cursor, setCursor] = useState<"grab" | "grabbing">("grab");
@@ -42,7 +53,7 @@ export const PanelHeader = ({ icon, extraLeft, extraRight, helpUrl, onHelpClick,
42
53
  <PanelHeaderButton aria-label={"Help"} href={helpUrl} onClick={onHelpClick} icon={"ic_help_outline"} />
43
54
  )}
44
55
  </div>
45
- <div className={"WindowPanel-divider-right"} />
56
+ {(dockTo || !disablePopout || !disableClose) && <div className={"WindowPanel-divider-right"} />}
46
57
  <div className={"WindowPanel-buttons"}>
47
58
  {dockTo &&
48
59
  (docked ? (
@@ -50,12 +61,14 @@ export const PanelHeader = ({ icon, extraLeft, extraRight, helpUrl, onHelpClick,
50
61
  ) : (
51
62
  <PanelHeaderButton aria-label={"Undock"} onClick={() => dock(dockTo)} icon={"ic_left_col"} />
52
63
  ))}
53
- <PanelHeaderButton
54
- aria-label={panelPoppedOut ? "Pop-in" : "Pop-out"}
55
- onClick={panelTogglePopout}
56
- icon={panelPoppedOut ? "ic_pop_back" : "ic_launch_new window_open"}
57
- />
58
- <PanelHeaderButton aria-label={"Close"} onClick={panelClose} icon={"ic_clear"} />
64
+ {!disablePopout && (
65
+ <PanelHeaderButton
66
+ aria-label={panelPoppedOut ? "Pop-in" : "Pop-out"}
67
+ onClick={panelTogglePopout}
68
+ icon={panelPoppedOut ? "ic_pop_back" : "ic_launch_new window_open"}
69
+ />
70
+ )}
71
+ {!disableClose && <PanelHeaderButton aria-label={"Close"} onClick={panelClose} icon={"ic_clear"} />}
59
72
  </div>
60
73
  </div>
61
74
  );
package/package.json CHANGED
@@ -13,7 +13,7 @@
13
13
  "popout"
14
14
  ],
15
15
  "main": "./dist/index.ts",
16
- "version": "3.2.3",
16
+ "version": "3.3.0",
17
17
  "peerDependencies": {
18
18
  "@linzjs/lui": "^21",
19
19
  "lodash-es": ">=4",
@@ -46,48 +46,48 @@
46
46
  "semantic-release": "semantic-release"
47
47
  },
48
48
  "dependencies": {
49
- "@emotion/cache": "^11.13.0",
50
- "@emotion/react": "^11.13.0",
49
+ "@emotion/cache": "^11.13.1",
50
+ "@emotion/react": "^11.13.3",
51
51
  "@emotion/styled": "^11.13.0",
52
52
  "lodash-es": ">=4",
53
- "react-rnd": "^10.4.11",
53
+ "react-rnd": "^10.4.12",
54
54
  "usehooks-ts": "^3.1.0",
55
55
  "uuid": "^10.0.0"
56
56
  },
57
57
  "devDependencies": {
58
- "@chromatic-com/storybook": "^1.6.1",
58
+ "@chromatic-com/storybook": "^2.0.2",
59
59
  "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
60
60
  "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
61
- "@linzjs/lui": "^21.40.5",
61
+ "@linzjs/lui": "^21.45.1",
62
62
  "@linzjs/step-ag-grid": "^21.2.1",
63
63
  "@rollup/plugin-commonjs": "^26.0.1",
64
64
  "@rollup/plugin-json": "^6.1.0",
65
65
  "@rollup/plugin-node-resolve": "^15.2.3",
66
- "@storybook/addon-docs": "^8.1.11",
67
- "@storybook/addon-essentials": "^8.1.11",
68
- "@storybook/addon-interactions": "^8.1.11",
69
- "@storybook/addon-links": "^8.1.11",
70
- "@storybook/addon-mdx-gfm": "^8.1.11",
71
- "@storybook/blocks": "^8.1.11",
72
- "@storybook/react": "^8.1.11",
73
- "@storybook/react-vite": "^8.1.11",
74
- "@storybook/test": "^8.1.11",
75
- "@storybook/test-runner": "^0.19.0",
76
- "@testing-library/jest-dom": "^6.4.7",
77
- "@testing-library/react": "^16.0.0",
66
+ "@storybook/addon-docs": "^8.3.0",
67
+ "@storybook/addon-essentials": "^8.3.0",
68
+ "@storybook/addon-interactions": "^8.3.0",
69
+ "@storybook/addon-links": "^8.3.0",
70
+ "@storybook/addon-mdx-gfm": "^8.3.0",
71
+ "@storybook/blocks": "^8.3.0",
72
+ "@storybook/react": "^8.3.0",
73
+ "@storybook/react-vite": "^8.3.0",
74
+ "@storybook/test": "^8.3.0",
75
+ "@storybook/test-runner": "^0.19.1",
76
+ "@testing-library/jest-dom": "^6.5.0",
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.12",
80
+ "@types/jest": "^29.5.13",
81
81
  "@types/lodash-es": "^4.17.12",
82
- "@types/node": "^20.14.11",
83
- "@types/react": "^18.3.3",
82
+ "@types/node": "^22.5.5",
83
+ "@types/react": "^18.3.5",
84
84
  "@types/react-dom": "^18.3.0",
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
88
  "ag-grid-community": "^31.3.4",
89
89
  "ag-grid-react": "^31.3.4",
90
- "esbuild": "^0.23.0",
90
+ "esbuild": "^0.23.1",
91
91
  "eslint": "^8.57.0",
92
92
  "eslint-config-prettier": "^9.1.0",
93
93
  "eslint-config-react-app": "^7.0.1",
@@ -110,21 +110,21 @@
110
110
  "react": "^18.3.1",
111
111
  "react-app-polyfill": "^3.0.0",
112
112
  "react-dom": "^18.3.1",
113
- "rollup": "^4.19.0",
113
+ "rollup": "^4.21.3",
114
114
  "rollup-plugin-copy": "^3.5.0",
115
- "sass": "^1.77.8",
115
+ "sass": "^1.78.0",
116
116
  "sass-loader": "^14.2.1",
117
117
  "semantic-release": "^22.0.12",
118
- "storybook": "^8.1.11",
118
+ "storybook": "^8.3.0",
119
119
  "style-loader": "^4.0.0",
120
- "stylelint": "^16.7.0",
120
+ "stylelint": "^16.9.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.4.1",
126
- "typescript": "^5.4.5",
127
- "vite": "^5.3.4"
125
+ "stylelint-scss": "6.6.0",
126
+ "typescript": "^5.6.2",
127
+ "vite": "^5.4.5"
128
128
  },
129
129
  "eslintConfig": {
130
130
  "extends": [