@veritone-ce/design-system 1.12.62 → 1.12.64
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.
- package/dist/cjs/components/Autocomplete/index.js +26 -3
- package/dist/cjs/components/Checkbox/index.js +7 -1
- package/dist/cjs/components/Input/index.js +0 -3
- package/dist/cjs/components/Input/input.theme.js +23 -17
- package/dist/cjs/components/Modal/modal.theme.js +2 -1
- package/dist/cjs/components/Table/AutoTable/controlled.js +8 -20
- package/dist/cjs/components/Table/AutoTable/virtual.js +77 -34
- package/dist/esm/components/Autocomplete/index.js +26 -3
- package/dist/esm/components/Checkbox/index.js +7 -1
- package/dist/esm/components/Input/index.js +0 -3
- package/dist/esm/components/Input/input.theme.js +23 -17
- package/dist/esm/components/Modal/modal.theme.js +2 -1
- package/dist/esm/components/Table/AutoTable/controlled.js +8 -20
- package/dist/esm/components/Table/AutoTable/virtual.js +75 -34
- package/dist/types/components/Autocomplete/index.d.ts +5 -2
- package/dist/types/components/Input/index.d.ts +1 -1
- package/dist/types/components/Table/AutoTable/virtual.d.ts +3 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _material = require("@mui/material");
|
|
9
|
+
var _styles = require("@mui/material/styles");
|
|
9
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
12
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
@@ -14,12 +15,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
14
15
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
16
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
16
17
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
18
|
+
var StyledAutocomplete = (0, _styles.styled)(_material.Autocomplete)({
|
|
19
|
+
'& .MuiOutlinedInput-root': {
|
|
20
|
+
padding: '0px 8px 4px'
|
|
21
|
+
}
|
|
22
|
+
});
|
|
17
23
|
function Autocomplete(props) {
|
|
18
|
-
|
|
24
|
+
var value = _react["default"].useMemo(function () {
|
|
25
|
+
var _props$items$find;
|
|
26
|
+
return props.value !== undefined ? (_props$items$find = props.items.find(function (v) {
|
|
27
|
+
return v.value === props.value;
|
|
28
|
+
})) !== null && _props$items$find !== void 0 ? _props$items$find : null : undefined;
|
|
29
|
+
}, [props.items, props.value]);
|
|
30
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAutocomplete, {
|
|
19
31
|
disablePortal: props.disablePortal,
|
|
20
32
|
options: props.items,
|
|
21
33
|
inputValue: props.inputValue,
|
|
22
34
|
filterOptions: props.filterOptions,
|
|
35
|
+
value: value,
|
|
23
36
|
isOptionEqualToValue: function isOptionEqualToValue(option, value) {
|
|
24
37
|
return option.value === value.value;
|
|
25
38
|
},
|
|
@@ -27,15 +40,25 @@ function Autocomplete(props) {
|
|
|
27
40
|
return props.onInputChange(event, inputValue);
|
|
28
41
|
},
|
|
29
42
|
fullWidth: props.fullWidth,
|
|
43
|
+
disabled: props.disabled,
|
|
44
|
+
ListboxProps: {
|
|
45
|
+
style: {
|
|
46
|
+
maxHeight: '30rem'
|
|
47
|
+
}
|
|
48
|
+
},
|
|
30
49
|
renderInput: function renderInput(params) {
|
|
31
50
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, _objectSpread(_objectSpread({}, params), {}, {
|
|
51
|
+
InputLabelProps: _objectSpread(_objectSpread({}, params.InputLabelProps), {}, {
|
|
52
|
+
shrink: true
|
|
53
|
+
}),
|
|
32
54
|
label: props.label,
|
|
33
55
|
error: props.error,
|
|
56
|
+
placeholder: props.placeholder,
|
|
34
57
|
helperText: props.error ? "Please select a ".concat(props.label) : ''
|
|
35
58
|
}));
|
|
36
59
|
},
|
|
37
|
-
onChange: function onChange(event,
|
|
38
|
-
return props.onChange(event, value);
|
|
60
|
+
onChange: function onChange(event, item) {
|
|
61
|
+
return props.onChange(event, item !== null ? item.value : null);
|
|
39
62
|
},
|
|
40
63
|
sx: props.sx
|
|
41
64
|
});
|
|
@@ -6,12 +6,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _material = require("@mui/material");
|
|
9
|
+
var _styles = require("@mui/material/styles");
|
|
9
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
|
+
var StyledCheckbox = (0, _styles.styled)(_material.Checkbox)({
|
|
13
|
+
'& .MuiSvgIcon-root': {
|
|
14
|
+
fontSize: 18
|
|
15
|
+
}
|
|
16
|
+
});
|
|
11
17
|
var Checkbox = function Checkbox(props) {
|
|
12
18
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
|
|
13
19
|
label: props.label,
|
|
14
|
-
control: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
20
|
+
control: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCheckbox, {
|
|
15
21
|
"data-testid": props['data-testid'],
|
|
16
22
|
checked: props.checked,
|
|
17
23
|
indeterminate: props.indeterminate,
|
|
@@ -10,9 +10,6 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
11
|
var Input = function Input(props) {
|
|
12
12
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
|
|
13
|
-
InputLabelProps: {
|
|
14
|
-
shrink: false
|
|
15
|
-
},
|
|
16
13
|
"data-testid": props['data-testid'],
|
|
17
14
|
type: props.type,
|
|
18
15
|
value: props.value,
|
|
@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
var inputTheme = function inputTheme(theme) {
|
|
8
8
|
return {
|
|
9
|
-
defaultProps: {
|
|
9
|
+
defaultProps: {
|
|
10
|
+
InputLabelProps: {
|
|
11
|
+
shrink: true
|
|
12
|
+
}
|
|
13
|
+
},
|
|
10
14
|
styleOverrides: {
|
|
11
15
|
root: function root() {
|
|
12
16
|
return {
|
|
@@ -18,19 +22,20 @@ var inputTheme = function inputTheme(theme) {
|
|
|
18
22
|
fontWeight: 600,
|
|
19
23
|
fontSize: '14px',
|
|
20
24
|
lineHeight: '20px',
|
|
21
|
-
color: theme.palette.
|
|
25
|
+
color: theme.palette.text.secondary,
|
|
22
26
|
'&.Mui-focused': {
|
|
23
|
-
color: theme.palette.
|
|
27
|
+
color: theme.palette.text.secondary
|
|
24
28
|
}
|
|
25
29
|
},
|
|
26
30
|
'& .MuiInputLabel-root.Mui-disabled': {
|
|
27
|
-
color: theme.palette.
|
|
31
|
+
color: theme.palette.text.secondary
|
|
28
32
|
},
|
|
29
33
|
'& .MuiInputLabel-root.Mui-error': {
|
|
30
|
-
color: theme.palette.
|
|
34
|
+
color: theme.palette.text.secondary
|
|
31
35
|
},
|
|
32
36
|
'& .MuiInputBase-root': {
|
|
33
|
-
|
|
37
|
+
marginTop: '3px',
|
|
38
|
+
padding: '0px 8px 4px',
|
|
34
39
|
height: '36px',
|
|
35
40
|
'& input': {
|
|
36
41
|
boxSizing: 'border-box',
|
|
@@ -43,24 +48,25 @@ var inputTheme = function inputTheme(theme) {
|
|
|
43
48
|
lineHeight: '20px',
|
|
44
49
|
color: theme.palette.text.primary,
|
|
45
50
|
border: 'none',
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
51
|
+
zIndex: 1,
|
|
52
|
+
// put above fieldset
|
|
53
|
+
'&::placeholder': {
|
|
54
|
+
opacity: '0.6'
|
|
49
55
|
}
|
|
50
56
|
},
|
|
51
57
|
'& fieldset': {
|
|
52
|
-
|
|
58
|
+
zIndex: 0,
|
|
59
|
+
border: "1px solid ".concat(theme.palette.text.secondary),
|
|
53
60
|
borderRadius: '4px',
|
|
54
|
-
'&:focus': {
|
|
55
|
-
border: "2px solid ".concat(theme.palette.secondary.main)
|
|
56
|
-
},
|
|
57
|
-
'&:disabled': {
|
|
58
|
-
background: theme.palette.action.disabledBackground,
|
|
59
|
-
borderColor: '#E0E8F0 !important'
|
|
60
|
-
},
|
|
61
61
|
'& legend': {
|
|
62
62
|
display: 'none'
|
|
63
63
|
}
|
|
64
|
+
},
|
|
65
|
+
'&.Mui-disabled': {
|
|
66
|
+
'& fieldset': {
|
|
67
|
+
background: theme.palette.action.disabledBackground,
|
|
68
|
+
borderColor: '#E0E8F0'
|
|
69
|
+
}
|
|
64
70
|
}
|
|
65
71
|
},
|
|
66
72
|
'& .MuiInputBase-root.MuiInputBase-multiline': {
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
+
var _material = require("@mui/material");
|
|
7
8
|
var modalTheme = function modalTheme(theme) {
|
|
8
9
|
return {
|
|
9
10
|
defaultProps: {},
|
|
@@ -12,7 +13,7 @@ var modalTheme = function modalTheme(theme) {
|
|
|
12
13
|
return {
|
|
13
14
|
borderRadius: '4px',
|
|
14
15
|
'& .MuiBackdrop-root': {
|
|
15
|
-
backgroundColor: theme.palette.neutral.main
|
|
16
|
+
backgroundColor: (0, _material.alpha)(theme.palette.neutral.main, 0.65)
|
|
16
17
|
},
|
|
17
18
|
margin: 'auto',
|
|
18
19
|
'& .MuiPaper-root': {
|
|
@@ -34,7 +34,9 @@ function ControlledAutoTable(_ref) {
|
|
|
34
34
|
className = _ref.className,
|
|
35
35
|
options = _objectWithoutProperties(_ref, _excluded);
|
|
36
36
|
var table = (0, _common.useAutoTable)(options);
|
|
37
|
-
var
|
|
37
|
+
var rows = options.data;
|
|
38
|
+
var manualRowCount = (_options$manualRowCou = options.manualRowCount) !== null && _options$manualRowCou !== void 0 ? _options$manualRowCou : rows.length;
|
|
39
|
+
var showMessage = error || loading || rows.length === 0;
|
|
38
40
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
|
|
39
41
|
sx: sx,
|
|
40
42
|
className: className,
|
|
@@ -72,20 +74,13 @@ function ControlledAutoTable(_ref) {
|
|
|
72
74
|
})
|
|
73
75
|
}, headerGroup.id);
|
|
74
76
|
})
|
|
75
|
-
}),
|
|
77
|
+
}), showMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
|
|
76
78
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
|
|
77
79
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
|
|
78
80
|
colSpan: table.getAllFlatColumns().length,
|
|
79
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorContainer, {
|
|
81
|
+
children: error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorContainer, {
|
|
80
82
|
error: error
|
|
81
|
-
})
|
|
82
|
-
})
|
|
83
|
-
})
|
|
84
|
-
}) : loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
|
|
85
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
|
|
86
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
|
|
87
|
-
colSpan: table.getAllFlatColumns().length,
|
|
88
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
|
|
83
|
+
}) : loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
|
|
89
84
|
sx: {
|
|
90
85
|
display: 'flex',
|
|
91
86
|
justifyContent: 'center',
|
|
@@ -93,16 +88,9 @@ function ControlledAutoTable(_ref) {
|
|
|
93
88
|
paddingBottom: '10px'
|
|
94
89
|
},
|
|
95
90
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
|
|
96
|
-
})
|
|
97
|
-
})
|
|
98
|
-
})
|
|
99
|
-
}) : options.data.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
|
|
100
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
|
|
101
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
|
|
102
|
-
colSpan: table.getAllFlatColumns().length,
|
|
103
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableMessage, {
|
|
91
|
+
}) : rows.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableMessage, {
|
|
104
92
|
children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
|
|
105
|
-
})
|
|
93
|
+
}) : null
|
|
106
94
|
})
|
|
107
95
|
})
|
|
108
96
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
+
exports.TableMessageMaxHeight = void 0;
|
|
7
8
|
exports["default"] = VirtualControlledAutoTable;
|
|
8
9
|
var _reactTable = require("@tanstack/react-table");
|
|
9
10
|
var _index = require("../index.js");
|
|
@@ -14,7 +15,7 @@ var _common = require("./common.js");
|
|
|
14
15
|
var _reactVirtual = require("@tanstack/react-virtual");
|
|
15
16
|
var _isPropValid = _interopRequireDefault(require("@emotion/is-prop-valid"));
|
|
16
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
-
var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "error", "ErrorContainer", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "sx", "className"];
|
|
18
|
+
var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "error", "ErrorContainer", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "debug", "sx", "className"];
|
|
18
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
20
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
20
21
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -24,6 +25,8 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
|
|
|
24
25
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
25
26
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
26
27
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
28
|
+
var TableMessageMaxHeight = 100;
|
|
29
|
+
exports.TableMessageMaxHeight = TableMessageMaxHeight;
|
|
27
30
|
var TableContainer = (0, _material.styled)(_material.Box, {
|
|
28
31
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
29
32
|
return (0, _isPropValid["default"])(prop);
|
|
@@ -43,11 +46,13 @@ function VirtualControlledAutoTable(_ref2) {
|
|
|
43
46
|
ErrorContainer = _ref2$ErrorContainer === void 0 ? _common.DefaultErrorContainer : _ref2$ErrorContainer,
|
|
44
47
|
scrollOffset = _ref2.scrollOffset,
|
|
45
48
|
getScrollElement = _ref2.getScrollElement,
|
|
46
|
-
|
|
49
|
+
_ref2$renderWhenNotVi = _ref2.renderWhenNotVisible,
|
|
50
|
+
renderWhenNotVisible = _ref2$renderWhenNotVi === void 0 ? true : _ref2$renderWhenNotVi,
|
|
47
51
|
rowSize = _ref2.rowSize,
|
|
48
52
|
_ref2$headerSize = _ref2.headerSize,
|
|
49
53
|
headerSize = _ref2$headerSize === void 0 ? 50 : _ref2$headerSize,
|
|
50
54
|
overscan = _ref2.overscan,
|
|
55
|
+
debug = _ref2.debug,
|
|
51
56
|
sx = _ref2.sx,
|
|
52
57
|
className = _ref2.className,
|
|
53
58
|
options = _objectWithoutProperties(_ref2, _excluded);
|
|
@@ -69,18 +74,64 @@ function VirtualControlledAutoTable(_ref2) {
|
|
|
69
74
|
return rowSize;
|
|
70
75
|
}
|
|
71
76
|
});
|
|
77
|
+
var showMessage = error || loading || rows.length === 0;
|
|
78
|
+
var rowsHeight = rows.length * rowSize;
|
|
79
|
+
var totalHeight = headerSize + (showMessage ? TableMessageMaxHeight : rowsHeight);
|
|
72
80
|
|
|
73
81
|
// this will completely hide the table rows if it is not within the visible threshold
|
|
74
82
|
// maybe this will be default behavior in @tanstack/react-virtual one day
|
|
75
83
|
var visibilityOverscan = virtualizer.options.overscan * rowSize;
|
|
76
|
-
var
|
|
84
|
+
var visibilityBounds = {
|
|
85
|
+
lower: offsetFromScrollEl - visibilityOverscan,
|
|
86
|
+
upper: offsetFromScrollEl + totalHeight + visibilityOverscan
|
|
87
|
+
};
|
|
88
|
+
var tableIsVisible = renderWhenNotVisible || virtualizer.scrollOffset + virtualizer.scrollRect.height >= visibilityBounds.lower && virtualizer.scrollOffset <= visibilityBounds.upper;
|
|
77
89
|
var virtualItems = virtualizer.getVirtualItems();
|
|
78
|
-
|
|
79
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContainer, {
|
|
90
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TableContainer, {
|
|
80
91
|
virtualizerTotalHeight: totalHeight,
|
|
81
92
|
sx: sx,
|
|
82
93
|
className: className,
|
|
83
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
94
|
+
children: [debug && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
95
|
+
style: {
|
|
96
|
+
position: 'relative'
|
|
97
|
+
},
|
|
98
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
99
|
+
style: {
|
|
100
|
+
position: 'absolute',
|
|
101
|
+
top: 0,
|
|
102
|
+
left: 0,
|
|
103
|
+
color: 'red',
|
|
104
|
+
zIndex: 100,
|
|
105
|
+
fontSize: 10
|
|
106
|
+
},
|
|
107
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
108
|
+
style: {
|
|
109
|
+
marginRight: 5
|
|
110
|
+
},
|
|
111
|
+
children: virtualizer.scrollOffset
|
|
112
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
113
|
+
style: {
|
|
114
|
+
marginRight: 5
|
|
115
|
+
},
|
|
116
|
+
children: virtualizer.scrollOffset + virtualizer.scrollRect.height
|
|
117
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
118
|
+
style: {
|
|
119
|
+
marginRight: 5
|
|
120
|
+
},
|
|
121
|
+
children: offsetFromScrollEl
|
|
122
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
123
|
+
style: {
|
|
124
|
+
marginRight: 5
|
|
125
|
+
},
|
|
126
|
+
children: visibilityBounds.lower
|
|
127
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
128
|
+
style: {
|
|
129
|
+
marginRight: 5
|
|
130
|
+
},
|
|
131
|
+
children: visibilityBounds.upper
|
|
132
|
+
})]
|
|
133
|
+
})
|
|
134
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Table, {
|
|
84
135
|
sx: _objectSpread({
|
|
85
136
|
borderCollapse: 'separate'
|
|
86
137
|
}, stickyHeader ? {
|
|
@@ -117,36 +168,28 @@ function VirtualControlledAutoTable(_ref2) {
|
|
|
117
168
|
})
|
|
118
169
|
}, headerGroup.id);
|
|
119
170
|
})
|
|
120
|
-
}),
|
|
121
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
|
|
122
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
|
|
123
|
-
colSpan: table.getAllFlatColumns().length,
|
|
124
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorContainer, {
|
|
125
|
-
error: error
|
|
126
|
-
})
|
|
127
|
-
})
|
|
128
|
-
})
|
|
129
|
-
}) : loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
|
|
171
|
+
}), showMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableBody, {
|
|
130
172
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableRow, {
|
|
131
173
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableCell, {
|
|
132
174
|
colSpan: table.getAllFlatColumns().length,
|
|
175
|
+
sx: {
|
|
176
|
+
padding: 0,
|
|
177
|
+
height: "".concat(TableMessageMaxHeight, "px")
|
|
178
|
+
},
|
|
133
179
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
colSpan: table.getAllFlatColumns().length,
|
|
148
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableMessage, {
|
|
149
|
-
children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
|
|
180
|
+
children: error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorContainer, {
|
|
181
|
+
error: error
|
|
182
|
+
}) : loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
|
|
183
|
+
sx: {
|
|
184
|
+
display: 'flex',
|
|
185
|
+
justifyContent: 'center',
|
|
186
|
+
paddingTop: '10px',
|
|
187
|
+
paddingBottom: '10px'
|
|
188
|
+
},
|
|
189
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
|
|
190
|
+
}) : rows.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TableMessage, {
|
|
191
|
+
children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
|
|
192
|
+
}) : null
|
|
150
193
|
})
|
|
151
194
|
})
|
|
152
195
|
})
|
|
@@ -156,7 +199,7 @@ function VirtualControlledAutoTable(_ref2) {
|
|
|
156
199
|
display: 'block',
|
|
157
200
|
content: "''",
|
|
158
201
|
// this ensures the table takes up as much size as the total elements by adding padding to the end
|
|
159
|
-
height: "".concat(virtualItems.length * rowSize, "px")
|
|
202
|
+
height: "".concat((rows.length - virtualItems.length) * rowSize, "px")
|
|
160
203
|
}
|
|
161
204
|
},
|
|
162
205
|
children: virtualItems.map(function (virtualRow, index) {
|
|
@@ -174,6 +217,6 @@ function VirtualControlledAutoTable(_ref2) {
|
|
|
174
217
|
}, row.id);
|
|
175
218
|
})
|
|
176
219
|
})]
|
|
177
|
-
})
|
|
220
|
+
})]
|
|
178
221
|
});
|
|
179
222
|
}
|
|
@@ -6,13 +6,26 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
|
|
|
6
6
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import { Autocomplete as MuiAutocomplete, TextField } from '@mui/material';
|
|
9
|
+
import { styled } from '@mui/material/styles';
|
|
9
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
var StyledAutocomplete = styled(MuiAutocomplete)({
|
|
12
|
+
'& .MuiOutlinedInput-root': {
|
|
13
|
+
padding: '0px 8px 4px'
|
|
14
|
+
}
|
|
15
|
+
});
|
|
10
16
|
function Autocomplete(props) {
|
|
11
|
-
|
|
17
|
+
var value = React.useMemo(function () {
|
|
18
|
+
var _props$items$find;
|
|
19
|
+
return props.value !== undefined ? (_props$items$find = props.items.find(function (v) {
|
|
20
|
+
return v.value === props.value;
|
|
21
|
+
})) !== null && _props$items$find !== void 0 ? _props$items$find : null : undefined;
|
|
22
|
+
}, [props.items, props.value]);
|
|
23
|
+
return /*#__PURE__*/_jsx(StyledAutocomplete, {
|
|
12
24
|
disablePortal: props.disablePortal,
|
|
13
25
|
options: props.items,
|
|
14
26
|
inputValue: props.inputValue,
|
|
15
27
|
filterOptions: props.filterOptions,
|
|
28
|
+
value: value,
|
|
16
29
|
isOptionEqualToValue: function isOptionEqualToValue(option, value) {
|
|
17
30
|
return option.value === value.value;
|
|
18
31
|
},
|
|
@@ -20,15 +33,25 @@ function Autocomplete(props) {
|
|
|
20
33
|
return props.onInputChange(event, inputValue);
|
|
21
34
|
},
|
|
22
35
|
fullWidth: props.fullWidth,
|
|
36
|
+
disabled: props.disabled,
|
|
37
|
+
ListboxProps: {
|
|
38
|
+
style: {
|
|
39
|
+
maxHeight: '30rem'
|
|
40
|
+
}
|
|
41
|
+
},
|
|
23
42
|
renderInput: function renderInput(params) {
|
|
24
43
|
return /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({}, params), {}, {
|
|
44
|
+
InputLabelProps: _objectSpread(_objectSpread({}, params.InputLabelProps), {}, {
|
|
45
|
+
shrink: true
|
|
46
|
+
}),
|
|
25
47
|
label: props.label,
|
|
26
48
|
error: props.error,
|
|
49
|
+
placeholder: props.placeholder,
|
|
27
50
|
helperText: props.error ? "Please select a ".concat(props.label) : ''
|
|
28
51
|
}));
|
|
29
52
|
},
|
|
30
|
-
onChange: function onChange(event,
|
|
31
|
-
return props.onChange(event, value);
|
|
53
|
+
onChange: function onChange(event, item) {
|
|
54
|
+
return props.onChange(event, item !== null ? item.value : null);
|
|
32
55
|
},
|
|
33
56
|
sx: props.sx
|
|
34
57
|
});
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
|
|
3
|
+
import { styled } from '@mui/material/styles';
|
|
3
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
var StyledCheckbox = styled(MuiCheckbox)({
|
|
6
|
+
'& .MuiSvgIcon-root': {
|
|
7
|
+
fontSize: 18
|
|
8
|
+
}
|
|
9
|
+
});
|
|
4
10
|
var Checkbox = function Checkbox(props) {
|
|
5
11
|
return /*#__PURE__*/_jsx(FormControlLabel, {
|
|
6
12
|
label: props.label,
|
|
7
|
-
control: /*#__PURE__*/_jsx(
|
|
13
|
+
control: /*#__PURE__*/_jsx(StyledCheckbox, {
|
|
8
14
|
"data-testid": props['data-testid'],
|
|
9
15
|
checked: props.checked,
|
|
10
16
|
indeterminate: props.indeterminate,
|
|
@@ -4,9 +4,6 @@ import { InputAdornment } from '@mui/material';
|
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
5
|
var Input = function Input(props) {
|
|
6
6
|
return /*#__PURE__*/_jsx(TextField, {
|
|
7
|
-
InputLabelProps: {
|
|
8
|
-
shrink: false
|
|
9
|
-
},
|
|
10
7
|
"data-testid": props['data-testid'],
|
|
11
8
|
type: props.type,
|
|
12
9
|
value: props.value,
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
var inputTheme = function inputTheme(theme) {
|
|
2
2
|
return {
|
|
3
|
-
defaultProps: {
|
|
3
|
+
defaultProps: {
|
|
4
|
+
InputLabelProps: {
|
|
5
|
+
shrink: true
|
|
6
|
+
}
|
|
7
|
+
},
|
|
4
8
|
styleOverrides: {
|
|
5
9
|
root: function root() {
|
|
6
10
|
return {
|
|
@@ -12,19 +16,20 @@ var inputTheme = function inputTheme(theme) {
|
|
|
12
16
|
fontWeight: 600,
|
|
13
17
|
fontSize: '14px',
|
|
14
18
|
lineHeight: '20px',
|
|
15
|
-
color: theme.palette.
|
|
19
|
+
color: theme.palette.text.secondary,
|
|
16
20
|
'&.Mui-focused': {
|
|
17
|
-
color: theme.palette.
|
|
21
|
+
color: theme.palette.text.secondary
|
|
18
22
|
}
|
|
19
23
|
},
|
|
20
24
|
'& .MuiInputLabel-root.Mui-disabled': {
|
|
21
|
-
color: theme.palette.
|
|
25
|
+
color: theme.palette.text.secondary
|
|
22
26
|
},
|
|
23
27
|
'& .MuiInputLabel-root.Mui-error': {
|
|
24
|
-
color: theme.palette.
|
|
28
|
+
color: theme.palette.text.secondary
|
|
25
29
|
},
|
|
26
30
|
'& .MuiInputBase-root': {
|
|
27
|
-
|
|
31
|
+
marginTop: '3px',
|
|
32
|
+
padding: '0px 8px 4px',
|
|
28
33
|
height: '36px',
|
|
29
34
|
'& input': {
|
|
30
35
|
boxSizing: 'border-box',
|
|
@@ -37,24 +42,25 @@ var inputTheme = function inputTheme(theme) {
|
|
|
37
42
|
lineHeight: '20px',
|
|
38
43
|
color: theme.palette.text.primary,
|
|
39
44
|
border: 'none',
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
45
|
+
zIndex: 1,
|
|
46
|
+
// put above fieldset
|
|
47
|
+
'&::placeholder': {
|
|
48
|
+
opacity: '0.6'
|
|
43
49
|
}
|
|
44
50
|
},
|
|
45
51
|
'& fieldset': {
|
|
46
|
-
|
|
52
|
+
zIndex: 0,
|
|
53
|
+
border: "1px solid ".concat(theme.palette.text.secondary),
|
|
47
54
|
borderRadius: '4px',
|
|
48
|
-
'&:focus': {
|
|
49
|
-
border: "2px solid ".concat(theme.palette.secondary.main)
|
|
50
|
-
},
|
|
51
|
-
'&:disabled': {
|
|
52
|
-
background: theme.palette.action.disabledBackground,
|
|
53
|
-
borderColor: '#E0E8F0 !important'
|
|
54
|
-
},
|
|
55
55
|
'& legend': {
|
|
56
56
|
display: 'none'
|
|
57
57
|
}
|
|
58
|
+
},
|
|
59
|
+
'&.Mui-disabled': {
|
|
60
|
+
'& fieldset': {
|
|
61
|
+
background: theme.palette.action.disabledBackground,
|
|
62
|
+
borderColor: '#E0E8F0'
|
|
63
|
+
}
|
|
58
64
|
}
|
|
59
65
|
},
|
|
60
66
|
'& .MuiInputBase-root.MuiInputBase-multiline': {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { alpha } from '@mui/material';
|
|
1
2
|
var modalTheme = function modalTheme(theme) {
|
|
2
3
|
return {
|
|
3
4
|
defaultProps: {},
|
|
@@ -6,7 +7,7 @@ var modalTheme = function modalTheme(theme) {
|
|
|
6
7
|
return {
|
|
7
8
|
borderRadius: '4px',
|
|
8
9
|
'& .MuiBackdrop-root': {
|
|
9
|
-
backgroundColor: theme.palette.neutral.main
|
|
10
|
+
backgroundColor: alpha(theme.palette.neutral.main, 0.65)
|
|
10
11
|
},
|
|
11
12
|
margin: 'auto',
|
|
12
13
|
'& .MuiPaper-root': {
|
|
@@ -29,7 +29,9 @@ export default function ControlledAutoTable(_ref) {
|
|
|
29
29
|
className = _ref.className,
|
|
30
30
|
options = _objectWithoutProperties(_ref, _excluded);
|
|
31
31
|
var table = useAutoTable(options);
|
|
32
|
-
var
|
|
32
|
+
var rows = options.data;
|
|
33
|
+
var manualRowCount = (_options$manualRowCou = options.manualRowCount) !== null && _options$manualRowCou !== void 0 ? _options$manualRowCou : rows.length;
|
|
34
|
+
var showMessage = error || loading || rows.length === 0;
|
|
33
35
|
return /*#__PURE__*/_jsx(Box, {
|
|
34
36
|
sx: sx,
|
|
35
37
|
className: className,
|
|
@@ -67,20 +69,13 @@ export default function ControlledAutoTable(_ref) {
|
|
|
67
69
|
})
|
|
68
70
|
}, headerGroup.id);
|
|
69
71
|
})
|
|
70
|
-
}),
|
|
72
|
+
}), showMessage ? /*#__PURE__*/_jsx(TableBody, {
|
|
71
73
|
children: /*#__PURE__*/_jsx(TableRow, {
|
|
72
74
|
children: /*#__PURE__*/_jsx(TableCell, {
|
|
73
75
|
colSpan: table.getAllFlatColumns().length,
|
|
74
|
-
children: /*#__PURE__*/_jsx(ErrorContainer, {
|
|
76
|
+
children: error ? /*#__PURE__*/_jsx(ErrorContainer, {
|
|
75
77
|
error: error
|
|
76
|
-
})
|
|
77
|
-
})
|
|
78
|
-
})
|
|
79
|
-
}) : loading ? /*#__PURE__*/_jsx(TableBody, {
|
|
80
|
-
children: /*#__PURE__*/_jsx(TableRow, {
|
|
81
|
-
children: /*#__PURE__*/_jsx(TableCell, {
|
|
82
|
-
colSpan: table.getAllFlatColumns().length,
|
|
83
|
-
children: /*#__PURE__*/_jsx(Box, {
|
|
78
|
+
}) : loading ? /*#__PURE__*/_jsx(Box, {
|
|
84
79
|
sx: {
|
|
85
80
|
display: 'flex',
|
|
86
81
|
justifyContent: 'center',
|
|
@@ -88,16 +83,9 @@ export default function ControlledAutoTable(_ref) {
|
|
|
88
83
|
paddingBottom: '10px'
|
|
89
84
|
},
|
|
90
85
|
children: /*#__PURE__*/_jsx(CircularProgress, {})
|
|
91
|
-
})
|
|
92
|
-
})
|
|
93
|
-
})
|
|
94
|
-
}) : options.data.length === 0 ? /*#__PURE__*/_jsx(TableBody, {
|
|
95
|
-
children: /*#__PURE__*/_jsx(TableRow, {
|
|
96
|
-
children: /*#__PURE__*/_jsx(TableCell, {
|
|
97
|
-
colSpan: table.getAllFlatColumns().length,
|
|
98
|
-
children: /*#__PURE__*/_jsx(TableMessage, {
|
|
86
|
+
}) : rows.length === 0 ? /*#__PURE__*/_jsx(TableMessage, {
|
|
99
87
|
children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
|
|
100
|
-
})
|
|
88
|
+
}) : null
|
|
101
89
|
})
|
|
102
90
|
})
|
|
103
91
|
}) : /*#__PURE__*/_jsx(TableBody, {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "error", "ErrorContainer", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "sx", "className"];
|
|
3
|
+
var _excluded = ["stickyHeader", "loading", "zeroStateMessage", "error", "ErrorContainer", "scrollOffset", "getScrollElement", "renderWhenNotVisible", "rowSize", "headerSize", "overscan", "debug", "sx", "className"];
|
|
4
4
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -19,6 +19,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
|
|
|
19
19
|
import isPropValid from '@emotion/is-prop-valid';
|
|
20
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
21
21
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
22
|
+
export var TableMessageMaxHeight = 100;
|
|
22
23
|
var TableContainer = styled(Box, {
|
|
23
24
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
24
25
|
return isPropValid(prop);
|
|
@@ -38,11 +39,13 @@ export default function VirtualControlledAutoTable(_ref2) {
|
|
|
38
39
|
ErrorContainer = _ref2$ErrorContainer === void 0 ? DefaultErrorContainer : _ref2$ErrorContainer,
|
|
39
40
|
scrollOffset = _ref2.scrollOffset,
|
|
40
41
|
getScrollElement = _ref2.getScrollElement,
|
|
41
|
-
|
|
42
|
+
_ref2$renderWhenNotVi = _ref2.renderWhenNotVisible,
|
|
43
|
+
renderWhenNotVisible = _ref2$renderWhenNotVi === void 0 ? true : _ref2$renderWhenNotVi,
|
|
42
44
|
rowSize = _ref2.rowSize,
|
|
43
45
|
_ref2$headerSize = _ref2.headerSize,
|
|
44
46
|
headerSize = _ref2$headerSize === void 0 ? 50 : _ref2$headerSize,
|
|
45
47
|
overscan = _ref2.overscan,
|
|
48
|
+
debug = _ref2.debug,
|
|
46
49
|
sx = _ref2.sx,
|
|
47
50
|
className = _ref2.className,
|
|
48
51
|
options = _objectWithoutProperties(_ref2, _excluded);
|
|
@@ -64,18 +67,64 @@ export default function VirtualControlledAutoTable(_ref2) {
|
|
|
64
67
|
return rowSize;
|
|
65
68
|
}
|
|
66
69
|
});
|
|
70
|
+
var showMessage = error || loading || rows.length === 0;
|
|
71
|
+
var rowsHeight = rows.length * rowSize;
|
|
72
|
+
var totalHeight = headerSize + (showMessage ? TableMessageMaxHeight : rowsHeight);
|
|
67
73
|
|
|
68
74
|
// this will completely hide the table rows if it is not within the visible threshold
|
|
69
75
|
// maybe this will be default behavior in @tanstack/react-virtual one day
|
|
70
76
|
var visibilityOverscan = virtualizer.options.overscan * rowSize;
|
|
71
|
-
var
|
|
77
|
+
var visibilityBounds = {
|
|
78
|
+
lower: offsetFromScrollEl - visibilityOverscan,
|
|
79
|
+
upper: offsetFromScrollEl + totalHeight + visibilityOverscan
|
|
80
|
+
};
|
|
81
|
+
var tableIsVisible = renderWhenNotVisible || virtualizer.scrollOffset + virtualizer.scrollRect.height >= visibilityBounds.lower && virtualizer.scrollOffset <= visibilityBounds.upper;
|
|
72
82
|
var virtualItems = virtualizer.getVirtualItems();
|
|
73
|
-
|
|
74
|
-
return /*#__PURE__*/_jsx(TableContainer, {
|
|
83
|
+
return /*#__PURE__*/_jsxs(TableContainer, {
|
|
75
84
|
virtualizerTotalHeight: totalHeight,
|
|
76
85
|
sx: sx,
|
|
77
86
|
className: className,
|
|
78
|
-
children: /*#__PURE__*/
|
|
87
|
+
children: [debug && /*#__PURE__*/_jsx("div", {
|
|
88
|
+
style: {
|
|
89
|
+
position: 'relative'
|
|
90
|
+
},
|
|
91
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
92
|
+
style: {
|
|
93
|
+
position: 'absolute',
|
|
94
|
+
top: 0,
|
|
95
|
+
left: 0,
|
|
96
|
+
color: 'red',
|
|
97
|
+
zIndex: 100,
|
|
98
|
+
fontSize: 10
|
|
99
|
+
},
|
|
100
|
+
children: [/*#__PURE__*/_jsx("span", {
|
|
101
|
+
style: {
|
|
102
|
+
marginRight: 5
|
|
103
|
+
},
|
|
104
|
+
children: virtualizer.scrollOffset
|
|
105
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
106
|
+
style: {
|
|
107
|
+
marginRight: 5
|
|
108
|
+
},
|
|
109
|
+
children: virtualizer.scrollOffset + virtualizer.scrollRect.height
|
|
110
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
111
|
+
style: {
|
|
112
|
+
marginRight: 5
|
|
113
|
+
},
|
|
114
|
+
children: offsetFromScrollEl
|
|
115
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
116
|
+
style: {
|
|
117
|
+
marginRight: 5
|
|
118
|
+
},
|
|
119
|
+
children: visibilityBounds.lower
|
|
120
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
121
|
+
style: {
|
|
122
|
+
marginRight: 5
|
|
123
|
+
},
|
|
124
|
+
children: visibilityBounds.upper
|
|
125
|
+
})]
|
|
126
|
+
})
|
|
127
|
+
}), /*#__PURE__*/_jsxs(Table, {
|
|
79
128
|
sx: _objectSpread({
|
|
80
129
|
borderCollapse: 'separate'
|
|
81
130
|
}, stickyHeader ? {
|
|
@@ -112,36 +161,28 @@ export default function VirtualControlledAutoTable(_ref2) {
|
|
|
112
161
|
})
|
|
113
162
|
}, headerGroup.id);
|
|
114
163
|
})
|
|
115
|
-
}),
|
|
116
|
-
children: /*#__PURE__*/_jsx(TableRow, {
|
|
117
|
-
children: /*#__PURE__*/_jsx(TableCell, {
|
|
118
|
-
colSpan: table.getAllFlatColumns().length,
|
|
119
|
-
children: /*#__PURE__*/_jsx(ErrorContainer, {
|
|
120
|
-
error: error
|
|
121
|
-
})
|
|
122
|
-
})
|
|
123
|
-
})
|
|
124
|
-
}) : loading ? /*#__PURE__*/_jsx(TableBody, {
|
|
164
|
+
}), showMessage ? /*#__PURE__*/_jsx(TableBody, {
|
|
125
165
|
children: /*#__PURE__*/_jsx(TableRow, {
|
|
126
166
|
children: /*#__PURE__*/_jsx(TableCell, {
|
|
127
167
|
colSpan: table.getAllFlatColumns().length,
|
|
168
|
+
sx: {
|
|
169
|
+
padding: 0,
|
|
170
|
+
height: "".concat(TableMessageMaxHeight, "px")
|
|
171
|
+
},
|
|
128
172
|
children: /*#__PURE__*/_jsx(Box, {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
colSpan: table.getAllFlatColumns().length,
|
|
143
|
-
children: /*#__PURE__*/_jsx(TableMessage, {
|
|
144
|
-
children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
|
|
173
|
+
children: error ? /*#__PURE__*/_jsx(ErrorContainer, {
|
|
174
|
+
error: error
|
|
175
|
+
}) : loading ? /*#__PURE__*/_jsx(Box, {
|
|
176
|
+
sx: {
|
|
177
|
+
display: 'flex',
|
|
178
|
+
justifyContent: 'center',
|
|
179
|
+
paddingTop: '10px',
|
|
180
|
+
paddingBottom: '10px'
|
|
181
|
+
},
|
|
182
|
+
children: /*#__PURE__*/_jsx(CircularProgress, {})
|
|
183
|
+
}) : rows.length === 0 ? /*#__PURE__*/_jsx(TableMessage, {
|
|
184
|
+
children: zeroStateMessage !== null && zeroStateMessage !== void 0 ? zeroStateMessage : 'No data found'
|
|
185
|
+
}) : null
|
|
145
186
|
})
|
|
146
187
|
})
|
|
147
188
|
})
|
|
@@ -151,7 +192,7 @@ export default function VirtualControlledAutoTable(_ref2) {
|
|
|
151
192
|
display: 'block',
|
|
152
193
|
content: "''",
|
|
153
194
|
// this ensures the table takes up as much size as the total elements by adding padding to the end
|
|
154
|
-
height: "".concat(virtualItems.length * rowSize, "px")
|
|
195
|
+
height: "".concat((rows.length - virtualItems.length) * rowSize, "px")
|
|
155
196
|
}
|
|
156
197
|
},
|
|
157
198
|
children: virtualItems.map(function (virtualRow, index) {
|
|
@@ -169,6 +210,6 @@ export default function VirtualControlledAutoTable(_ref2) {
|
|
|
169
210
|
}, row.id);
|
|
170
211
|
})
|
|
171
212
|
})]
|
|
172
|
-
})
|
|
213
|
+
})]
|
|
173
214
|
});
|
|
174
215
|
}
|
|
@@ -8,11 +8,14 @@ type Item = {
|
|
|
8
8
|
export type AutocompleteProps = {
|
|
9
9
|
items: Item[];
|
|
10
10
|
filterOptions?: (options: Item[], state: FilterOptionsState<Item>) => Item[];
|
|
11
|
-
|
|
11
|
+
value?: string | null;
|
|
12
|
+
label?: string;
|
|
12
13
|
disablePortal?: boolean;
|
|
14
|
+
placeholder?: string;
|
|
13
15
|
inputValue?: string;
|
|
14
16
|
onInputChange?: (event: React.SyntheticEvent, inputValue: string) => void;
|
|
15
|
-
onChange: (event: React.SyntheticEvent, value:
|
|
17
|
+
onChange: (event: React.SyntheticEvent, value: string | null) => void;
|
|
18
|
+
disabled?: boolean;
|
|
16
19
|
error?: boolean;
|
|
17
20
|
sx?: SxProps<Theme>;
|
|
18
21
|
fullWidth?: boolean;
|
|
@@ -3,7 +3,7 @@ import { SxProps, Theme } from '@mui/material/styles';
|
|
|
3
3
|
export type InputProps = {
|
|
4
4
|
'data-testid'?: string;
|
|
5
5
|
type?: React.InputHTMLAttributes<unknown>['type'];
|
|
6
|
-
value
|
|
6
|
+
value?: unknown;
|
|
7
7
|
helperText?: React.ReactNode;
|
|
8
8
|
label?: React.ReactNode;
|
|
9
9
|
disabled?: boolean;
|
|
@@ -15,7 +15,9 @@ export type VirtualControlledAutoTableProps<TData, TMeta = unknown> = AutoTableH
|
|
|
15
15
|
rowSize: number;
|
|
16
16
|
headerSize?: number;
|
|
17
17
|
overscan?: number;
|
|
18
|
+
debug?: boolean;
|
|
18
19
|
sx?: SxProps<Theme>;
|
|
19
20
|
className?: string;
|
|
20
21
|
};
|
|
21
|
-
export
|
|
22
|
+
export declare const TableMessageMaxHeight = 100;
|
|
23
|
+
export default function VirtualControlledAutoTable<TData, TMeta = unknown>({ stickyHeader, loading, zeroStateMessage, error, ErrorContainer, scrollOffset, getScrollElement, renderWhenNotVisible, rowSize, headerSize, overscan, debug, sx, className, ...options }: VirtualControlledAutoTableProps<TData, TMeta>): React.JSX.Element;
|