@wavelengthusaf/components 1.1.9 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +175 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +175 -21
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -117,6 +117,7 @@ interface SearchProps {
|
|
|
117
117
|
id?: string;
|
|
118
118
|
mode: "automatic" | "manual";
|
|
119
119
|
type?: "text-box" | "search-bar";
|
|
120
|
+
iconPos?: "start" | "end";
|
|
120
121
|
borderRadius?: number | string;
|
|
121
122
|
label?: string;
|
|
122
123
|
width?: string;
|
|
@@ -127,13 +128,14 @@ interface SearchProps {
|
|
|
127
128
|
textColor?: string;
|
|
128
129
|
backgroundColor?: string;
|
|
129
130
|
placeholder?: string;
|
|
131
|
+
onEnter?: (arg0?: any) => any;
|
|
130
132
|
size?: "small" | "medium";
|
|
131
133
|
fontSize?: string;
|
|
132
134
|
options: SearchResult[];
|
|
133
135
|
onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
134
136
|
onSearchItemSelected?: (selectedItem: SearchResult | string) => void;
|
|
135
137
|
}
|
|
136
|
-
declare function WavelengthSearch({ id, mode, type, width, height, label, size, borderRadius, children, placeholder, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, fontSize, backgroundColor, }: SearchProps): React__default.JSX.Element | undefined;
|
|
138
|
+
declare function WavelengthSearch({ id, mode, type, width, height, label, size, borderRadius, children, placeholder, onEnter, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, fontSize, backgroundColor, iconPos, }: SearchProps): React__default.JSX.Element | undefined;
|
|
137
139
|
|
|
138
140
|
declare function SearchTextField(): React__default.JSX.Element;
|
|
139
141
|
|
|
@@ -319,6 +321,6 @@ interface StandardSnackbarProps {
|
|
|
319
321
|
message?: string | ReactNode;
|
|
320
322
|
customVertyAlign?: string;
|
|
321
323
|
}
|
|
322
|
-
declare
|
|
324
|
+
declare const WavelengthStandardSnackbar: (props: StandardSnackbarProps) => React__default.JSX.Element;
|
|
323
325
|
|
|
324
326
|
export { AceOfSpadesComponent, AppLogo, ArrowIcon, BomberBeeIcon, ButtonIcon, ButtonMenu, DefaultIcon, ManyPlanesComponent, NotAvailablePage, Old563EWSLogo, PortalIcon, RapidrefIcon, type SearchResult, SearchTextField, SquadronIcon, SwarmIcon, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBannerHeader, WavelengthBox, WavelengthButton, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFooter, WavelengthIcon, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthSearch, WavelengthSideBar, WavelengthSnackbar, WavelengthStandardSnackbar, WavelengthTitleBar, add, concat, findBestStringMatch, type menuItemProps, useThemeContext };
|
package/dist/index.d.ts
CHANGED
|
@@ -117,6 +117,7 @@ interface SearchProps {
|
|
|
117
117
|
id?: string;
|
|
118
118
|
mode: "automatic" | "manual";
|
|
119
119
|
type?: "text-box" | "search-bar";
|
|
120
|
+
iconPos?: "start" | "end";
|
|
120
121
|
borderRadius?: number | string;
|
|
121
122
|
label?: string;
|
|
122
123
|
width?: string;
|
|
@@ -127,13 +128,14 @@ interface SearchProps {
|
|
|
127
128
|
textColor?: string;
|
|
128
129
|
backgroundColor?: string;
|
|
129
130
|
placeholder?: string;
|
|
131
|
+
onEnter?: (arg0?: any) => any;
|
|
130
132
|
size?: "small" | "medium";
|
|
131
133
|
fontSize?: string;
|
|
132
134
|
options: SearchResult[];
|
|
133
135
|
onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
134
136
|
onSearchItemSelected?: (selectedItem: SearchResult | string) => void;
|
|
135
137
|
}
|
|
136
|
-
declare function WavelengthSearch({ id, mode, type, width, height, label, size, borderRadius, children, placeholder, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, fontSize, backgroundColor, }: SearchProps): React__default.JSX.Element | undefined;
|
|
138
|
+
declare function WavelengthSearch({ id, mode, type, width, height, label, size, borderRadius, children, placeholder, onEnter, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, fontSize, backgroundColor, iconPos, }: SearchProps): React__default.JSX.Element | undefined;
|
|
137
139
|
|
|
138
140
|
declare function SearchTextField(): React__default.JSX.Element;
|
|
139
141
|
|
|
@@ -319,6 +321,6 @@ interface StandardSnackbarProps {
|
|
|
319
321
|
message?: string | ReactNode;
|
|
320
322
|
customVertyAlign?: string;
|
|
321
323
|
}
|
|
322
|
-
declare
|
|
324
|
+
declare const WavelengthStandardSnackbar: (props: StandardSnackbarProps) => React__default.JSX.Element;
|
|
323
325
|
|
|
324
326
|
export { AceOfSpadesComponent, AppLogo, ArrowIcon, BomberBeeIcon, ButtonIcon, ButtonMenu, DefaultIcon, ManyPlanesComponent, NotAvailablePage, Old563EWSLogo, PortalIcon, RapidrefIcon, type SearchResult, SearchTextField, SquadronIcon, SwarmIcon, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBannerHeader, WavelengthBox, WavelengthButton, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFooter, WavelengthIcon, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthSearch, WavelengthSideBar, WavelengthSnackbar, WavelengthStandardSnackbar, WavelengthTitleBar, add, concat, findBestStringMatch, type menuItemProps, useThemeContext };
|
package/dist/index.js
CHANGED
|
@@ -3450,7 +3450,7 @@ var CustomPopper = (props) => {
|
|
|
3450
3450
|
name: "preventOverflow",
|
|
3451
3451
|
enabled: true,
|
|
3452
3452
|
options: {
|
|
3453
|
-
altAxis:
|
|
3453
|
+
altAxis: false,
|
|
3454
3454
|
altBoundary: true,
|
|
3455
3455
|
tether: true,
|
|
3456
3456
|
rootBoundary: "document",
|
|
@@ -3472,6 +3472,7 @@ function WavelengthSearch({
|
|
|
3472
3472
|
borderRadius: borderRadius2,
|
|
3473
3473
|
children,
|
|
3474
3474
|
placeholder,
|
|
3475
|
+
onEnter,
|
|
3475
3476
|
onSearchItemSelected,
|
|
3476
3477
|
options,
|
|
3477
3478
|
onChange,
|
|
@@ -3479,16 +3480,14 @@ function WavelengthSearch({
|
|
|
3479
3480
|
hoverColor,
|
|
3480
3481
|
textColor,
|
|
3481
3482
|
fontSize,
|
|
3482
|
-
backgroundColor: backgroundColor2
|
|
3483
|
+
backgroundColor: backgroundColor2,
|
|
3484
|
+
iconPos = "end"
|
|
3483
3485
|
}) {
|
|
3484
3486
|
const palette2 = getPalette();
|
|
3485
3487
|
borderColor2 = borderColor2 ? borderColor2 : "#2D3140";
|
|
3486
3488
|
hoverColor = hoverColor ? hoverColor : palette2.primary;
|
|
3487
|
-
const onChangeHandler = () => {
|
|
3488
|
-
onChange;
|
|
3489
|
-
};
|
|
3490
3489
|
if (type == "search-bar" || type == void 0) {
|
|
3491
|
-
if (mode == "automatic") {
|
|
3490
|
+
if (mode == "automatic" && iconPos == "end") {
|
|
3492
3491
|
return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
|
|
3493
3492
|
import_material5.Autocomplete,
|
|
3494
3493
|
{
|
|
@@ -3497,7 +3496,6 @@ function WavelengthSearch({
|
|
|
3497
3496
|
disableListWrap: true,
|
|
3498
3497
|
freeSolo: true,
|
|
3499
3498
|
onChange: (e, value) => {
|
|
3500
|
-
console.log(" AutoComplete value ", value);
|
|
3501
3499
|
if (value != null) {
|
|
3502
3500
|
if (typeof value != "string") {
|
|
3503
3501
|
if (onSearchItemSelected) onSearchItemSelected(value);
|
|
@@ -3556,18 +3554,84 @@ function WavelengthSearch({
|
|
|
3556
3554
|
PopperComponent: CustomPopper
|
|
3557
3555
|
}
|
|
3558
3556
|
));
|
|
3559
|
-
} else if (mode == "
|
|
3557
|
+
} else if (mode == "automatic" && iconPos == "start") {
|
|
3560
3558
|
return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
|
|
3561
3559
|
import_material5.Autocomplete,
|
|
3562
3560
|
{
|
|
3563
3561
|
filterOptions: (x) => x,
|
|
3564
3562
|
loading: true,
|
|
3563
|
+
disableListWrap: true,
|
|
3565
3564
|
freeSolo: true,
|
|
3566
3565
|
onChange: (e, value) => {
|
|
3567
3566
|
if (value != null) {
|
|
3568
|
-
if (typeof value
|
|
3569
|
-
|
|
3570
|
-
}
|
|
3567
|
+
if (typeof value != "string") {
|
|
3568
|
+
if (onSearchItemSelected) onSearchItemSelected(value);
|
|
3569
|
+
}
|
|
3570
|
+
}
|
|
3571
|
+
},
|
|
3572
|
+
disableCloseOnSelect: false,
|
|
3573
|
+
getOptionLabel: (options2) => {
|
|
3574
|
+
const returnVal = typeof options2 === "string" ? options2 : options2.title;
|
|
3575
|
+
return returnVal;
|
|
3576
|
+
},
|
|
3577
|
+
options,
|
|
3578
|
+
sx: { width: width2 },
|
|
3579
|
+
renderOption: (props, results) => (
|
|
3580
|
+
// @ts-expect-error boneless chicken
|
|
3581
|
+
/* @__PURE__ */ import_react12.default.createElement(import_ListItem.default, __spreadValues({ key: results.id }, props), /* @__PURE__ */ import_react12.default.createElement(import_material5.ListItemText, { primary: results.title, secondary: results.subtitle }))
|
|
3582
|
+
),
|
|
3583
|
+
renderInput: (params) => /* @__PURE__ */ import_react12.default.createElement(
|
|
3584
|
+
import_TextField.default,
|
|
3585
|
+
__spreadProps(__spreadValues({
|
|
3586
|
+
placeholder
|
|
3587
|
+
}, params), {
|
|
3588
|
+
id,
|
|
3589
|
+
size,
|
|
3590
|
+
InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
|
|
3591
|
+
style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
|
|
3592
|
+
type: "search",
|
|
3593
|
+
startAdornment: /* @__PURE__ */ import_react12.default.createElement(import_InputAdornment.default, { position: "start" }, /* @__PURE__ */ import_react12.default.createElement(import_IconButton.default, { sx: { color: textColor, paddingRight: "0px" } }, children))
|
|
3594
|
+
}),
|
|
3595
|
+
sx: {
|
|
3596
|
+
"& .MuiInputBase-root": {
|
|
3597
|
+
height: height2
|
|
3598
|
+
},
|
|
3599
|
+
"&.MuiTextField-root": {
|
|
3600
|
+
"& label": { color: `${textColor}` },
|
|
3601
|
+
"& label.Mui-focused": {
|
|
3602
|
+
color: `${hoverColor}`
|
|
3603
|
+
},
|
|
3604
|
+
"& .MuiOutlinedInput-root": {
|
|
3605
|
+
"& fieldset": {
|
|
3606
|
+
borderColor: `${borderColor2}`
|
|
3607
|
+
},
|
|
3608
|
+
"&:hover fieldset": {
|
|
3609
|
+
borderColor: `${hoverColor}`
|
|
3610
|
+
},
|
|
3611
|
+
"&.Mui-focused fieldset": {
|
|
3612
|
+
borderColor: `${hoverColor}`
|
|
3613
|
+
}
|
|
3614
|
+
}
|
|
3615
|
+
}
|
|
3616
|
+
},
|
|
3617
|
+
label,
|
|
3618
|
+
onChange
|
|
3619
|
+
})
|
|
3620
|
+
),
|
|
3621
|
+
PopperComponent: CustomPopper
|
|
3622
|
+
}
|
|
3623
|
+
));
|
|
3624
|
+
} else if (mode == "manual" && iconPos == "end") {
|
|
3625
|
+
const textRef = (0, import_react13.useRef)();
|
|
3626
|
+
return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
|
|
3627
|
+
import_material5.Autocomplete,
|
|
3628
|
+
{
|
|
3629
|
+
filterOptions: (x) => x,
|
|
3630
|
+
loading: true,
|
|
3631
|
+
freeSolo: true,
|
|
3632
|
+
onChange: (e, value) => {
|
|
3633
|
+
if (value != null) {
|
|
3634
|
+
if (typeof value !== "string") {
|
|
3571
3635
|
if (onSearchItemSelected) onSearchItemSelected(value);
|
|
3572
3636
|
}
|
|
3573
3637
|
}
|
|
@@ -3586,12 +3650,13 @@ function WavelengthSearch({
|
|
|
3586
3650
|
renderInput: (params) => /* @__PURE__ */ import_react12.default.createElement(
|
|
3587
3651
|
import_TextField.default,
|
|
3588
3652
|
__spreadProps(__spreadValues({
|
|
3653
|
+
inputRef: textRef,
|
|
3589
3654
|
placeholder,
|
|
3590
3655
|
onKeyDown: (e) => {
|
|
3591
3656
|
if (e.key == "Enter") {
|
|
3592
|
-
()
|
|
3593
|
-
|
|
3594
|
-
}
|
|
3657
|
+
if (textRef.current && onEnter) {
|
|
3658
|
+
onEnter(textRef.current.value);
|
|
3659
|
+
}
|
|
3595
3660
|
}
|
|
3596
3661
|
}
|
|
3597
3662
|
}, params), {
|
|
@@ -3605,7 +3670,93 @@ function WavelengthSearch({
|
|
|
3605
3670
|
{
|
|
3606
3671
|
sx: { color: textColor },
|
|
3607
3672
|
onClick: () => {
|
|
3608
|
-
|
|
3673
|
+
if (textRef.current && onEnter) {
|
|
3674
|
+
onEnter(textRef.current.value);
|
|
3675
|
+
}
|
|
3676
|
+
}
|
|
3677
|
+
},
|
|
3678
|
+
children
|
|
3679
|
+
))
|
|
3680
|
+
}),
|
|
3681
|
+
sx: {
|
|
3682
|
+
"& .MuiInputBase-root": {
|
|
3683
|
+
height: height2
|
|
3684
|
+
},
|
|
3685
|
+
"&.MuiTextField-root": {
|
|
3686
|
+
"& label": { color: `${textColor}`, verticalAlign: "bottom" },
|
|
3687
|
+
"& label.Mui-focused": {
|
|
3688
|
+
color: `${hoverColor}`
|
|
3689
|
+
},
|
|
3690
|
+
"& .MuiOutlinedInput-root": {
|
|
3691
|
+
"& fieldset": {
|
|
3692
|
+
borderColor: `${borderColor2}`
|
|
3693
|
+
},
|
|
3694
|
+
"&:hover fieldset": {
|
|
3695
|
+
borderColor: `${hoverColor}`
|
|
3696
|
+
},
|
|
3697
|
+
"&.Mui-focused fieldset": {
|
|
3698
|
+
borderColor: `${hoverColor}`
|
|
3699
|
+
}
|
|
3700
|
+
}
|
|
3701
|
+
}
|
|
3702
|
+
},
|
|
3703
|
+
label
|
|
3704
|
+
})
|
|
3705
|
+
)
|
|
3706
|
+
}
|
|
3707
|
+
));
|
|
3708
|
+
} else if (mode == "manual" && iconPos == "start") {
|
|
3709
|
+
const textRef = (0, import_react13.useRef)();
|
|
3710
|
+
return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
|
|
3711
|
+
import_material5.Autocomplete,
|
|
3712
|
+
{
|
|
3713
|
+
filterOptions: (x) => x,
|
|
3714
|
+
loading: true,
|
|
3715
|
+
freeSolo: true,
|
|
3716
|
+
onChange: (e, value) => {
|
|
3717
|
+
if (value != null) {
|
|
3718
|
+
if (typeof value !== "string") {
|
|
3719
|
+
if (onSearchItemSelected) onSearchItemSelected(value);
|
|
3720
|
+
}
|
|
3721
|
+
}
|
|
3722
|
+
},
|
|
3723
|
+
disableCloseOnSelect: false,
|
|
3724
|
+
getOptionLabel: (options2) => {
|
|
3725
|
+
const returnVal = typeof options2 === "string" ? options2 : options2.title;
|
|
3726
|
+
return returnVal;
|
|
3727
|
+
},
|
|
3728
|
+
options,
|
|
3729
|
+
sx: { width: width2 },
|
|
3730
|
+
renderOption: (props, options2) => (
|
|
3731
|
+
// @ts-expect-error boneless chicken
|
|
3732
|
+
/* @__PURE__ */ import_react12.default.createElement(import_ListItem.default, __spreadValues({ key: options2.id }, props), /* @__PURE__ */ import_react12.default.createElement(import_material5.ListItemText, { primary: options2.title, secondary: options2.subtitle }))
|
|
3733
|
+
),
|
|
3734
|
+
renderInput: (params) => /* @__PURE__ */ import_react12.default.createElement(
|
|
3735
|
+
import_TextField.default,
|
|
3736
|
+
__spreadProps(__spreadValues({
|
|
3737
|
+
inputRef: textRef,
|
|
3738
|
+
placeholder,
|
|
3739
|
+
onKeyDown: (e) => {
|
|
3740
|
+
if (e.key == "Enter") {
|
|
3741
|
+
if (textRef.current && onEnter) {
|
|
3742
|
+
onEnter(textRef.current.value);
|
|
3743
|
+
}
|
|
3744
|
+
}
|
|
3745
|
+
}
|
|
3746
|
+
}, params), {
|
|
3747
|
+
id,
|
|
3748
|
+
size,
|
|
3749
|
+
InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
|
|
3750
|
+
style: { borderRadius: borderRadius2, color: textColor, fontSize },
|
|
3751
|
+
type: "search",
|
|
3752
|
+
startAdornment: /* @__PURE__ */ import_react12.default.createElement(import_InputAdornment.default, { position: "start" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
3753
|
+
import_IconButton.default,
|
|
3754
|
+
{
|
|
3755
|
+
sx: { color: textColor, paddingRight: "0px" },
|
|
3756
|
+
onClick: () => {
|
|
3757
|
+
if (textRef.current && onEnter) {
|
|
3758
|
+
onEnter(textRef.current.value);
|
|
3759
|
+
}
|
|
3609
3760
|
}
|
|
3610
3761
|
},
|
|
3611
3762
|
children
|
|
@@ -3723,8 +3874,8 @@ function WavelengthSearch({
|
|
|
3723
3874
|
}
|
|
3724
3875
|
},
|
|
3725
3876
|
disableCloseOnSelect: false,
|
|
3726
|
-
getOptionLabel: (
|
|
3727
|
-
const returnVal = typeof
|
|
3877
|
+
getOptionLabel: (options2) => {
|
|
3878
|
+
const returnVal = typeof options2 === "string" ? options2 : options2.title;
|
|
3728
3879
|
return returnVal;
|
|
3729
3880
|
},
|
|
3730
3881
|
options,
|
|
@@ -3740,7 +3891,9 @@ function WavelengthSearch({
|
|
|
3740
3891
|
inputRef: textRef,
|
|
3741
3892
|
onKeyDown: (e) => {
|
|
3742
3893
|
if (e.key == "Enter") {
|
|
3743
|
-
|
|
3894
|
+
if (textRef.current && onEnter) {
|
|
3895
|
+
onEnter(textRef.current.value);
|
|
3896
|
+
}
|
|
3744
3897
|
}
|
|
3745
3898
|
}
|
|
3746
3899
|
}, params), {
|
|
@@ -4883,8 +5036,9 @@ var import_Snackbar = __toESM(require("@mui/material/Snackbar"));
|
|
|
4883
5036
|
var import_IconButton2 = __toESM(require("@mui/material/IconButton"));
|
|
4884
5037
|
var import_Close3 = __toESM(require("@mui/icons-material/Close"));
|
|
4885
5038
|
var import_SnackbarContent = __toESM(require("@mui/material/SnackbarContent"));
|
|
4886
|
-
|
|
4887
|
-
|
|
5039
|
+
var WavelengthStandardSnackbar = (props) => {
|
|
5040
|
+
let show = props.show;
|
|
5041
|
+
const setShow = props.setShow;
|
|
4888
5042
|
const handleClose = () => {
|
|
4889
5043
|
setShow(false);
|
|
4890
5044
|
};
|
|
@@ -4934,7 +5088,7 @@ function WavelengthStandardSnackbar(props) {
|
|
|
4934
5088
|
}
|
|
4935
5089
|
)
|
|
4936
5090
|
);
|
|
4937
|
-
}
|
|
5091
|
+
};
|
|
4938
5092
|
// Annotate the CommonJS export names for ESM import in node:
|
|
4939
5093
|
0 && (module.exports = {
|
|
4940
5094
|
AceOfSpadesComponent,
|