groundfloor-react-ui 1.2.87 → 1.2.88

package/dist/index.es.js

@@ -152,7 +152,6 @@ import e from"prop-types";import t,{forwardRef as l,useRef as o,useState as r,us
   padding-bottom: 9px;
   ${({iconDivCustomStyle:e})=>e}
 `,re=({content:e,alertWrapperStyle:l,iconDivCustomStyle:o,alertIsOpen:r,closeAlert:i,iconProps:a})=>{const n=u()||H;return t.createElement(le,{theme:n,alertIsOpen:r,alertWrapperStyle:l},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px 24px"}},t.createElement("div",null,e),t.createElement(oe,{onClick:i,iconDivCustomStyle:o},t.createElement($,z({icon:"close-icon",color:"#000000",size:13},a)))))};re.propTypes={content:e.any,alertWrapperStyle:e.object,alertIsOpen:e.bool,iconDivCustomStyle:e.object,closeAlert:e.func,iconProps:e.object},re.defaultProps={alertWrapperStyle:{},content:"",alertIsOpen:!0};const ie=m.div`
-    color: ${({theme:e,variant:t})=>t?e.variant[t]:"white"};
     ${({scroll:e})=>e?b`
                 display: flex;
                 overflow-x: auto;
@@ -163,7 +162,9 @@ import e from"prop-types";import t,{forwardRef as l,useRef as o,useState as r,us
 `,ae=m.div`
     min-height: 40px;
     max-height: 40px;
-    background-color: ${({bgColor:e})=>e};
+    background-color: ${({backgroundColor:e})=>e};
+    color: ${({color:e})=>e||"white"};
+
     align-items: center;
     display: flex;
     cursor:  ${({clickable:e})=>e?"pointer":"default"};
@@ -246,7 +247,7 @@ import e from"prop-types";import t,{forwardRef as l,useRef as o,useState as r,us
                                 `:void 0}
             };
             `}}
-`,ce=({variant:e,data:l,scroll:a,onClick:n,clickable:c,...s})=>{const d=u()||H,p=o(null),m=o(null),[b,g]=r(void 0),[f,h]=r(void 0);let y={fontSize:"",display:""},x={fontSize:"",display:""};const v=()=>{p&&h(p?.current?.offsetWidth)};i((()=>{v()}),[l,f]),i((()=>{if(!a)return window.addEventListener("resize",v),()=>window.removeEventListener("resize",v)}),[]),i((()=>{a||g(m?.current.offsetWidth)}),[l,f,b]);const C=l.reduce((function(e,t){return 9*e.label.length+13*e.value.toString().length>9*t.label.length+13*t.value.toString().length?e:t}));if(!a){const e=function(e){return{step1:15+13*e.value.toString().length+5+9*e.label.length+15,step2:15+13*e.value.toString().length+5+7*e.label.length+15,step3:15+13*e.value.toString().length+5+15}}(C);b<e.step3?(x.display="none",y.display="none"):b<e.step2?y.display="none":b<e.step1?y.fontSize="12px":y.fontSize="14px"}return t.createElement(ie,{theme:d,variant:e,ref:a?null:p,arrowNumber:l.length,scroll:a},l.map(((e,o)=>{return t.createElement(ae,{id:e.id,theme:d,onClick:c?t=>n(t,e):null,clickable:c,scroll:a,ref:a?null:e.label===C.label?m:null,key:"fa"+o+"-"+e.label,index:o,dataLength:l.length,bgColor:e.bgColor},(r=e.value,i=e.label,t.createElement(ne,{styleArrowContentP:y,styleArrowContentSpan:x,scroll:a},t.createElement("span",null,r),t.createElement("p",null,i))));var r,i})))};ce.propTypes={variant:e.string,data:e.array,scroll:e.bool,onClick:e.func,clickable:e.bool},ce.defaultProps={variant:null,data:[],scroll:!0,onClick:void 0,clickable:!1};const se=m.img`
+`,ce=({data:e,scroll:l,onClick:a,clickable:n,...c})=>{const s=u()||H,d=o(null),p=o(null),[m,b]=r(void 0),[g,f]=r(void 0);let h={fontSize:"",display:""},y={fontSize:"",display:""};const x=()=>{d&&f(d?.current?.offsetWidth)};i((()=>{x()}),[e,g]),i((()=>{if(!l)return window.addEventListener("resize",x),()=>window.removeEventListener("resize",x)}),[]),i((()=>{l||b(p?.current.offsetWidth)}),[e,g,m]);const v=e.reduce((function(e,t){return 9*e.label.length+13*e.value.toString().length>9*t.label.length+13*t.value.toString().length?e:t}));if(!l){const e=function(e){return{step1:15+13*e.value.toString().length+5+9*e.label.length+15,step2:15+13*e.value.toString().length+5+7*e.label.length+15,step3:15+13*e.value.toString().length+5+15}}(v);m<e.step3?(y.display="none",h.display="none"):m<e.step2?h.display="none":m<e.step1?h.fontSize="12px":h.fontSize="14px"}return t.createElement(ie,{theme:s,ref:l?null:d,arrowNumber:e.length,scroll:l},e.map(((o,r)=>{return t.createElement(ae,{id:o.id,theme:s,onClick:n?e=>a(e,o):null,clickable:n,scroll:l,ref:l?null:o.label===v.label?p:null,key:"fa"+r+"-"+o.label,index:r,dataLength:e.length,backgroundColor:o.backgroundColor,color:o.color},(i=o.value,c=o.label,t.createElement(ne,{styleArrowContentP:h,styleArrowContentSpan:y,scroll:l},t.createElement("span",null,i),t.createElement("p",null,c))));var i,c})))};ce.propTypes={data:e.array,scroll:e.bool,onClick:e.func,clickable:e.bool},ce.defaultProps={data:[],scroll:!0,onClick:void 0,clickable:!1};const se=m.img`
   //Set the styles from the default styles object
   ${({inBuiltCss:e,type:t,size:l,customStyles:o})=>{if(e){let r={};if(e[t]){for(const t in e.common)r[t]=e.common[t];for(const l in e[t])r[l]=e[t][l],delete e.common[l];for(const o in e[`${t}${l}`])r[o]=e[`${t}${l}`][o],delete e.common[o]}return{...r,...o}}}}
 `,de=({customStyles:e,type:l,size:a,alt:n,src:c,handleImageStatus:s,...d})=>{const[p,m]=r("loading"),u=o(null),b=()=>{m("loaded"),s&&s("loaded")},g=()=>{m("failed"),s&&s("failed")};return i((()=>{const e=u.current;if(e)return e.addEventListener("load",b),e.addEventListener("error",g),()=>{e.removeEventListener("load",b),e.removeEventListener("error",g)}}),[p]),t.createElement(se,z({},d,{inBuiltCss:T,customStyles:e,type:l,alt:n,src:c,ref:u,size:a}))};de.propTypes={customStyles:e.object,type:e.string,size:e.oneOf(["SM","MD","LG"]),alt:e.string,src:e.string,handleImageStatus:e.func},de.defaultProps={customStyles:{},type:"image",alt:"image alternative",src:null,handleImageStatus:null};const pe=m.span`
@@ -3212,16 +3213,16 @@ overflow: hidden;
 `,_i=m.div`
   font-size: 16px;
   padding: 7px 20px;
-  background-color: ${({theme:e,isActive:t})=>t?F(e.variant["primary-1"],.0623088):"transparent"};
+  background-color: ${({isActive:e,activeHeaderStyle:t})=>e?F(t?.backgroundColor,t?.opacity):"transparent"};
   cursor: pointer;
-   color: ${({theme:e,isActive:t})=>t?e.variant["primary-1"]:e.variant["primary-2"]};
+   color: ${({theme:e,isActive:t,activeHeaderStyle:l})=>t?l.color:e.variant["primary-2"]};
   border-radius: 5px;
-  font-weight:    ${({isActive:e})=>e?"bold":"normal"};
+  font-weight:    ${({isActive:e,activeHeaderStyle:t})=>e?t.fontWeight:"normal"};
 
   ${({headerStyle:e})=>e}
 `,ea=m.div`
   ${({tabContentStyle:e})=>e}
-`,ta=({tabs:e,activeTab:l,setActiveTab:o,tabWrapperStyle:r,headerWrapperStyle:i,headerStyle:a,dividerProps:n,tabContentStyle:c,extraContent:s})=>{const d=u()||H;return t.createElement(Ki,{tabWrapperStyle:r},t.createElement($i,{theme:d,headerWrapperStyle:i},e.map(((e,r)=>t.createElement(_i,{theme:d,onClick:()=>o(r),active:r===l,key:e?.title+r,isActive:r===l,headerStyle:a},e.title))),s),t.createElement(qo,n),e.map(((e,o)=>o===l&&t.createElement(ea,{tabContentStyle:c,key:o},e.content))))};ta.propTypes={tabs:e.array,tabWrapperStyle:e.object,headerWrapperStyle:e.object,headerStyle:e.object,dividerProps:e.object,tabContentStyle:e.object,activeTab:e.number,setActiveTab:e.func},ta.defaultProps={tabs:[],activeTab:0,tabWrapperStyle:{},headerStyle:{},tabContentStyle:{},headerWrapperStyle:{},dividerProps:{}};const la=m.div`
+`,ta=({tabs:e,activeTab:l,setActiveTab:o,tabWrapperStyle:r,headerWrapperStyle:i,headerStyle:a,dividerProps:n,tabContentStyle:c,extraContent:s,activeHeaderStyle:d})=>{const p=u()||H;return t.createElement(Ki,{tabWrapperStyle:r},t.createElement($i,{theme:p,headerWrapperStyle:i},e.map(((e,r)=>t.createElement(_i,{theme:p,onClick:()=>o(r),active:r===l,key:e?.title+r,isActive:r===l,headerStyle:a,activeHeaderStyle:d},e.title))),s),t.createElement(qo,n),e.map(((e,o)=>o===l&&t.createElement(ea,{tabContentStyle:c,key:o},e.content))))};ta.propTypes={tabs:e.array,tabWrapperStyle:e.object,headerWrapperStyle:e.object,headerStyle:e.object,dividerProps:e.object,tabContentStyle:e.object,activeTab:e.number,setActiveTab:e.func,activeHeaderStyle:e.object},ta.defaultProps={tabs:[],activeTab:0,tabWrapperStyle:{},headerStyle:{},tabContentStyle:{},headerWrapperStyle:{},dividerProps:{},activeHeaderStyle:{color:"#2A50FD",backgroundColor:"#2A50FD",opacity:.623088,fontWeight:"bold"}};const la=m.div`
   .notification {
     background: ${({theme:e})=>e.additional.white};
     transition: 0.3s ease;

package/dist/index.js

@@ -152,7 +152,6 @@
   padding-bottom: 9px;
   ${({iconDivCustomStyle:e})=>e}
 `,te=({content:e,alertWrapperStyle:t,iconDivCustomStyle:a,alertIsOpen:o,closeAlert:r,iconProps:i})=>{const n=l.useTheme()||R;return g.default.createElement(_,{theme:n,alertIsOpen:o,alertWrapperStyle:t},g.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px 24px"}},g.default.createElement("div",null,e),g.default.createElement(ee,{onClick:r,iconDivCustomStyle:a},g.default.createElement(N,E({icon:"close-icon",color:"#000000",size:13},i)))))};te.propTypes={content:b.default.any,alertWrapperStyle:b.default.object,alertIsOpen:b.default.bool,iconDivCustomStyle:b.default.object,closeAlert:b.default.func,iconProps:b.default.object},te.defaultProps={alertWrapperStyle:{},content:"",alertIsOpen:!0};const le=h.default.div`
-    color: ${({theme:e,variant:t})=>t?e.variant[t]:"white"};
     ${({scroll:e})=>e?l.css`
                 display: flex;
                 overflow-x: auto;
@@ -163,7 +162,9 @@
 `,ae=h.default.div`
     min-height: 40px;
     max-height: 40px;
-    background-color: ${({bgColor:e})=>e};
+    background-color: ${({backgroundColor:e})=>e};
+    color: ${({color:e})=>e||"white"};
+
     align-items: center;
     display: flex;
     cursor:  ${({clickable:e})=>e?"pointer":"default"};
@@ -246,7 +247,7 @@
                                 `:void 0}
             };
             `}}
-`,re=({variant:e,data:a,scroll:o,onClick:r,clickable:i,...n})=>{const c=l.useTheme()||R,d=t.useRef(null),s=t.useRef(null),[u,p]=t.useState(void 0),[f,m]=t.useState(void 0);let b={fontSize:"",display:""},h={fontSize:"",display:""};const y=()=>{d&&m(d?.current?.offsetWidth)};t.useEffect((()=>{y()}),[a,f]),t.useEffect((()=>{if(!o)return window.addEventListener("resize",y),()=>window.removeEventListener("resize",y)}),[]),t.useEffect((()=>{o||p(s?.current.offsetWidth)}),[a,f,u]);const x=a.reduce((function(e,t){return 9*e.label.length+13*e.value.toString().length>9*t.label.length+13*t.value.toString().length?e:t}));if(!o){const e=function(e){return{step1:15+13*e.value.toString().length+5+9*e.label.length+15,step2:15+13*e.value.toString().length+5+7*e.label.length+15,step3:15+13*e.value.toString().length+5+15}}(x);u<e.step3?(h.display="none",b.display="none"):u<e.step2?b.display="none":u<e.step1?b.fontSize="12px":b.fontSize="14px"}return g.default.createElement(le,{theme:c,variant:e,ref:o?null:d,arrowNumber:a.length,scroll:o},a.map(((e,t)=>{return g.default.createElement(ae,{id:e.id,theme:c,onClick:i?t=>r(t,e):null,clickable:i,scroll:o,ref:o?null:e.label===x.label?s:null,key:"fa"+t+"-"+e.label,index:t,dataLength:a.length,bgColor:e.bgColor},(l=e.value,n=e.label,g.default.createElement(oe,{styleArrowContentP:b,styleArrowContentSpan:h,scroll:o},g.default.createElement("span",null,l),g.default.createElement("p",null,n))));var l,n})))};re.propTypes={variant:b.default.string,data:b.default.array,scroll:b.default.bool,onClick:b.default.func,clickable:b.default.bool},re.defaultProps={variant:null,data:[],scroll:!0,onClick:void 0,clickable:!1};const ie=h.default.img`
+`,re=({data:e,scroll:a,onClick:o,clickable:r,...i})=>{const n=l.useTheme()||R,c=t.useRef(null),d=t.useRef(null),[s,u]=t.useState(void 0),[p,f]=t.useState(void 0);let m={fontSize:"",display:""},b={fontSize:"",display:""};const h=()=>{c&&f(c?.current?.offsetWidth)};t.useEffect((()=>{h()}),[e,p]),t.useEffect((()=>{if(!a)return window.addEventListener("resize",h),()=>window.removeEventListener("resize",h)}),[]),t.useEffect((()=>{a||u(d?.current.offsetWidth)}),[e,p,s]);const y=e.reduce((function(e,t){return 9*e.label.length+13*e.value.toString().length>9*t.label.length+13*t.value.toString().length?e:t}));if(!a){const e=function(e){return{step1:15+13*e.value.toString().length+5+9*e.label.length+15,step2:15+13*e.value.toString().length+5+7*e.label.length+15,step3:15+13*e.value.toString().length+5+15}}(y);s<e.step3?(b.display="none",m.display="none"):s<e.step2?m.display="none":s<e.step1?m.fontSize="12px":m.fontSize="14px"}return g.default.createElement(le,{theme:n,ref:a?null:c,arrowNumber:e.length,scroll:a},e.map(((t,l)=>{return g.default.createElement(ae,{id:t.id,theme:n,onClick:r?e=>o(e,t):null,clickable:r,scroll:a,ref:a?null:t.label===y.label?d:null,key:"fa"+l+"-"+t.label,index:l,dataLength:e.length,backgroundColor:t.backgroundColor,color:t.color},(i=t.value,c=t.label,g.default.createElement(oe,{styleArrowContentP:m,styleArrowContentSpan:b,scroll:a},g.default.createElement("span",null,i),g.default.createElement("p",null,c))));var i,c})))};re.propTypes={data:b.default.array,scroll:b.default.bool,onClick:b.default.func,clickable:b.default.bool},re.defaultProps={data:[],scroll:!0,onClick:void 0,clickable:!1};const ie=h.default.img`
   //Set the styles from the default styles object
   ${({inBuiltCss:e,type:t,size:l,customStyles:a})=>{if(e){let o={};if(e[t]){for(const t in e.common)o[t]=e.common[t];for(const l in e[t])o[l]=e[t][l],delete e.common[l];for(const a in e[`${t}${l}`])o[a]=e[`${t}${l}`][a],delete e.common[a]}return{...o,...a}}}}
 `,ne=({customStyles:e,type:l,size:a,alt:o,src:r,handleImageStatus:i,...n})=>{const[c,d]=t.useState("loading"),s=t.useRef(null),u=()=>{d("loaded"),i&&i("loaded")},p=()=>{d("failed"),i&&i("failed")};return t.useEffect((()=>{const e=s.current;if(e)return e.addEventListener("load",u),e.addEventListener("error",p),()=>{e.removeEventListener("load",u),e.removeEventListener("error",p)}}),[c]),g.default.createElement(ie,E({},n,{inBuiltCss:W,customStyles:e,type:l,alt:o,src:r,ref:s,size:a}))};ne.propTypes={customStyles:b.default.object,type:b.default.string,size:b.default.oneOf(["SM","MD","LG"]),alt:b.default.string,src:b.default.string,handleImageStatus:b.default.func},ne.defaultProps={customStyles:{},type:"image",alt:"image alternative",src:null,handleImageStatus:null};const ce=h.default.span`
@@ -3212,16 +3213,16 @@ overflow: hidden;
 `,Xr=h.default.div`
   font-size: 16px;
   padding: 7px 20px;
-  background-color: ${({theme:e,isActive:t})=>t?T(e.variant["primary-1"],.0623088):"transparent"};
+  background-color: ${({isActive:e,activeHeaderStyle:t})=>e?T(t?.backgroundColor,t?.opacity):"transparent"};
   cursor: pointer;
-   color: ${({theme:e,isActive:t})=>t?e.variant["primary-1"]:e.variant["primary-2"]};
+   color: ${({theme:e,isActive:t,activeHeaderStyle:l})=>t?l.color:e.variant["primary-2"]};
   border-radius: 5px;
-  font-weight:    ${({isActive:e})=>e?"bold":"normal"};
+  font-weight:    ${({isActive:e,activeHeaderStyle:t})=>e?t.fontWeight:"normal"};
 
   ${({headerStyle:e})=>e}
 `,Jr=h.default.div`
   ${({tabContentStyle:e})=>e}
-`,Ur=({tabs:e,activeTab:t,setActiveTab:a,tabWrapperStyle:o,headerWrapperStyle:r,headerStyle:i,dividerProps:n,tabContentStyle:c,extraContent:d})=>{const s=l.useTheme()||R;return g.default.createElement(Or,{tabWrapperStyle:o},g.default.createElement(Gr,{theme:s,headerWrapperStyle:r},e.map(((e,l)=>g.default.createElement(Xr,{theme:s,onClick:()=>a(l),active:l===t,key:e?.title+l,isActive:l===t,headerStyle:i},e.title))),d),g.default.createElement(Pa,n),e.map(((e,l)=>l===t&&g.default.createElement(Jr,{tabContentStyle:c,key:l},e.content))))};Ur.propTypes={tabs:b.default.array,tabWrapperStyle:b.default.object,headerWrapperStyle:b.default.object,headerStyle:b.default.object,dividerProps:b.default.object,tabContentStyle:b.default.object,activeTab:b.default.number,setActiveTab:b.default.func},Ur.defaultProps={tabs:[],activeTab:0,tabWrapperStyle:{},headerStyle:{},tabContentStyle:{},headerWrapperStyle:{},dividerProps:{}};const Yr=h.default.div`
+`,Ur=({tabs:e,activeTab:t,setActiveTab:a,tabWrapperStyle:o,headerWrapperStyle:r,headerStyle:i,dividerProps:n,tabContentStyle:c,extraContent:d,activeHeaderStyle:s})=>{const u=l.useTheme()||R;return g.default.createElement(Or,{tabWrapperStyle:o},g.default.createElement(Gr,{theme:u,headerWrapperStyle:r},e.map(((e,l)=>g.default.createElement(Xr,{theme:u,onClick:()=>a(l),active:l===t,key:e?.title+l,isActive:l===t,headerStyle:i,activeHeaderStyle:s},e.title))),d),g.default.createElement(Pa,n),e.map(((e,l)=>l===t&&g.default.createElement(Jr,{tabContentStyle:c,key:l},e.content))))};Ur.propTypes={tabs:b.default.array,tabWrapperStyle:b.default.object,headerWrapperStyle:b.default.object,headerStyle:b.default.object,dividerProps:b.default.object,tabContentStyle:b.default.object,activeTab:b.default.number,setActiveTab:b.default.func,activeHeaderStyle:b.default.object},Ur.defaultProps={tabs:[],activeTab:0,tabWrapperStyle:{},headerStyle:{},tabContentStyle:{},headerWrapperStyle:{},dividerProps:{},activeHeaderStyle:{color:"#2A50FD",backgroundColor:"#2A50FD",opacity:.623088,fontWeight:"bold"}};const Yr=h.default.div`
   .notification {
     background: ${({theme:e})=>e.additional.white};
     transition: 0.3s ease;

package/package.json

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