freemium-ui 2.0.67 → 2.0.69

package/buildspec.yml

@@ -0,0 +1,22 @@
+version: 0.2
+
+phases:
+  install:
+    runtime-versions:
+      nodejs: 18
+  pre_build:
+    commands:
+      #- cd freemium-ui
+      - echo Installing source NPM dependencies...
+      - npm install
+  build:
+    commands:
+      - echo Build started on 'date'
+      - npm run build-storybook
+artifacts:
+  files:
+    - '**/*'
+    #- "my-app/build/**/*"
+  #base-directory: 'freemium-ui/build'
+  base-directory: 'storybook-static'
+  #discard-paths: yes

package/lib/index.cjs.js

@@ -13235,6 +13235,7 @@ TIME_SECONDS:"HH:mm:ss",TIME_MS:"HH:mm:ss.SSS",WEEK:"GGGG-[W]WW",MONTH:"YYYY-MM"
 .bp5-daterangepicker-timepickers.bp5-daterangepicker-timepickers-stacked{
   align-items:center;
   flex-direction:column;
+  gap: 8px;
 }
 
 .bp5-dark .bp5-daterangepicker.bp5-datepicker .rdp-day_hovered{
@@ -17234,42 +17235,42 @@ e.preventDefault(),a?.("button",e)},"aria-label":i},i)),u&&e.createElement(Yy,{
 asChild:!0},e.createElement(xm,{variant:"primary","aria-disabled":s,disabled:s,
 onClick:e=>{e.preventDefault(),o?.(e)},"aria-label":u},u))))))
 },exports.CrossIcon=ro,exports.DatePicker=t=>{
-const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,language:l,errorText:c,id:s,todayButtonText:u="Today",clearButtonText:d="Clear",disabled:h,displayFormat:p="YYYY-MM-DD",...f}=t,m=document.querySelector('div[role="dialog"].DialogContent'),v=cr()
+const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,language:l,errorText:c,id:s,todayButtonText:u="Today",clearButtonText:d="Clear",disabled:h,displayFormat:p="YYYY-MM-DD",portalContainer:f,...m}=t,v=document.querySelector('div[role="dialog"].DialogContent'),g=cr()
 ;return e.createElement(WN,{id:`date-picker-container-${s??""}`.trim(),
-"aria-invalid":i,dir:v.direction},a&&e.createElement(Do,{htmlFor:t.id,
+"aria-invalid":i,dir:g.direction},a&&e.createElement(Do,{htmlFor:t.id,
 className:"input-label"
 },a,a&&o&&e.createElement(Ao,null,"*")),e.createElement(GN,{$isErrored:i,
 disabled:t.disabled}),e.createElement(vN,{canClearSelection:!0,
 closeOnSelection:!1,disabled:h,todayButtonText:u,clearButtonText:d,
 locale:l||"en",maxDate:FN(new Date).add(10,"years").toDate(),fill:!0,
 highlightCurrentDay:!0,inputProps:{placeholder:n||p,name:r,id:s,
-"aria-disabled":h},dayPickerProps:{disabled:h,dir:v.direction,components:{
+"aria-disabled":h},dayPickerProps:{disabled:h,dir:g.direction,components:{
 Dropdown:t=>e.createElement(qN,{...t,disabled:h})}},showActionsBar:!0,
 popoverProps:{hasBackdrop:!0,minimal:!1,
-placement:"ltr"===v.direction?"bottom-start":"bottom-end",usePortal:!0,
-portalContainer:m||void 0},parseDate:e=>e?FN(e).toDate():new Date,
-formatDate:e=>e?FN(e).format(p):"",...f}),i&&c&&e.createElement(lm,null,c))
+placement:"ltr"===g.direction?"bottom-start":"bottom-end",usePortal:!0,
+portalContainer:f??(v||void 0)},parseDate:e=>e?FN(e).toDate():new Date,
+formatDate:e=>e?FN(e).format(p):"",...m}),i&&c&&e.createElement(lm,null,c))
 },exports.DateRangePicker=t=>{
-const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,errorText:l,id:c,disabled:s,clearButtonText:u="Clear",language:d,displayFormat:h="YYYY-MM-DD",...p}=t,f=cr(),m=document.querySelector('div[role="dialog"].DialogContent')
+const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,errorText:l,id:c,disabled:s,clearButtonText:u="Clear",language:d,displayFormat:h="YYYY-MM-DD",portalContainer:p,...f}=t,m=cr(),v=document.querySelector('div[role="dialog"].DialogContent')
 ;return e.createElement(WN,{id:`date-picker-container-${c??""}`.trim(),
-"aria-invalid":i,dir:f.direction},a&&e.createElement(Do,{htmlFor:t.id,
+"aria-invalid":i,dir:m.direction},a&&e.createElement(Do,{htmlFor:t.id,
 className:"input-label"
 },a,a&&o&&e.createElement(Ao,null,"*")),e.createElement(GN,{$isErrored:i,
-disabled:t.disabled}),e.createElement(PN,{closeOnSelection:!1,disabled:s,
+disabled:t.disabled}),e.createElement(PN,{closeOnSelection:!0,disabled:s,
 locale:d||"en",maxDate:FN(new Date).add(10,"years").toDate(),fill:!0,
 highlightCurrentDay:!0,shortcuts:!1,startInputProps:{placeholder:n||h,name:r,
 id:`start-${c}`,"aria-disabled":s},endInputProps:{placeholder:n||h,name:r,
-id:`end-${c}`,"aria-disabled":s},dayPickerProps:{disabled:s,dir:f.direction,
+id:`end-${c}`,"aria-disabled":s},dayPickerProps:{disabled:s,dir:m.direction,
 components:{Dropdown:t=>e.createElement(qN,{...t,disabled:s})}},
 footerElement:e.createElement(YN,null,e.createElement(UN,{onClick:()=>{
-p.onChange?.([null,null])}},u)),popoverProps:{hasBackdrop:!0,minimal:!1,
-placement:"ltr"===f.direction?"bottom-start":"bottom-end",usePortal:!0,
-portalContainer:m||void 0},parseDate:e=>e?FN(e).toDate():new Date,
-formatDate:e=>e?FN(e).format(h):"",...p}),i&&l&&e.createElement(lm,null,l))
+f.onChange?.([null,null])}},u)),popoverProps:{hasBackdrop:!0,minimal:!1,
+placement:"ltr"===m.direction?"bottom-start":"bottom-end",usePortal:!0,
+portalContainer:p??(v||void 0)},parseDate:e=>e?FN(e).toDate():new Date,
+formatDate:e=>e?FN(e).format(h):"",...f}),i&&l&&e.createElement(lm,null,l))
 },exports.DateTimePicker=t=>{
-const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,errorText:l,id:c,todayButtonText:s="Today",clearButtonText:u="Clear",language:d,disabled:h,displayFormat:p="YYYY-MM-DD hh:mm A",...f}=t,m=document.querySelector('div[role="dialog"].DialogContent'),v=cr()
+const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,errorText:l,id:c,todayButtonText:s="Today",clearButtonText:u="Clear",language:d,disabled:h,displayFormat:p="YYYY-MM-DD hh:mm A",portalContainer:f,...m}=t,v=document.querySelector('div[role="dialog"].DialogContent'),g=cr()
 ;return e.createElement(WN,{id:`datetime-picker-container-${c??""}`.trim(),
-"aria-invalid":i,dir:v.direction},a&&e.createElement(Do,{htmlFor:t.id,
+"aria-invalid":i,dir:g.direction},a&&e.createElement(Do,{htmlFor:t.id,
 className:"input-label"
 },a,a&&o&&e.createElement(Ao,null,"*")),e.createElement(GN,{$isErrored:i,
 disabled:t.disabled}),e.createElement(vN,{canClearSelection:!0,
@@ -17277,31 +17278,31 @@ closeOnSelection:!1,disabled:h,locale:d||"en",todayButtonText:s,
 clearButtonText:u,maxDate:FN(new Date).add(10,"years").toDate(),
 minDate:FN(new Date).subtract(100,"years").toDate(),fill:!0,
 highlightCurrentDay:!0,inputProps:{placeholder:n||p,name:r,id:c,
-"aria-disabled":h},dayPickerProps:{disabled:h,dir:v.direction,components:{
+"aria-disabled":h},dayPickerProps:{disabled:h,dir:g.direction,components:{
 Dropdown:t=>e.createElement(qN,{...t,disabled:h})}},showActionsBar:!0,
 timePrecision:"minute",timePickerProps:{useAmPm:!0,showArrowButtons:!1},
 showTimezoneSelect:!1,disableTimezoneSelect:!0,popoverProps:{hasBackdrop:!0,
-minimal:!1,placement:"ltr"===v.direction?"bottom-start":"bottom-end",
-usePortal:!0,portalContainer:m||void 0},parseDate:e=>e?FN(e).toDate():new Date,
-formatDate:e=>e?FN(e).format(p):"",...f}),i&&l&&e.createElement(lm,null,l))
-},exports.DateTimeRangePicker=t=>{
-const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,errorText:l,id:c,clearButtonText:s="Clear",language:u,disabled:d,displayFormat:h="YYYY-MM-DD hh:mm A",...p}=t,f=cr(),m=document.querySelector('div[role="dialog"].DialogContent')
+minimal:!1,placement:"ltr"===g.direction?"bottom-start":"bottom-end",
+usePortal:!0,portalContainer:f??(v||void 0)},
+parseDate:e=>e?FN(e).toDate():new Date,formatDate:e=>e?FN(e).format(p):"",...m
+}),i&&l&&e.createElement(lm,null,l))},exports.DateTimeRangePicker=t=>{
+const{placeholder:n,name:r,isRequired:o,label:a,isErrored:i,errorText:l,id:c,clearButtonText:s="Clear",language:u,disabled:d,displayFormat:h="YYYY-MM-DD hh:mm A",portalContainer:p,...f}=t,m=cr(),v=document.querySelector('div[role="dialog"].DialogContent')
 ;return e.createElement(WN,{id:`date-picker-container-${c??""}`.trim(),
-"aria-invalid":i,dir:f.direction},a&&e.createElement(Do,{htmlFor:t.id,
+"aria-invalid":i,dir:m.direction},a&&e.createElement(Do,{htmlFor:t.id,
 className:"input-label"
 },a,a&&o&&e.createElement(Ao,null,"*")),e.createElement(GN,{$isErrored:i,
-disabled:t.disabled}),e.createElement(PN,{closeOnSelection:!1,disabled:d,
+disabled:t.disabled}),e.createElement(PN,{closeOnSelection:!0,disabled:d,
 locale:u||"en",maxDate:FN(new Date).add(10,"years").toDate(),fill:!0,
 highlightCurrentDay:!0,shortcuts:!1,startInputProps:{placeholder:n||h,name:r,
 id:`start-${c}`,"aria-disabled":d},endInputProps:{placeholder:n||h,name:r,
-id:`end-${c}`,"aria-disabled":d},dayPickerProps:{disabled:d,dir:f.direction,
+id:`end-${c}`,"aria-disabled":d},dayPickerProps:{disabled:d,dir:m.direction,
 components:{Dropdown:t=>e.createElement(qN,{...t,disabled:d})}},
 timePrecision:"minute",timePickerProps:{useAmPm:!0,showArrowButtons:!1},
 footerElement:e.createElement(YN,null,e.createElement(UN,{onClick:()=>{
-p.onChange?.([null,null])}},s)),popoverProps:{hasBackdrop:!0,minimal:!1,
-placement:"ltr"===f.direction?"bottom-start":"bottom-end",usePortal:!0,
-portalContainer:m||void 0},parseDate:e=>e?FN(e).toDate():new Date,
-formatDate:e=>e?FN(e).format(h):"",...p}),i&&l&&e.createElement(lm,null,l))
+f.onChange?.([null,null])}},s)),popoverProps:{hasBackdrop:!0,minimal:!1,
+placement:"ltr"===m.direction?"bottom-start":"bottom-end",usePortal:!0,
+portalContainer:p??(v||void 0)},parseDate:e=>e?FN(e).toDate():new Date,
+formatDate:e=>e?FN(e).format(h):"",...f}),i&&l&&e.createElement(lm,null,l))
 },exports.Drawer=({isOpen:t,children:n,hideDismissIcon:r,customClass:o="",size:a="default",isFullHeight:i=!0,placement:l="right",clickOutToClose:c=!1,onDismiss:s})=>{
 const u=cr(),d="rtl"===u.direction?"right"===l?"left":"right":l
 ;return e.createElement(rb,{open:t,onOpenChange:e=>{e||s?.()}
@@ -17500,41 +17501,52 @@ exports.Tag=Ab,exports.TextArea=mm,exports.ThemeProvider=t=>e.createElement(sr,{
 theme:t.theme
 },e.createElement(yY,null),e.createElement(pW,null,t.children)),exports.Themes=Ho,
 exports.TickIcon=so,exports.TimePicker=t=>{
-const{isRequired:n,label:r,isErrored:o,errorText:a,id:i,disabled:l,precision:c="minute",useAmPm:s,value:u="",onChange:d}=t,h=cr()
+const{isRequired:n,label:r,isErrored:o,errorText:a,id:i,disabled:l,precision:c="minute",useAmPm:s,value:u="",onChange:d}=t,h=cr(),[p,f]=e.useState(["","","","",""])
+;e.useEffect((()=>{if(u){
+const[e="",t="",n=""]=u.split(":"),r=n?.split(".")[1]??""
+;f([e,t,n.split(".")[0],r,s?Number(e)>12?"PM":"AM":""])}else f(["","","","",""])
+}),[]);const m=(e,t)=>{const n=[...p];switch(e){case"hours":n[0]=t;break
+;case"minutes":n[1]=t;break;case"seconds":n[2]=t;break;case"milliseconds":n[3]=t
+;break;case"AMPM":n[4]=t}
+const r=n[0],o=n[1],a="second"===c||"millisecond"===c?n[2]:void 0,i="millisecond"===c?n[3]:void 0
+;f(n)
+;const l=`${s&&"PM"===n[4]?Number(r)+12:r}:${o}${a?`:${a}`:""}${i?`.${i}`:""}`
+;"Invalid Date"===new Date(`2021-01-01T${l}Z`).toString()||d?.(l)}
 ;return e.createElement($N,{id:`datetime-picker-container-${i??""}`.trim()
 },r&&e.createElement(Do,{htmlFor:t.id,className:"input-label"
 },r,r&&n&&e.createElement(Ao,null,"*")),e.createElement(BN,null,e.createElement(jN,{
 className:"time-picker-input picker-hours",type:"number",
 placeholder:s?"hh":"HH",disabled:l,dir:h.direction,min:s?1:0,max:s?12:23,
-value:u?FN(new Date(u)).format(s?"hh":"HH"):"",onChange:e=>{
-const t=Number(e.target.value);if(s&&(t<1||t>12))return
-;if(!s&&(t<0||t>23))return
-;const n=u?FN(new Date(u)):FN(),r=n.hour(s&&"PM"===n.format("A")?t+12:t)
-;d?.(r.toISOString())},isErrored:o,"aria-invalid":o,errorText:a
+value:p[0],onChange:e=>{
+e.target.value.length>2||f((t=>[e.target.value,t[1],t[2],t[3],t[4]]))},
+onBlur:e=>{const t=Number(e.target.value),n=s?t>12?12:t<1?1:t:t>23?23:t<0?0:t
+;m("hours",n<10?`0${n}`:n.toString())},isErrored:o,"aria-invalid":o,errorText:a
 }),e.createElement("span",null,":"),e.createElement(jN,{
 className:"time-picker-input picker-minutes",type:"number",placeholder:"mm",
-disabled:l,dir:h.direction,min:0,max:59,value:u?FN(new Date(u)).format("mm"):"",
-onChange:e=>{const t=Number(e.target.value);if(t<0||t>59)return
-;const n=(u?FN(new Date(u)):FN()).minute(t);d?.(n.toISOString())},isErrored:o,
-"aria-invalid":o,errorText:a
+disabled:l,dir:h.direction,min:0,max:59,value:p[1],onChange:e=>{
+e.target.value.length>2||f((t=>[t[0],e.target.value,t[2],t[3],t[4]]))},
+onBlur:e=>{const t=Number(e.target.value),n=t>59?59:t<0?0:t
+;m("minutes",n<10?`0${n}`:n.toString())},isErrored:o,"aria-invalid":o,
+errorText:a
 }),("millisecond"===c||"second"===c)&&e.createElement(e.Fragment,null,e.createElement("span",null,":"),e.createElement(jN,{
 className:"time-picker-input picker-seconds",type:"number",placeholder:"ss",
-disabled:l,dir:h.direction,min:0,max:59,value:u?FN(new Date(u)).format("ss"):"",
-onChange:e=>{const t=Number(e.target.value);if(t<0||t>59)return
-;const n=(u?FN(new Date(u)):FN()).second(t);d?.(n.toISOString())},isErrored:o,
-"aria-invalid":o,errorText:a
+disabled:l,dir:h.direction,min:0,max:59,value:p[2],onChange:e=>{
+e.target.value.length>2||f((t=>[t[0],t[1],e.target.value,t[3],t[4]]))},
+onBlur:e=>{const t=Number(e.target.value),n=t>59?59:t<0?0:t
+;m("seconds",n<10?`0${n}`:n.toString())},isErrored:o,"aria-invalid":o,
+errorText:a
 })),"millisecond"===c&&e.createElement(e.Fragment,null,e.createElement("span",null,":"),e.createElement(jN,{
 className:"time-picker-input picker-milliseconds",type:"number",
-placeholder:"SSS",disabled:l,dir:h.direction,min:0,max:999,
-value:u?FN(new Date(u)).format("SSS"):"",onChange:e=>{
-const t=Number(e.target.value);if(t<0||t>999)return
-;const n=(u?FN(new Date(u)):FN()).millisecond(t);d?.(n.toISOString())},
-isErrored:o,"aria-invalid":o,errorText:a})),s&&e.createElement(ab,{
+placeholder:"SSS",disabled:l,dir:h.direction,min:0,max:999,value:p[3],
+onChange:e=>{
+e.target.value.length>3||f((t=>[t[0],t[1],t[2],e.target.value,t[4]]))},
+onBlur:e=>{const t=Number(e.target.value.slice(0,3)),n=t>999?999:t<0?0:t
+;m("milliseconds",n<10?`00${n}`:n<100?`0${n}`:n.toString())},isErrored:o,
+"aria-invalid":o,errorText:a})),s&&e.createElement(ab,{
 itemToString:e=>e?.name??"",placeholder:"--",style:{marginLeft:"4px"},
-showTick:!1,defaultSelectedItem:u?ZN.find((e=>e.id===FN(u).format("A"))):null,
+showTick:!1,defaultSelectedItem:u?ZN.find((e=>e.id===p[4]))??null:null,
 width:"65px",itemIdentifier:"id",items:ZN,onChange:e=>{
-const t=FN(new Date(u)).hour(FN(u).hour()+("AM"===e?.id?-12:12))
-;d?.(t.toISOString())}})),o&&a&&e.createElement(lm,null,a))
+m("AMPM","AM"===e?.id?"AM":"PM")}})),o&&a&&e.createElement(lm,null,a))
 },exports.ToastProvider=pW,
 exports.Toggle=({handleChange:t,hasIcon:n=!1,on:r,isErrored:o,isRequired:a,size:i="md",thumbProps:l,...c})=>{
 const s=cr();return e.createElement(xW,{checked:r,onCheckedChange:e=>{t?.(e)},

package/lib/index.d.ts

@@ -1006,6 +1006,7 @@ type DefaultProps = {
      * Whether disabled select
      */
     disabled?: boolean;
+    portalContainer?: HTMLElement;
 };
 type DatePickerProps = DefaultProps & Partial<DateInput3Props> & {
     displayFormat?: string;