@symply.io/basic-components 1.3.11-alpha.9 → 1.4.0-alpha.10

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 (127) hide show
  1. package/AlertDialog/index.d.ts +2 -2
  2. package/AlertDialog/index.js +30 -9
  3. package/AlertDialog/types.d.ts +3 -3
  4. package/Autocomplete/index.d.ts +2 -2
  5. package/Autocomplete/index.js +32 -11
  6. package/Autocomplete/types.d.ts +2 -2
  7. package/Autocomplete/useInteractions.js +3 -3
  8. package/AutocompleteWithFilter/index.d.ts +2 -2
  9. package/AutocompleteWithFilter/index.js +35 -13
  10. package/AutocompleteWithFilter/types.d.ts +5 -5
  11. package/BasicModal/Content.js +16 -5
  12. package/BasicModal/index.d.ts +2 -2
  13. package/BasicModal/index.js +31 -10
  14. package/BasicModal/types.d.ts +2 -2
  15. package/BreadCrumbs/index.d.ts +2 -2
  16. package/BreadCrumbs/index.js +19 -9
  17. package/BreadCrumbs/types.d.ts +1 -1
  18. package/CheckBox/index.d.ts +4 -3
  19. package/CheckBox/index.js +36 -3
  20. package/CheckBox/types.d.ts +2 -6
  21. package/CheckBoxGroup/index.d.ts +4 -0
  22. package/CheckBoxGroup/index.js +30 -0
  23. package/CheckBoxGroup/types.d.ts +5 -0
  24. package/CheckBoxGroup/types.js +1 -0
  25. package/ConfirmPasswordInput/index.d.ts +4 -0
  26. package/ConfirmPasswordInput/index.js +42 -0
  27. package/ConfirmPasswordInput/types.d.ts +9 -0
  28. package/ConfirmPasswordInput/types.js +1 -0
  29. package/Copyright/index.d.ts +2 -2
  30. package/Copyright/index.js +14 -4
  31. package/Copyright/types.d.ts +1 -1
  32. package/DataTable/TableBody.js +24 -2
  33. package/DataTable/TableBodyRow.js +52 -41
  34. package/DataTable/TableFooter.js +41 -30
  35. package/DataTable/TableHeader.js +47 -36
  36. package/DataTable/index.d.ts +2 -1
  37. package/DataTable/index.js +30 -18
  38. package/DataTable/useTable.js +54 -46
  39. package/DateInput/FullDateInput/index.js +42 -20
  40. package/DateInput/FullDateInput/useInteractions.js +10 -10
  41. package/DateInput/MonthDayInput/index.js +36 -14
  42. package/DateInput/MonthDayInput/useInteractions.js +9 -9
  43. package/DateInput/MonthYearInput/index.js +36 -14
  44. package/DateInput/MonthYearInput/useInteractions.js +9 -9
  45. package/DateInput/index.d.ts +4 -3
  46. package/DateInput/index.js +4 -3
  47. package/DigitInput/index.d.ts +2 -2
  48. package/DigitInput/index.js +28 -7
  49. package/DigitInput/types.d.ts +3 -3
  50. package/DigitInput/useInteractions.js +9 -9
  51. package/DynamicHeaderBar/HeaderBar.d.ts +1 -13
  52. package/DynamicHeaderBar/HeaderBar.js +17 -6
  53. package/DynamicHeaderBar/HeaderButtons.d.ts +1 -1
  54. package/DynamicHeaderBar/HeaderButtons.js +24 -13
  55. package/DynamicHeaderBar/HeaderLine.d.ts +1 -6
  56. package/DynamicHeaderBar/HeaderLine.js +2 -2
  57. package/DynamicHeaderBar/index.d.ts +1 -17
  58. package/DynamicHeaderBar/index.js +26 -18
  59. package/DynamicHeaderBar/types.d.ts +33 -5
  60. package/FeinInput/index.d.ts +2 -2
  61. package/FeinInput/index.js +38 -17
  62. package/FeinInput/types.d.ts +2 -2
  63. package/FeinInput/useInteractions.js +9 -9
  64. package/FileUploader/index.d.ts +2 -2
  65. package/FileUploader/index.js +33 -12
  66. package/FileUploader/useInteractions.js +44 -29
  67. package/FormRadioGroup/index.d.ts +2 -2
  68. package/FormRadioGroup/index.js +29 -5
  69. package/FormRadioGroup/types.d.ts +3 -4
  70. package/FormSelector/MultipleSelector.js +32 -9
  71. package/FormSelector/SimpleSelector.js +32 -9
  72. package/FormSelector/useInteractions.js +7 -7
  73. package/HelpCaption/index.d.ts +2 -2
  74. package/HelpCaption/index.js +17 -6
  75. package/HelpCaption/useInteractions.js +2 -2
  76. package/LoadingModal/Modal.js +15 -4
  77. package/LoadingModal/index.d.ts +2 -1
  78. package/LoadingModal/index.js +3 -1
  79. package/LoadingModal/useLoadingModal.d.ts +1 -1
  80. package/LoadingModal/useLoadingModal.js +34 -16
  81. package/MenuButtonGroup/MenuItem.js +14 -3
  82. package/MenuButtonGroup/index.js +82 -14
  83. package/NumberInput/index.js +27 -5
  84. package/NumberInput/useInteractions.js +17 -17
  85. package/PasswordInput/index.d.ts +6 -4
  86. package/PasswordInput/index.js +79 -4
  87. package/PasswordInput/{Password.d.ts → types.d.ts} +3 -6
  88. package/PasswordInput/types.js +1 -0
  89. package/PhoneNumberInput/index.js +39 -17
  90. package/PhoneNumberInput/useInteractions.js +10 -10
  91. package/README.md +4 -8
  92. package/Sidebar/SidebarItem.js +17 -6
  93. package/Sidebar/SidebarItemsGroup.js +21 -10
  94. package/Sidebar/SidebarLink.js +27 -5
  95. package/Sidebar/index.js +17 -6
  96. package/SocialInput/index.d.ts +2 -2
  97. package/SocialInput/index.js +40 -19
  98. package/SocialInput/useInteractions.js +14 -14
  99. package/TabGroup/index.d.ts +2 -2
  100. package/TabGroup/index.js +25 -15
  101. package/TablePagination/Actions.js +15 -4
  102. package/TablePagination/index.d.ts +2 -2
  103. package/TablePagination/index.js +14 -4
  104. package/TablePagination/useInteractions.js +9 -9
  105. package/TextInput/index.d.ts +1 -1
  106. package/TextInput/index.js +31 -9
  107. package/TextInput/useInteractions.js +4 -4
  108. package/ToastPrompt/Prompt.d.ts +4 -2
  109. package/ToastPrompt/Prompt.js +23 -55
  110. package/ToastPrompt/index.js +22 -8
  111. package/ToastPrompt/types.d.ts +10 -17
  112. package/ToastPrompt/useInteractions.d.ts +8 -8
  113. package/ToastPrompt/useInteractions.js +23 -16
  114. package/VideoPlayerModal/index.d.ts +2 -2
  115. package/VideoPlayerModal/index.js +27 -6
  116. package/index.d.ts +6 -0
  117. package/index.js +6 -0
  118. package/package.json +1 -2
  119. package/useCustomTheme.js +16 -11
  120. package/utils/uuid.js +11 -10
  121. package/CheckBox/CheckBox.d.ts +0 -3
  122. package/CheckBox/CheckBox.js +0 -14
  123. package/CheckBox/CheckBoxGroup.d.ts +0 -3
  124. package/CheckBox/CheckBoxGroup.js +0 -8
  125. package/PasswordInput/ConfirmPassword.d.ts +0 -11
  126. package/PasswordInput/ConfirmPassword.js +0 -20
  127. package/PasswordInput/Password.js +0 -56
@@ -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, Fragment as _Fragment } from "react/jsx-runtime";
2
13
  import { cloneElement, useMemo } from "react";
3
14
  import ThemeProvider from "@mui/material/styles/ThemeProvider";
@@ -10,12 +21,12 @@ import HeaderLine from "./HeaderLine";
10
21
  import HeaderButtons from "./HeaderButtons";
11
22
  import useCustomTheme from "../useCustomTheme";
12
23
  function HeaderBar(props) {
13
- const { title, color, subtitle, bottomEl, buttons = [], showBackButton, primaryColor, secondaryColor, onBack } = props;
14
- const theme = useCustomTheme({ primaryColor, secondaryColor });
15
- const isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
16
- const hasButtons = useMemo(() => buttons.length > 0, [buttons.length]);
17
- return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Grid, { sx: { mb: 1 }, children: [_jsxs(Grid, { container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", children: [_jsx(Grid, { item: true, xs: 12, sm: hasButtons ? 6 : 12, md: hasButtons ? 5 : 12, lg: hasButtons ? 4 : 12, xl: hasButtons ? 3 : 12, children: _jsxs(Grid, { container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", children: [showBackButton && (_jsx(IconButton, { onClick: () => {
24
+ var title = props.title, color = props.color, subtitle = props.subtitle, bottomEl = props.bottomEl, _a = props.buttons, buttons = _a === void 0 ? [] : _a, showBackButton = props.showBackButton, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onBack = props.onBack;
25
+ var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
26
+ var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
27
+ var hasButtons = useMemo(function () { return buttons.length > 0; }, [buttons.length]);
28
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ sx: { mb: 1 } }, { children: [_jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true, xs: 12, sm: hasButtons ? 6 : 12, md: hasButtons ? 5 : 12, lg: hasButtons ? 4 : 12, xl: hasButtons ? 3 : 12 }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [showBackButton && (_jsx(IconButton, __assign({ onClick: function () {
18
29
  onBack ? onBack() : window.history.back();
19
- }, children: _jsx(ArrowBackIcon, { fontSize: "small" }) })), typeof title === "string" ? (_jsx(Typography, { align: "left", sx: { fontWeight: 600, fontSize: isLessThanSm ? 21 : 24 }, children: title })) : (cloneElement(title))] }) }), hasButtons ? (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9, children: _jsx(HeaderButtons, { buttons: buttons, primaryColor: primaryColor, secondaryColor: secondaryColor }) })) : (_jsx(_Fragment, {}))] }), _jsx(Grid, { container: true, direction: "row", children: _jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: _jsx(HeaderLine, { color: color, primaryColor: primaryColor, secondaryColor: secondaryColor }) }) }), subtitle && (_jsx(Grid, { container: true, direction: "row", children: _jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle })) : (cloneElement(subtitle)) }) })), bottomEl && (_jsx(Grid, { container: true, direction: "row", children: _jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: cloneElement(bottomEl) }) }))] }) }));
30
+ } }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }) }))), typeof title === "string" ? (_jsx(Typography, __assign({ align: "left", sx: { fontWeight: 600, fontSize: isLessThanSm ? 21 : 24 } }, { children: title }))) : (cloneElement(title))] })) })), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons, primaryColor: primaryColor, secondaryColor: secondaryColor }) }))) : (_jsx(_Fragment, {}))] })), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color, primaryColor: primaryColor, secondaryColor: secondaryColor }) })) })), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle })) : (cloneElement(subtitle)) })) }))), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) })) })))] })) })));
20
31
  }
21
32
  export default HeaderBar;
@@ -1,6 +1,6 @@
1
1
  import { CSSProperties } from "react";
2
2
  import { HeaderButtonProps } from "./types";
3
- export interface HeaderButtonsProps {
3
+ interface HeaderButtonsProps {
4
4
  buttons: Array<HeaderButtonProps>;
5
5
  primaryColor?: CSSProperties["color"];
6
6
  secondaryColor?: CSSProperties["color"];
@@ -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 } from "react/jsx-runtime";
2
13
  import Fab from "@mui/material/Fab";
3
14
  import Grid from "@mui/material/Grid";
@@ -9,30 +20,30 @@ import MenuButtonGroup from "../MenuButtonGroup";
9
20
  import { HeaderButtonCategory } from "./types";
10
21
  import useCustomTheme from "../useCustomTheme";
11
22
  function HeaderButtons(props) {
12
- const { buttons, primaryColor, secondaryColor } = props;
13
- const theme = useCustomTheme({ primaryColor, secondaryColor });
14
- const isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
15
- return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Grid, { container: true, spacing: 1, direction: "row", justifyContent: "flex-end", alignItems: "center", children: buttons.map((button) => {
23
+ var buttons = props.buttons, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
24
+ var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
25
+ var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
26
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Grid, __assign({ container: true, spacing: 1, direction: "row", justifyContent: "flex-end", alignItems: "center" }, { children: buttons.map(function (button) {
16
27
  switch (button.type) {
17
28
  case HeaderButtonCategory.TextButton: {
18
- const { variant = "contained", text, onClick, color, size, startIcon, endIcon, disabled } = button;
19
- return (_jsx(Grid, { item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" }, children: _jsx(Button, { fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled, children: text }) }, text));
29
+ var _a = button.variant, variant = _a === void 0 ? "contained" : _a, text = button.text, onClick = button.onClick, color = button.color, size = button.size, startIcon = button.startIcon, endIcon = button.endIcon, disabled = button.disabled;
30
+ return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text })) }), text));
20
31
  }
21
32
  case HeaderButtonCategory.FabButton: {
22
- const { title, onClick, color, size = "medium", icon, disabled, variant } = button;
23
- return (_jsx(Grid, { item: true, style: { textAlign: "end" }, children: _jsx(Fab, { onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, variant: variant, children: icon }) }, title));
33
+ var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon, disabled = button.disabled, variant = button.variant;
34
+ return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, variant: variant }, { children: icon })) }), title));
24
35
  }
25
36
  case HeaderButtonCategory.IconButton: {
26
- const { title, onClick, color, size = "medium", icon, disabled } = button;
27
- return (_jsx(Grid, { item: true, style: { textAlign: "end" }, children: _jsx(IconButton, { onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, children: icon }) }, title));
37
+ var title = button.title, onClick = button.onClick, color = button.color, _c = button.size, size = _c === void 0 ? "medium" : _c, icon = button.icon, disabled = button.disabled;
38
+ return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(IconButton, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled }, { children: icon })) }), title));
28
39
  }
29
40
  case HeaderButtonCategory.MenuButton: {
30
- const { buttons: btns, buttonText, disabled, variant, size, color } = button;
31
- return (_jsx(Grid, { item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" }, children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, color: color, buttonText: buttonText, disabled: disabled, primaryColor: primaryColor, secondaryColor: secondaryColor }) }, buttonText));
41
+ var btns = button.buttons, buttonText = button.buttonText, disabled = button.disabled, variant = button.variant, size = button.size, color = button.color;
42
+ return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(MenuButtonGroup, { size: isLessThanSm ? "small" : size, variant: variant, buttons: btns, color: color, buttonText: buttonText, disabled: disabled, primaryColor: primaryColor, secondaryColor: secondaryColor }) }), buttonText));
32
43
  }
33
44
  default:
34
45
  return _jsx(_Fragment, {});
35
46
  }
36
- }) }) }));
47
+ }) })) })));
37
48
  }
38
49
  export default HeaderButtons;
@@ -1,8 +1,3 @@
1
- import { CSSProperties } from "react";
2
- interface HeaderLineProps {
3
- color?: CSSProperties["color"];
4
- primaryColor?: CSSProperties["color"];
5
- secondaryColor?: CSSProperties["color"];
6
- }
1
+ import type { HeaderLineProps } from "./types";
7
2
  declare function HeaderLine(props: HeaderLineProps): JSX.Element;
8
3
  export default HeaderLine;
@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import Divider from "@mui/material/Divider";
3
3
  import useCustomTheme from "../useCustomTheme";
4
4
  function HeaderLine(props) {
5
- const { color, primaryColor, secondaryColor } = props;
6
- const theme = useCustomTheme({ primaryColor, secondaryColor });
5
+ var color = props.color, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
6
+ var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
7
7
  return (_jsx(Divider, { sx: {
8
8
  height: "3px",
9
9
  backgroundColor: color || theme.palette.primary.main
@@ -1,23 +1,7 @@
1
- import { ReactElement, CSSProperties } from "react";
2
- import { SxProps } from "@mui/material/styles";
3
- import { HeaderBarProps } from "./HeaderBar";
4
- interface HeaderProviderProps {
5
- sx?: SxProps;
6
- children: ReactElement;
7
- primaryColor?: CSSProperties["color"];
8
- secondaryColor?: CSSProperties["color"];
9
- }
10
- interface HeaderContextProps {
11
- onInit: (props: HeaderBarProps) => void;
12
- onShow: () => void;
13
- onHide: () => void;
14
- }
1
+ import type { HeaderContextProps, HeaderProviderProps } from "./types";
15
2
  export declare function HeaderProvider(props: HeaderProviderProps): JSX.Element;
16
3
  export declare function useHeaderBar(): HeaderContextProps;
17
4
  export { default } from "./HeaderBar";
18
5
  export { default as HeaderButtons } from "./HeaderButtons";
19
6
  export { default as HeaderLine } from "./HeaderLine";
20
- export * from "./HeaderBar";
21
- export * from "./HeaderButtons";
22
- export * from "./HeaderLine";
23
7
  export * from "./types";
@@ -1,38 +1,49 @@
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 { cloneElement, createContext, useContext, useState, useCallback } from "react";
3
14
  import Grid from "@mui/material/Grid";
4
15
  import HeaderBar from "./HeaderBar";
5
- const HeaderContext = createContext({
6
- onInit: () => { },
7
- onShow: () => { },
8
- onHide: () => { }
16
+ var HeaderContext = createContext({
17
+ onInit: function () { },
18
+ onShow: function () { },
19
+ onHide: function () { }
9
20
  });
10
21
  export function HeaderProvider(props) {
11
- const { children, primaryColor, secondaryColor, sx = {} } = props;
12
- const [visible, setVisible] = useState(false);
13
- const [headerProps, setHeaderProps] = useState({ title: "" });
14
- const [height, setHeight] = useState(0);
15
- const onInit = useCallback((args) => {
22
+ var children = props.children, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _a = props.sx, sx = _a === void 0 ? {} : _a;
23
+ var _b = useState(false), visible = _b[0], setVisible = _b[1];
24
+ var _c = useState({ title: "" }), headerProps = _c[0], setHeaderProps = _c[1];
25
+ var _d = useState(0), height = _d[0], setHeight = _d[1];
26
+ var onInit = useCallback(function (args) {
16
27
  setHeaderProps(args);
17
28
  }, []);
18
- const onShow = useCallback(() => {
29
+ var onShow = useCallback(function () {
19
30
  setVisible(true);
20
31
  }, []);
21
- const onHide = useCallback(() => {
32
+ var onHide = useCallback(function () {
22
33
  setVisible(false);
23
34
  }, []);
24
- const measureRef = useCallback(node => {
35
+ var measureRef = useCallback(function (node) {
25
36
  if (node && headerProps) {
26
37
  setHeight(node.getBoundingClientRect().height);
27
38
  }
28
39
  }, [headerProps]);
29
- return (_jsx(HeaderContext.Provider, { value: { onInit, onHide, onShow }, children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, { container: true, direction: "row", sx: { ...sx }, ref: measureRef, children: _jsx(Grid, { item: true, xs: 12, children: _jsx(HeaderBar, { ...headerProps, primaryColor: primaryColor, secondaryColor: secondaryColor }) }) })) : (_jsx(_Fragment, {})), cloneElement(children, {
40
+ return (_jsx(HeaderContext.Provider, __assign({ value: { onInit: onInit, onHide: onHide, onShow: onShow } }, { children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, __assign({ container: true, direction: "row", sx: __assign({}, sx), ref: measureRef }, { children: _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(HeaderBar, __assign({}, headerProps, { primaryColor: primaryColor, secondaryColor: secondaryColor })) })) }))) : (_jsx(_Fragment, {})), cloneElement(children, {
30
41
  sx: {
31
42
  p: 3,
32
43
  py: 1,
33
- pt: visible && height ? `calc(${height}px)` : undefined
44
+ pt: visible && height ? "calc(".concat(height, "px)") : undefined
34
45
  }
35
- })] }) }));
46
+ })] }) })));
36
47
  }
37
48
  export function useHeaderBar() {
38
49
  return useContext(HeaderContext);
@@ -40,7 +51,4 @@ export function useHeaderBar() {
40
51
  export { default } from "./HeaderBar";
41
52
  export { default as HeaderButtons } from "./HeaderButtons";
42
53
  export { default as HeaderLine } from "./HeaderLine";
43
- export * from "./HeaderBar";
44
- export * from "./HeaderButtons";
45
- export * from "./HeaderLine";
46
54
  export * from "./types";
@@ -1,8 +1,9 @@
1
- import { ReactElement } from "react";
2
- import { ButtonProps } from "@mui/material/Button";
3
- import { IconButtonProps } from "@mui/material/IconButton";
4
- import { FabProps } from "@mui/material/Fab";
5
- import { MenuButtonGroupProps } from "../MenuButtonGroup";
1
+ import type { ReactElement, CSSProperties } from "react";
2
+ import type { ButtonProps } from "@mui/material/Button";
3
+ import type { IconButtonProps } from "@mui/material/IconButton";
4
+ import type { FabProps } from "@mui/material/Fab";
5
+ import type { SxProps } from "@mui/material/styles";
6
+ import type { MenuButtonGroupProps } from "../MenuButtonGroup";
6
7
  export declare enum HeaderButtonCategory {
7
8
  IconButton = "icon",
8
9
  TextButton = "text",
@@ -43,4 +44,31 @@ declare type HeaderMenuButtonProps = {
43
44
  type: HeaderButtonCategory.MenuButton;
44
45
  } & MenuButtonGroupProps;
45
46
  export declare type HeaderButtonProps = HeaderFabButtonProps | HeaderTextButtonProps | HeaderIconButtonProps | HeaderMenuButtonProps;
47
+ export interface HeaderLineProps {
48
+ color?: CSSProperties["color"];
49
+ primaryColor?: CSSProperties["color"];
50
+ secondaryColor?: CSSProperties["color"];
51
+ }
52
+ export interface HeaderBarProps {
53
+ title: string | ReactElement;
54
+ color?: CSSProperties["color"];
55
+ subtitle?: string | ReactElement;
56
+ bottomEl?: ReactElement;
57
+ buttons?: Array<HeaderButtonProps>;
58
+ showBackButton?: boolean;
59
+ primaryColor?: CSSProperties["color"];
60
+ secondaryColor?: CSSProperties["color"];
61
+ onBack?: () => void;
62
+ }
63
+ export interface HeaderProviderProps {
64
+ sx?: SxProps;
65
+ children: ReactElement;
66
+ primaryColor?: CSSProperties["color"];
67
+ secondaryColor?: CSSProperties["color"];
68
+ }
69
+ export interface HeaderContextProps {
70
+ onInit: (props: HeaderBarProps) => void;
71
+ onShow: () => void;
72
+ onHide: () => void;
73
+ }
46
74
  export {};
@@ -1,6 +1,6 @@
1
- import { FeinInputProps } from "./types";
1
+ import type { FeinInputProps } from "./types";
2
2
  export declare function FeinInputFormat(str: string): string;
3
3
  export declare function onValidateFein(feinString: string): boolean;
4
4
  declare function FeinInput(props: FeinInputProps): JSX.Element;
5
5
  export default FeinInput;
6
- export * from "./types";
6
+ export type { FeinInputProps };
@@ -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";
@@ -5,49 +27,48 @@ import TextField from "@mui/material/TextField";
5
27
  import useInteractions from "./useInteractions";
6
28
  import useCustomTheme from "../useCustomTheme";
7
29
  export function FeinInputFormat(str) {
8
- const digits = (str.match(/\d+/g) || []).join("");
9
- const chars = digits.split("");
10
- return chars.reduce((prev, curr, index) => {
30
+ var digits = (str.match(/\d+/g) || []).join("");
31
+ var chars = digits.split("");
32
+ return chars.reduce(function (prev, curr, index) {
11
33
  if (index === 2) {
12
- return `${prev} - ${curr}`;
34
+ return "".concat(prev, " - ").concat(curr);
13
35
  }
14
36
  else {
15
- return `${prev}${curr}`;
37
+ return "".concat(prev).concat(curr);
16
38
  }
17
- }, ``);
39
+ }, "");
18
40
  }
19
41
  export function onValidateFein(feinString) {
20
- const reg = /^\d{2}\s?-\s?\d{7}$/g;
42
+ var reg = /^\d{2}\s?-\s?\d{7}$/g;
21
43
  return reg.test(feinString);
22
44
  }
23
45
  function FeinInput(props) {
24
- const { value, error = false, helperText = "Please enter a valid FEIN", onBlur, onFocus, onChange, onValidate, primaryColor, secondaryColor, ...rest } = props;
25
- const theme = useCustomTheme({ primaryColor, secondaryColor });
26
- const { valLength, addMask } = useInteractions({ value });
27
- const rifm = useRifm({
46
+ var value = props.value, _a = props.error, error = _a === void 0 ? false : _a, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid FEIN" : _b, onBlur = props.onBlur, onFocus = props.onFocus, onChange = props.onChange, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "error", "helperText", "onBlur", "onFocus", "onChange", "onValidate", "primaryColor", "secondaryColor"]);
47
+ var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
48
+ var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
49
+ var rifm = useRifm({
28
50
  mask: true,
29
51
  value: String(value),
30
- onChange,
52
+ onChange: onChange,
31
53
  replace: addMask,
32
54
  format: FeinInputFormat
33
55
  });
34
- return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { value: rifm.value, onChange: rifm.onChange, error: error ||
56
+ return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, onChange: rifm.onChange, error: error ||
35
57
  (valLength > 0 &&
36
58
  (onValidate ? !onValidate(value) : !onValidateFein(value))), helperText: valLength > 0 &&
37
59
  (onValidate ? !onValidate(value) : !onValidateFein(value))
38
60
  ? helperText
39
- : "", onFocus: event => {
61
+ : "", onFocus: function (event) {
40
62
  if (onFocus) {
41
63
  onFocus(event);
42
64
  }
43
- }, onBlur: event => {
65
+ }, onBlur: function (event) {
44
66
  onChange(value.trim());
45
67
  if (onBlur) {
46
68
  onBlur(event);
47
69
  }
48
70
  }, InputLabelProps: {
49
71
  shrink: true
50
- }, ...rest }) }));
72
+ } }, rest)) })));
51
73
  }
52
74
  export default FeinInput;
53
- export * from "./types";
@@ -1,5 +1,5 @@
1
- import { CSSProperties } from "react";
2
- import { TextFieldProps } from "@mui/material/TextField";
1
+ import type { CSSProperties } from "react";
2
+ import type { TextFieldProps } from "@mui/material/TextField";
3
3
  export interface FeinInputProps extends Omit<TextFieldProps, "onChange"> {
4
4
  onChange: (value: string) => void;
5
5
  onValidate?: (value?: string) => boolean;
@@ -1,16 +1,16 @@
1
1
  import { useCallback, useMemo } from "react";
2
2
  function useInteractions(props) {
3
- const { value } = props;
4
- const addMask = useCallback((str) => {
5
- const digits = (str.match(/\d+/g) || []).join("");
6
- const areaCode = digits.slice(0, 2).padEnd(2, "_");
7
- const prefixCode = digits.slice(2, 9).padEnd(7, "_");
8
- return `${areaCode} - ${prefixCode}`;
3
+ var value = props.value;
4
+ var addMask = useCallback(function (str) {
5
+ var digits = (str.match(/\d+/g) || []).join("");
6
+ var areaCode = digits.slice(0, 2).padEnd(2, "_");
7
+ var prefixCode = digits.slice(2, 9).padEnd(7, "_");
8
+ return "".concat(areaCode, " - ").concat(prefixCode);
9
9
  }, []);
10
- const valLength = useMemo(() => {
11
- const digitsArr = String(value).match(/\d/g);
10
+ var valLength = useMemo(function () {
11
+ var digitsArr = String(value).match(/\d/g);
12
12
  return digitsArr ? digitsArr.length : 0;
13
13
  }, [value]);
14
- return { valLength, addMask };
14
+ return { valLength: valLength, addMask: addMask };
15
15
  }
16
16
  export default useInteractions;
@@ -1,4 +1,4 @@
1
- import { FileUploaderProps } from "./types";
1
+ import type { FileUploaderProps } from "./types";
2
2
  declare function FileUploader(props: FileUploaderProps): JSX.Element;
3
3
  export default FileUploader;
4
- export * from "./types";
4
+ export type { FileUploaderProps };
@@ -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, jsxs as _jsxs } from "react/jsx-runtime";
2
24
  import Link from "@mui/material/Link";
3
25
  import Grid from "@mui/material/Grid";
@@ -10,32 +32,31 @@ import AlertDialog from "../AlertDialog";
10
32
  import useInteractions from "./useInteractions";
11
33
  import useCustomTheme from "../useCustomTheme";
12
34
  function FileUploader(props) {
13
- const { height = "150px", maxWidth = "430px", loading = false, disabled = false, dropFileText, chooseFileText, primaryColor, secondaryColor, ...rest } = props;
14
- const theme = useCustomTheme({ primaryColor, secondaryColor });
15
- const lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
16
- const { alertArgs, rootProps, onCloseAlert, onSelectFile, getRootProps, getInputProps } = useInteractions({ ...rest, disabled });
17
- return (_jsxs(ThemeProvider, { theme: theme, children: [lessThanSm ? (_jsxs("div", { ...getRootProps(), children: [_jsx("input", { ...getInputProps() }), _jsx(Link, { color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
35
+ var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, _c = props.loading, loading = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
36
+ var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
37
+ var lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
38
+ var _e = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _e.alertArgs, rootProps = _e.rootProps, onCloseAlert = _e.onCloseAlert, onSelectFile = _e.onSelectFile, getRootProps = _e.getRootProps, getInputProps = _e.getInputProps;
39
+ return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
18
40
  fontFamily: "Roboto, Helvetica, Arial, sans-serif",
19
41
  cursor: disabled ? "not-allowed" : "pointer"
20
- }, children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") })] })) : (_jsx(Grid, { container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
42
+ } }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
21
43
  border: "1px dashed #0099a7",
22
44
  borderRadius: "5px",
23
45
  outline: "none",
24
46
  backgroundColor: "#F2F2F2",
25
- maxWidth,
26
- height,
47
+ maxWidth: maxWidth,
48
+ height: height,
27
49
  width: "100%"
28
- }, ...rootProps, children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", { ...getInputProps() }), _jsx(Typography, { component: "p", variant: "caption", sx: {
50
+ } }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
29
51
  fontSize: ".875rem",
30
52
  textAlign: "center"
31
- }, children: dropFileText || "Drop files here" }), _jsx(Button, { variant: "contained", onClick: onSelectFile, sx: {
53
+ } }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
32
54
  backgroundColor: "white !important",
33
55
  color: disabled
34
56
  ? theme.palette.grey[400]
35
57
  : theme.palette.primary.main,
36
58
  fontFamily: "Roboto, Helvetica, Arial, sans-serif",
37
59
  cursor: disabled ? "not-allowed" : "pointer"
38
- }, disabled: disabled, children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) })] })) })), _jsx(AlertDialog, { open: alertArgs.open, primaryColor: primaryColor, secondaryColor: secondaryColor, onClose: onCloseAlert, children: alertArgs.message })] }));
60
+ }, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))), _jsx(AlertDialog, __assign({ open: alertArgs.open, primaryColor: primaryColor, secondaryColor: secondaryColor, onClose: onCloseAlert }, { children: alertArgs.message }))] })));
39
61
  }
40
62
  export default FileUploader;
41
- export * from "./types";
@@ -1,22 +1,37 @@
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 { useState, useCallback, useMemo } from "react";
2
13
  import { useDropzone } from "react-dropzone";
3
14
  function useInteractions(props) {
4
- const { multiple = false, disabled = false, maxFiles, maxSize = 1024 * 1024 * 5, accept, onUpload, sizeExceededErrorText, wrongFileTypeErrorText } = props;
5
- const ERROR_TYPE_MSG = useMemo(() => wrongFileTypeErrorText ||
6
- "The type of the file you uploaded is not accepted, please reupload!", [wrongFileTypeErrorText]);
7
- const ERROR_SIZE_MSG = useMemo(() => sizeExceededErrorText ||
8
- `Your file exceed the max size of ${maxSize / 1024 / 1024}MB.`, [sizeExceededErrorText, maxSize]);
9
- const [alertArgs, setAlertArgs] = useState({ open: false, message: "" });
10
- const onOpenAlert = useCallback((message) => {
11
- setAlertArgs(args => ({ ...args, open: true, message }));
15
+ var _a = props.multiple, multiple = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, maxFiles = props.maxFiles, _c = props.maxSize, maxSize = _c === void 0 ? 1024 * 1024 * 5 : _c, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
16
+ var ERROR_TYPE_MSG = useMemo(function () {
17
+ return wrongFileTypeErrorText ||
18
+ "The type of the file you uploaded is not accepted, please reupload!";
19
+ }, [wrongFileTypeErrorText]);
20
+ var ERROR_SIZE_MSG = useMemo(function () {
21
+ return sizeExceededErrorText ||
22
+ "Your file exceed the max size of ".concat(maxSize / 1024 / 1024, "MB.");
23
+ }, [sizeExceededErrorText, maxSize]);
24
+ var _d = useState({ open: false, message: "" }), alertArgs = _d[0], setAlertArgs = _d[1];
25
+ var onOpenAlert = useCallback(function (message) {
26
+ setAlertArgs(function (args) { return (__assign(__assign({}, args), { open: true, message: message })); });
12
27
  }, []);
13
- const onCloseAlert = useCallback(() => {
28
+ var onCloseAlert = useCallback(function () {
14
29
  setAlertArgs({ open: false, message: "" });
15
30
  }, []);
16
- const onDrop = useCallback((acceptedFiles, rejectedFiles) => {
31
+ var onDrop = useCallback(function (acceptedFiles, rejectedFiles) {
17
32
  if (rejectedFiles && rejectedFiles.length > 0) {
18
- rejectedFiles.some((rejectedFile) => {
19
- const { file, errors } = rejectedFile;
33
+ rejectedFiles.some(function (rejectedFile) {
34
+ var file = rejectedFile.file, errors = rejectedFile.errors;
20
35
  if (accept && !Object.keys(accept).includes(file.type)) {
21
36
  onOpenAlert(ERROR_TYPE_MSG);
22
37
  return true;
@@ -36,29 +51,29 @@ function useInteractions(props) {
36
51
  onUpload(acceptedFiles);
37
52
  }
38
53
  }, [accept, onUpload]);
39
- const { getRootProps, getInputProps, open: onSelectFile } = useDropzone({
40
- onDrop,
41
- accept,
42
- multiple,
43
- disabled,
44
- maxSize,
45
- maxFiles
46
- });
47
- const rootProps = getRootProps({
48
- onClick: e => e.stopPropagation(),
49
- onKeyDown: e => {
54
+ var _e = useDropzone({
55
+ onDrop: onDrop,
56
+ accept: accept,
57
+ multiple: multiple,
58
+ disabled: disabled,
59
+ maxSize: maxSize,
60
+ maxFiles: maxFiles
61
+ }), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, onSelectFile = _e.open;
62
+ var rootProps = getRootProps({
63
+ onClick: function (e) { return e.stopPropagation(); },
64
+ onKeyDown: function (e) {
50
65
  if (e.key === "Space" || e.key === "Enter") {
51
66
  e.stopPropagation();
52
67
  }
53
68
  }
54
69
  });
55
70
  return {
56
- alertArgs,
57
- rootProps,
58
- onCloseAlert,
59
- onSelectFile,
60
- getRootProps,
61
- getInputProps
71
+ alertArgs: alertArgs,
72
+ rootProps: rootProps,
73
+ onCloseAlert: onCloseAlert,
74
+ onSelectFile: onSelectFile,
75
+ getRootProps: getRootProps,
76
+ getInputProps: getInputProps
62
77
  };
63
78
  }
64
79
  export default useInteractions;
@@ -1,4 +1,4 @@
1
- import { FormRadioGroupProps } from "./types";
1
+ import type { RadioOption, FormRadioGroupProps } from "./types";
2
2
  declare function FormRadioGroup(props: FormRadioGroupProps): JSX.Element;
3
3
  export default FormRadioGroup;
4
- export * from "./types";
4
+ export type { RadioOption, FormRadioGroupProps };