@bikdotai/bik-component-library 0.0.635-2 → 0.0.635-4

package/dist/cjs/components/datePicker/DatePickerWrapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-calendar"),a=require("../../hooks/useOutside.js"),n=require("../../utils/DateUtils.js"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/calendar.svg.js"),s=require("../TypographyStyle.js"),l=require("./DatePickerWrapper.styled.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c,d=u(t),O=u(r);exports.DateButtonType=void 0,(c=exports.DateButtonType||(exports.DateButtonType={})).DEFAULT="default",c.LARGE="large";exports.DatePickerWrapper=r=>{let{val:u,onChange:c,calendarProps:p,disabled:y,pickerStyles:g,nativeID:D,maxDate:S,minDate:L,dateButtonType:f,dateButtonStyles:C}=r;const[v,b]=t.useState(!1),[j,x]=t.useState(!1),R=t.useRef(null),m=t.useRef(null),h=d.default.createRef();a.useOutside(h,(()=>{b(!1)})),t.useEffect((()=>{if(R.current&&m.current){const e=R.current.getBoundingClientRect(),t=m.current.offsetHeight,r=window.innerHeight-e.bottom;x(r<t)}}),[v]);const B=()=>{var e,t,r,a;return u?Array.isArray(u)?(null===(e=null==u?void 0:u[0])||void 0===e?void 0:e.toString())&&(null===(t=null==u?void 0:u[1])||void 0===t?void 0:t.toString())?`${new Date(null===(r=null==u?void 0:u[0])||void 0===r?void 0:r.toString()).toLocaleDateString()}-${new Date(null===(a=null==u?void 0:u[1])||void 0===a?void 0:a.toString()).toLocaleDateString()}`:`${n.default.getPastDate(new Date,30).toLocaleDateString()}-${(new Date).toLocaleDateString()}`:new Date(u.toString()).toLocaleDateString():(new Date).toLocaleDateString()};return e.jsxs(e.Fragment,{children:[e.jsxs(l.DateBtn,Object.assign({id:D,ref:R,bgColor:y?o.COLORS.background.base:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary,onClick:()=>b(!v),dateButtonType:f||exports.DateButtonType.DEFAULT,style:C},{children:[f===exports.DateButtonType.LARGE?e.jsx(s.BodyPrimary,Object.assign({style:{color:y?o.COLORS.content.inactive:o.COLORS.content.primary,flex:1}},{children:B()})):e.jsx(s.BodySecondary,Object.assign({style:{color:y?o.COLORS.content.inactive:o.COLORS.content.primary,flex:1}},{children:B()})),e.jsx(i.default,{width:f===exports.DateButtonType.LARGE?24:20,height:f===exports.DateButtonType.LARGE?24:20,color:y?o.COLORS.content.inactive:o.COLORS.content.primary})]})),e.jsx(l.PickerContainer,Object.assign({ref:h,style:Object.assign(Object.assign({},g),{top:j?"auto":"calc(100% + 8px)",bottom:j?"calc(100% + 8px)":"auto"}),contentPrimary:o.COLORS.content.primary,subDued:o.COLORS.surface.subdued,brandColor:o.COLORS.background.brand,bgColor:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary},{children:e.jsx(O.default,Object.assign({tileClassName:["custom__tile"],className:["custom__calendar"],onChange:e=>{c(e),b(!1)},maxDate:S,minDate:L,value:u?Array.isArray(u)?2===u.length?[new Date(u[0]),new Date(u[1])]:null:new Date(u):null},p))}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-calendar"),a=require("../../hooks/useOutside.js"),n=require("../../utils/DateUtils.js"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/calendar.svg.js"),s=require("../TypographyStyle.js"),l=require("./DatePickerWrapper.styled.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c,d=u(r);exports.DateButtonType=void 0,(c=exports.DateButtonType||(exports.DateButtonType={})).DEFAULT="default",c.LARGE="large";exports.DatePickerWrapper=r=>{let{val:u,onChange:c,calendarProps:O,disabled:p,pickerStyles:y,nativeID:g,maxDate:D,minDate:S,dateButtonType:L,dateButtonStyles:C}=r;const[v,b]=t.useState(!1),[f,j]=t.useState(!1),x=t.useRef(null),m=t.useRef(null);a.useOutside(m,(()=>{b(!1)})),t.useEffect((()=>{if(x.current&&m.current){const e=x.current.getBoundingClientRect(),t=m.current.offsetHeight,r=window.innerHeight-e.bottom;j(r<t)}}),[v]);const R=()=>{var e,t,r,a;return u?Array.isArray(u)?(null===(e=null==u?void 0:u[0])||void 0===e?void 0:e.toString())&&(null===(t=null==u?void 0:u[1])||void 0===t?void 0:t.toString())?`${new Date(null===(r=null==u?void 0:u[0])||void 0===r?void 0:r.toString()).toLocaleDateString()}-${new Date(null===(a=null==u?void 0:u[1])||void 0===a?void 0:a.toString()).toLocaleDateString()}`:`${n.default.getPastDate(new Date,30).toLocaleDateString()}-${(new Date).toLocaleDateString()}`:new Date(u.toString()).toLocaleDateString():(new Date).toLocaleDateString()};return e.jsxs(e.Fragment,{children:[e.jsxs(l.DateBtn,Object.assign({id:g,ref:x,bgColor:p?o.COLORS.background.base:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary,onClick:()=>b(!v),dateButtonType:L||exports.DateButtonType.DEFAULT,style:C},{children:[L===exports.DateButtonType.LARGE?e.jsx(s.BodyPrimary,Object.assign({style:{color:p?o.COLORS.content.inactive:o.COLORS.content.primary,flex:1}},{children:R()})):e.jsx(s.BodySecondary,Object.assign({style:{color:p?o.COLORS.content.inactive:o.COLORS.content.primary,flex:1}},{children:R()})),e.jsx(i.default,{width:L===exports.DateButtonType.LARGE?24:20,height:L===exports.DateButtonType.LARGE?24:20,color:p?o.COLORS.content.inactive:o.COLORS.content.primary})]})),v&&!p&&e.jsx(l.PickerContainer,Object.assign({ref:m,style:Object.assign(Object.assign({},y),{top:f?"auto":"calc(100% + 8px)",bottom:f?"calc(100% + 8px)":"auto"}),contentPrimary:o.COLORS.content.primary,subDued:o.COLORS.surface.subdued,brandColor:o.COLORS.background.brand,bgColor:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary},{children:e.jsx(d.default,Object.assign({tileClassName:["custom__tile"],className:["custom__calendar"],onChange:e=>{c(e),b(!1)},maxDate:D,minDate:S,value:u?Array.isArray(u)?2===u.length?[new Date(u[0]),new Date(u[1])]:null:new Date(u):null},O))}))]})};

package/dist/esm/components/datePicker/DatePickerWrapper.js

@@ -1 +1 @@
-import{jsxs as t,Fragment as e,jsx as r}from"react/jsx-runtime";import n,{useState as o,useRef as a,useEffect as i}from"react";import l from"react-calendar";import{useOutside as c}from"../../hooks/useOutside.js";import s from"../../utils/DateUtils.js";import{COLORS as d}from"../../constants/Theme.js";import u from"../../assets/icons/calendar.svg.js";import{BodyPrimary as m,BodySecondary as g}from"../TypographyStyle.js";import{DateBtn as p,PickerContainer as D}from"./DatePickerWrapper.styled.js";var y;!function(t){t.DEFAULT="default",t.LARGE="large"}(y||(y={}));const f=f=>{let{val:b,onChange:v,calendarProps:h,disabled:j,pickerStyles:S,nativeID:w,maxDate:L,minDate:A,dateButtonType:C,dateButtonStyles:k}=f;const[x,O]=o(!1),[E,R]=o(!1),T=a(null),B=a(null),G=n.createRef();c(G,(()=>{O(!1)})),i((()=>{if(T.current&&B.current){const t=T.current.getBoundingClientRect(),e=B.current.offsetHeight,r=window.innerHeight-t.bottom;R(r<e)}}),[x]);const P=()=>{var t,e,r,n;return b?Array.isArray(b)?(null===(t=null==b?void 0:b[0])||void 0===t?void 0:t.toString())&&(null===(e=null==b?void 0:b[1])||void 0===e?void 0:e.toString())?`${new Date(null===(r=null==b?void 0:b[0])||void 0===r?void 0:r.toString()).toLocaleDateString()}-${new Date(null===(n=null==b?void 0:b[1])||void 0===n?void 0:n.toString()).toLocaleDateString()}`:`${s.getPastDate(new Date,30).toLocaleDateString()}-${(new Date).toLocaleDateString()}`:new Date(b.toString()).toLocaleDateString():(new Date).toLocaleDateString()};return t(e,{children:[t(p,Object.assign({id:w,ref:T,bgColor:j?d.background.base:d.surface.standard,borderColor:d.stroke.primary,onClick:()=>O(!x),dateButtonType:C||y.DEFAULT,style:k},{children:[C===y.LARGE?r(m,Object.assign({style:{color:j?d.content.inactive:d.content.primary,flex:1}},{children:P()})):r(g,Object.assign({style:{color:j?d.content.inactive:d.content.primary,flex:1}},{children:P()})),r(u,{width:C===y.LARGE?24:20,height:C===y.LARGE?24:20,color:j?d.content.inactive:d.content.primary})]})),r(D,Object.assign({ref:G,style:Object.assign(Object.assign({},S),{top:E?"auto":"calc(100% + 8px)",bottom:E?"calc(100% + 8px)":"auto"}),contentPrimary:d.content.primary,subDued:d.surface.subdued,brandColor:d.background.brand,bgColor:d.surface.standard,borderColor:d.stroke.primary},{children:r(l,Object.assign({tileClassName:["custom__tile"],className:["custom__calendar"],onChange:t=>{v(t),O(!1)},maxDate:L,minDate:A,value:b?Array.isArray(b)?2===b.length?[new Date(b[0]),new Date(b[1])]:null:new Date(b):null},h))}))]})};export{y as DateButtonType,f as DatePickerWrapper};
+import{jsxs as t,Fragment as e,jsx as r}from"react/jsx-runtime";import{useState as n,useRef as o,useEffect as a}from"react";import i from"react-calendar";import{useOutside as l}from"../../hooks/useOutside.js";import c from"../../utils/DateUtils.js";import{COLORS as s}from"../../constants/Theme.js";import d from"../../assets/icons/calendar.svg.js";import{BodyPrimary as u,BodySecondary as m}from"../TypographyStyle.js";import{DateBtn as g,PickerContainer as p}from"./DatePickerWrapper.styled.js";var D;!function(t){t.DEFAULT="default",t.LARGE="large"}(D||(D={}));const y=y=>{let{val:b,onChange:f,calendarProps:v,disabled:h,pickerStyles:j,nativeID:S,maxDate:w,minDate:L,dateButtonType:A,dateButtonStyles:C}=y;const[k,x]=n(!1),[O,E]=n(!1),T=o(null),R=o(null);l(R,(()=>{x(!1)})),a((()=>{if(T.current&&R.current){const t=T.current.getBoundingClientRect(),e=R.current.offsetHeight,r=window.innerHeight-t.bottom;E(r<e)}}),[k]);const B=()=>{var t,e,r,n;return b?Array.isArray(b)?(null===(t=null==b?void 0:b[0])||void 0===t?void 0:t.toString())&&(null===(e=null==b?void 0:b[1])||void 0===e?void 0:e.toString())?`${new Date(null===(r=null==b?void 0:b[0])||void 0===r?void 0:r.toString()).toLocaleDateString()}-${new Date(null===(n=null==b?void 0:b[1])||void 0===n?void 0:n.toString()).toLocaleDateString()}`:`${c.getPastDate(new Date,30).toLocaleDateString()}-${(new Date).toLocaleDateString()}`:new Date(b.toString()).toLocaleDateString():(new Date).toLocaleDateString()};return t(e,{children:[t(g,Object.assign({id:S,ref:T,bgColor:h?s.background.base:s.surface.standard,borderColor:s.stroke.primary,onClick:()=>x(!k),dateButtonType:A||D.DEFAULT,style:C},{children:[A===D.LARGE?r(u,Object.assign({style:{color:h?s.content.inactive:s.content.primary,flex:1}},{children:B()})):r(m,Object.assign({style:{color:h?s.content.inactive:s.content.primary,flex:1}},{children:B()})),r(d,{width:A===D.LARGE?24:20,height:A===D.LARGE?24:20,color:h?s.content.inactive:s.content.primary})]})),k&&!h&&r(p,Object.assign({ref:R,style:Object.assign(Object.assign({},j),{top:O?"auto":"calc(100% + 8px)",bottom:O?"calc(100% + 8px)":"auto"}),contentPrimary:s.content.primary,subDued:s.surface.subdued,brandColor:s.background.brand,bgColor:s.surface.standard,borderColor:s.stroke.primary},{children:r(i,Object.assign({tileClassName:["custom__tile"],className:["custom__calendar"],onChange:t=>{f(t),x(!1)},maxDate:w,minDate:L,value:b?Array.isArray(b)?2===b.length?[new Date(b[0]),new Date(b[1])]:null:new Date(b):null},v))}))]})};export{D as DateButtonType,y as DatePickerWrapper};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.635-2",
+	"version": "0.0.635-4",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",