groundfloor-react-ui 1.3.85 → 1.3.86

package/dist/index.es.js

@@ -742,54 +742,71 @@ ${({customTriggerStyle:e})=>e}
 `,it=({customStyles:e,text:l,className:i,required:o,showLabelIcon:c,tooltipProps:a,...r})=>{const n=b()||Z;return t.createElement(lt,H({required:o,inBuiltCss:F,customStyles:e,type:"label"},r),l,o&&t.createElement("div",{style:{marginLeft:"4px",color:`${n.variant.error}`}},"*"),c&&t.createElement("div",{style:{marginLeft:"8px"}},t.createElement(Qe,H({contentTrigger:t.createElement(ee,H({icon:"correct",size:12,color:n.variant["neutral-3"]},a?.triggerIconProps)),contentTooltip:a?.contentTooltip,popperOptionsP:{placement:"top"},settings:{trigger:"hover"},footerTooltip:"",customContentStyle:{width:"210px",backgroundColor:"white",color:"#6B747F",boxShadow:"0px 6px 40px rgba(56, 66, 100, 0.482627)",padding:"16px",borderRadius:"3.6px"}},a))))};it.propTypes={customStyles:e.object,text:e.string,showLabelIcon:e.bool,tooltipProps:e.object},it.defaultProps={text:"",showLabelIcon:!1};const ot=m.div`
   display: flex;
   flex-direction: column;
+  .err-text {
+    color: ${({theme:e})=>e.variant.error};
+    margin-top: 5px;
+    font-size: 10px;
+  }
   ${({containerStyle:e})=>e};
+
 `,ct=m.div`
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
-  border-radius: 4px;
-  padding: 8px;
-  border: none;
-  outline: none;
+  align-items: center;
+  border-radius: 6px;
+  padding: 6px 8px;
+  border: 1px solid ${({theme:e})=>e.variant["neutral-3"]};
+  background-color: white;
+  min-height: 40px;
+
   ${({inputContainerStyle:e})=>e};
 `,at=m.div`
   background-color: ${({theme:e})=>e.variant["selection-bg"]};
   color: ${({theme:e})=>e.variant["neutral-1"]};
   border-radius: 4px;
   padding: 4px 8px;
-  margin-right: 8px;
-  margin-bottom: 8px;
+  margin-right: 6px;
+  margin-bottom: 4px;
   display: flex;
   align-items: center;
+  font-size: 14px;
 
   &:hover {
     cursor: pointer;
   }
 `,rt=m.span`
+  font-weight: bold;
+  margin-left: 4px;
+  cursor: pointer;
+  user-select: none;
+  color: ${({theme:e})=>e.variant["neutral-2"]};
+
+  &:hover {
+    color: ${({theme:e})=>e.variant.error};
+  }
+`,nt=m.span`
   margin-right: 8px;
   word-break: break-all;
-`,nt=m.input`
+`,st=m.input`
   flex-grow: 1;
-  padding: 0;
+  min-width: 120px;
   border: none;
   outline: none;
-  margin-right: 8px;
-  font-size: inherit;
+  font-size: 14px;
+  margin-bottom: 4px;
+  padding: 4px;
   color: ${({theme:e})=>e.variant["neutral-1"]};
   background-color: transparent;
 
-  &:focus {
-    outline: none;
-  }
-
   &::placeholder {
     color: ${({theme:e})=>e.variant["neutral-3"]};
   }
+
   ${({inputStyle:e})=>e};
-`,st=m.span`
+`;m.span`
   color: ${({theme:e})=>e.variant.error};
   ${({errorTextStyle:e})=>e};
-`,dt=({listChips:e,setListChips:l,currentChip:i,setCurrentChip:a,chipListString:r,placeholder:n,errorMsg:s,handleBlurProps:d,label:p,labelCusTomStyles:m,containerStyle:u,inputContainerStyle:f,errorTextStyle:g,disabled:h,isValid:C,handleInputKeyDownProps:y,handleInputChangeProps:x,inputStyle:v,...w})=>{const[A,S]=o(r?r.split(","):e||[]),[k,V]=o(i),[E,M]=o(""),L=b()||Z;c((()=>{S(r?r.split(","):e||[])}),[r,e]),c((()=>{V(i)}),[i]);return t.createElement(ot,{theme:L,containerStyle:u},t.createElement(ct,{inputContainerStyle:f},t.createElement(it,{text:p,customStyles:m}),A.map(((e,l)=>t.createElement(at,{theme:L,key:e+`${l}`,onClick:()=>(e=>{const t=[...A];t.splice(e,1),S(t),M(""),d(t.join(","))})(l)},t.createElement(rt,null,e)))),t.createElement(nt,{type:"text",placeholder:n,value:k,onKeyDown:e=>{"Enter"===e.key||","===e.key?(e.preventDefault(),C?k.trim()&&(y([...A,k.trim()].join(",")),S([...A,k.trim()]),V(""),M("")):M(s)):"Backspace"!==e.key||k||(y(A.slice(0,-1).join(",")),S(A.slice(0,-1)))},onChange:e=>{V(e.target.value),M(""),x(e.target.value)},theme:L,onBlur:()=>{if(C){let e;e=k.trim()?[...A,k.trim()]:[...A],d(e.join(",")),S(e),V("")}else C||M(s)},disabled:h,inputStyle:v})),E&&t.createElement(st,{errorTextStyle:g,theme:L},E))};dt.propTypes={listChips:e.arrayOf(e.string),setListChips:e.func,chipListString:e.string,currentChip:e.string,setCurrentChip:e.func,placeholder:e.string,isValid:e.bool,errorMsg:e.string,label:e.string,labelCusTomStyles:e.object,containerStyle:e.object,inputContainerStyle:e.object,errorTextStyle:e.object,disabled:e.bool,handleInputKeyDownProps:e.func,handleInputChangeProps:e.func,inputStyle:e.object},dt.defaultProps={listChips:[],setListChips:()=>{},currentChip:"",setCurrentChip:()=>{},placeholder:"",errorMsg:"Please enter a valid email address",label:"From:",labelCusTomStyles:{},containerStyle:{},inputContainerStyle:{},errorTextStyle:{},disabled:!1,isValid:!0,inputStyle:{}};const pt=({CommonRenderedComponent:e,MultiValue:l,Option:i,type:o,id:c,styles:a,onCreateOption:r,...n})=>{let s={...e};return"asyncMultiCreatable"===o&&(s.MultiValue=l,s.Option=i),t.createElement(y,H({className:"select-manage-page contentClickFalse",classNamePrefix:"new-select",name:"select-dropdown",components:s,isMulti:!0,defaultOptions:!0,hideSelectedOptions:!1,closeMenuOnSelect:"asyncMultiCreatable"!==o,isSearchable:!0,styles:a,menuShouldScrollIntoView:!1,"data-accordion":"contentClickFalse",id:c,onCreateOption:r},n))},mt=m.div`
+`;const dt=({listChips:e,setListChips:l,currentChip:i,setCurrentChip:a,chipListString:r,placeholder:n,errorMsg:s,handleBlurProps:d,label:p,labelCusTomStyles:m,containerStyle:u,inputContainerStyle:f,errorTextStyle:g,disabled:h,isValid:C,handleInputKeyDownProps:y,handleInputChangeProps:x,inputStyle:v,...w})=>{const[A,S]=o(r?r.split(","):e||[]),[k,V]=o(i),[E,M]=o(""),L=b()||Z;c((()=>{S(r?r.split(","):e||[])}),[r,e]),c((()=>{V(i)}),[i]);return t.createElement(ot,{theme:L,containerStyle:u},t.createElement(it,{text:p,customStyles:m}),t.createElement(ct,{theme:L,inputContainerStyle:f},A.map(((e,l)=>t.createElement(at,{theme:L,key:e+`${l}`},t.createElement(nt,null,e),t.createElement(rt,{theme:L,onClick:()=>(e=>{const t=[...A];t.splice(e,1),S(t),M(""),d(t.join(","))})(l)},"×")))),t.createElement(st,{type:"text",placeholder:n,value:k,onKeyDown:e=>{"Enter"===e.key||","===e.key?(e.preventDefault(),C?k.trim()&&(y([...A,k.trim()].join(",")),S([...A,k.trim()]),V(""),M("")):M(s)):"Backspace"!==e.key||k||(y(A.slice(0,-1).join(",")),S(A.slice(0,-1)))},onChange:e=>{V(e.target.value),M(""),x(e.target.value)},theme:L,onBlur:()=>{if(C){let e;e=k.trim()?[...A,k.trim()]:[...A],d(e.join(",")),S(e),V("")}else C||M(s)},disabled:h,inputStyle:v})),E.length>0&&t.createElement("div",{className:"err-text"},E))};dt.propTypes={listChips:e.arrayOf(e.string),setListChips:e.func,chipListString:e.string,currentChip:e.string,setCurrentChip:e.func,placeholder:e.string,isValid:e.bool,errorMsg:e.string,label:e.string,labelCusTomStyles:e.object,containerStyle:e.object,inputContainerStyle:e.object,errorTextStyle:e.object,disabled:e.bool,handleInputKeyDownProps:e.func,handleInputChangeProps:e.func,inputStyle:e.object},dt.defaultProps={listChips:[],setListChips:()=>{},currentChip:"",setCurrentChip:()=>{},placeholder:"",errorMsg:"Please enter a valid email address",label:"From:",labelCusTomStyles:{},containerStyle:{},inputContainerStyle:{},errorTextStyle:{},disabled:!1,isValid:!0,inputStyle:{}};const pt=({CommonRenderedComponent:e,MultiValue:l,Option:i,type:o,id:c,styles:a,onCreateOption:r,...n})=>{let s={...e};return"asyncMultiCreatable"===o&&(s.MultiValue=l,s.Option=i),t.createElement(y,H({className:"select-manage-page contentClickFalse",classNamePrefix:"new-select",name:"select-dropdown",components:s,isMulti:!0,defaultOptions:!0,hideSelectedOptions:!1,closeMenuOnSelect:"asyncMultiCreatable"!==o,isSearchable:!0,styles:a,menuShouldScrollIntoView:!1,"data-accordion":"contentClickFalse",id:c,onCreateOption:r},n))},mt=m.div`
   box-sizing: initial;
 
   //Set the styles from the default styles object

package/dist/index.js

@@ -742,54 +742,71 @@ ${({customTriggerStyle:e})=>e}
 `,et=({customStyles:e,text:t,className:a,required:o,showLabelIcon:i,tooltipProps:r,...c})=>{const n=l.useTheme()||R;return h.default.createElement(_e,M({required:o,inBuiltCss:W,customStyles:e,type:"label"},c),t,o&&h.default.createElement("div",{style:{marginLeft:"4px",color:`${n.variant.error}`}},"*"),i&&h.default.createElement("div",{style:{marginLeft:"8px"}},h.default.createElement(Ue,M({contentTrigger:h.default.createElement($,M({icon:"correct",size:12,color:n.variant["neutral-3"]},r?.triggerIconProps)),contentTooltip:r?.contentTooltip,popperOptionsP:{placement:"top"},settings:{trigger:"hover"},footerTooltip:"",customContentStyle:{width:"210px",backgroundColor:"white",color:"#6B747F",boxShadow:"0px 6px 40px rgba(56, 66, 100, 0.482627)",padding:"16px",borderRadius:"3.6px"}},r))))};et.propTypes={customStyles:g.default.object,text:g.default.string,showLabelIcon:g.default.bool,tooltipProps:g.default.object},et.defaultProps={text:"",showLabelIcon:!1};const tt=C.default.div`
   display: flex;
   flex-direction: column;
+  .err-text {
+    color: ${({theme:e})=>e.variant.error};
+    margin-top: 5px;
+    font-size: 10px;
+  }
   ${({containerStyle:e})=>e};
+
 `,lt=C.default.div`
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
-  border-radius: 4px;
-  padding: 8px;
-  border: none;
-  outline: none;
+  align-items: center;
+  border-radius: 6px;
+  padding: 6px 8px;
+  border: 1px solid ${({theme:e})=>e.variant["neutral-3"]};
+  background-color: white;
+  min-height: 40px;
+
   ${({inputContainerStyle:e})=>e};
 `,at=C.default.div`
   background-color: ${({theme:e})=>e.variant["selection-bg"]};
   color: ${({theme:e})=>e.variant["neutral-1"]};
   border-radius: 4px;
   padding: 4px 8px;
-  margin-right: 8px;
-  margin-bottom: 8px;
+  margin-right: 6px;
+  margin-bottom: 4px;
   display: flex;
   align-items: center;
+  font-size: 14px;
 
   &:hover {
     cursor: pointer;
   }
 `,ot=C.default.span`
+  font-weight: bold;
+  margin-left: 4px;
+  cursor: pointer;
+  user-select: none;
+  color: ${({theme:e})=>e.variant["neutral-2"]};
+
+  &:hover {
+    color: ${({theme:e})=>e.variant.error};
+  }
+`,it=C.default.span`
   margin-right: 8px;
   word-break: break-all;
-`,it=C.default.input`
+`,rt=C.default.input`
   flex-grow: 1;
-  padding: 0;
+  min-width: 120px;
   border: none;
   outline: none;
-  margin-right: 8px;
-  font-size: inherit;
+  font-size: 14px;
+  margin-bottom: 4px;
+  padding: 4px;
   color: ${({theme:e})=>e.variant["neutral-1"]};
   background-color: transparent;
 
-  &:focus {
-    outline: none;
-  }
-
   &::placeholder {
     color: ${({theme:e})=>e.variant["neutral-3"]};
   }
+
   ${({inputStyle:e})=>e};
-`,rt=C.default.span`
+`;C.default.span`
   color: ${({theme:e})=>e.variant.error};
   ${({errorTextStyle:e})=>e};
-`,ct=({listChips:e,setListChips:a,currentChip:o,setCurrentChip:i,chipListString:r,placeholder:c,errorMsg:n,handleBlurProps:d,label:s,labelCusTomStyles:p,containerStyle:u,inputContainerStyle:f,errorTextStyle:m,disabled:b,isValid:g,handleInputKeyDownProps:C,handleInputChangeProps:x,inputStyle:y,...v})=>{const[w,A]=t.useState(r?r.split(","):e||[]),[S,k]=t.useState(o),[E,V]=t.useState(""),M=l.useTheme()||R;t.useEffect((()=>{A(r?r.split(","):e||[])}),[r,e]),t.useEffect((()=>{k(o)}),[o]);return h.default.createElement(tt,{theme:M,containerStyle:u},h.default.createElement(lt,{inputContainerStyle:f},h.default.createElement(et,{text:s,customStyles:p}),w.map(((e,t)=>h.default.createElement(at,{theme:M,key:e+`${t}`,onClick:()=>(e=>{const t=[...w];t.splice(e,1),A(t),V(""),d(t.join(","))})(t)},h.default.createElement(ot,null,e)))),h.default.createElement(it,{type:"text",placeholder:c,value:S,onKeyDown:e=>{"Enter"===e.key||","===e.key?(e.preventDefault(),g?S.trim()&&(C([...w,S.trim()].join(",")),A([...w,S.trim()]),k(""),V("")):V(n)):"Backspace"!==e.key||S||(C(w.slice(0,-1).join(",")),A(w.slice(0,-1)))},onChange:e=>{k(e.target.value),V(""),x(e.target.value)},theme:M,onBlur:()=>{if(g){let e;e=S.trim()?[...w,S.trim()]:[...w],d(e.join(",")),A(e),k("")}else g||V(n)},disabled:b,inputStyle:y})),E&&h.default.createElement(rt,{errorTextStyle:m,theme:M},E))};ct.propTypes={listChips:g.default.arrayOf(g.default.string),setListChips:g.default.func,chipListString:g.default.string,currentChip:g.default.string,setCurrentChip:g.default.func,placeholder:g.default.string,isValid:g.default.bool,errorMsg:g.default.string,label:g.default.string,labelCusTomStyles:g.default.object,containerStyle:g.default.object,inputContainerStyle:g.default.object,errorTextStyle:g.default.object,disabled:g.default.bool,handleInputKeyDownProps:g.default.func,handleInputChangeProps:g.default.func,inputStyle:g.default.object},ct.defaultProps={listChips:[],setListChips:()=>{},currentChip:"",setCurrentChip:()=>{},placeholder:"",errorMsg:"Please enter a valid email address",label:"From:",labelCusTomStyles:{},containerStyle:{},inputContainerStyle:{},errorTextStyle:{},disabled:!1,isValid:!0,inputStyle:{}};const nt=({CommonRenderedComponent:e,MultiValue:t,Option:l,type:a,id:o,styles:i,onCreateOption:r,...c})=>{let n={...e};return"asyncMultiCreatable"===a&&(n.MultiValue=t,n.Option=l),h.default.createElement(x.default,M({className:"select-manage-page contentClickFalse",classNamePrefix:"new-select",name:"select-dropdown",components:n,isMulti:!0,defaultOptions:!0,hideSelectedOptions:!1,closeMenuOnSelect:"asyncMultiCreatable"!==a,isSearchable:!0,styles:i,menuShouldScrollIntoView:!1,"data-accordion":"contentClickFalse",id:o,onCreateOption:r},c))},dt=C.default.div`
+`;const ct=({listChips:e,setListChips:a,currentChip:o,setCurrentChip:i,chipListString:r,placeholder:c,errorMsg:n,handleBlurProps:d,label:s,labelCusTomStyles:p,containerStyle:u,inputContainerStyle:f,errorTextStyle:m,disabled:b,isValid:g,handleInputKeyDownProps:C,handleInputChangeProps:x,inputStyle:y,...v})=>{const[w,A]=t.useState(r?r.split(","):e||[]),[S,k]=t.useState(o),[E,V]=t.useState(""),M=l.useTheme()||R;t.useEffect((()=>{A(r?r.split(","):e||[])}),[r,e]),t.useEffect((()=>{k(o)}),[o]);return h.default.createElement(tt,{theme:M,containerStyle:u},h.default.createElement(et,{text:s,customStyles:p}),h.default.createElement(lt,{theme:M,inputContainerStyle:f},w.map(((e,t)=>h.default.createElement(at,{theme:M,key:e+`${t}`},h.default.createElement(it,null,e),h.default.createElement(ot,{theme:M,onClick:()=>(e=>{const t=[...w];t.splice(e,1),A(t),V(""),d(t.join(","))})(t)},"×")))),h.default.createElement(rt,{type:"text",placeholder:c,value:S,onKeyDown:e=>{"Enter"===e.key||","===e.key?(e.preventDefault(),g?S.trim()&&(C([...w,S.trim()].join(",")),A([...w,S.trim()]),k(""),V("")):V(n)):"Backspace"!==e.key||S||(C(w.slice(0,-1).join(",")),A(w.slice(0,-1)))},onChange:e=>{k(e.target.value),V(""),x(e.target.value)},theme:M,onBlur:()=>{if(g){let e;e=S.trim()?[...w,S.trim()]:[...w],d(e.join(",")),A(e),k("")}else g||V(n)},disabled:b,inputStyle:y})),E.length>0&&h.default.createElement("div",{className:"err-text"},E))};ct.propTypes={listChips:g.default.arrayOf(g.default.string),setListChips:g.default.func,chipListString:g.default.string,currentChip:g.default.string,setCurrentChip:g.default.func,placeholder:g.default.string,isValid:g.default.bool,errorMsg:g.default.string,label:g.default.string,labelCusTomStyles:g.default.object,containerStyle:g.default.object,inputContainerStyle:g.default.object,errorTextStyle:g.default.object,disabled:g.default.bool,handleInputKeyDownProps:g.default.func,handleInputChangeProps:g.default.func,inputStyle:g.default.object},ct.defaultProps={listChips:[],setListChips:()=>{},currentChip:"",setCurrentChip:()=>{},placeholder:"",errorMsg:"Please enter a valid email address",label:"From:",labelCusTomStyles:{},containerStyle:{},inputContainerStyle:{},errorTextStyle:{},disabled:!1,isValid:!0,inputStyle:{}};const nt=({CommonRenderedComponent:e,MultiValue:t,Option:l,type:a,id:o,styles:i,onCreateOption:r,...c})=>{let n={...e};return"asyncMultiCreatable"===a&&(n.MultiValue=t,n.Option=l),h.default.createElement(x.default,M({className:"select-manage-page contentClickFalse",classNamePrefix:"new-select",name:"select-dropdown",components:n,isMulti:!0,defaultOptions:!0,hideSelectedOptions:!1,closeMenuOnSelect:"asyncMultiCreatable"!==a,isSearchable:!0,styles:i,menuShouldScrollIntoView:!1,"data-accordion":"contentClickFalse",id:o,onCreateOption:r},c))},dt=C.default.div`
   box-sizing: initial;
 
   //Set the styles from the default styles object

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "groundfloor-react-ui",
   "description": "Official component library for Ground Floor",
-  "version": "1.3.85",
+  "version": "1.3.86",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "private": false,