@wavelengthusaf/components 1.1.8 → 1.1.9

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 CHANGED
@@ -116,6 +116,7 @@ interface SearchResult {
116
116
  interface SearchProps {
117
117
  id?: string;
118
118
  mode: "automatic" | "manual";
119
+ type?: "text-box" | "search-bar";
119
120
  borderRadius?: number | string;
120
121
  label?: string;
121
122
  width?: string;
@@ -130,10 +131,9 @@ interface SearchProps {
130
131
  fontSize?: string;
131
132
  options: SearchResult[];
132
133
  onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
133
- searchFunction: (value: string) => SearchResult[];
134
- onSearchItemSelected: (selectedItem: SearchResult | string) => void;
134
+ onSearchItemSelected?: (selectedItem: SearchResult | string) => void;
135
135
  }
136
- declare function WavelengthSearch({ id, mode, width, height, label, size, borderRadius, children, placeholder, searchFunction, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, fontSize, backgroundColor, }: SearchProps): React__default.JSX.Element | undefined;
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;
137
137
 
138
138
  declare function SearchTextField(): React__default.JSX.Element;
139
139
 
package/dist/index.d.ts CHANGED
@@ -116,6 +116,7 @@ interface SearchResult {
116
116
  interface SearchProps {
117
117
  id?: string;
118
118
  mode: "automatic" | "manual";
119
+ type?: "text-box" | "search-bar";
119
120
  borderRadius?: number | string;
120
121
  label?: string;
121
122
  width?: string;
@@ -130,10 +131,9 @@ interface SearchProps {
130
131
  fontSize?: string;
131
132
  options: SearchResult[];
132
133
  onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
133
- searchFunction: (value: string) => SearchResult[];
134
- onSearchItemSelected: (selectedItem: SearchResult | string) => void;
134
+ onSearchItemSelected?: (selectedItem: SearchResult | string) => void;
135
135
  }
136
- declare function WavelengthSearch({ id, mode, width, height, label, size, borderRadius, children, placeholder, searchFunction, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, fontSize, backgroundColor, }: SearchProps): React__default.JSX.Element | undefined;
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;
137
137
 
138
138
  declare function SearchTextField(): React__default.JSX.Element;
139
139
 
package/dist/index.js CHANGED
@@ -3464,6 +3464,7 @@ var CustomPopper = (props) => {
3464
3464
  function WavelengthSearch({
3465
3465
  id,
3466
3466
  mode,
3467
+ type,
3467
3468
  width: width2,
3468
3469
  height: height2,
3469
3470
  label,
@@ -3471,7 +3472,6 @@ function WavelengthSearch({
3471
3472
  borderRadius: borderRadius2,
3472
3473
  children,
3473
3474
  placeholder,
3474
- searchFunction,
3475
3475
  onSearchItemSelected,
3476
3476
  options,
3477
3477
  onChange,
@@ -3482,165 +3482,302 @@ function WavelengthSearch({
3482
3482
  backgroundColor: backgroundColor2
3483
3483
  }) {
3484
3484
  const palette2 = getPalette();
3485
- const template = [];
3486
3485
  borderColor2 = borderColor2 ? borderColor2 : "#2D3140";
3487
3486
  hoverColor = hoverColor ? hoverColor : palette2.primary;
3488
- const [results, setResults] = (0, import_react12.useState)(template);
3489
- if (mode == "automatic") {
3490
- return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
3491
- import_material5.Autocomplete,
3492
- {
3493
- filterOptions: (x) => x,
3494
- loading: true,
3495
- disableListWrap: true,
3496
- freeSolo: true,
3497
- onChange: (e, value) => {
3498
- console.log(" AutoComplete value ", value);
3499
- if (value != null) {
3500
- if (typeof value == "string") {
3501
- console.log("String Input, No Selection");
3502
- } else {
3503
- onSearchItemSelected(value);
3487
+ const onChangeHandler = () => {
3488
+ onChange;
3489
+ };
3490
+ if (type == "search-bar" || type == void 0) {
3491
+ if (mode == "automatic") {
3492
+ return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
3493
+ import_material5.Autocomplete,
3494
+ {
3495
+ filterOptions: (x) => x,
3496
+ loading: true,
3497
+ disableListWrap: true,
3498
+ freeSolo: true,
3499
+ onChange: (e, value) => {
3500
+ console.log(" AutoComplete value ", value);
3501
+ if (value != null) {
3502
+ if (typeof value != "string") {
3503
+ if (onSearchItemSelected) onSearchItemSelected(value);
3504
+ }
3504
3505
  }
3505
- }
3506
- },
3507
- disableCloseOnSelect: false,
3508
- getOptionLabel: (options2) => {
3509
- const returnVal = typeof options2 === "string" ? options2 : options2.title;
3510
- return returnVal;
3511
- },
3512
- options,
3513
- sx: { width: width2 },
3514
- renderOption: (props, results2) => (
3515
- // @ts-expect-error boneless chicken
3516
- /* @__PURE__ */ import_react12.default.createElement(import_ListItem.default, __spreadValues({ key: results2.id }, props), /* @__PURE__ */ import_react12.default.createElement(import_material5.ListItemText, { primary: results2.title, secondary: results2.subtitle }))
3517
- ),
3518
- renderInput: (params) => /* @__PURE__ */ import_react12.default.createElement(
3519
- import_TextField.default,
3520
- __spreadProps(__spreadValues({
3521
- placeholder
3522
- }, params), {
3523
- id,
3524
- size,
3525
- InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
3526
- style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
3527
- type: "search",
3528
- endAdornment: /* @__PURE__ */ import_react12.default.createElement(import_InputAdornment.default, { position: "end" }, /* @__PURE__ */ import_react12.default.createElement(import_IconButton.default, { sx: { color: textColor } }, children))
3529
- }),
3530
- sx: {
3531
- "&.MuiTextField-root": {
3532
- "& label": { color: `${textColor}` },
3533
- "& label.Mui-focused": {
3534
- color: `${hoverColor}`
3506
+ },
3507
+ disableCloseOnSelect: false,
3508
+ getOptionLabel: (options2) => {
3509
+ const returnVal = typeof options2 === "string" ? options2 : options2.title;
3510
+ return returnVal;
3511
+ },
3512
+ options,
3513
+ sx: { width: width2 },
3514
+ renderOption: (props, results) => (
3515
+ // @ts-expect-error boneless chicken
3516
+ /* @__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 }))
3517
+ ),
3518
+ renderInput: (params) => /* @__PURE__ */ import_react12.default.createElement(
3519
+ import_TextField.default,
3520
+ __spreadProps(__spreadValues({
3521
+ placeholder
3522
+ }, params), {
3523
+ id,
3524
+ size,
3525
+ InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
3526
+ style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
3527
+ type: "search",
3528
+ endAdornment: /* @__PURE__ */ import_react12.default.createElement(import_InputAdornment.default, { position: "end" }, /* @__PURE__ */ import_react12.default.createElement(import_IconButton.default, { sx: { color: textColor } }, children))
3529
+ }),
3530
+ sx: {
3531
+ "& .MuiInputBase-root": {
3532
+ height: height2
3535
3533
  },
3536
- "& .MuiOutlinedInput-root": {
3537
- "& fieldset": {
3538
- borderColor: `${borderColor2}`
3534
+ "&.MuiTextField-root": {
3535
+ "& label": { color: `${textColor}` },
3536
+ "& label.Mui-focused": {
3537
+ color: `${hoverColor}`
3539
3538
  },
3540
- "&:hover fieldset": {
3541
- borderColor: `${hoverColor}`
3542
- },
3543
- "&.Mui-focused fieldset": {
3544
- borderColor: `${hoverColor}`
3539
+ "& .MuiOutlinedInput-root": {
3540
+ "& fieldset": {
3541
+ borderColor: `${borderColor2}`
3542
+ },
3543
+ "&:hover fieldset": {
3544
+ borderColor: `${hoverColor}`
3545
+ },
3546
+ "&.Mui-focused fieldset": {
3547
+ borderColor: `${hoverColor}`
3548
+ }
3545
3549
  }
3546
3550
  }
3551
+ },
3552
+ label,
3553
+ onChange
3554
+ })
3555
+ ),
3556
+ PopperComponent: CustomPopper
3557
+ }
3558
+ ));
3559
+ } else if (mode == "manual") {
3560
+ return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
3561
+ import_material5.Autocomplete,
3562
+ {
3563
+ filterOptions: (x) => x,
3564
+ loading: true,
3565
+ freeSolo: true,
3566
+ onChange: (e, value) => {
3567
+ if (value != null) {
3568
+ if (typeof value == "string") {
3569
+ console.log("String Input, No Selection");
3570
+ } else {
3571
+ if (onSearchItemSelected) onSearchItemSelected(value);
3547
3572
  }
3548
- },
3549
- label,
3550
- onChange
3551
- })
3552
- ),
3553
- PopperComponent: CustomPopper
3554
- }
3555
- ));
3556
- } else if (mode == "manual") {
3557
- const textRef = (0, import_react13.useRef)();
3558
- return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
3559
- import_material5.Autocomplete,
3560
- {
3561
- filterOptions: (x) => x,
3562
- loading: true,
3563
- freeSolo: true,
3564
- onChange: (e, value) => {
3565
- if (value != null) {
3566
- if (typeof value == "string") {
3567
- console.log("String Input, No Selection");
3568
- } else {
3569
- onSearchItemSelected(value);
3570
3573
  }
3571
- }
3572
- },
3573
- disableCloseOnSelect: false,
3574
- getOptionLabel: (results2) => {
3575
- const returnVal = typeof results2 === "string" ? results2 : results2.title;
3576
- return returnVal;
3577
- },
3578
- options: results,
3579
- sx: { width: width2 },
3580
- renderOption: (props, results2) => (
3581
- // @ts-expect-error boneless chicken
3582
- /* @__PURE__ */ import_react12.default.createElement(import_ListItem.default, __spreadValues({ key: results2.id }, props), /* @__PURE__ */ import_react12.default.createElement(import_material5.ListItemText, { primary: results2.title, secondary: results2.subtitle }))
3583
- ),
3584
- renderInput: (params) => /* @__PURE__ */ import_react12.default.createElement(
3585
- import_TextField.default,
3586
- __spreadProps(__spreadValues({
3587
- placeholder,
3588
- inputRef: textRef,
3589
- onKeyDown: (e) => {
3590
- var _a;
3591
- if (e.key == "Enter") {
3592
- if (textRef.current) {
3593
- const tempResults = searchFunction((_a = textRef.current) == null ? void 0 : _a.value);
3594
- setResults(tempResults);
3595
- console.log(results);
3574
+ },
3575
+ disableCloseOnSelect: false,
3576
+ getOptionLabel: (options2) => {
3577
+ const returnVal = typeof options2 === "string" ? options2 : options2.title;
3578
+ return returnVal;
3579
+ },
3580
+ options,
3581
+ sx: { width: width2 },
3582
+ renderOption: (props, options2) => (
3583
+ // @ts-expect-error boneless chicken
3584
+ /* @__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 }))
3585
+ ),
3586
+ renderInput: (params) => /* @__PURE__ */ import_react12.default.createElement(
3587
+ import_TextField.default,
3588
+ __spreadProps(__spreadValues({
3589
+ placeholder,
3590
+ onKeyDown: (e) => {
3591
+ if (e.key == "Enter") {
3592
+ () => {
3593
+ onChangeHandler;
3594
+ };
3596
3595
  }
3597
3596
  }
3598
- }
3599
- }, params), {
3600
- id,
3601
- size,
3602
- InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
3603
- style: { borderRadius: borderRadius2, height: height2, color: textColor, fontSize },
3604
- type: "search",
3605
- endAdornment: /* @__PURE__ */ import_react12.default.createElement(import_InputAdornment.default, { position: "end" }, /* @__PURE__ */ import_react12.default.createElement(
3606
- import_IconButton.default,
3607
- {
3608
- sx: { color: textColor },
3609
- onClick: () => {
3610
- var _a;
3611
- if (textRef.current) {
3612
- const tempResults = searchFunction((_a = textRef.current) == null ? void 0 : _a.value);
3613
- setResults(tempResults);
3597
+ }, params), {
3598
+ id,
3599
+ size,
3600
+ InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
3601
+ style: { borderRadius: borderRadius2, color: textColor, fontSize },
3602
+ type: "search",
3603
+ endAdornment: /* @__PURE__ */ import_react12.default.createElement(import_InputAdornment.default, { position: "end" }, /* @__PURE__ */ import_react12.default.createElement(
3604
+ import_IconButton.default,
3605
+ {
3606
+ sx: { color: textColor },
3607
+ onClick: () => {
3608
+ onChange;
3614
3609
  }
3615
- }
3616
- },
3617
- children
3618
- ))
3619
- }),
3620
- sx: {
3621
- "&.MuiTextField-root": {
3622
- "& label": { color: `${textColor}` },
3623
- "& label.Mui-focused": {
3624
- color: `${hoverColor}`
3610
+ },
3611
+ children
3612
+ ))
3613
+ }),
3614
+ sx: {
3615
+ "& .MuiInputBase-root": {
3616
+ height: height2
3625
3617
  },
3626
- "& .MuiOutlinedInput-root": {
3627
- "& fieldset": {
3628
- borderColor: `${borderColor2}`
3618
+ "&.MuiTextField-root": {
3619
+ "& label": { color: `${textColor}`, verticalAlign: "bottom" },
3620
+ "& label.Mui-focused": {
3621
+ color: `${hoverColor}`
3629
3622
  },
3630
- "&:hover fieldset": {
3631
- borderColor: `${hoverColor}`
3623
+ "& .MuiOutlinedInput-root": {
3624
+ "& fieldset": {
3625
+ borderColor: `${borderColor2}`
3626
+ },
3627
+ "&:hover fieldset": {
3628
+ borderColor: `${hoverColor}`
3629
+ },
3630
+ "&.Mui-focused fieldset": {
3631
+ borderColor: `${hoverColor}`
3632
+ }
3633
+ }
3634
+ }
3635
+ },
3636
+ label
3637
+ })
3638
+ )
3639
+ }
3640
+ ));
3641
+ }
3642
+ } else if (type == "text-box") {
3643
+ if (mode == "automatic") {
3644
+ return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
3645
+ import_material5.Autocomplete,
3646
+ {
3647
+ filterOptions: (x) => x,
3648
+ loading: true,
3649
+ disableListWrap: true,
3650
+ freeSolo: true,
3651
+ disableClearable: true,
3652
+ onChange: (e, value) => {
3653
+ if (value != null) {
3654
+ if (typeof value != "string") {
3655
+ if (onSearchItemSelected) onSearchItemSelected(value);
3656
+ }
3657
+ }
3658
+ },
3659
+ disableCloseOnSelect: false,
3660
+ getOptionLabel: (options2) => {
3661
+ const returnVal = typeof options2 === "string" ? options2 : options2.title;
3662
+ return returnVal;
3663
+ },
3664
+ options,
3665
+ sx: { width: width2 },
3666
+ renderOption: (props, results) => (
3667
+ // @ts-expect-error boneless chicken
3668
+ /* @__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 }))
3669
+ ),
3670
+ renderInput: (params) => /* @__PURE__ */ import_react12.default.createElement(
3671
+ import_TextField.default,
3672
+ __spreadProps(__spreadValues({
3673
+ placeholder
3674
+ }, params), {
3675
+ id,
3676
+ size,
3677
+ InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
3678
+ style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
3679
+ type: "search"
3680
+ }),
3681
+ sx: {
3682
+ "& .MuiInputBase-root": {
3683
+ height: height2
3684
+ },
3685
+ "&.MuiTextField-root": {
3686
+ "& label": { color: `${textColor}` },
3687
+ "& label.Mui-focused": {
3688
+ color: `${hoverColor}`
3632
3689
  },
3633
- "&.Mui-focused fieldset": {
3634
- borderColor: `${hoverColor}`
3690
+ "& .MuiOutlinedInput-root": {
3691
+ "& fieldset": {
3692
+ borderColor: `${borderColor2}`
3693
+ },
3694
+ "&:hover fieldset": {
3695
+ borderColor: `${hoverColor}`
3696
+ },
3697
+ "&.Mui-focused fieldset": {
3698
+ borderColor: `${hoverColor}`
3699
+ }
3635
3700
  }
3636
3701
  }
3702
+ },
3703
+ label,
3704
+ onChange
3705
+ })
3706
+ ),
3707
+ PopperComponent: CustomPopper
3708
+ }
3709
+ ));
3710
+ } else if (mode == "manual") {
3711
+ const textRef = (0, import_react13.useRef)();
3712
+ return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
3713
+ import_material5.Autocomplete,
3714
+ {
3715
+ filterOptions: (x) => x,
3716
+ loading: true,
3717
+ freeSolo: true,
3718
+ onChange: (e, value) => {
3719
+ if (value != null) {
3720
+ if (typeof value != "string") {
3721
+ if (onSearchItemSelected) onSearchItemSelected(value);
3637
3722
  }
3638
- },
3639
- label
3640
- })
3641
- )
3642
- }
3643
- ));
3723
+ }
3724
+ },
3725
+ disableCloseOnSelect: false,
3726
+ getOptionLabel: (results) => {
3727
+ const returnVal = typeof results === "string" ? results : results.title;
3728
+ return returnVal;
3729
+ },
3730
+ options,
3731
+ sx: { width: width2 },
3732
+ renderOption: (props, options2) => (
3733
+ // @ts-expect-error boneless chicken
3734
+ /* @__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 }))
3735
+ ),
3736
+ renderInput: (params) => /* @__PURE__ */ import_react12.default.createElement(
3737
+ import_TextField.default,
3738
+ __spreadProps(__spreadValues({
3739
+ placeholder,
3740
+ inputRef: textRef,
3741
+ onKeyDown: (e) => {
3742
+ if (e.key == "Enter") {
3743
+ onChange;
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
+ }),
3753
+ sx: {
3754
+ "& .MuiInputBase-root": {
3755
+ height: height2
3756
+ },
3757
+ "&.MuiTextField-root": {
3758
+ "& label": { color: `${textColor}`, verticalAlign: "bottom" },
3759
+ "& label.Mui-focused": {
3760
+ color: `${hoverColor}`
3761
+ },
3762
+ "& .MuiOutlinedInput-root": {
3763
+ "& fieldset": {
3764
+ borderColor: `${borderColor2}`
3765
+ },
3766
+ "&:hover fieldset": {
3767
+ borderColor: `${hoverColor}`
3768
+ },
3769
+ "&.Mui-focused fieldset": {
3770
+ borderColor: `${hoverColor}`
3771
+ }
3772
+ }
3773
+ }
3774
+ },
3775
+ label
3776
+ })
3777
+ )
3778
+ }
3779
+ ));
3780
+ }
3644
3781
  }
3645
3782
  return void 0;
3646
3783
  }