@secondstaxorg/sscomp 1.5.96 → 1.6.2

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 (8) hide show
  1. package/dist/index.es.js +47 -27
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +92 -53
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.js +25 -5
  6. package/dist/index.min.js.map +1 -1
  7. package/package.json +1 -1
  8. package/types/components/SearchBar/type.d.ts +1 -1
package/dist/index.js CHANGED
@@ -16581,19 +16581,25 @@ const CountrySelector = (props) => {
16581
16581
  setOptionsRec(options);
16582
16582
  },[options]);
16583
16583
 
16584
+ React$1.useEffect(()=>{
16585
+ if (passedOption.optionShortName){
16586
+ if (options.filter((options)=>options.optionShortName.toLowerCase().includes(passedOption.optionShortName.toLowerCase())).length === 0) setPassedOption({});
16587
+ }
16588
+ },[options]);
16589
+
16584
16590
  function filterList(qry){
16585
16591
  setQryStr(qry);
16586
16592
  setOptionsRec(optionsOri.filter((option)=>option.optionName.toLowerCase().includes(qry.toLowerCase())));
16587
16593
  }
16588
16594
 
16589
16595
  return (
16590
- React$1.createElement(DropdownContainer, {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 54}}
16596
+ React$1.createElement(DropdownContainer, {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 60}}
16591
16597
  , label &&
16592
- React$1.createElement(LabelContainer$1, {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 56}}
16593
- , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 57}}, label)
16598
+ React$1.createElement(LabelContainer$1, {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 62}}
16599
+ , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 63}}, label)
16594
16600
  )
16595
16601
 
16596
- , React$1.createElement(DropdownField$1, { style: {borderColor:passedOption.optionShortName ? theme.colors["success-500"] : theme.colors["neutral-200"]}, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 60}}
16602
+ , React$1.createElement(DropdownField$1, { style: {borderColor:passedOption.optionShortName ? theme.colors["success-500"] : theme.colors["neutral-200"]}, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 66}}
16597
16603
  , React$1.createElement('button', { ref: buttonRef, type: "button", className: "country-selector", onBlur: ()=>{
16598
16604
  if (!searchable){
16599
16605
  setTimeout(()=>{
@@ -16608,24 +16614,24 @@ const CountrySelector = (props) => {
16608
16614
  }else {
16609
16615
  setOpened(true);
16610
16616
  }
16611
- }, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 61}}
16617
+ }, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 67}}
16612
16618
  )
16613
16619
  , searchable && opened &&
16614
16620
  React$1.createElement('input', { type: "text", value: qryStr, onChange: (e)=>{filterList(e.target.value);}, className: "country-selector search-field" , onFocus: ()=>{setOpened(true);}, onBlur: ()=>{
16615
16621
  setTimeout(()=>{
16616
16622
  setOpened(false);
16617
16623
  },200);
16618
- }, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 78}})
16624
+ }, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 84}})
16619
16625
 
16620
- , React$1.createElement('div', { style: {display:'flex',gap:'16px', alignItems:'center', overflowX:'hidden'}, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 84}}
16621
- , React$1.createElement('img', { src: !passedOption.optionFlag ? imgFile : passedOption.optionFlag, alt: "flag", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 85}})
16626
+ , React$1.createElement('div', { style: {display:'flex',gap:'16px', alignItems:'center', overflowX:'hidden'}, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 90}}
16627
+ , React$1.createElement('img', { src: !passedOption.optionFlag ? imgFile : passedOption.optionFlag, alt: "flag", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 91}})
16622
16628
  , passedOption.optionName
16623
16629
  , !passedOption.optionName &&
16624
16630
  React$1.createElement(React$1.Fragment, null
16625
16631
  , initialText
16626
16632
  , !initialText &&
16627
16633
  React$1.createElement(React$1.Fragment, null
16628
- , placeholder && React$1.createElement('span', { className: "placeholder", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 92}}, placeholder)
16634
+ , placeholder && React$1.createElement('span', { className: "placeholder", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 98}}, placeholder)
16629
16635
  )
16630
16636
 
16631
16637
  )
@@ -16636,22 +16642,22 @@ const CountrySelector = (props) => {
16636
16642
  buttonRef.current.focus();
16637
16643
  setOpened(true);
16638
16644
  }
16639
- }, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 98}}
16640
- , React$1.createElement('svg', { width: "12", height: "8", viewBox: "0 0 12 8" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 104}}
16641
- , React$1.createElement('path', { d: "M10.9999 1.17C10.8126 0.983753 10.5591 0.879211 10.2949 0.879211C10.0308 0.879211 9.77731 0.983753 9.58995 1.17L5.99995 4.71L2.45995 1.17C2.27259 0.983753 2.01913 0.879211 1.75495 0.879211C1.49076 0.879211 1.23731 0.983753 1.04995 1.17C0.95622 1.26297 0.881826 1.37357 0.831057 1.49543C0.780288 1.61729 0.75415 1.74799 0.75415 1.88C0.75415 2.01202 0.780288 2.14272 0.831057 2.26458C0.881826 2.38644 0.95622 2.49704 1.04995 2.59L5.28995 6.83C5.38291 6.92373 5.49351 6.99813 5.61537 7.04889C5.73723 7.09966 5.86794 7.1258 5.99995 7.1258C6.13196 7.1258 6.26267 7.09966 6.38453 7.04889C6.50638 6.99813 6.61699 6.92373 6.70995 6.83L10.9999 2.59C11.0937 2.49704 11.1681 2.38644 11.2188 2.26458C11.2696 2.14272 11.2957 2.01202 11.2957 1.88C11.2957 1.74799 11.2696 1.61729 11.2188 1.49543C11.1681 1.37357 11.0937 1.26297 10.9999 1.17Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 105}})
16645
+ }, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 104}}
16646
+ , React$1.createElement('svg', { width: "12", height: "8", viewBox: "0 0 12 8" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 110}}
16647
+ , React$1.createElement('path', { d: "M10.9999 1.17C10.8126 0.983753 10.5591 0.879211 10.2949 0.879211C10.0308 0.879211 9.77731 0.983753 9.58995 1.17L5.99995 4.71L2.45995 1.17C2.27259 0.983753 2.01913 0.879211 1.75495 0.879211C1.49076 0.879211 1.23731 0.983753 1.04995 1.17C0.95622 1.26297 0.881826 1.37357 0.831057 1.49543C0.780288 1.61729 0.75415 1.74799 0.75415 1.88C0.75415 2.01202 0.780288 2.14272 0.831057 2.26458C0.881826 2.38644 0.95622 2.49704 1.04995 2.59L5.28995 6.83C5.38291 6.92373 5.49351 6.99813 5.61537 7.04889C5.73723 7.09966 5.86794 7.1258 5.99995 7.1258C6.13196 7.1258 6.26267 7.09966 6.38453 7.04889C6.50638 6.99813 6.61699 6.92373 6.70995 6.83L10.9999 2.59C11.0937 2.49704 11.1681 2.38644 11.2188 2.26458C11.2696 2.14272 11.2957 2.01202 11.2957 1.88C11.2957 1.74799 11.2696 1.61729 11.2188 1.49543C11.1681 1.37357 11.0937 1.26297 10.9999 1.17Z" , fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 111}})
16642
16648
  )
16643
16649
  )
16644
16650
  , opened &&
16645
16651
  React$1.createElement(React$1.Fragment, null
16646
16652
  , options && options.length > 0 &&
16647
- React$1.createElement(OptionsList$1, {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 111}}
16653
+ React$1.createElement(OptionsList$1, {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 117}}
16648
16654
  , sectionTitle &&
16649
- React$1.createElement('div', { className: "section-title", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 113}}
16655
+ React$1.createElement('div', { className: "section-title", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 119}}
16650
16656
  , sectionTitle
16651
16657
  )
16652
16658
 
16653
16659
  , optionsRec.map((country, index) => (
16654
- React$1.createElement(React$1.Fragment, { key: index, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 118}}
16660
+ React$1.createElement(React$1.Fragment, { key: index, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 124}}
16655
16661
  , !country.subName &&
16656
16662
  React$1.createElement(DropdownOption$1, { onClick: ()=>{
16657
16663
  setPassedOption(country);
@@ -16661,8 +16667,8 @@ const CountrySelector = (props) => {
16661
16667
  setPassedOption(country);
16662
16668
  selectedOption(country);
16663
16669
  },200);
16664
- }, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 120}}
16665
- , country.optionFlag ? React$1.createElement('img', { src: country.optionFlag, alt: "Flag", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 129}}) : React$1.createElement('div', { className: "empty-flag", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 129}})
16670
+ }, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 126}}
16671
+ , country.optionFlag ? React$1.createElement('img', { src: country.optionFlag, alt: "Flag", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 135}}) : React$1.createElement('div', { className: "empty-flag", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 135}})
16666
16672
  , country.optionName
16667
16673
  )
16668
16674
 
@@ -16675,10 +16681,10 @@ const CountrySelector = (props) => {
16675
16681
  setPassedOption(country);
16676
16682
  selectedOption(country);
16677
16683
  },200);
16678
- }, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 134}}
16679
- , React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 143}}, country.optionName)
16680
- , React$1.createElement('div', {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 144}}
16681
- , country.subName, country.optionFlag ? React$1.createElement('img', { src: country.optionFlag, alt: "Flag", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 145}}) : React$1.createElement('div', { className: "empty-flag", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 145}})
16684
+ }, __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 140}}
16685
+ , React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 149}}, country.optionName)
16686
+ , React$1.createElement('div', {__self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 150}}
16687
+ , country.subName, country.optionFlag ? React$1.createElement('img', { src: country.optionFlag, alt: "Flag", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 151}}) : React$1.createElement('div', { className: "empty-flag", __self: undefined, __source: {fileName: _jsxFileName$M, lineNumber: 151}})
16682
16688
  )
16683
16689
  )
16684
16690
 
@@ -20413,6 +20419,13 @@ const SourceDate$1 = styled.div`
20413
20419
  }
20414
20420
  .tag:first-of-type{
20415
20421
  border-right: 2px solid ${theme.colors["neutral-100"]};
20422
+ max-width: 130px;
20423
+ white-space: nowrap;
20424
+ overflow-x: hidden;
20425
+ }
20426
+ .tag .source-text{
20427
+ text-overflow: ellipsis;
20428
+ overflow-x:hidden;
20416
20429
  }
20417
20430
  `;
20418
20431
 
@@ -20430,9 +20443,11 @@ const NewsSourceTag = (props) => {
20430
20443
  , React$1.createElement('span', { style: {marginRight:'8px'}, __self: undefined, __source: {fileName: _jsxFileName$t, lineNumber: 14}}
20431
20444
  , React$1.createElement('img', { src: flag, alt: "Source flag" , __self: undefined, __source: {fileName: _jsxFileName$t, lineNumber: 15}})
20432
20445
  )
20433
- , source
20446
+ , React$1.createElement('span', { className: "source-text", __self: undefined, __source: {fileName: _jsxFileName$t, lineNumber: 17}}
20447
+ , source
20448
+ )
20434
20449
  )
20435
- , React$1.createElement('div', { className: "tag", __self: undefined, __source: {fileName: _jsxFileName$t, lineNumber: 19}}, date)
20450
+ , React$1.createElement('div', { className: "tag", __self: undefined, __source: {fileName: _jsxFileName$t, lineNumber: 21}}, date)
20436
20451
  )
20437
20452
  )
20438
20453
  };
@@ -21474,11 +21489,16 @@ const TextField = (props) => {
21474
21489
  let {label,subtext,errMsg,disabled,required,width,value} = props;
21475
21490
 
21476
21491
  const [borderColor,setBorderColor] = React$1.useState('');
21492
+ const [inputVal,setInputVal] = React$1.useState(value);
21477
21493
  const [err,setErr] = React$1.useState(false);
21478
21494
  const textFieldRef = React$1.useRef();
21479
21495
 
21496
+ React$1.useEffect(()=>{
21497
+ setInputVal(value);
21498
+ },[value]);
21499
+
21480
21500
  function validate(){
21481
- if (value){
21501
+ if (inputVal){
21482
21502
  setBorderColor('success');
21483
21503
  setErr(false);
21484
21504
  }else {
@@ -21497,21 +21517,21 @@ const TextField = (props) => {
21497
21517
  };
21498
21518
 
21499
21519
  return (
21500
- React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 35}}
21520
+ React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 40}}
21501
21521
  , label &&
21502
- React$1.createElement(InputLabel$1, {__self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 37}}
21503
- , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 38}}, label)
21504
- , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 39}}, subtext)
21522
+ React$1.createElement(InputLabel$1, {__self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 42}}
21523
+ , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 43}}, label)
21524
+ , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 44}}, subtext)
21505
21525
  )
21506
21526
 
21507
- , React$1.createElement(InputContainer$1, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 42}}
21508
- , React$1.createElement(InputField, { ref: textFieldRef, onBlur: ()=>{validate();}, ...props, __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 43}})
21527
+ , React$1.createElement(InputContainer$1, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 47}}
21528
+ , React$1.createElement(InputField, { ref: textFieldRef, onBlur: ()=>{validate();}, value: inputVal, onChange: (e)=>{setInputVal(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 48}})
21509
21529
  )
21510
21530
  , !value && required && err &&
21511
- React$1.createElement(ErrorMessage$1, {__self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 46}}
21531
+ React$1.createElement(ErrorMessage$1, {__self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 51}}
21512
21532
  /*exclamation-triangle*/
21513
- , React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 48}}
21514
- , React$1.createElement('path', { d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z" , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 49}})
21533
+ , React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 53}}
21534
+ , React$1.createElement('path', { d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z" , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$l, lineNumber: 54}})
21515
21535
  )
21516
21536
  , errMsg ? errMsg : 'This field is required'
21517
21537
  )
@@ -21667,7 +21687,7 @@ const SearchBarContainer = styled.div`
21667
21687
 
21668
21688
  const SearchBox = styled.input`
21669
21689
  padding: 13px 16px;
21670
- height: 48px;
21690
+ //height: 48px;
21671
21691
  width: 100%;
21672
21692
  background: ${theme.colors.white};
21673
21693
  border-radius: 8px;
@@ -21683,13 +21703,26 @@ const SearchBox = styled.input`
21683
21703
 
21684
21704
  const SearchButton = styled.button`
21685
21705
  width: 60px;
21686
- height: 48px;
21706
+ //height: 48px;
21687
21707
  background: ${theme.colors["primary-500"]};
21688
21708
  color: ${theme.colors.white};
21689
21709
  padding: 12px 18px;
21690
21710
  border-radius: 8px;
21691
21711
  border: none;
21692
21712
  cursor: pointer;
21713
+ &:hover{
21714
+ background: ${theme.colors["primary-400"]};
21715
+ }
21716
+ &:active{
21717
+ background: ${theme.colors["primary-600"]};
21718
+ }
21719
+ &:focus,:focus-within{
21720
+ outline: 2px solid ${theme.colors["primary-200"]};
21721
+ }
21722
+ &:disabled{
21723
+ background: ${theme.colors["neutral-100"]};
21724
+ cursor: not-allowed;
21725
+ }
21693
21726
  `;
21694
21727
 
21695
21728
  const _jsxFileName$i = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\SearchBar\\SearchBar.tsx";
@@ -21699,17 +21732,18 @@ const _jsxFileName$i = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
21699
21732
  */
21700
21733
  const SearchBar = (props) => {
21701
21734
  const {value,submitFxn} = props;
21735
+ const [searchStr,setSearchStr] = React$1.useState(value);
21702
21736
 
21703
21737
  return (
21704
21738
  React$1.createElement('form', { onSubmit: (e)=>{
21705
21739
  e.preventDefault();
21706
- submitFxn();
21707
- }, __self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 12}}
21708
- , React$1.createElement(SearchBarContainer, {__self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 16}}
21709
- , React$1.createElement(SearchBox, { type: "search", placeholder: "Search", value: value, ...props, __self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 17}})
21710
- , React$1.createElement(SearchButton, { type: "submit", __self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 18}}
21711
- , React$1.createElement('svg', { width: "21", height: "21", viewBox: "0 0 21 21" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 19}}
21712
- , React$1.createElement('path', { d: "M20.21 19.29L16.5 15.61C17.9401 13.8144 18.6375 11.5353 18.4488 9.2413C18.2601 6.9473 17.1997 4.81278 15.4855 3.27664C13.7714 1.74051 11.5338 0.91951 9.23292 0.98247C6.93203 1.04543 4.74272 1.98756 3.11514 3.61514C1.48756 5.24272 0.545427 7.43204 0.482466 9.73292C0.419506 12.0338 1.2405 14.2714 2.77664 15.9855C4.31278 17.6997 6.4473 18.7601 8.7413 18.9488C11.0353 19.1375 13.3144 18.4401 15.11 17L18.79 20.68C18.883 20.7737 18.9936 20.8481 19.1154 20.8989C19.2373 20.9497 19.368 20.9758 19.5 20.9758C19.632 20.9758 19.7627 20.9497 19.8846 20.8989C20.0064 20.8481 20.117 20.7737 20.21 20.68C20.3902 20.4935 20.491 20.2443 20.491 19.985C20.491 19.7257 20.3902 19.4765 20.21 19.29V19.29ZM9.5 17C8.11553 17 6.76215 16.5895 5.611 15.8203C4.45986 15.0511 3.56265 13.9579 3.03284 12.6788C2.50303 11.3997 2.3644 9.99223 2.6345 8.63437C2.9046 7.2765 3.57128 6.02922 4.55025 5.05025C5.52922 4.07128 6.7765 3.4046 8.13436 3.1345C9.49223 2.86441 10.8997 3.00303 12.1788 3.53284C13.4579 4.06266 14.5511 4.95986 15.3203 6.11101C16.0895 7.26215 16.5 8.61553 16.5 10C16.5 11.8565 15.7625 13.637 14.4497 14.9497C13.137 16.2625 11.3565 17 9.5 17V17Z" , fill: "#F7F9FC", __self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 20}})
21740
+ submitFxn(searchStr);
21741
+ }, __self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 13}}
21742
+ , React$1.createElement(SearchBarContainer, {__self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 17}}
21743
+ , React$1.createElement(SearchBox, { type: "text", placeholder: "Search", value: searchStr, onChange: (e)=>{setSearchStr(e.target.value);}, __self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 18}})
21744
+ , React$1.createElement(SearchButton, { type: "submit", __self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 19}}
21745
+ , React$1.createElement('svg', { width: "21", height: "21", viewBox: "0 0 21 21" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 20}}
21746
+ , React$1.createElement('path', { d: "M20.21 19.29L16.5 15.61C17.9401 13.8144 18.6375 11.5353 18.4488 9.2413C18.2601 6.9473 17.1997 4.81278 15.4855 3.27664C13.7714 1.74051 11.5338 0.91951 9.23292 0.98247C6.93203 1.04543 4.74272 1.98756 3.11514 3.61514C1.48756 5.24272 0.545427 7.43204 0.482466 9.73292C0.419506 12.0338 1.2405 14.2714 2.77664 15.9855C4.31278 17.6997 6.4473 18.7601 8.7413 18.9488C11.0353 19.1375 13.3144 18.4401 15.11 17L18.79 20.68C18.883 20.7737 18.9936 20.8481 19.1154 20.8989C19.2373 20.9497 19.368 20.9758 19.5 20.9758C19.632 20.9758 19.7627 20.9497 19.8846 20.8989C20.0064 20.8481 20.117 20.7737 20.21 20.68C20.3902 20.4935 20.491 20.2443 20.491 19.985C20.491 19.7257 20.3902 19.4765 20.21 19.29V19.29ZM9.5 17C8.11553 17 6.76215 16.5895 5.611 15.8203C4.45986 15.0511 3.56265 13.9579 3.03284 12.6788C2.50303 11.3997 2.3644 9.99223 2.6345 8.63437C2.9046 7.2765 3.57128 6.02922 4.55025 5.05025C5.52922 4.07128 6.7765 3.4046 8.13436 3.1345C9.49223 2.86441 10.8997 3.00303 12.1788 3.53284C13.4579 4.06266 14.5511 4.95986 15.3203 6.11101C16.0895 7.26215 16.5 8.61553 16.5 10C16.5 11.8565 15.7625 13.637 14.4497 14.9497C13.137 16.2625 11.3565 17 9.5 17V17Z" , fill: "#F7F9FC", __self: undefined, __source: {fileName: _jsxFileName$i, lineNumber: 21}})
21713
21747
  )
21714
21748
  )
21715
21749
  )
@@ -22991,12 +23025,17 @@ const _jsxFileName$b = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
22991
23025
  const TextArea = (props) => {
22992
23026
  let {label,subtext,errMsg,disabled,required,width,value} = props;
22993
23027
 
22994
- const [borderColor,setBorderColor] = React$1.useState('');
23028
+ const [borderColor,setBorderColor] = React$1.useState(value);
22995
23029
  const [err,setErr] = React$1.useState(false);
23030
+ const [inputVal,setInputVal] = React$1.useState('');
22996
23031
  const textFieldRef = React$1.useRef();
22997
23032
 
23033
+ React$1.useEffect(()=>{
23034
+ setInputVal(value );
23035
+ },[value]);
23036
+
22998
23037
  function validate(){
22999
- if (value){
23038
+ if (inputVal){
23000
23039
  setBorderColor('success');
23001
23040
  setErr(false);
23002
23041
  }else {
@@ -23015,21 +23054,21 @@ const TextArea = (props) => {
23015
23054
  };
23016
23055
 
23017
23056
  return (
23018
- React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 35}}
23057
+ React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 40}}
23019
23058
  , label &&
23020
- React$1.createElement(InputLabel, {__self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 37}}
23021
- , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 38}}, label)
23022
- , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 39}}, subtext)
23059
+ React$1.createElement(InputLabel, {__self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 42}}
23060
+ , React$1.createElement('label', {__self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 43}}, label)
23061
+ , subtext && React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 44}}, subtext)
23023
23062
  )
23024
23063
 
23025
- , React$1.createElement(InputContainer, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 42}}
23026
- , React$1.createElement(TextAreaField, { ref: textFieldRef, onBlur: ()=>{validate();}, ...props, __self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 43}})
23064
+ , React$1.createElement(InputContainer, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%'}, __self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 47}}
23065
+ , React$1.createElement(TextAreaField, { ref: textFieldRef, onBlur: ()=>{validate();}, value: inputVal, onChange: (e)=>{setInputVal(e.target.value);}, ...props, __self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 48}})
23027
23066
  )
23028
23067
  , !value && required && err &&
23029
- React$1.createElement(ErrorMessage, {__self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 46}}
23068
+ React$1.createElement(ErrorMessage, {__self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 51}}
23030
23069
  /*exclamation-triangle*/
23031
- , React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 48}}
23032
- , React$1.createElement('path', { d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z" , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 49}})
23070
+ , React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 53}}
23071
+ , React$1.createElement('path', { d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z" , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$b, lineNumber: 54}})
23033
23072
  )
23034
23073
  , errMsg ? errMsg : 'This field is required'
23035
23074
  )