@wavelengthusaf/components 1.1.8 → 1.2.0

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