@symply.io/basic-components 1.3.11-alpha.9 → 1.4.0-alpha.2
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/AlertDialog/index.js +30 -8
- package/Autocomplete/index.js +32 -10
- package/Autocomplete/useInteractions.js +3 -3
- package/AutocompleteWithFilter/index.js +35 -12
- package/BasicModal/Content.js +16 -5
- package/BasicModal/index.js +31 -9
- package/BreadCrumbs/index.js +19 -8
- package/CheckBox/CheckBox.js +26 -4
- package/CheckBox/CheckBoxGroup.js +24 -2
- package/CheckBox/index.d.ts +4 -2
- package/CheckBox/index.js +4 -2
- package/Copyright/index.js +14 -3
- package/DataTable/TableBody.js +24 -2
- package/DataTable/TableBodyRow.js +52 -41
- package/DataTable/TableFooter.js +41 -30
- package/DataTable/TableHeader.js +47 -36
- package/DataTable/index.d.ts +2 -1
- package/DataTable/index.js +30 -18
- package/DataTable/useTable.js +54 -46
- package/DateInput/FullDateInput/index.js +42 -20
- package/DateInput/FullDateInput/useInteractions.js +10 -10
- package/DateInput/MonthDayInput/index.js +36 -14
- package/DateInput/MonthDayInput/useInteractions.js +9 -9
- package/DateInput/MonthYearInput/index.js +36 -14
- package/DateInput/MonthYearInput/useInteractions.js +9 -9
- package/DateInput/index.d.ts +4 -3
- package/DateInput/index.js +4 -3
- package/DigitInput/index.js +28 -6
- package/DigitInput/useInteractions.js +9 -9
- package/DynamicHeaderBar/HeaderBar.js +17 -6
- package/DynamicHeaderBar/HeaderButtons.js +24 -13
- package/DynamicHeaderBar/HeaderLine.js +2 -2
- package/DynamicHeaderBar/index.js +26 -15
- package/FeinInput/index.js +38 -16
- package/FeinInput/useInteractions.js +9 -9
- package/FileUploader/index.js +33 -11
- package/FileUploader/useInteractions.js +44 -29
- package/FormRadioGroup/index.js +29 -4
- package/FormSelector/MultipleSelector.js +32 -9
- package/FormSelector/SimpleSelector.js +32 -9
- package/FormSelector/useInteractions.js +7 -7
- package/HelpCaption/index.js +17 -6
- package/HelpCaption/useInteractions.js +2 -2
- package/LoadingModal/Modal.js +15 -4
- package/LoadingModal/useLoadingModal.js +33 -15
- package/MenuButtonGroup/MenuItem.js +14 -3
- package/MenuButtonGroup/index.js +82 -14
- package/NumberInput/index.js +27 -5
- package/NumberInput/useInteractions.js +17 -17
- package/PasswordInput/ConfirmPassword.js +28 -6
- package/PasswordInput/Password.js +37 -15
- package/PhoneNumberInput/index.js +39 -17
- package/PhoneNumberInput/useInteractions.js +10 -10
- package/Sidebar/SidebarItem.js +17 -6
- package/Sidebar/SidebarItemsGroup.js +21 -10
- package/Sidebar/SidebarLink.js +27 -5
- package/Sidebar/index.js +17 -6
- package/SocialInput/index.js +40 -18
- package/SocialInput/useInteractions.js +14 -14
- package/TabGroup/index.js +25 -14
- package/TablePagination/Actions.js +15 -4
- package/TablePagination/index.js +14 -3
- package/TablePagination/useInteractions.js +9 -9
- package/TextInput/index.js +30 -8
- package/TextInput/useInteractions.js +4 -4
- package/ToastPrompt/Prompt.d.ts +2 -1
- package/ToastPrompt/Prompt.js +20 -55
- package/ToastPrompt/index.js +18 -7
- package/ToastPrompt/types.d.ts +7 -13
- package/ToastPrompt/useInteractions.d.ts +6 -5
- package/ToastPrompt/useInteractions.js +25 -13
- package/VideoPlayerModal/index.js +27 -5
- package/package.json +1 -1
- package/useCustomTheme.js +16 -11
- package/utils/uuid.js +11 -10
package/Sidebar/SidebarItem.js
CHANGED
@@ -1,3 +1,14 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
2
13
|
import Chip from "@mui/material/Chip";
|
3
14
|
import ListItemText from "@mui/material/ListItemText";
|
@@ -8,9 +19,9 @@ import { useTheme, alpha } from "@mui/material/styles";
|
|
8
19
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
9
20
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
10
21
|
function SidebarItem(props) {
|
11
|
-
|
12
|
-
|
13
|
-
return (_jsxs(ListItemButton, { onClick: onClick, disabled: lock, sx: {
|
22
|
+
var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, _b = props.showIconOnly, showIconOnly = _b === void 0 ? false : _b, onClick = props.onClick;
|
23
|
+
var theme = useTheme();
|
24
|
+
return (_jsxs(ListItemButton, __assign({ onClick: onClick, disabled: lock, sx: {
|
14
25
|
paddingLeft: isSub ? theme.spacing(4) : undefined,
|
15
26
|
display: "flex",
|
16
27
|
width: "100%",
|
@@ -22,12 +33,12 @@ function SidebarItem(props) {
|
|
22
33
|
backgroundColor: active
|
23
34
|
? alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)
|
24
35
|
: undefined
|
25
|
-
}, children: [_jsx(ListItemIcon, { sx: {
|
36
|
+
} }, { children: [_jsx(ListItemIcon, __assign({ sx: {
|
26
37
|
color: active ? theme.palette.primary.main : undefined,
|
27
38
|
borderRadius: active ? "5px" : undefined,
|
28
39
|
opacity: active ? "1" : undefined,
|
29
40
|
fontWeight: active ? 600 : undefined
|
30
|
-
}, children: icon }), !showIconOnly ? (_jsxs(_Fragment, { children: [_jsx(ListItemText, { primaryTypographyProps: {
|
41
|
+
} }, { children: icon })), !showIconOnly ? (_jsxs(_Fragment, { children: [_jsx(ListItemText, { primaryTypographyProps: {
|
31
42
|
color: active ? theme.palette.primary.main : "textPrimary",
|
32
43
|
sx: {
|
33
44
|
overflow: "hidden",
|
@@ -44,6 +55,6 @@ function SidebarItem(props) {
|
|
44
55
|
height: theme.spacing(2.5),
|
45
56
|
fontSize: theme.spacing(1.25),
|
46
57
|
padding: theme.spacing(0, 0.75)
|
47
|
-
} })) : (_jsx(_Fragment, {})), hasChildren ? (expand ? (_jsx(ExpandMoreIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx(_Fragment, {}))] })) : (_jsx(_Fragment, {}))] }));
|
58
|
+
} })) : (_jsx(_Fragment, {})), hasChildren ? (expand ? (_jsx(ExpandMoreIcon, {})) : (_jsx(ChevronRightIcon, {}))) : (_jsx(_Fragment, {}))] })) : (_jsx(_Fragment, {}))] })));
|
48
59
|
}
|
49
60
|
export default SidebarItem;
|
@@ -1,3 +1,14 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
2
13
|
import { useState, memo, useMemo, useEffect, useCallback } from "react";
|
3
14
|
import { Match, useLocation } from "@reach/router";
|
@@ -7,20 +18,20 @@ import useTheme from "@mui/material/styles/useTheme";
|
|
7
18
|
import SidebarItem from "./SidebarItem";
|
8
19
|
import SidebarLink from "./SidebarLink";
|
9
20
|
function SidebarItemsGroup(props) {
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
21
|
+
var item = props.item, showIconOnly = props.showIconOnly;
|
22
|
+
var id = item.id, name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor;
|
23
|
+
var pathname = useLocation().pathname;
|
24
|
+
var match = useMemo(function () {
|
14
25
|
return pathname.includes(path);
|
15
26
|
}, [path, pathname]);
|
16
|
-
|
17
|
-
|
18
|
-
setExpand(v
|
27
|
+
var _a = useState(match), expand = _a[0], setExpand = _a[1];
|
28
|
+
var onToggleExpand = useCallback(function () {
|
29
|
+
setExpand(function (v) { return !v; });
|
19
30
|
}, []);
|
20
|
-
useEffect(()
|
31
|
+
useEffect(function () {
|
21
32
|
setExpand(match);
|
22
33
|
}, [match]);
|
23
|
-
|
24
|
-
return (_jsxs(_Fragment, { children: [_jsx(List, { component: "div", disablePadding: true, children: _jsx(SidebarItem, { id: id, active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, showIconOnly: showIconOnly, betaTagColor: betaTagColor, onClick: onToggleExpand }) }), children && (_jsx(Collapse, { in: expand, timeout: "auto", children: _jsx(List, { component: "div", disablePadding: true, children: children.map((c)
|
34
|
+
var theme = useTheme();
|
35
|
+
return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { id: id, active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, showIconOnly: showIconOnly, betaTagColor: betaTagColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { id: c.id, name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, showIconOnly: showIconOnly, isSub: true })); } }), c.name)); }) })) })))] }));
|
25
36
|
}
|
26
37
|
export default memo(SidebarItemsGroup);
|
package/Sidebar/SidebarLink.js
CHANGED
@@ -1,14 +1,36 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
1
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
24
|
import { Link, useLocation } from "@reach/router";
|
3
25
|
import useTheme from "@mui/material/styles/useTheme";
|
4
26
|
import SidebarItem from "./SidebarItem";
|
5
27
|
function SidebarLink(props) {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
return (_jsx(Link, { id: id, to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
|
28
|
+
var pathname = useLocation().pathname;
|
29
|
+
var id = props.id, name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor, rest = __rest(props, ["id", "name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor"]);
|
30
|
+
var theme = useTheme();
|
31
|
+
return (_jsx(Link, __assign({ id: id, to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
|
10
32
|
color: theme.palette.primary.main,
|
11
33
|
textDecoration: "none"
|
12
|
-
}, children: _jsx(SidebarItem, { name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor,
|
34
|
+
} }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor }, rest), name) })));
|
13
35
|
}
|
14
36
|
export default SidebarLink;
|
package/Sidebar/index.js
CHANGED
@@ -1,3 +1,14 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
13
|
import { Match } from "@reach/router";
|
3
14
|
import List from "@mui/material/List";
|
@@ -7,12 +18,12 @@ import SidebarItem from "./SidebarItem";
|
|
7
18
|
import SidebarItemsGroup from "./SidebarItemsGroup";
|
8
19
|
import SidebarLink from "./SidebarLink";
|
9
20
|
function Sidebar(props) {
|
10
|
-
|
11
|
-
|
12
|
-
return (_jsx(ThemeProvider, { theme: theme, children: _jsx(List, { children: items.map((i)
|
13
|
-
|
14
|
-
return children ? (_jsx(SidebarItemsGroup, { item: i, showIconOnly: showIconOnly }, name)) : (_jsx(Match, { path: path === "/" ? path : path.concat("/*"), children: prop
|
15
|
-
}) }) }));
|
21
|
+
var items = props.items, showIconOnly = props.showIconOnly, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
|
22
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
23
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(List, { children: items.map(function (i) {
|
24
|
+
var id = i.id, children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor;
|
25
|
+
return children ? (_jsx(SidebarItemsGroup, { item: i, showIconOnly: showIconOnly }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { id: id, name: name, path: path, icon: icon, lock: lock, beta: beta, showIconOnly: showIconOnly, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
|
26
|
+
}) }) })));
|
16
27
|
}
|
17
28
|
export default Sidebar;
|
18
29
|
export { SidebarItem, SidebarItemsGroup };
|
package/SocialInput/index.js
CHANGED
@@ -1,3 +1,25 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
1
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
24
|
import { useRifm } from "rifm";
|
3
25
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
@@ -9,47 +31,47 @@ import TextField from "@mui/material/TextField";
|
|
9
31
|
import useInteractions from "./useInteractions";
|
10
32
|
import useCustomTheme from "../useCustomTheme";
|
11
33
|
export function SocialInputFormat(str) {
|
12
|
-
|
13
|
-
|
14
|
-
return chars.reduce((prev, curr, index)
|
34
|
+
var digits = (str.match(/\d+/g) || []).join("");
|
35
|
+
var chars = digits.split("");
|
36
|
+
return chars.reduce(function (prev, curr, index) {
|
15
37
|
if (index === 3) {
|
16
|
-
return
|
38
|
+
return "".concat(prev, " - ").concat(curr);
|
17
39
|
}
|
18
40
|
else if (index === 5) {
|
19
|
-
return
|
41
|
+
return "".concat(prev, " - ").concat(curr);
|
20
42
|
}
|
21
43
|
else {
|
22
|
-
return
|
44
|
+
return "".concat(prev).concat(curr);
|
23
45
|
}
|
24
|
-
},
|
46
|
+
}, "");
|
25
47
|
}
|
26
48
|
export function onValidateSocial(socialString) {
|
27
|
-
|
49
|
+
var reg = /^\d{3}\s?-\s?\d{2}\s?-\s?\d{4}$/g;
|
28
50
|
return reg.test(socialString);
|
29
51
|
}
|
30
52
|
function SocialInput(props) {
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
value
|
35
|
-
});
|
36
|
-
|
53
|
+
var value = props.value, _a = props.helperText, helperText = _a === void 0 ? "Please enter a valid SSN" : _a, error = props.error, onChange = props.onChange, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "helperText", "error", "onChange", "onValidate", "primaryColor", "secondaryColor"]);
|
54
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
55
|
+
var _b = useInteractions({
|
56
|
+
value: value
|
57
|
+
}), visible = _b.visible, valLength = _b.valLength, addMask = _b.addMask, onSwitching = _b.onSwitching;
|
58
|
+
var rifm = useRifm({
|
37
59
|
mask: true,
|
38
60
|
value: String(value),
|
39
|
-
onChange,
|
61
|
+
onChange: onChange,
|
40
62
|
replace: addMask,
|
41
63
|
format: SocialInputFormat
|
42
64
|
});
|
43
|
-
return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { helperText: valLength > 0 &&
|
65
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ helperText: valLength > 0 &&
|
44
66
|
(onValidate ? !onValidate(value) : !onValidateSocial(value))
|
45
67
|
? helperText
|
46
68
|
: "", value: rifm.value, onChange: rifm.onChange, type: visible ? "text" : "password", error: error ||
|
47
69
|
(valLength > 0 &&
|
48
70
|
(onValidate ? !onValidate(value) : !onValidateSocial(value))), InputProps: {
|
49
|
-
endAdornment: (_jsx(InputAdornment, { position: "end", children: valLength === 9 && (_jsx(IconButton, { "aria-label": "Toggle SSN visibility", onClick: onSwitching, children: visible ? _jsx(Visibility, {}) : _jsx(VisibilityOff, {}) })) }))
|
71
|
+
endAdornment: (_jsx(InputAdornment, __assign({ position: "end" }, { children: valLength === 9 && (_jsx(IconButton, __assign({ "aria-label": "Toggle SSN visibility", onClick: onSwitching }, { children: visible ? _jsx(Visibility, {}) : _jsx(VisibilityOff, {}) }))) })))
|
50
72
|
}, InputLabelProps: {
|
51
73
|
shrink: true
|
52
|
-
},
|
74
|
+
} }, rest)) })));
|
53
75
|
}
|
54
76
|
export default SocialInput;
|
55
77
|
export * from "./types";
|
@@ -1,26 +1,26 @@
|
|
1
1
|
import { useCallback, useMemo, useState, useEffect } from "react";
|
2
2
|
function useInteractions(props) {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
3
|
+
var value = props.value;
|
4
|
+
var _a = useState(false), visible = _a[0], setVisible = _a[1];
|
5
|
+
var valLength = useMemo(function () {
|
6
|
+
var digitsArr = String(value).match(/\d/g);
|
7
7
|
return digitsArr ? digitsArr.length : 0;
|
8
8
|
}, [value]);
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
return
|
9
|
+
var addMask = useCallback(function (str) {
|
10
|
+
var digits = (str.match(/\d+/g) || []).join("");
|
11
|
+
var headerCode = digits.slice(0, 3).padEnd(3, "_");
|
12
|
+
var middleCode = digits.slice(3, 5).padEnd(2, "_");
|
13
|
+
var tailCode = digits.slice(5, 9).padEnd(4, "_");
|
14
|
+
return "".concat(headerCode, " - ").concat(middleCode, " - ").concat(tailCode);
|
15
15
|
}, []);
|
16
|
-
|
17
|
-
setVisible(v
|
16
|
+
var onSwitching = useCallback(function () {
|
17
|
+
setVisible(function (v) { return !v; });
|
18
18
|
}, []);
|
19
|
-
useEffect(()
|
19
|
+
useEffect(function () {
|
20
20
|
if (!visible && valLength !== 9) {
|
21
21
|
setVisible(true);
|
22
22
|
}
|
23
23
|
}, [valLength, visible]);
|
24
|
-
return { visible, valLength, addMask, onSwitching };
|
24
|
+
return { visible: visible, valLength: valLength, addMask: addMask, onSwitching: onSwitching };
|
25
25
|
}
|
26
26
|
export default useInteractions;
|
package/TabGroup/index.js
CHANGED
@@ -1,3 +1,14 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
13
|
import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
|
3
14
|
import Tab from "@mui/material/Tab";
|
@@ -5,28 +16,28 @@ import Tabs from "@mui/material/Tabs";
|
|
5
16
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
6
17
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
7
18
|
import useCustomTheme from "../useCustomTheme";
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
19
|
+
var TabGroup = forwardRef(function (props, ref) {
|
20
|
+
var tabs = props.tabs, _a = props.textColor, textColor = _a === void 0 ? "primary" : _a, _b = props.variant, variant = _b === void 0 ? "scrollable" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onTabChange = props.onTabChange, outerTabIndex = props.currentTabIndex;
|
21
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
22
|
+
var mobileViewport = useMediaQuery(theme.breakpoints.down("md"));
|
23
|
+
var _c = useState(outerTabIndex || 0), currentTabIndex = _c[0], setCurrentTabIndex = _c[1];
|
24
|
+
var onClick = function (index) {
|
14
25
|
setCurrentTabIndex(index);
|
15
26
|
};
|
16
|
-
useImperativeHandle(ref, ()
|
27
|
+
useImperativeHandle(ref, function () { return ({
|
17
28
|
tabIndex: currentTabIndex
|
18
|
-
}));
|
19
|
-
useEffect(()
|
29
|
+
}); });
|
30
|
+
useEffect(function () {
|
20
31
|
if (outerTabIndex !== undefined && outerTabIndex !== currentTabIndex) {
|
21
32
|
setCurrentTabIndex(outerTabIndex);
|
22
33
|
}
|
23
34
|
}, [outerTabIndex, currentTabIndex]);
|
24
|
-
return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Tabs, { value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: (_, val)
|
35
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tabs, __assign({ value: currentTabIndex, TabIndicatorProps: { hidden: true }, variant: mobileViewport ? "scrollable" : variant, textColor: textColor, onChange: function (_, val) {
|
25
36
|
onClick(val);
|
26
37
|
onTabChange(val);
|
27
|
-
}, children: tabs.map((tab, index)
|
28
|
-
|
29
|
-
|
38
|
+
} }, { children: tabs.map(function (tab, index) {
|
39
|
+
var text = tab.text, _a = tab.disabled, disabled = _a === void 0 ? false : _a;
|
40
|
+
var active = currentTabIndex === index;
|
30
41
|
return (_jsx(Tab, { disableFocusRipple: true, disableRipple: true, label: text, disabled: disabled, sx: {
|
31
42
|
cursor: disabled ? "not-allowed" : "pointer",
|
32
43
|
margin: theme.spacing(0.75, 0.25),
|
@@ -34,7 +45,7 @@ const TabGroup = forwardRef((props, ref) => {
|
|
34
45
|
borderRadius: active ? theme.spacing(0.5) : undefined,
|
35
46
|
boxShadow: active ? "0px 4px 6px #acc1c2" : undefined
|
36
47
|
} }, index));
|
37
|
-
}) }) }));
|
48
|
+
}) })) })));
|
38
49
|
});
|
39
50
|
export default TabGroup;
|
40
51
|
export * from "./types";
|
@@ -1,3 +1,14 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
13
|
import Box from "@mui/material/Box";
|
3
14
|
import IconButton from "@mui/material/IconButton";
|
@@ -8,9 +19,9 @@ import LastPageIcon from "@mui/icons-material/LastPage";
|
|
8
19
|
import useInteractions from "./useInteractions";
|
9
20
|
import useCustomTheme from "../useCustomTheme";
|
10
21
|
function TablePaginationActions(props) {
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
return (_jsxs(Box, { sx: { flexShrink: 0, ml: 2.5 }, children: [_jsx(IconButton, { onClick: onFirstPageButtonClick, disabled: page === 0, "aria-label": "first page", children: theme.direction === "rtl" ? _jsx(LastPageIcon, {}) : _jsx(FirstPageIcon, {}) }), _jsx(IconButton, { onClick: onBackButtonClick, disabled: page === 0, "aria-label": "previous page", children: theme.direction === "rtl" ? (_jsx(KeyboardArrowRight, {})) : (_jsx(KeyboardArrowLeft, {})) }), _jsx(IconButton, { onClick: onNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page", children: theme.direction === "rtl" ? (_jsx(KeyboardArrowLeft, {})) : (_jsx(KeyboardArrowRight, {})) }), _jsx(IconButton, { onClick: onLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page", children: theme.direction === "rtl" ? _jsx(FirstPageIcon, {}) : _jsx(LastPageIcon, {}) })] }));
|
22
|
+
var count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, onPageChange = props.onPageChange;
|
23
|
+
var theme = useCustomTheme();
|
24
|
+
var _a = useInteractions({ count: count, page: page, rowsPerPage: rowsPerPage, onPageChange: onPageChange }), onBackButtonClick = _a.onBackButtonClick, onNextButtonClick = _a.onNextButtonClick, onLastPageButtonClick = _a.onLastPageButtonClick, onFirstPageButtonClick = _a.onFirstPageButtonClick;
|
25
|
+
return (_jsxs(Box, __assign({ sx: { flexShrink: 0, ml: 2.5 } }, { children: [_jsx(IconButton, __assign({ onClick: onFirstPageButtonClick, disabled: page === 0, "aria-label": "first page" }, { children: theme.direction === "rtl" ? _jsx(LastPageIcon, {}) : _jsx(FirstPageIcon, {}) })), _jsx(IconButton, __assign({ onClick: onBackButtonClick, disabled: page === 0, "aria-label": "previous page" }, { children: theme.direction === "rtl" ? (_jsx(KeyboardArrowRight, {})) : (_jsx(KeyboardArrowLeft, {})) })), _jsx(IconButton, __assign({ onClick: onNextButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "next page" }, { children: theme.direction === "rtl" ? (_jsx(KeyboardArrowLeft, {})) : (_jsx(KeyboardArrowRight, {})) })), _jsx(IconButton, __assign({ onClick: onLastPageButtonClick, disabled: page >= Math.ceil(count / rowsPerPage) - 1, "aria-label": "last page" }, { children: theme.direction === "rtl" ? _jsx(FirstPageIcon, {}) : _jsx(LastPageIcon, {}) }))] })));
|
15
26
|
}
|
16
27
|
export default TablePaginationActions;
|
package/TablePagination/index.js
CHANGED
@@ -1,12 +1,23 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
1
12
|
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
2
13
|
import TablePagination from "@mui/material/TablePagination";
|
3
14
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
4
15
|
import TablePaginationActions from "./Actions";
|
5
16
|
import useCustomTheme from "../useCustomTheme";
|
6
17
|
function Pagination(props) {
|
7
|
-
|
8
|
-
|
9
|
-
return (_jsx(ThemeProvider, { theme: theme, children: count ? (_jsx(TablePagination, { component: "div", colSpan: colSpan, count: count, rowsPerPage: rowsPerPage, page: page, SelectProps: { native: true }, rowsPerPageOptions: rowsPerPageOptions, onPageChange: onPageChange, onRowsPerPageChange: onRowsPerPageChange, ActionsComponent: TablePaginationActions })) : (_jsx(_Fragment, {})) }));
|
18
|
+
var colSpan = props.colSpan, count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, _a = props.rowsPerPageOptions, rowsPerPageOptions = _a === void 0 ? [10, 20, 30, 50] : _a, onPageChange = props.onPageChange, onRowsPerPageChange = props.onRowsPerPageChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
|
19
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
20
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: count ? (_jsx(TablePagination, { component: "div", colSpan: colSpan, count: count, rowsPerPage: rowsPerPage, page: page, SelectProps: { native: true }, rowsPerPageOptions: rowsPerPageOptions, onPageChange: onPageChange, onRowsPerPageChange: onRowsPerPageChange, ActionsComponent: TablePaginationActions })) : (_jsx(_Fragment, {})) })));
|
10
21
|
}
|
11
22
|
export default Pagination;
|
12
23
|
export * from "./types";
|
@@ -1,23 +1,23 @@
|
|
1
1
|
import { useCallback } from "react";
|
2
2
|
function useInteractions(props) {
|
3
|
-
|
4
|
-
|
3
|
+
var count = props.count, page = props.page, rowsPerPage = props.rowsPerPage, onPageChange = props.onPageChange;
|
4
|
+
var onFirstPageButtonClick = useCallback(function (event) {
|
5
5
|
onPageChange(event, 0);
|
6
6
|
}, [onPageChange]);
|
7
|
-
|
7
|
+
var onBackButtonClick = useCallback(function (event) {
|
8
8
|
onPageChange(event, page - 1);
|
9
9
|
}, [onPageChange, page]);
|
10
|
-
|
10
|
+
var onNextButtonClick = useCallback(function (event) {
|
11
11
|
onPageChange(event, page + 1);
|
12
12
|
}, [onPageChange, page]);
|
13
|
-
|
13
|
+
var onLastPageButtonClick = useCallback(function (event) {
|
14
14
|
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
|
15
15
|
}, [count, onPageChange, rowsPerPage]);
|
16
16
|
return {
|
17
|
-
onBackButtonClick,
|
18
|
-
onNextButtonClick,
|
19
|
-
onLastPageButtonClick,
|
20
|
-
onFirstPageButtonClick,
|
17
|
+
onBackButtonClick: onBackButtonClick,
|
18
|
+
onNextButtonClick: onNextButtonClick,
|
19
|
+
onLastPageButtonClick: onLastPageButtonClick,
|
20
|
+
onFirstPageButtonClick: onFirstPageButtonClick,
|
21
21
|
};
|
22
22
|
}
|
23
23
|
export default useInteractions;
|
package/TextInput/index.js
CHANGED
@@ -1,24 +1,46 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
1
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
24
|
import Tooltip from "@mui/material/Tooltip";
|
3
25
|
import Field from "@mui/material/TextField";
|
4
26
|
import ThemeProvider from "@mui/material/styles/ThemeProvider";
|
5
27
|
import useInteractions from "./useInteractions";
|
6
28
|
import useCustomTheme from "../useCustomTheme";
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Tooltip, { arrow: true, placement: "top", title: tooltip
|
29
|
+
var TextInput = function (props) {
|
30
|
+
var _a = props.type, type = _a === void 0 ? "text" : _a, onChange = props.onChange, value = props.value, _b = props.size, size = _b === void 0 ? "small" : _b, tooltip = props.tooltip, _c = props.maxLength, maxLength = _c === void 0 ? 999 : _c, _d = props.minLength, minLength = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onBlur = props.onBlur, onFocus = props.onFocus, rest = __rest(props, ["type", "onChange", "value", "size", "tooltip", "maxLength", "minLength", "primaryColor", "secondaryColor", "onBlur", "onFocus"]);
|
31
|
+
var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
|
32
|
+
var _e = useInteractions(), tooltipOpen = _e.tooltipOpen, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
|
33
|
+
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: type, value: value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onFocus: function (event) {
|
12
34
|
if (onFocus) {
|
13
35
|
onFocus(event);
|
14
36
|
}
|
15
|
-
}, onBlur: event
|
37
|
+
}, onBlur: function (event) {
|
16
38
|
if (onBlur) {
|
17
39
|
onBlur(event);
|
18
40
|
}
|
19
|
-
}, onChange: event
|
41
|
+
}, onChange: function (event) {
|
20
42
|
event.preventDefault();
|
21
43
|
onChange(event.target.value);
|
22
|
-
}, inputProps: { maxLength, minLength },
|
44
|
+
}, inputProps: { maxLength: maxLength, minLength: minLength } }, rest)) })) })));
|
23
45
|
};
|
24
46
|
export default TextInput;
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import { useState, useCallback } from 'react';
|
2
2
|
function useInteractions() {
|
3
|
-
|
4
|
-
|
3
|
+
var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
|
4
|
+
var onOpenTooltip = useCallback(function () {
|
5
5
|
setTooltipOpen(true);
|
6
6
|
}, []);
|
7
|
-
|
7
|
+
var onCloseTooltip = useCallback(function () {
|
8
8
|
setTooltipOpen(false);
|
9
9
|
}, []);
|
10
|
-
return { tooltipOpen, onOpenTooltip, onCloseTooltip };
|
10
|
+
return { tooltipOpen: tooltipOpen, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
|
11
11
|
}
|
12
12
|
export default useInteractions;
|
package/ToastPrompt/Prompt.d.ts
CHANGED