freemium-ui 2.0.74 → 2.0.76

package/lib/index.cjs.js

@@ -4746,8 +4746,8 @@ endAdornment:e.createElement(Up,null,!l&&!i&&!s&&L&&e.createElement(Vo,{
 style:{borderRadius:"50%"}},e.createElement(ro,{fill:_.colors.text.primary
 })),e.createElement(Vo,{...V({disabled:l,readOnly:i,"aria-label":"toggle-button"
 })},e.createElement(Ip,{$isOpen:B,fill:_.colors.text.primary,width:8,height:8
-}))),style:b}),!i&&!l&&e.createElement(Fp,{$isOpen:A,...T({disabled:l,readOnly:i
-})
+}))),style:b}),!i&&!l&&e.createElement(Fp,{className:"ItemsContainer",$isOpen:A,
+...T({disabled:l,readOnly:i})
 },E?e.createElement(jp,null,e.createElement(wm,null)):e.createElement(e.Fragment,null,A&&0===H.length&&e.createElement(e.Fragment,null,p?e.createElement($p,null,e.createElement(Bp,{
 onClick:e=>{e.stopPropagation(),m&&m({inputValue:N,customValues:!0}),O("")}
 },y?.(N)||"Click to add")):e.createElement($p,{readOnly:!0
@@ -12676,6 +12676,10 @@ TIME_SECONDS:"HH:mm:ss",TIME_MS:"HH:mm:ss.SSS",WEEK:"GGGG-[W]WW",MONTH:"YYYY-MM"
   .bp5-portal {
     --rdp-accent-color: ${({theme:e})=>e.colors.common.accent};
     --rdp-accent-color-dark: #215db0;
+    .SelectContent,
+    .ItemsContainer {
+      z-index: ${({theme:e})=>e.zIndex.modal||Eo.modal};
+    }
     .bp5-overlay {
       .bp5-overlay-backdrop {
         bottom: 0;
@@ -12686,9 +12690,10 @@ TIME_SECONDS:"HH:mm:ss",TIME_MS:"HH:mm:ss.SSS",WEEK:"GGGG-[W]WW",MONTH:"YYYY-MM"
         opacity: 1;
         overflow: auto;
         user-select: none;
+        z-index: ${({theme:e})=>e.zIndex.modal||Eo.modal};
       }
       .bp5-overlay-content {
-        z-index: ${({theme:e})=>e.zIndex.popover||Eo.popover};
+        z-index: ${({theme:e})=>e.zIndex.modal||Eo.modal};
         border: 1px solid ${({theme:e})=>e.colors.border.light};
         box-shadow:
           0px 2px 4px ${({theme:e})=>xo(e.colors.shadow,.06)},
@@ -13026,7 +13031,10 @@ className:`${t.className??""} bp-custom-dropdown bp-custom-dropdown-${t.name??""
 onChange:e=>{t?.onChange?.({target:{value:e?.id}})}})}
 return e.createElement(ab,{itemToString:()=>"",type:"button"})},ZN=t=>{
 const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,language:l,errorText:c,id:s,cancelButtonText:u="Cancel",updateButtonText:d="Update",disabled:h,displayFormat:f="YYYY-MM-DD",portalContainer:p,value:m,useTime:v,...g}=t,y=document.querySelector('div[role="dialog"].DialogContent'),b=cr(),w=e.useRef(m??null),[C,z]=e.useState(m??null),[M,x]=e.useState()
-;return e.createElement(WN,{
+;return e.useEffect((()=>{let e=location.href
+;document.body.addEventListener("click",(()=>{requestAnimationFrame((()=>{
+e!==location.href&&(x(!1),setTimeout((()=>{x(void 0)}),0),e=location.href)}))
+}),!0)}),[]),e.createElement(WN,{
 id:`${v?"datetime":"date"}-picker-container-${s??""}`.trim(),"aria-invalid":i,
 dir:b.direction},a&&e.createElement(Do,{htmlFor:t.id,className:"input-label"
 },a,a&&o&&e.createElement(Lo,null,"*")),e.createElement(GN,{$isErrored:i,
@@ -13050,7 +13058,10 @@ timePrecision:"minute",timePickerProps:{useAmPm:!0,showArrowButtons:!1},
 showTimezoneSelect:!1,disableTimezoneSelect:!0}:{},...g,onChange:e=>{z(e)},
 value:C??""})),i&&c&&e.createElement(lm,null,c))},XN=t=>{
 const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,errorText:l,id:c,disabled:s,cancelButtonText:u="Cancel",updateButtonText:d="Update",language:h,displayFormat:f="YYYY-MM-DD",portalContainer:p,value:m,useTime:v,...g}=t,y=document.querySelector('div[role="dialog"].DialogContent'),b=cr(),w=e.useRef(m??[null,null]),[C,z]=e.useState(m??[null,null]),[M,x]=e.useState()
-;return e.createElement(WN,{
+;return e.useEffect((()=>{let e=location.href
+;document.body.addEventListener("click",(()=>{requestAnimationFrame((()=>{
+e!==location.href&&(x(!1),setTimeout((()=>{x(void 0)}),0),e=location.href)}))
+}),!0)}),[]),e.createElement(WN,{
 id:`${v?"datetime":"date"}-range-picker-container-${c??""}`.trim(),
 "aria-invalid":i,dir:b.direction},a&&e.createElement(Do,{htmlFor:t.id,
 className:"input-label"
@@ -13060,9 +13071,9 @@ $inputLength:f.length-(v?1:0),$isErrored:i,disabled:t.disabled
 locale:h||"en-US",maxDate:$N(new Date).add(10,"years").toDate(),
 minDate:$N(new Date).subtract(100,"years").toDate(),fill:!0,
 highlightCurrentDay:!0,shortcuts:!1,startInputProps:{placeholder:n||f,name:r,
-id:`start-${c}`,"aria-disabled":s},endInputProps:{placeholder:n||f,name:r,
-id:`end-${c}`,"aria-disabled":s},dayPickerProps:{disabled:s,dir:b.direction,
-components:{Dropdown:t=>e.createElement(qN,{...t,disabled:s})}},
+id:"start-date-picker-input","aria-disabled":s},endInputProps:{placeholder:n||f,
+name:r,id:"end-date-picker-input","aria-disabled":s},dayPickerProps:{disabled:s,
+dir:b.direction,components:{Dropdown:t=>e.createElement(qN,{...t,disabled:s})}},
 footerElement:u||d?e.createElement(YN,null,u&&e.createElement(xm,{
 variant:"secondary",disabled:s,onClick:()=>{
 z(m??[null,null]),x(!1),setTimeout((()=>{x(void 0)}),0)}
@@ -16710,7 +16721,8 @@ readOnly:p,disabled:n}),placeholder:l,
 endAdornment:e.createElement(Up,null,e.createElement(Vo,{...k({disabled:n,
 readOnly:p,"aria-label":"toggle-button"})},e.createElement(Ip,{$isOpen:$,
 fill:M.colors.text.primary,width:8,height:8}))),style:w
-}),!p&&!n&&e.createElement(Fp,{$isOpen:L,...R({disabled:n,readOnly:p})
+}),!p&&!n&&e.createElement(Fp,{className:"ItemsContainer",$isOpen:L,...R({
+disabled:n,readOnly:p})
 },x?e.createElement(jp,null,e.createElement(wm,null)):e.createElement(e.Fragment,null,L&&0===_.length&&e.createElement($p,{
 readOnly:!0},g||"No items"),L&&_.map(((t,n)=>{
 const r="string"==typeof t?t:t?.[m];return e.createElement(e.Fragment,{key:r
@@ -16839,7 +16851,8 @@ Y([]),F(""),e.stopPropagation(),e.preventDefault()}},e.createElement(ro,{
 fill:O.colors.text.primary})),!z&&e.createElement(Vo,{...Z({disabled:c,
 readOnly:l,dir:O.direction})},e.createElement(Ip,{$isOpen:ne,
 fill:O.colors.text.primary,width:8,height:8}))),!l&&!c&&e.createElement(Fp,{
-$isOpen:K,...J({disabled:c,readOnly:l,dir:O.direction})
+className:"ItemsContainer",$isOpen:K,...J({disabled:c,readOnly:l,dir:O.direction
+})
 },_?e.createElement(jp,null,e.createElement(wm,null)):e.createElement(e.Fragment,null,K&&(0===G.length||b)&&e.createElement($p,{
 readOnly:!0},b?e.createElement(Bp,{tabIndex:0,onClick:e=>{
 e.stopPropagation(),oe(N),N&&re?.onClick?.(e)}

package/lib/index.js

@@ -3932,7 +3932,8 @@ readOnly:f,disabled:n}),placeholder:l,
 endAdornment:t.createElement(hm,null,t.createElement(Qo,{...k({disabled:n,
 readOnly:f,"aria-label":"toggle-button"})},t.createElement(am,{$isOpen:$,
 fill:M.colors.text.primary,width:8,height:8}))),style:w
-}),!f&&!n&&t.createElement(cm,{$isOpen:L,...P({disabled:n,readOnly:f})
+}),!f&&!n&&t.createElement(cm,{className:"ItemsContainer",$isOpen:L,...P({
+disabled:n,readOnly:f})
 },x?t.createElement(dm,null,t.createElement(Bm,null)):t.createElement(t.Fragment,null,L&&0===_.length&&t.createElement(sm,{
 readOnly:!0},g||"No items"),L&&_.map(((e,n)=>{
 const r="string"==typeof e?e:e?.[m];return t.createElement(t.Fragment,{key:r
@@ -4765,8 +4766,8 @@ endAdornment:t.createElement(hm,null,!l&&!i&&!s&&L&&t.createElement(Qo,{
 style:{borderRadius:"50%"}},t.createElement(xo,{fill:_.colors.text.primary
 })),t.createElement(Qo,{...V({disabled:l,readOnly:i,"aria-label":"toggle-button"
 })},t.createElement(am,{$isOpen:B,fill:_.colors.text.primary,width:8,height:8
-}))),style:b}),!i&&!l&&t.createElement(cm,{$isOpen:A,...T({disabled:l,readOnly:i
-})
+}))),style:b}),!i&&!l&&t.createElement(cm,{className:"ItemsContainer",$isOpen:A,
+...T({disabled:l,readOnly:i})
 },E?t.createElement(dm,null,t.createElement(Bm,null)):t.createElement(t.Fragment,null,A&&0===H.length&&t.createElement(t.Fragment,null,f?t.createElement(sm,null,t.createElement(um,{
 onClick:e=>{e.stopPropagation(),m&&m({inputValue:N,customValues:!0}),O("")}
 },y?.(N)||"Click to add")):t.createElement(sm,{readOnly:!0
@@ -4987,7 +4988,8 @@ Y([]),F(""),e.stopPropagation(),e.preventDefault()}},t.createElement(xo,{
 fill:O.colors.text.primary})),!z&&t.createElement(Qo,{...Z({disabled:c,
 readOnly:l,dir:O.direction})},t.createElement(am,{$isOpen:ne,
 fill:O.colors.text.primary,width:8,height:8}))),!l&&!c&&t.createElement(cm,{
-$isOpen:K,...J({disabled:c,readOnly:l,dir:O.direction})
+className:"ItemsContainer",$isOpen:K,...J({disabled:c,readOnly:l,dir:O.direction
+})
 },_?t.createElement(dm,null,t.createElement(Bm,null)):t.createElement(t.Fragment,null,K&&(0===G.length||b)&&t.createElement(sm,{
 readOnly:!0},b?t.createElement(um,{tabIndex:0,onClick:e=>{
 e.stopPropagation(),oe(N),N&&re?.onClick?.(e)}
@@ -12744,6 +12746,10 @@ TIME_SECONDS:"HH:mm:ss",TIME_MS:"HH:mm:ss.SSS",WEEK:"GGGG-[W]WW",MONTH:"YYYY-MM"
   .bp5-portal {
     --rdp-accent-color: ${({theme:e})=>e.colors.common.accent};
     --rdp-accent-color-dark: #215db0;
+    .SelectContent,
+    .ItemsContainer {
+      z-index: ${({theme:e})=>e.zIndex.modal||Wo.modal};
+    }
     .bp5-overlay {
       .bp5-overlay-backdrop {
         bottom: 0;
@@ -12754,9 +12760,10 @@ TIME_SECONDS:"HH:mm:ss",TIME_MS:"HH:mm:ss.SSS",WEEK:"GGGG-[W]WW",MONTH:"YYYY-MM"
         opacity: 1;
         overflow: auto;
         user-select: none;
+        z-index: ${({theme:e})=>e.zIndex.modal||Wo.modal};
       }
       .bp5-overlay-content {
-        z-index: ${({theme:e})=>e.zIndex.popover||Wo.popover};
+        z-index: ${({theme:e})=>e.zIndex.modal||Wo.modal};
         border: 1px solid ${({theme:e})=>e.colors.border.light};
         box-shadow:
           0px 2px 4px ${({theme:e})=>Yo(e.colors.shadow,.06)},
@@ -13094,7 +13101,10 @@ className:`${e.className??""} bp-custom-dropdown bp-custom-dropdown-${e.name??""
 onChange:t=>{e?.onChange?.({target:{value:t?.id}})}})}
 return t.createElement(Vb,{itemToString:()=>"",type:"button"})},EF=e=>{
 const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,language:l,errorText:c,id:s,cancelButtonText:u="Cancel",updateButtonText:d="Update",disabled:h,displayFormat:p="YYYY-MM-DD",portalContainer:f,value:m,useTime:v,...g}=e,y=document.querySelector('div[role="dialog"].DialogContent'),b=Hr(),w=t.useRef(m??null),[C,z]=t.useState(m??null),[M,x]=t.useState()
-;return t.createElement(CF,{
+;return t.useEffect((()=>{let e=location.href
+;document.body.addEventListener("click",(()=>{requestAnimationFrame((()=>{
+e!==location.href&&(x(!1),setTimeout((()=>{x(void 0)}),0),e=location.href)}))
+}),!0)}),[]),t.createElement(CF,{
 id:`${v?"datetime":"date"}-picker-container-${s??""}`.trim(),"aria-invalid":i,
 dir:b.direction},a&&t.createElement(Zo,{htmlFor:e.id,className:"input-label"
 },a,a&&o&&t.createElement(Jo,null,"*")),t.createElement(zF,{$isErrored:i,
@@ -13120,7 +13130,10 @@ value:C??""})),i&&c&&t.createElement(Dm,null,c))},SF=e=>{
 const{displayFormat:n="YYYY-MM-DD hh:mm A",...r}=e;return t.createElement(EF,{
 ...r,displayFormat:n,useTime:!0})},_F=e=>{
 const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,errorText:l,id:c,disabled:s,cancelButtonText:u="Cancel",updateButtonText:d="Update",language:h,displayFormat:p="YYYY-MM-DD",portalContainer:f,value:m,useTime:v,...g}=e,y=document.querySelector('div[role="dialog"].DialogContent'),b=Hr(),w=t.useRef(m??[null,null]),[C,z]=t.useState(m??[null,null]),[M,x]=t.useState()
-;return t.createElement(CF,{
+;return t.useEffect((()=>{let e=location.href
+;document.body.addEventListener("click",(()=>{requestAnimationFrame((()=>{
+e!==location.href&&(x(!1),setTimeout((()=>{x(void 0)}),0),e=location.href)}))
+}),!0)}),[]),t.createElement(CF,{
 id:`${v?"datetime":"date"}-range-picker-container-${c??""}`.trim(),
 "aria-invalid":i,dir:b.direction},a&&t.createElement(Zo,{htmlFor:e.id,
 className:"input-label"
@@ -13130,9 +13143,9 @@ $inputLength:p.length-(v?1:0),$isErrored:i,disabled:e.disabled
 locale:h||"en-US",maxDate:vF(new Date).add(10,"years").toDate(),
 minDate:vF(new Date).subtract(100,"years").toDate(),fill:!0,
 highlightCurrentDay:!0,shortcuts:!1,startInputProps:{placeholder:n||p,name:r,
-id:`start-${c}`,"aria-disabled":s},endInputProps:{placeholder:n||p,name:r,
-id:`end-${c}`,"aria-disabled":s},dayPickerProps:{disabled:s,dir:b.direction,
-components:{Dropdown:e=>t.createElement(xF,{...e,disabled:s})}},
+id:"start-date-picker-input","aria-disabled":s},endInputProps:{placeholder:n||p,
+name:r,id:"end-date-picker-input","aria-disabled":s},dayPickerProps:{disabled:s,
+dir:b.direction,components:{Dropdown:e=>t.createElement(xF,{...e,disabled:s})}},
 footerElement:u||d?t.createElement(wF,null,u&&t.createElement(Gm,{
 variant:"secondary",disabled:s,onClick:()=>{
 z(m??[null,null]),x(!1),setTimeout((()=>{x(void 0)}),0)}

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "2.0.74",
+  "version": "2.0.76",
   "description": "React Ui Components for Freemium Apps",
   "main": "./index.js",
   "module": "./index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "2.0.74",
+  "version": "2.0.76",
   "description": "React Ui Components for Freemium Apps",
   "main": "lib/index.cjs.js",
   "module": "lib/index.js",