@etsoo/materialui 1.4.75 → 1.4.76

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 (9) hide show
  1. package/lib/cjs/ButtonPopover.d.ts +5 -0
  2. package/lib/cjs/ButtonPopover.js +5 -4
  3. package/lib/cjs/pages/ViewPage.js +1 -2
  4. package/lib/mjs/ButtonPopover.d.ts +5 -0
  5. package/lib/mjs/ButtonPopover.js +5 -4
  6. package/lib/mjs/pages/ViewPage.js +1 -2
  7. package/package.json +10 -10
  8. package/src/ButtonPopover.tsx +13 -6
  9. package/src/pages/ViewPage.tsx +1 -1
package/lib/cjs/ButtonPopover.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { PopoverOrigin } from "@mui/material";
1
2
  import React from "react";
2
3
  /**
3
4
  * Button popover props
@@ -20,6 +21,10 @@ export type ButtonPopoverProps<T> = {
20
21
  * @returns Data promise
21
22
  */
22
23
  loadData?: () => Promise<T | undefined>;
24
+ /**
25
+ * Position
26
+ */
27
+ position?: PopoverOrigin["horizontal"];
23
28
  };
24
29
  /**
25
30
  * Button popover component
package/lib/cjs/ButtonPopover.js CHANGED
@@ -14,7 +14,7 @@ const react_1 = __importDefault(require("react"));
14
14
  */
15
15
  function ButtonPopover(props) {
16
16
  // Destruct
17
- const { button, children, loadData } = props;
17
+ const { button, children, loadData, position = "right" } = props;
18
18
  // States
19
19
  const [anchorEl, setAnchorEl] = react_1.default.useState(null);
20
20
  const [data, setData] = react_1.default.useState(null);
@@ -37,8 +37,9 @@ function ButtonPopover(props) {
37
37
  const handleClose = () => {
38
38
  setAnchorEl(null);
39
39
  };
40
+ const styles = position === "left" ? { left: 14 } : { right: 14 };
40
41
  // Layout
41
- return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [button((handler) => setAnchorEl(handler)), (0, jsx_runtime_1.jsx)(material_1.Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, slotProps: {
42
+ return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [button((handler) => setAnchorEl(handler)), (0, jsx_runtime_1.jsx)(material_1.Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: position, vertical: "top" }, anchorOrigin: { horizontal: position, vertical: "bottom" }, slotProps: {
42
43
  paper: {
43
44
  elevation: 0,
44
45
  sx: {
@@ -50,12 +51,12 @@ function ButtonPopover(props) {
50
51
  display: "block",
51
52
  position: "absolute",
52
53
  top: 0,
53
- right: 14,
54
54
  width: 10,
55
55
  height: 10,
56
56
  bgcolor: "background.paper",
57
57
  transform: "translateY(-50%) rotate(45deg)",
58
- zIndex: 0
58
+ zIndex: 0,
59
+ ...styles
59
60
  }
60
61
  }
61
62
  }
package/lib/cjs/pages/ViewPage.js CHANGED
@@ -118,8 +118,7 @@ function ViewPage(props) {
118
118
  // Load data
119
119
  const refresh = react_3.default.useCallback(async () => {
120
120
  const result = await loadData();
121
- if (result == null)
122
- return;
121
+ // When failed or no data returned, show the loading bar
123
122
  setData(result);
124
123
  }, [loadData]);
125
124
  react_3.default.useEffect(() => {
package/lib/mjs/ButtonPopover.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { PopoverOrigin } from "@mui/material";
1
2
  import React from "react";
2
3
  /**
3
4
  * Button popover props
@@ -20,6 +21,10 @@ export type ButtonPopoverProps<T> = {
20
21
  * @returns Data promise
21
22
  */
22
23
  loadData?: () => Promise<T | undefined>;
24
+ /**
25
+ * Position
26
+ */
27
+ position?: PopoverOrigin["horizontal"];
23
28
  };
24
29
  /**
25
30
  * Button popover component
package/lib/mjs/ButtonPopover.js CHANGED
@@ -8,7 +8,7 @@ import React from "react";
8
8
  */
9
9
  export function ButtonPopover(props) {
10
10
  // Destruct
11
- const { button, children, loadData } = props;
11
+ const { button, children, loadData, position = "right" } = props;
12
12
  // States
13
13
  const [anchorEl, setAnchorEl] = React.useState(null);
14
14
  const [data, setData] = React.useState(null);
@@ -31,8 +31,9 @@ export function ButtonPopover(props) {
31
31
  const handleClose = () => {
32
32
  setAnchorEl(null);
33
33
  };
34
+ const styles = position === "left" ? { left: 14 } : { right: 14 };
34
35
  // Layout
35
- return (_jsxs(React.Fragment, { children: [button((handler) => setAnchorEl(handler)), _jsx(Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, slotProps: {
36
+ return (_jsxs(React.Fragment, { children: [button((handler) => setAnchorEl(handler)), _jsx(Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: position, vertical: "top" }, anchorOrigin: { horizontal: position, vertical: "bottom" }, slotProps: {
36
37
  paper: {
37
38
  elevation: 0,
38
39
  sx: {
@@ -44,12 +45,12 @@ export function ButtonPopover(props) {
44
45
  display: "block",
45
46
  position: "absolute",
46
47
  top: 0,
47
- right: 14,
48
48
  width: 10,
49
49
  height: 10,
50
50
  bgcolor: "background.paper",
51
51
  transform: "translateY(-50%) rotate(45deg)",
52
- zIndex: 0
52
+ zIndex: 0,
53
+ ...styles
53
54
  }
54
55
  }
55
56
  }
package/lib/mjs/pages/ViewPage.js CHANGED
@@ -111,8 +111,7 @@ export function ViewPage(props) {
111
111
  // Load data
112
112
  const refresh = React.useCallback(async () => {
113
113
  const result = await loadData();
114
- if (result == null)
115
- return;
114
+ // When failed or no data returned, show the loading bar
116
115
  setData(result);
117
116
  }, [loadData]);
118
117
  React.useEffect(() => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.4.75",
3
+ "version": "1.4.76",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
40
40
  "@dnd-kit/sortable": "^10.0.0",
41
41
  "@emotion/react": "^11.14.0",
42
42
  "@emotion/styled": "^11.14.0",
43
- "@etsoo/appscript": "^1.5.90",
44
- "@etsoo/notificationbase": "^1.1.56",
43
+ "@etsoo/appscript": "^1.5.95",
44
+ "@etsoo/notificationbase": "^1.1.57",
45
45
  "@etsoo/react": "^1.8.26",
46
- "@etsoo/shared": "^1.2.58",
46
+ "@etsoo/shared": "^1.2.59",
47
47
  "@mui/icons-material": "^6.3.1",
48
48
  "@mui/material": "^6.3.1",
49
- "@mui/x-data-grid": "^7.23.6",
49
+ "@mui/x-data-grid": "^7.24.1",
50
50
  "chart.js": "^4.4.7",
51
51
  "chartjs-plugin-datalabels": "^2.2.0",
52
52
  "eventemitter3": "^5.0.1",
@@ -66,13 +66,13 @@
66
66
  },
67
67
  "devDependencies": {
68
68
  "@babel/cli": "^7.26.4",
69
- "@babel/core": "^7.26.0",
69
+ "@babel/core": "^7.26.7",
70
70
  "@babel/plugin-transform-runtime": "^7.25.9",
71
- "@babel/preset-env": "^7.26.0",
71
+ "@babel/preset-env": "^7.26.7",
72
72
  "@babel/preset-react": "^7.26.3",
73
73
  "@babel/preset-typescript": "^7.26.0",
74
- "@babel/runtime-corejs3": "^7.26.0",
75
- "@testing-library/react": "^16.1.0",
74
+ "@babel/runtime-corejs3": "^7.26.7",
75
+ "@testing-library/react": "^16.2.0",
76
76
  "@types/pica": "^9.0.5",
77
77
  "@types/pulltorefreshjs": "^0.1.7",
78
78
  "@types/react": "^18.3.18",
@@ -83,6 +83,6 @@
83
83
  "@vitejs/plugin-react": "^4.3.4",
84
84
  "jsdom": "^26.0.0",
85
85
  "typescript": "^5.7.3",
86
- "vitest": "^2.1.8"
86
+ "vitest": "^3.0.4"
87
87
  }
88
88
  }
package/src/ButtonPopover.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Popover } from "@mui/material";
1
+ import { Popover, PopoverOrigin } from "@mui/material";
2
2
  import React from "react";
3
3
 
4
4
  /**
@@ -24,6 +24,11 @@ export type ButtonPopoverProps<T> = {
24
24
  * @returns Data promise
25
25
  */
26
26
  loadData?: () => Promise<T | undefined>;
27
+
28
+ /**
29
+ * Position
30
+ */
31
+ position?: PopoverOrigin["horizontal"];
27
32
  };
28
33
 
29
34
  /**
@@ -33,7 +38,7 @@ export type ButtonPopoverProps<T> = {
33
38
  */
34
39
  export function ButtonPopover<T>(props: ButtonPopoverProps<T>) {
35
40
  // Destruct
36
- const { button, children, loadData } = props;
41
+ const { button, children, loadData, position = "right" } = props;
37
42
 
38
43
  // States
39
44
  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
@@ -61,6 +66,8 @@ export function ButtonPopover<T>(props: ButtonPopoverProps<T>) {
61
66
  setAnchorEl(null);
62
67
  };
63
68
 
69
+ const styles = position === "left" ? { left: 14 } : { right: 14 };
70
+
64
71
  // Layout
65
72
  return (
66
73
  <React.Fragment>
@@ -70,8 +77,8 @@ export function ButtonPopover<T>(props: ButtonPopoverProps<T>) {
70
77
  open={open}
71
78
  onClose={handleClose}
72
79
  onClick={handleClose}
73
- transformOrigin={{ horizontal: "right", vertical: "top" }}
74
- anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
80
+ transformOrigin={{ horizontal: position, vertical: "top" }}
81
+ anchorOrigin={{ horizontal: position, vertical: "bottom" }}
75
82
  slotProps={{
76
83
  paper: {
77
84
  elevation: 0,
@@ -84,12 +91,12 @@ export function ButtonPopover<T>(props: ButtonPopoverProps<T>) {
84
91
  display: "block",
85
92
  position: "absolute",
86
93
  top: 0,
87
- right: 14,
88
94
  width: 10,
89
95
  height: 10,
90
96
  bgcolor: "background.paper",
91
97
  transform: "translateY(-50%) rotate(45deg)",
92
- zIndex: 0
98
+ zIndex: 0,
99
+ ...styles
93
100
  }
94
101
  }
95
102
  }
package/src/pages/ViewPage.tsx CHANGED
@@ -289,7 +289,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
289
289
  // Load data
290
290
  const refresh = React.useCallback(async () => {
291
291
  const result = await loadData();
292
- if (result == null) return;
292
+ // When failed or no data returned, show the loading bar
293
293
  setData(result);
294
294
  }, [loadData]);
295
295