@verma-consulting/design-library 0.1.13 → 0.1.14
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/README.md +2 -0
- package/dist/index.d.mts +22 -1
- package/dist/index.d.ts +22 -1
- package/dist/index.js +205 -90
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +166 -53
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -68,6 +68,8 @@ The library re-exports **all of `@mui/material`**, so you can use MUI components
|
|
|
68
68
|
| [StatusPill](./docs/StatusPill.md) | Chip showing user status (Pending, Active, etc.). |
|
|
69
69
|
| [IOSSwitch](./docs/IOSSwitch.md) | iOS-style switch (accepts MUI Switch props). |
|
|
70
70
|
| [Loader](./docs/Loader.md) | Full-screen loading overlay with spinner. |
|
|
71
|
+
| [SkeletonBar](./docs/SkeletonBar.md) | Horizontal shimmer bar for loading placeholders. |
|
|
72
|
+
| [EmptyState](./docs/EmptyState.md) | Centered empty-state view with optional icon and label. |
|
|
71
73
|
|
|
72
74
|
Detailed docs for each component are in **[docs/](./docs/README.md)**.
|
|
73
75
|
|
package/dist/index.d.mts
CHANGED
|
@@ -84,6 +84,27 @@ interface LoaderProps {
|
|
|
84
84
|
}
|
|
85
85
|
declare const Loader: React$1.FC<LoaderProps>;
|
|
86
86
|
|
|
87
|
+
interface SkeletonBarProps {
|
|
88
|
+
width?: string | number;
|
|
89
|
+
height?: number;
|
|
90
|
+
sx?: object;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Horizontal bar with sideways shimmer loading animation.
|
|
94
|
+
* Use in tables, cards, selects, and any loading placeholder.
|
|
95
|
+
*/
|
|
96
|
+
declare const SkeletonBar: React$1.FC<SkeletonBarProps>;
|
|
97
|
+
|
|
98
|
+
interface EmptyStateProps {
|
|
99
|
+
/** Label text to display (e.g. getContent("noDataDescription")) */
|
|
100
|
+
label?: string;
|
|
101
|
+
/** Vertical margin (theme spacing, default 8) */
|
|
102
|
+
m?: number;
|
|
103
|
+
/** Optional custom icon */
|
|
104
|
+
icon?: React$1.ReactNode;
|
|
105
|
+
}
|
|
106
|
+
declare const EmptyState: React$1.FC<EmptyStateProps>;
|
|
107
|
+
|
|
87
108
|
type PillProps = {
|
|
88
109
|
label?: string;
|
|
89
110
|
leftIcon?: string;
|
|
@@ -148,4 +169,4 @@ interface PhoneNumberFieldProps {
|
|
|
148
169
|
}
|
|
149
170
|
declare const PhoneNumberField: React$1.FC<PhoneNumberFieldProps>;
|
|
150
171
|
|
|
151
|
-
export { ClearableSelect, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, PhoneNumberField, Pill, SearchableSelect, StatusPill, TabPanel };
|
|
172
|
+
export { ClearableSelect, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel };
|
package/dist/index.d.ts
CHANGED
|
@@ -84,6 +84,27 @@ interface LoaderProps {
|
|
|
84
84
|
}
|
|
85
85
|
declare const Loader: React$1.FC<LoaderProps>;
|
|
86
86
|
|
|
87
|
+
interface SkeletonBarProps {
|
|
88
|
+
width?: string | number;
|
|
89
|
+
height?: number;
|
|
90
|
+
sx?: object;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Horizontal bar with sideways shimmer loading animation.
|
|
94
|
+
* Use in tables, cards, selects, and any loading placeholder.
|
|
95
|
+
*/
|
|
96
|
+
declare const SkeletonBar: React$1.FC<SkeletonBarProps>;
|
|
97
|
+
|
|
98
|
+
interface EmptyStateProps {
|
|
99
|
+
/** Label text to display (e.g. getContent("noDataDescription")) */
|
|
100
|
+
label?: string;
|
|
101
|
+
/** Vertical margin (theme spacing, default 8) */
|
|
102
|
+
m?: number;
|
|
103
|
+
/** Optional custom icon */
|
|
104
|
+
icon?: React$1.ReactNode;
|
|
105
|
+
}
|
|
106
|
+
declare const EmptyState: React$1.FC<EmptyStateProps>;
|
|
107
|
+
|
|
87
108
|
type PillProps = {
|
|
88
109
|
label?: string;
|
|
89
110
|
leftIcon?: string;
|
|
@@ -148,4 +169,4 @@ interface PhoneNumberFieldProps {
|
|
|
148
169
|
}
|
|
149
170
|
declare const PhoneNumberField: React$1.FC<PhoneNumberFieldProps>;
|
|
150
171
|
|
|
151
|
-
export { ClearableSelect, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, PhoneNumberField, Pill, SearchableSelect, StatusPill, TabPanel };
|
|
172
|
+
export { ClearableSelect, EmptyState, FormDialog, FormDrawer, FormPopover, FormSnackBar, IOSSwitch, ImageUploadAvatar, InputFileUpload, Loader, Logo, PhoneNumberField, Pill, SearchableSelect, SkeletonBar, StatusPill, TabPanel };
|
package/dist/index.js
CHANGED
|
@@ -32,6 +32,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
32
32
|
var index_exports = {};
|
|
33
33
|
__export(index_exports, {
|
|
34
34
|
ClearableSelect: () => ClearableSelect_default,
|
|
35
|
+
EmptyState: () => EmptyState_default,
|
|
35
36
|
FormDialog: () => FormDialog_default,
|
|
36
37
|
FormDrawer: () => FormDrawer_default,
|
|
37
38
|
FormPopover: () => FormPopover_default,
|
|
@@ -44,6 +45,7 @@ __export(index_exports, {
|
|
|
44
45
|
PhoneNumberField: () => PhoneNumberField_default,
|
|
45
46
|
Pill: () => Pill_default,
|
|
46
47
|
SearchableSelect: () => SearchableSelect_default,
|
|
48
|
+
SkeletonBar: () => SkeletonBar_default,
|
|
47
49
|
StatusPill: () => StatusPill_default,
|
|
48
50
|
TabPanel: () => TabPanel_default,
|
|
49
51
|
ThemeProvider: () => import_styles10.ThemeProvider,
|
|
@@ -644,10 +646,121 @@ var Loader = ({ size = 48, color = "primary" }) => {
|
|
|
644
646
|
};
|
|
645
647
|
var Loader_default = Loader;
|
|
646
648
|
|
|
647
|
-
// src/
|
|
649
|
+
// src/SkeletonBar.tsx
|
|
648
650
|
var import_material9 = require("@mui/material");
|
|
649
|
-
var import_styles7 = require("@mui/styles");
|
|
650
651
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
652
|
+
var SHIMMER_KEYFRAMES = {
|
|
653
|
+
"@keyframes skeletonShimmer": {
|
|
654
|
+
"0%": { backgroundPosition: "200% 0" },
|
|
655
|
+
"100%": { backgroundPosition: "-200% 0" }
|
|
656
|
+
}
|
|
657
|
+
};
|
|
658
|
+
var SkeletonBar = ({
|
|
659
|
+
width = "100%",
|
|
660
|
+
height = 24,
|
|
661
|
+
sx = {}
|
|
662
|
+
}) => {
|
|
663
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
664
|
+
const theme = (0, import_material9.useTheme)();
|
|
665
|
+
const base = theme.palette.mode === "dark" ? (_b = (_a = theme.palette.grey) == null ? void 0 : _a[700]) != null ? _b : "#424242" : (_d = (_c = theme.palette.grey) == null ? void 0 : _c[200]) != null ? _d : "#e0e0e0";
|
|
666
|
+
const highlight = theme.palette.mode === "dark" ? (_f = (_e = theme.palette.grey) == null ? void 0 : _e[600]) != null ? _f : "#616161" : (_h = (_g = theme.palette.grey) == null ? void 0 : _g[100]) != null ? _h : "#f5f5f5";
|
|
667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
668
|
+
import_material9.Box,
|
|
669
|
+
{
|
|
670
|
+
sx: {
|
|
671
|
+
...SHIMMER_KEYFRAMES,
|
|
672
|
+
borderRadius: 2,
|
|
673
|
+
height,
|
|
674
|
+
width,
|
|
675
|
+
maxWidth: "100%",
|
|
676
|
+
overflow: "hidden",
|
|
677
|
+
background: `linear-gradient(90deg, ${base} 0%, ${highlight} 20%, ${base} 40%, ${base} 100%)`,
|
|
678
|
+
backgroundSize: "200% 100%",
|
|
679
|
+
animation: "skeletonShimmer 1.4s ease-in-out infinite",
|
|
680
|
+
...sx
|
|
681
|
+
}
|
|
682
|
+
}
|
|
683
|
+
);
|
|
684
|
+
};
|
|
685
|
+
var SkeletonBar_default = SkeletonBar;
|
|
686
|
+
|
|
687
|
+
// src/EmptyState.tsx
|
|
688
|
+
var import_react4 = __toESM(require("react"));
|
|
689
|
+
var import_material10 = require("@mui/material");
|
|
690
|
+
var import_icons_material5 = require("@mui/icons-material");
|
|
691
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
692
|
+
var EmptyState = ({ label, m = 8, icon }) => {
|
|
693
|
+
var _a, _b, _c, _d;
|
|
694
|
+
const theme = (0, import_material10.useTheme)();
|
|
695
|
+
const text = label != null ? label : "No data here";
|
|
696
|
+
const iconColor = theme.palette.mode === "dark" ? (_b = (_a = theme.palette.grey) == null ? void 0 : _a[600]) != null ? _b : "rgba(255,255,255,0.25)" : (_d = (_c = theme.palette.grey) == null ? void 0 : _c[300]) != null ? _d : "rgba(0,0,0,0.18)";
|
|
697
|
+
const iconEl = icon != null && import_react4.default.isValidElement(icon) ? icon : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
698
|
+
import_icons_material5.StorageOutlined,
|
|
699
|
+
{
|
|
700
|
+
sx: {
|
|
701
|
+
fontSize: 72,
|
|
702
|
+
color: iconColor,
|
|
703
|
+
display: "block"
|
|
704
|
+
}
|
|
705
|
+
}
|
|
706
|
+
);
|
|
707
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
708
|
+
import_material10.Box,
|
|
709
|
+
{
|
|
710
|
+
sx: {
|
|
711
|
+
display: "flex",
|
|
712
|
+
flexDirection: "column",
|
|
713
|
+
alignItems: "center",
|
|
714
|
+
justifyContent: "center",
|
|
715
|
+
minHeight: 140,
|
|
716
|
+
m,
|
|
717
|
+
position: "relative"
|
|
718
|
+
},
|
|
719
|
+
children: [
|
|
720
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
721
|
+
import_material10.Box,
|
|
722
|
+
{
|
|
723
|
+
sx: {
|
|
724
|
+
position: "absolute",
|
|
725
|
+
top: "50%",
|
|
726
|
+
left: "50%",
|
|
727
|
+
transform: "translate(-50%, -50%)",
|
|
728
|
+
pointerEvents: "none",
|
|
729
|
+
display: "flex",
|
|
730
|
+
alignItems: "center",
|
|
731
|
+
justifyContent: "center"
|
|
732
|
+
},
|
|
733
|
+
children: iconEl
|
|
734
|
+
}
|
|
735
|
+
),
|
|
736
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
737
|
+
import_material10.Typography,
|
|
738
|
+
{
|
|
739
|
+
variant: "subtitle1",
|
|
740
|
+
align: "center",
|
|
741
|
+
sx: {
|
|
742
|
+
position: "relative",
|
|
743
|
+
zIndex: 1,
|
|
744
|
+
fontWeight: 600,
|
|
745
|
+
fontSize: "1rem",
|
|
746
|
+
letterSpacing: "0.01em",
|
|
747
|
+
color: "text.secondary",
|
|
748
|
+
maxWidth: 360,
|
|
749
|
+
lineHeight: 1.5
|
|
750
|
+
},
|
|
751
|
+
children: text
|
|
752
|
+
}
|
|
753
|
+
)
|
|
754
|
+
]
|
|
755
|
+
}
|
|
756
|
+
);
|
|
757
|
+
};
|
|
758
|
+
var EmptyState_default = EmptyState;
|
|
759
|
+
|
|
760
|
+
// src/Pill.tsx
|
|
761
|
+
var import_material11 = require("@mui/material");
|
|
762
|
+
var import_styles7 = require("@mui/styles");
|
|
763
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
651
764
|
var useStyles3 = (0, import_styles7.makeStyles)((theme) => ({
|
|
652
765
|
button: {
|
|
653
766
|
padding: "4px 8px 4px 8px",
|
|
@@ -671,10 +784,10 @@ var Pill = ({
|
|
|
671
784
|
label = "",
|
|
672
785
|
disabled = false
|
|
673
786
|
}) => {
|
|
674
|
-
const theme = (0,
|
|
787
|
+
const theme = (0, import_material11.useTheme)();
|
|
675
788
|
const classes = useStyles3();
|
|
676
|
-
return /* @__PURE__ */ (0,
|
|
677
|
-
|
|
789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
790
|
+
import_material11.Button,
|
|
678
791
|
{
|
|
679
792
|
variant: isSelected ? "contained" : "outlined",
|
|
680
793
|
color: color || "primary",
|
|
@@ -684,9 +797,9 @@ var Pill = ({
|
|
|
684
797
|
textTransform: "none"
|
|
685
798
|
},
|
|
686
799
|
onClick,
|
|
687
|
-
children: /* @__PURE__ */ (0,
|
|
688
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
689
|
-
|
|
800
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
|
|
801
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
802
|
+
import_material11.Icon,
|
|
690
803
|
{
|
|
691
804
|
className: leftIcon,
|
|
692
805
|
fontSize: 14,
|
|
@@ -695,9 +808,9 @@ var Pill = ({
|
|
|
695
808
|
"data-testid": "pill-left-icon"
|
|
696
809
|
}
|
|
697
810
|
),
|
|
698
|
-
/* @__PURE__ */ (0,
|
|
699
|
-
rightIcon && /* @__PURE__ */ (0,
|
|
700
|
-
|
|
811
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material11.Typography, { variant: "subtitle", color: "inherit", fontWeight: "bold", children: label }),
|
|
812
|
+
rightIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
813
|
+
import_material11.Icon,
|
|
701
814
|
{
|
|
702
815
|
className: rightIcon,
|
|
703
816
|
fontSize: 14,
|
|
@@ -715,8 +828,8 @@ var Pill_default = Pill;
|
|
|
715
828
|
// src/IOSSwitch.tsx
|
|
716
829
|
var import_styles8 = require("@mui/material/styles");
|
|
717
830
|
var import_Switch = __toESM(require("@mui/material/Switch"));
|
|
718
|
-
var
|
|
719
|
-
var IOSSwitch = (0, import_styles8.styled)((props) => /* @__PURE__ */ (0,
|
|
831
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
832
|
+
var IOSSwitch = (0, import_styles8.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
|
|
720
833
|
width: 46,
|
|
721
834
|
height: 30,
|
|
722
835
|
padding: 0,
|
|
@@ -764,17 +877,17 @@ var IOSSwitch = (0, import_styles8.styled)((props) => /* @__PURE__ */ (0, import
|
|
|
764
877
|
var IOSSwitch_default = IOSSwitch;
|
|
765
878
|
|
|
766
879
|
// src/StatusPill.tsx
|
|
767
|
-
var
|
|
880
|
+
var import_material12 = require("@mui/material");
|
|
768
881
|
var import_common_library3 = require("@verma-consulting/common-library");
|
|
769
|
-
var
|
|
882
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
770
883
|
var statusColorMap = {
|
|
771
884
|
[import_common_library3.userStatus.Pending]: "warning",
|
|
772
885
|
[import_common_library3.userStatus.Active]: "success",
|
|
773
886
|
[import_common_library3.userStatus.Inactive]: "error",
|
|
774
887
|
[import_common_library3.userStatus.Invited]: "info"
|
|
775
888
|
};
|
|
776
|
-
var StatusPill = ({ status }) => /* @__PURE__ */ (0,
|
|
777
|
-
|
|
889
|
+
var StatusPill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
890
|
+
import_material12.Chip,
|
|
778
891
|
{
|
|
779
892
|
label: status,
|
|
780
893
|
color: statusColorMap[status],
|
|
@@ -785,12 +898,12 @@ var StatusPill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
|
785
898
|
var StatusPill_default = StatusPill;
|
|
786
899
|
|
|
787
900
|
// src/FormPopover.tsx
|
|
788
|
-
var
|
|
789
|
-
var
|
|
790
|
-
var
|
|
791
|
-
var
|
|
901
|
+
var import_react5 = require("react");
|
|
902
|
+
var import_material13 = require("@mui/material");
|
|
903
|
+
var import_icons_material6 = require("@mui/icons-material");
|
|
904
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
792
905
|
var FormPopover = ({ row, children, title }) => {
|
|
793
|
-
const [anchorEl, setAnchorEl] = (0,
|
|
906
|
+
const [anchorEl, setAnchorEl] = (0, import_react5.useState)(null);
|
|
794
907
|
const handleClick = (event) => {
|
|
795
908
|
setAnchorEl(event.currentTarget);
|
|
796
909
|
};
|
|
@@ -798,9 +911,9 @@ var FormPopover = ({ row, children, title }) => {
|
|
|
798
911
|
setAnchorEl(null);
|
|
799
912
|
};
|
|
800
913
|
const open = Boolean(anchorEl);
|
|
801
|
-
return /* @__PURE__ */ (0,
|
|
802
|
-
/* @__PURE__ */ (0,
|
|
803
|
-
|
|
914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
915
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
916
|
+
import_material13.IconButton,
|
|
804
917
|
{
|
|
805
918
|
onClick: handleClick,
|
|
806
919
|
size: "small",
|
|
@@ -814,11 +927,11 @@ var FormPopover = ({ row, children, title }) => {
|
|
|
814
927
|
backgroundColor: "#f0f0f0"
|
|
815
928
|
}
|
|
816
929
|
},
|
|
817
|
-
children: /* @__PURE__ */ (0,
|
|
930
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_material6.MoreHoriz, { fontSize: "inherit", color: "primary" })
|
|
818
931
|
}
|
|
819
932
|
) }),
|
|
820
|
-
/* @__PURE__ */ (0,
|
|
821
|
-
|
|
933
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
934
|
+
import_material13.Popover,
|
|
822
935
|
{
|
|
823
936
|
open,
|
|
824
937
|
anchorEl,
|
|
@@ -835,11 +948,11 @@ var FormPopover = ({ row, children, title }) => {
|
|
|
835
948
|
var FormPopover_default = FormPopover;
|
|
836
949
|
|
|
837
950
|
// src/SearchableSelect.tsx
|
|
838
|
-
var
|
|
839
|
-
var
|
|
840
|
-
var
|
|
951
|
+
var import_react6 = __toESM(require("react"));
|
|
952
|
+
var import_material14 = require("@mui/material");
|
|
953
|
+
var import_icons_material7 = require("@mui/icons-material");
|
|
841
954
|
var import_styles9 = require("@mui/styles");
|
|
842
|
-
var
|
|
955
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
843
956
|
var useStyles4 = (0, import_styles9.makeStyles)(() => ({
|
|
844
957
|
defaultMode: {
|
|
845
958
|
padding: "14px 8px",
|
|
@@ -858,7 +971,7 @@ var useStyles4 = (0, import_styles9.makeStyles)(() => ({
|
|
|
858
971
|
whiteSpace: "pre-wrap"
|
|
859
972
|
}
|
|
860
973
|
}));
|
|
861
|
-
var SearchableSelect =
|
|
974
|
+
var SearchableSelect = import_react6.default.memo(
|
|
862
975
|
({
|
|
863
976
|
name,
|
|
864
977
|
label,
|
|
@@ -873,11 +986,11 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
873
986
|
multiple = false
|
|
874
987
|
}) => {
|
|
875
988
|
const classes = useStyles4();
|
|
876
|
-
const wrapperRef = (0,
|
|
877
|
-
const inputRef = (0,
|
|
878
|
-
const [editMode, setEditMode] = (0,
|
|
879
|
-
const [open, setOpen] = (0,
|
|
880
|
-
(0,
|
|
989
|
+
const wrapperRef = (0, import_react6.useRef)(null);
|
|
990
|
+
const inputRef = (0, import_react6.useRef)(null);
|
|
991
|
+
const [editMode, setEditMode] = (0, import_react6.useState)(defaultEditMode);
|
|
992
|
+
const [open, setOpen] = (0, import_react6.useState)(defaultEditMode);
|
|
993
|
+
(0, import_react6.useEffect)(() => {
|
|
881
994
|
function handleClickOutside(event) {
|
|
882
995
|
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
|
|
883
996
|
setEditMode(false);
|
|
@@ -891,7 +1004,7 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
891
1004
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
892
1005
|
};
|
|
893
1006
|
}, [editMode]);
|
|
894
|
-
(0,
|
|
1007
|
+
(0, import_react6.useEffect)(() => {
|
|
895
1008
|
if (editMode && open && inputRef.current) {
|
|
896
1009
|
inputRef.current.focus();
|
|
897
1010
|
}
|
|
@@ -906,7 +1019,7 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
906
1019
|
setEditMode(false);
|
|
907
1020
|
setOpen(false);
|
|
908
1021
|
};
|
|
909
|
-
const selected = (0,
|
|
1022
|
+
const selected = (0, import_react6.useMemo)(() => {
|
|
910
1023
|
var _a;
|
|
911
1024
|
if (multiple) {
|
|
912
1025
|
if (!value.trim()) return [];
|
|
@@ -916,7 +1029,7 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
916
1029
|
return (_a = options.find((opt) => opt.value === value)) != null ? _a : null;
|
|
917
1030
|
}
|
|
918
1031
|
}, [value, options, multiple]);
|
|
919
|
-
const displayValue = (0,
|
|
1032
|
+
const displayValue = (0, import_react6.useMemo)(() => {
|
|
920
1033
|
var _a;
|
|
921
1034
|
if (multiple) {
|
|
922
1035
|
if (!Array.isArray(selected)) return "";
|
|
@@ -926,8 +1039,8 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
926
1039
|
}
|
|
927
1040
|
}, [selected, multiple]);
|
|
928
1041
|
const isValueEmpty = !value.trim();
|
|
929
|
-
return editMode ? /* @__PURE__ */ (0,
|
|
930
|
-
|
|
1042
|
+
return editMode ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormControl, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1043
|
+
import_material14.Autocomplete,
|
|
931
1044
|
{
|
|
932
1045
|
multiple,
|
|
933
1046
|
disableCloseOnSelect: multiple,
|
|
@@ -956,8 +1069,8 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
956
1069
|
autoHighlight: true,
|
|
957
1070
|
getOptionLabel: (option) => option.label,
|
|
958
1071
|
isOptionEqualToValue: (option, val) => option.value === val.value,
|
|
959
|
-
renderInput: (params) => /* @__PURE__ */ (0,
|
|
960
|
-
|
|
1072
|
+
renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1073
|
+
import_material14.TextField,
|
|
961
1074
|
{
|
|
962
1075
|
...params,
|
|
963
1076
|
label,
|
|
@@ -966,8 +1079,8 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
966
1079
|
inputRef,
|
|
967
1080
|
InputProps: {
|
|
968
1081
|
...params.InputProps,
|
|
969
|
-
endAdornment: /* @__PURE__ */ (0,
|
|
970
|
-
|
|
1082
|
+
endAdornment: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: !isValueEmpty && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1083
|
+
import_material14.IconButton,
|
|
971
1084
|
{
|
|
972
1085
|
"aria-label": `clear ${name}`,
|
|
973
1086
|
onClick: handleClear,
|
|
@@ -976,7 +1089,7 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
976
1089
|
backgroundColor: "transparent",
|
|
977
1090
|
boxShadow: "none"
|
|
978
1091
|
},
|
|
979
|
-
children: /* @__PURE__ */ (0,
|
|
1092
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material7.Clear, { fontSize: "inherit" })
|
|
980
1093
|
}
|
|
981
1094
|
) })
|
|
982
1095
|
}
|
|
@@ -987,7 +1100,7 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
987
1100
|
setOpen(false);
|
|
988
1101
|
}
|
|
989
1102
|
}
|
|
990
|
-
) }) : /* @__PURE__ */ (0,
|
|
1103
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
991
1104
|
"div",
|
|
992
1105
|
{
|
|
993
1106
|
ref: wrapperRef,
|
|
@@ -1000,8 +1113,8 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
1000
1113
|
className: classes.defaultMode,
|
|
1001
1114
|
style,
|
|
1002
1115
|
children: [
|
|
1003
|
-
/* @__PURE__ */ (0,
|
|
1004
|
-
/* @__PURE__ */ (0,
|
|
1116
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormLabel, { className: classes.formLabel, children: label }),
|
|
1117
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Typography, { className: classes.formValue, children: displayValue })
|
|
1005
1118
|
]
|
|
1006
1119
|
}
|
|
1007
1120
|
);
|
|
@@ -1010,9 +1123,9 @@ var SearchableSelect = import_react5.default.memo(
|
|
|
1010
1123
|
var SearchableSelect_default = SearchableSelect;
|
|
1011
1124
|
|
|
1012
1125
|
// src/FormDrawer.tsx
|
|
1013
|
-
var
|
|
1014
|
-
var
|
|
1015
|
-
var
|
|
1126
|
+
var import_material15 = require("@mui/material");
|
|
1127
|
+
var import_icons_material8 = require("@mui/icons-material");
|
|
1128
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1016
1129
|
var FormDrawer = ({
|
|
1017
1130
|
open,
|
|
1018
1131
|
setOpen,
|
|
@@ -1020,10 +1133,10 @@ var FormDrawer = ({
|
|
|
1020
1133
|
actions,
|
|
1021
1134
|
children
|
|
1022
1135
|
}) => {
|
|
1023
|
-
const theme = (0,
|
|
1024
|
-
const mdMatches = (0,
|
|
1025
|
-
return /* @__PURE__ */ (0,
|
|
1026
|
-
|
|
1136
|
+
const theme = (0, import_material15.useTheme)();
|
|
1137
|
+
const mdMatches = (0, import_material15.useMediaQuery)(theme.breakpoints.down("md"));
|
|
1138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
1139
|
+
import_material15.Drawer,
|
|
1027
1140
|
{
|
|
1028
1141
|
anchor: mdMatches ? "bottom" : "right",
|
|
1029
1142
|
open,
|
|
@@ -1038,10 +1151,10 @@ var FormDrawer = ({
|
|
|
1038
1151
|
}
|
|
1039
1152
|
},
|
|
1040
1153
|
children: [
|
|
1041
|
-
/* @__PURE__ */ (0,
|
|
1042
|
-
/* @__PURE__ */ (0,
|
|
1043
|
-
/* @__PURE__ */ (0,
|
|
1044
|
-
|
|
1154
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.Box, { p: 3, borderBottom: "1px solid #eee", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material15.Grid, { container: true, children: [
|
|
1155
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.Grid, { item: true, children: title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.Typography, { variant: "h6", fontWeight: "bold", children: title }) }),
|
|
1156
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.Grid, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1157
|
+
import_material15.IconButton,
|
|
1045
1158
|
{
|
|
1046
1159
|
size: "medium",
|
|
1047
1160
|
onClick: () => setOpen(false),
|
|
@@ -1051,13 +1164,13 @@ var FormDrawer = ({
|
|
|
1051
1164
|
right: 8,
|
|
1052
1165
|
zIndex: 2
|
|
1053
1166
|
},
|
|
1054
|
-
children: /* @__PURE__ */ (0,
|
|
1167
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material8.Close, { fontSize: "inherit" })
|
|
1055
1168
|
}
|
|
1056
1169
|
) })
|
|
1057
1170
|
] }) }),
|
|
1058
|
-
/* @__PURE__ */ (0,
|
|
1059
|
-
actions && /* @__PURE__ */ (0,
|
|
1060
|
-
|
|
1171
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.Box, { flex: 1, overflow: "auto", p: 3, children }),
|
|
1172
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1173
|
+
import_material15.Box,
|
|
1061
1174
|
{
|
|
1062
1175
|
p: 2,
|
|
1063
1176
|
borderTop: "1px solid #eee",
|
|
@@ -1076,10 +1189,10 @@ var FormDrawer = ({
|
|
|
1076
1189
|
var FormDrawer_default = FormDrawer;
|
|
1077
1190
|
|
|
1078
1191
|
// src/PhoneNumberField.tsx
|
|
1079
|
-
var
|
|
1080
|
-
var
|
|
1192
|
+
var import_react7 = require("react");
|
|
1193
|
+
var import_material16 = require("@mui/material");
|
|
1081
1194
|
var import_common_library4 = require("@verma-consulting/common-library");
|
|
1082
|
-
var
|
|
1195
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1083
1196
|
var PhoneNumberField = ({
|
|
1084
1197
|
value = "",
|
|
1085
1198
|
onChange,
|
|
@@ -1090,16 +1203,16 @@ var PhoneNumberField = ({
|
|
|
1090
1203
|
autoFocus = false,
|
|
1091
1204
|
onBlur
|
|
1092
1205
|
}) => {
|
|
1093
|
-
const theme = (0,
|
|
1094
|
-
const smMatches = (0,
|
|
1206
|
+
const theme = (0, import_material16.useTheme)();
|
|
1207
|
+
const smMatches = (0, import_material16.useMediaQuery)(theme.breakpoints.down("sm"));
|
|
1095
1208
|
const countries = import_common_library4.constants.COUNTRIES || [];
|
|
1096
|
-
const [country, setCountry] = (0,
|
|
1097
|
-
const [localNumber, setLocalNumber] = (0,
|
|
1098
|
-
const [isFocused, setIsFocused] = (0,
|
|
1099
|
-
const [selectOpen, setSelectOpen] = (0,
|
|
1100
|
-
const [ignoreNextOutsideClick, setIgnoreNextOutsideClick] = (0,
|
|
1101
|
-
const wrapperRef = (0,
|
|
1102
|
-
const parseE164 = (0,
|
|
1209
|
+
const [country, setCountry] = (0, import_react7.useState)(defaultCountry);
|
|
1210
|
+
const [localNumber, setLocalNumber] = (0, import_react7.useState)("");
|
|
1211
|
+
const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
|
|
1212
|
+
const [selectOpen, setSelectOpen] = (0, import_react7.useState)(false);
|
|
1213
|
+
const [ignoreNextOutsideClick, setIgnoreNextOutsideClick] = (0, import_react7.useState)(false);
|
|
1214
|
+
const wrapperRef = (0, import_react7.useRef)(null);
|
|
1215
|
+
const parseE164 = (0, import_react7.useCallback)(
|
|
1103
1216
|
(val) => {
|
|
1104
1217
|
const cleaned = (val || "").toString().replace(/\D/g, "");
|
|
1105
1218
|
if (!cleaned) return { dial: "", local: "" };
|
|
@@ -1116,7 +1229,7 @@ var PhoneNumberField = ({
|
|
|
1116
1229
|
},
|
|
1117
1230
|
[countries]
|
|
1118
1231
|
);
|
|
1119
|
-
(0,
|
|
1232
|
+
(0, import_react7.useEffect)(() => {
|
|
1120
1233
|
if (isFocused) return;
|
|
1121
1234
|
if (!value) {
|
|
1122
1235
|
setLocalNumber("");
|
|
@@ -1137,7 +1250,7 @@ var PhoneNumberField = ({
|
|
|
1137
1250
|
if (cleaned.length > 6) formatted += "-" + cleaned.slice(6, 10);
|
|
1138
1251
|
return formatted;
|
|
1139
1252
|
};
|
|
1140
|
-
const commitValue = (0,
|
|
1253
|
+
const commitValue = (0, import_react7.useCallback)(() => {
|
|
1141
1254
|
var _a;
|
|
1142
1255
|
const sel = countries.find((c) => c.code === country);
|
|
1143
1256
|
const dial = (_a = sel == null ? void 0 : sel.phone) != null ? _a : "";
|
|
@@ -1154,7 +1267,7 @@ var PhoneNumberField = ({
|
|
|
1154
1267
|
const handleCountryChange = (e) => {
|
|
1155
1268
|
setCountry(e.target.value);
|
|
1156
1269
|
};
|
|
1157
|
-
(0,
|
|
1270
|
+
(0, import_react7.useEffect)(() => {
|
|
1158
1271
|
const onDocMouseDown = (ev) => {
|
|
1159
1272
|
if (!wrapperRef.current) return;
|
|
1160
1273
|
if (wrapperRef.current.contains(ev.target)) return;
|
|
@@ -1181,23 +1294,23 @@ var PhoneNumberField = ({
|
|
|
1181
1294
|
onBlur == null ? void 0 : onBlur();
|
|
1182
1295
|
}
|
|
1183
1296
|
};
|
|
1184
|
-
return /* @__PURE__ */ (0,
|
|
1185
|
-
|
|
1297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1298
|
+
import_material16.Box,
|
|
1186
1299
|
{
|
|
1187
1300
|
ref: wrapperRef,
|
|
1188
1301
|
onFocusCapture: () => setIsFocused(true),
|
|
1189
1302
|
onBlurCapture: handleWrapperBlur,
|
|
1190
1303
|
sx: { display: "flex", alignItems: "center", width: "100%" },
|
|
1191
|
-
children: /* @__PURE__ */ (0,
|
|
1192
|
-
|
|
1304
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
1305
|
+
import_material16.Stack,
|
|
1193
1306
|
{
|
|
1194
1307
|
direction: "row",
|
|
1195
1308
|
spacing: 0,
|
|
1196
1309
|
alignItems: "center",
|
|
1197
1310
|
sx: { width: "100%" },
|
|
1198
1311
|
children: [
|
|
1199
|
-
/* @__PURE__ */ (0,
|
|
1200
|
-
|
|
1312
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1313
|
+
import_material16.TextField,
|
|
1201
1314
|
{
|
|
1202
1315
|
select: true,
|
|
1203
1316
|
value: country,
|
|
@@ -1223,7 +1336,7 @@ var PhoneNumberField = ({
|
|
|
1223
1336
|
},
|
|
1224
1337
|
onClose: () => setSelectOpen(false)
|
|
1225
1338
|
},
|
|
1226
|
-
children: countries.map((option) => /* @__PURE__ */ (0,
|
|
1339
|
+
children: countries.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material16.MenuItem, { value: option.code, children: [
|
|
1227
1340
|
option.code,
|
|
1228
1341
|
" (+",
|
|
1229
1342
|
option.phone,
|
|
@@ -1231,8 +1344,8 @@ var PhoneNumberField = ({
|
|
|
1231
1344
|
] }, option.code))
|
|
1232
1345
|
}
|
|
1233
1346
|
),
|
|
1234
|
-
/* @__PURE__ */ (0,
|
|
1235
|
-
|
|
1347
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1348
|
+
import_material16.TextField,
|
|
1236
1349
|
{
|
|
1237
1350
|
label,
|
|
1238
1351
|
value: localNumber ? formatLocalNumber(localNumber) : "",
|
|
@@ -1265,6 +1378,7 @@ var PhoneNumberField_default = PhoneNumberField;
|
|
|
1265
1378
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1266
1379
|
0 && (module.exports = {
|
|
1267
1380
|
ClearableSelect,
|
|
1381
|
+
EmptyState,
|
|
1268
1382
|
FormDialog,
|
|
1269
1383
|
FormDrawer,
|
|
1270
1384
|
FormPopover,
|
|
@@ -1277,6 +1391,7 @@ var PhoneNumberField_default = PhoneNumberField;
|
|
|
1277
1391
|
PhoneNumberField,
|
|
1278
1392
|
Pill,
|
|
1279
1393
|
SearchableSelect,
|
|
1394
|
+
SkeletonBar,
|
|
1280
1395
|
StatusPill,
|
|
1281
1396
|
TabPanel,
|
|
1282
1397
|
ThemeProvider,
|