@symply.io/basic-components 1.3.11-alpha.5 → 1.3.11-alpha.6

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