@bikdotai/bik-component-library 0.0.581-aidd-beta.18 → 0.0.581-beta-01

package/dist/esm/components/analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{Chart as t,CategoryScale as a,LinearScale as i,BarElement as n,Tooltip as r,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{useState as c,useEffect as v,useCallback as u}from"react";import{Bar as g}from"react-chartjs-2";import{BodyTiny as p,TitleRegular as h}from"../../../TypographyStyle.js";import{COLORS as b,FONTS as O}from"../../../../constants/Theme.js";import{truncateValueToK as f}from"../utils/calcPercentage.js";import{GraphContainerWrapper as m}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as y}from"./StackedBarDistributionChart.model.js";t.register(a,i,n,r,d,s),t.defaults.plugins.datalabels.display=!1;const T=t=>{var a,i,n,r,d,s,T,F,A,C,j,k,x,H,N,L,I,S,E,R,Z,_,D,w,z,B,P,M,W,V,Y,U;const[$,q]=c([]),[G,J]=c(),K=!t.data.filter((e=>!!e.value)).length,Q=t.colorMatrix&&t.colorMatrix.length?t.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"]],X={min:0,max:200,stepSize:20},ee={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},le={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:K?0:null!==(a=t.barThickness)&&void 0!==a?a:100},oe={plugins:{legend:{display:!1},tooltip:{enabled:!K,callbacks:{label:null===(i=t.tooltipConfig)||void 0===i?void 0:i.labelCallback,footer:null===(n=t.tooltipConfig)||void 0===n?void 0:n.footerCallback},footerFont:null===(d=null===(r=t.tooltipConfig)||void 0===r?void 0:r.footerStyles)||void 0===d?void 0:d.footerFont},datalabels:{display:null!==(s=!K&&t.showTotal)&&void 0!==s&&s,anchor:"end",align:"end",clamp:!0,formatter:(e,l)=>{var o;const t=l.datasetIndex,a=l.chart.data.datasets;if(t!==a.length-1)return"";const i=l.dataIndex;let n=0;for(let e=0;e<a.length;e++)n+=null!==(o=a[e].data[i])&&void 0!==o?o:0;return n?f(n):""},color:b.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===y.HORIZONTAL?"y":"x",layout:{padding:{right:t.showTotal&&t.orientation===y.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=y.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(t.orientation===y.HORIZONTAL?null===(T=t.valueTitle)||void 0===T?void 0:T.heading:null===(F=t.labelTitle)||void 0===F?void 0:F.heading),text:t.orientation===y.HORIZONTAL?null===(A=t.valueTitle)||void 0===A?void 0:A.heading:null===(C=t.labelTitle)||void 0===C?void 0:C.heading,color:null!==(x=t.orientation===y.HORIZONTAL?null===(j=t.valueTitle)||void 0===j?void 0:j.color:null===(k=t.labelTitle)||void 0===k?void 0:k.color)&&void 0!==x?x:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation===y.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:O.caption.fontSize,color:null!==(L=t.orientation===y.HORIZONTAL?null===(H=t.labelTitle)||void 0===H?void 0:H.color:null===(N=t.valueTitle)||void 0===N?void 0:N.color)&&void 0!==L?L:b.content.secondary},t.orientation===y.HORIZONTAL?K?X:ee:{}),{callback:(e,l)=>{var o,a;return t.orientation!==y.HORIZONTAL?null!==(a=null===(o=null==G?void 0:G.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:f(e)}}),stacked:!0},y:{title:{display:!!(t.orientation===y.HORIZONTAL?null===(I=t.labelTitle)||void 0===I?void 0:I.heading:null===(S=t.valueTitle)||void 0===S?void 0:S.heading),text:t.orientation===y.HORIZONTAL?null===(E=t.labelTitle)||void 0===E?void 0:E.heading:null===(R=t.valueTitle)||void 0===R?void 0:R.heading,color:null!==(D=t.orientation===y.HORIZONTAL?null===(Z=t.labelTitle)||void 0===Z?void 0:Z.color:null===(_=t.valueTitle)||void 0===_?void 0:_.color)&&void 0!==D?D:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation!==y.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({fontSize:O.caption.fontSize,color:null!==(B=t.orientation===y.HORIZONTAL?null===(w=t.valueTitle)||void 0===w?void 0:w.color:null===(z=t.labelTitle)||void 0===z?void 0:z.color)&&void 0!==B?B:b.content.secondary},t.orientation===y.HORIZONTAL?{}:K?X:ee),{callback:(e,l)=>{var o,a;return t.orientation===y.HORIZONTAL?null!==(a=null===(o=null==G?void 0:G.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:f(e)}}),stacked:!0}},onClick:(e,l)=>{if(!t.onBarClick)return;const o=l[0].datasetIndex,a=l[0].index,i=e.chart.data.datasets[o].label,n=e.chart.data.labels[a];t.onBarClick(n,i)},onHover:(e,l)=>{t.onBarClick&&l.length&&(e.native.target.style.cursor="pointer")}},te=Array.from(new Set(t.data.map((e=>e.label)))),ae={labels:(ie=te,ie.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:K?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var ie;v((()=>{const e=[];te.forEach(((l,o)=>{const a=[],i=t.data.filter((e=>e.label===l));t.isFunnel||i.sort(((e,l)=>l.value-e.value)),i.forEach(((e,l)=>{const t=((e,l,o)=>Q[e].slice(-o)[l])(o,l,i.length);a.push({color:t,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:t,data:Array(te.length).fill(0)},le);n.data[o]=e.value,ae.datasets.push(n)})),e.push(a)})),q(e),J(ae)}),[t.data]);const ne=u((()=>e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:re().map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}))),[$]),re=()=>{const e=[];return $.forEach(((l,o)=>{e.push({color:l[0].color,label:te[o]})})),e};if(!G)return e(o,{});return l(m,Object.assign({style:null!==(P=t.wrapperStyle)&&void 0!==P?P:{},padding:t.outerPadding,chartWrapperHeight:t.chartWrapperHeight,isFunnel:t.isFunnel},{children:[t.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(h,Object.assign({color:null!==(M=t.chartHeading.color)&&void 0!==M?M:b.content.secondary},{children:t.chartHeading.heading}))})),l("div",Object.assign({className:"graph__wrapper"},{children:[(null===(W=t.showLegend)||void 0===W||W)&&t.isFunnel&&ne(),e("div",Object.assign({style:{height:null!==(V=t.graphCanvasHeight)&&void 0!==V?V:500,width:null!==(Y=t.graphCanvasWidth)&&void 0!==Y?Y:"100%",flex:1}},{children:e(g,{options:oe,data:G})})),(null===(U=t.showLegend)||void 0===U||U)&&!t.isFunnel&&e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:$.map(((o,t)=>e("div",Object.assign({className:"legend__set"},{children:o.map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}),`Legend_set_${t}`)))}))]}))]}))};export{T as StackedBarDistributionChart};
+import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{Chart as t,CategoryScale as a,LinearScale as i,BarElement as n,Tooltip as r,Legend as d}from"chart.js";import s from"chartjs-plugin-datalabels";import{useState as c,useEffect as v,useCallback as u}from"react";import{Bar as g}from"react-chartjs-2";import{BodyTiny as p,TitleRegular as h}from"../../../TypographyStyle.js";import{COLORS as b,FONTS as O}from"../../../../constants/Theme.js";import{truncateValueToK as f}from"../utils/calcPercentage.js";import{GraphContainerWrapper as m}from"./StackedBarChart.styles.js";import{GRAPH_ORIENTATION as y}from"./StackedBarDistributionChart.model.js";t.register(a,i,n,r,d,s),t.defaults.plugins.datalabels.display=!1;const F=t=>{var a,i,n,r,d,s,F,T,A,C,j,k,x,E,H,N,L,I,S,D,R,Z,B,_,w,z,P,M,W,V,Y,U;const[$,q]=c([]),[G,J]=c(),K=!t.data.filter((e=>!!e.value)).length,Q=t.colorMatrix&&t.colorMatrix.length?t.colorMatrix:[["#09A35B","#33D2A1","#A8E5C0","#075E54","#128C7E","#25D366","#DCF8C6"],["#FC4183","#FCA0C2","#FEE3EF","#F5016C","#F972AD","#FCAACE","#FEE3EF"],["#1B95D6","#74B2E5","#A0D1F1","#0078D5","#55A5E3","#8EC3EC","#C6E1F6"],["#FF4F52","#FFA3A4","#FFD9DA","#FF0012","#FF797D","#FFC4C5","#F9DFDF"],["#4B2E91","#7B1FA2","#A77BCA","#5E07BB","#9E77ED","#D2AEFF","#EBDBFF"]],X={min:0,max:200,stepSize:20},ee={min:t.minValue,max:t.maxValue,stepSize:t.valuesStepSize},le={barPercentage:.4,categoryPercentage:1,pointStyle:"circle",barThickness:K?0:null!==(a=t.barThickness)&&void 0!==a?a:100},oe={plugins:{legend:{display:!1},tooltip:{enabled:!K,callbacks:{label:null===(i=t.tooltipConfig)||void 0===i?void 0:i.labelCallback,footer:null===(n=t.tooltipConfig)||void 0===n?void 0:n.footerCallback},footerFont:null===(d=null===(r=t.tooltipConfig)||void 0===r?void 0:r.footerStyles)||void 0===d?void 0:d.footerFont},datalabels:{display:null!==(s=!K&&t.showTotal)&&void 0!==s&&s,anchor:"end",align:"end",clamp:!0,formatter:(e,l)=>{var o;const t=l.datasetIndex,a=l.chart.data.datasets;if(t!==a.length-1)return"";const i=l.dataIndex;let n=0;for(let e=0;e<a.length;e++)n+=null!==(o=a[e].data[i])&&void 0!==o?o:0;return n?f(n):""},color:b.content.secondary}},responsive:!0,maintainAspectRatio:!1,legend:{display:!1},indexAxis:t.orientation===y.HORIZONTAL?"y":"x",layout:{padding:{right:t.showTotal&&t.orientation===y.HORIZONTAL?50:0,top:t.showTotal&&t.orientation!=y.HORIZONTAL?25:0}},scales:{x:{title:{display:!!(t.orientation===y.HORIZONTAL?null===(F=t.valueTitle)||void 0===F?void 0:F.heading:null===(T=t.labelTitle)||void 0===T?void 0:T.heading),text:t.orientation===y.HORIZONTAL?null===(A=t.valueTitle)||void 0===A?void 0:A.heading:null===(C=t.labelTitle)||void 0===C?void 0:C.heading,color:null!==(x=t.orientation===y.HORIZONTAL?null===(j=t.valueTitle)||void 0===j?void 0:j.color:null===(k=t.labelTitle)||void 0===k?void 0:k.color)&&void 0!==x?x:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation===y.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({stepSize:30,fontSize:O.caption.fontSize,color:null!==(N=t.orientation===y.HORIZONTAL?null===(E=t.labelTitle)||void 0===E?void 0:E.color:null===(H=t.valueTitle)||void 0===H?void 0:H.color)&&void 0!==N?N:b.content.secondary},t.orientation===y.HORIZONTAL?K?X:ee:{}),{callback:(e,l)=>{var o,a;return t.orientation!==y.HORIZONTAL?null!==(a=null===(o=null==G?void 0:G.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:f(e)}}),stacked:!0},y:{title:{display:!!(t.orientation===y.HORIZONTAL?null===(L=t.labelTitle)||void 0===L?void 0:L.heading:null===(I=t.valueTitle)||void 0===I?void 0:I.heading),text:t.orientation===y.HORIZONTAL?null===(S=t.labelTitle)||void 0===S?void 0:S.heading:null===(D=t.valueTitle)||void 0===D?void 0:D.heading,color:null!==(B=t.orientation===y.HORIZONTAL?null===(R=t.labelTitle)||void 0===R?void 0:R.color:null===(Z=t.valueTitle)||void 0===Z?void 0:Z.color)&&void 0!==B?B:b.content.secondary,font:{size:O.bodySecondary.fontSize}},grid:{display:t.orientation!==y.HORIZONTAL,color:b.background.base},ticks:Object.assign(Object.assign({fontSize:O.caption.fontSize,color:null!==(z=t.orientation===y.HORIZONTAL?null===(_=t.valueTitle)||void 0===_?void 0:_.color:null===(w=t.labelTitle)||void 0===w?void 0:w.color)&&void 0!==z?z:b.content.secondary},t.orientation===y.HORIZONTAL?{}:K?X:ee),{callback:(e,l)=>{var o,a;return t.orientation===y.HORIZONTAL?null!==(a=null===(o=null==G?void 0:G.labels)||void 0===o?void 0:o[l])&&void 0!==a?a:"":"number"!=typeof e?e:f(e)}}),stacked:!0}},onClick:(e,l)=>{if(!t.onBarClick)return;const o=l[0].datasetIndex,a=l[0].index,i=e.chart.data.datasets[o].label,n=e.chart.data.labels[a];t.onBarClick(n,i)},onHover:(e,l)=>{t.onBarClick&&l.length&&(e.native.target.style.cursor="pointer")}},te=Array.from(new Set(t.data.map((e=>e.label)))),ae={labels:(ie=te,ie.map((e=>e.length>0?e.charAt(0).toUpperCase()+e.slice(1):e))),datasets:K?[{data:[10,20,30,40,50,60,80,100,120],backgroundColor:"rgba(0,0,0,0)"}]:[]};var ie;v((()=>{const e=[];te.forEach(((l,o)=>{const a=[],i=t.data.filter((e=>e.label===l));t.isFunnel||i.sort(((e,l)=>l.value-e.value)),i.forEach(((e,l)=>{const t=((e,l,o)=>Q[e].slice(-o)[l])(o,l,i.length);a.push({color:t,label:e.stackLabel});const n=Object.assign({label:e.stackLabel,backgroundColor:t,data:Array(te.length).fill(0)},le);n.data[o]=e.value,ae.datasets.push(n)})),e.push(a)})),q(e),J(ae)}),[t.data]);const ne=u((()=>e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"flex-end"}},{children:re().map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}))),[$]),re=()=>{const e=[];return $.forEach(((l,o)=>{e.push({color:l[0].color,label:te[o]})})),e};if(!G)return e(o,{});return l(m,Object.assign({style:null!==(P=t.wrapperStyle)&&void 0!==P?P:{},padding:t.outerPadding,chartWrapperHeight:t.chartWrapperHeight,isFunnel:t.isFunnel},{children:[t.chartHeading&&e("div",Object.assign({style:{marginBottom:24}},{children:e(h,Object.assign({color:null!==(M=t.chartHeading.color)&&void 0!==M?M:b.content.secondary},{children:t.chartHeading.heading}))})),l("div",Object.assign({className:"graph__wrapper"},{children:[(null===(W=t.showLegend)||void 0===W||W)&&t.isFunnel&&ne(),e("div",Object.assign({style:{height:null!==(V=t.graphCanvasHeight)&&void 0!==V?V:500,width:null!==(Y=t.graphCanvasWidth)&&void 0!==Y?Y:"100%",flex:1}},{children:e(g,{options:oe,data:G})})),(null===(U=t.showLegend)||void 0===U||U)&&!t.isFunnel&&e("div",Object.assign({style:{overflowY:"scroll",display:"flex",flexDirection:"column"}},{children:$.map(((o,t)=>e("div",Object.assign({className:"legend__set"},{children:o.map((o=>l("div",Object.assign({className:"legend__row"},{children:[e("div",{className:"legend__palette",style:{backgroundColor:o.color}}),e(p,Object.assign({color:b.content.secondary},{children:o.label}))]}),o.label.replace(" ","_"))))}),`Legend_set_${t}`)))}))]}))]}))};export{F as StackedBarDistributionChart};

package/dist/esm/components/dropdown/Common.styled.d.ts

@@ -1,6 +1,5 @@
 export declare const OverLapAbs: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
-    allowEvents?: boolean | undefined;
 }, never>;
 export declare const OpenDropdownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LoadingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/dropdown/Common.styled.js

@@ -1,7 +1,5 @@
-import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
-	position: 
-	// if allowEvents is true, then position is relative, else position is absolute
-		${e=>(null==e?void 0:e.allowEvents)?"relative":"absolute"};
+import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const r=e.div`
+	position: absolute;
 	left: 0px;
 	top: 0px;
 	width: 100%;
@@ -19,7 +17,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	background: ${i.surface.hovered};
 	border: 1px solid ${i.stroke.primary};
 	border-radius: 4px;
-`;const r=e.div`
+`;const t=e.div`
 	width: 360px;
 	height: 100%;
 	padding: 8px;
@@ -34,4 +32,4 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 		flex-wrap: wrap;
 		align-items: center;
 	}
-`;export{r as ChipInputWrapper,o as OpenDropdownContainer,t as OverLapAbs};
+`;export{t as ChipInputWrapper,o as OpenDropdownContainer,r as OverLapAbs};

package/dist/esm/components/dropdown/DropdownPopover/index.d.ts

@@ -10,7 +10,6 @@ export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdo
     tooltipContent?: string | undefined;
     tooltipDirection?: Placement | undefined;
     showTooltipArrow?: boolean | undefined;
-    allowEvents?: boolean | undefined;
 } & React.RefAttributes<{
     openDropdown: boolean;
 }>>;

package/dist/esm/components/dropdown/DropdownPopover/index.js

@@ -1 +1 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as l,jsxs as n}from"react/jsx-runtime";import t,{useState as r,useRef as i,useImperativeHandle as s,useEffect as p}from"react";import{usePopper as d}from"react-popper";import a from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as v,OpenDropdownContainer as m}from"../Common.styled.js";import{OpenedDropdown as u}from"../OpenedDropdown/components/OpennedDropdown.js";const w=t.forwardRef(((t,w)=>{var{children:h,onDropdownVisbilityChange:b,version:f="1.0",tooltipContent:j,tooltipDirection:g,showTooltipArrow:D}=t,y=o(t,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const O=w,[C,S]=r(!1),[E,x]=r(null),[A,R]=r(null),T=i(null),{styles:z,attributes:M}=d(E,A,{placement:y.placement,strategy:y.strategy}),V=o=>{var e,l;"2.0"===f&&y.isMultiSelect&&o&&(null===(e=y.onSelect)||void 0===e||e.call(y,[...o])),S(!1),null===(l=null==y?void 0:y.onClose)||void 0===l||l.call(y)};s(O,(()=>({openDropdown:C})),[]),p((()=>{(null==O?void 0:O.current)&&(O.current.openDropdown=C)}),[C]),p((()=>{null==b||b(C)}),[C]);const _=()=>n(l,{children:[n("div",Object.assign({style:{position:"relative"},ref:x},{children:[e(v,Object.assign({ref:T,allowEvents:y.allowEvents,disabled:y.disabled,onClick:o=>{var e;null===(e=y.onDropdownOpen)||void 0===e||e.call(y),C?(S(!1),o.preventDefault()):y.disabled||S(!0)}},{children:y.allowEvents?h:null})),y.allowEvents?null:h]})),C&&e(m,Object.assign({ref:R,style:Object.assign(Object.assign({},z.popper),{zIndex:3})},M.popper,{children:e(a,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(u,Object.assign({},y,{onSelect:o=>{var e;"2.0"===f&&y.isMultiSelect||(null===(e=y.onSelect)||void 0===e||e.call(y,o),S(!1))},onClose:V,version:f,headerRef:T}))}))}))]});return e(l,{children:C||void 0===j?_():e(c,Object.assign({body:j,placement:g,hideArrow:!D},{children:e("div",{children:_()})}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};
+import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import t,{useState as l,useRef as i,useImperativeHandle as s,useEffect as p}from"react";import{usePopper as d}from"react-popper";import c from"../../dropShadow/DropShadow.js";import{Tooltip as a}from"../../tooltips/Tooltip.js";import{OverLapAbs as m,OpenDropdownContainer as v}from"../Common.styled.js";import{OpenedDropdown as u}from"../OpenedDropdown/components/OpennedDropdown.js";const h=t.forwardRef(((t,h)=>{var{children:w,onDropdownVisbilityChange:b,version:f="1.0",tooltipContent:j,tooltipDirection:D,showTooltipArrow:g}=t,y=o(t,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const O=h,[C,S]=l(!1),[x,A]=l(null),[R,T]=l(null),z=i(null),{styles:M,attributes:V}=d(x,R,{placement:y.placement,strategy:y.strategy}),_=o=>{var e,r;"2.0"===f&&y.isMultiSelect&&o&&(null===(e=y.onSelect)||void 0===e||e.call(y,[...o])),S(!1),null===(r=null==y?void 0:y.onClose)||void 0===r||r.call(y)};s(O,(()=>({openDropdown:C})),[]),p((()=>{(null==O?void 0:O.current)&&(O.current.openDropdown=C)}),[C]),p((()=>{null==b||b(C)}),[C]);const k=()=>n(r,{children:[n("div",Object.assign({style:{position:"relative"},ref:A},{children:[e(m,{ref:z,disabled:y.disabled,onClick:o=>{var e;null===(e=y.onDropdownOpen)||void 0===e||e.call(y),C?(S(!1),o.preventDefault()):y.disabled||S(!0)}}),w]})),C&&e(v,Object.assign({ref:T,style:Object.assign(Object.assign({},M.popper),{zIndex:3})},V.popper,{children:e(c,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(u,Object.assign({},y,{onSelect:o=>{var e;"2.0"===f&&y.isMultiSelect||(null===(e=y.onSelect)||void 0===e||e.call(y,o),S(!1))},onClose:_,version:f,headerRef:z}))}))}))]});return e(r,{children:C||void 0===j?k():e(a,Object.assign({body:j,placement:D,hideArrow:!g},{children:e("div",{children:k()})}))})}));h.displayName="DropdownPopover";export{h as DropdownPopover};

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as n,useEffect as i}from"react";import{ZeroState as r}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as s}from"../../hooks/useDropdown.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as a}from"./menu/FreeFormMenu.js";import{MenuList as p}from"./menu/MenuList.js";import{SelectAllMenu as u}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as h,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as S}from"./searchbox/SearchZeroState.js";const g=304,b=290,w=w=>{let{options:v,isSearchable:j,isMultiSelect:y,width:x,allowFreeForm:O,height:C,onClose:M,onSelect:D,onSearch:L,version:k,skipSorting:A,headerRef:F,hideSelectAll:I,primaryButtonText:B,onInfiniteScroll:H,onMultiSelectClear:T,onDropdownItemClick:R,buttonOptions:Z,isSearchLoading:q}=w;const{dropdownOptions:z,search:K,searchedString:N,searchedOptions:P,onApplyHandler:W,selectAllHandler:E,onMultiSelectClear:G,onFreeFormSelect:J,onMultiSelectApply:Q,latestDropdownOptionsRef:U,getSelectedOptions:V}=s(k,v,D,A,y,L),[X,Y]=o(null!=x?x:b),[$,_]=o(null),ee=n(null),te=n([]);l(ee,(()=>{if(_(null),y&&"2.0"===k){const e=V(U.current);null==M||M(e)}else null==M||M(z)}),[F,te]);const oe=null!=C?C:g,ne="number"==typeof oe?j&&y?oe-96:j&&!y||!j&&y?oe-48:oe:oe;i((()=>{const e=null!=x?x:b;if(null===$)Y(e);else if("number"==typeof e)Y(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));Y(t)}}),[$]);const ie=[],re=(N&&L?P:z).map((e=>{var t,o;if(N&&!L){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(N.toLowerCase()))&&(ie.push(!N||e.label===N),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(N.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(N.toLowerCase()))?(ie.push(!N||e.label===N),e):null}return e})).filter((e=>null!==e)),le=!!j&&N&&0===re.length;return e(h,Object.assign({version:k,ref:ee,style:{width:X}},{children:[e("div",Object.assign({style:{width:$?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!j&&t(f,{onSearch:K,version:k}),re.length||N?e(m,Object.assign({minHeight:oe,maxHeight:ne},{children:[!!y&&!le&&!I&&t(u,{version:k,options:N&&L?P:z,onSelect:E}),!O&&le&&t(S,{isLoading:q,height:ne,searchedString:N}),O&&(le||!!ie.length&&ie.every((e=>!1===e)))&&t(a,{version:k,isMultiSelect:y,onSelect:J,searchedString:N}),t(p,{onInfiniteScroll:H,onDropdownItemClick:R,version:k,onSelect:W,showDescription:function(e,t){_(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:re,ref:te})]})):t("div",Object.assign({style:{height:oe,display:"flex"}},{children:t(r,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!re.length&&!N)&&"2.0"!==k&&t(d,{onClear:()=>{G(),null==T||T()},onApply:Q,list:N&&L?P:z,buttonText:B,buttonOptions:Z})]})),!!$&&t(c,{title:$.title,description:$.description,version:k})]}))};export{w as OpenedDropdown};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as n,useEffect as i}from"react";import{ZeroState as r}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as s}from"../../hooks/useDropdown.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as a}from"./menu/FreeFormMenu.js";import{MenuList as p}from"./menu/MenuList.js";import{SelectAllMenu as u}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as h,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as S}from"./searchbox/SearchZeroState.js";const g=304,b=290,w=w=>{let{options:v,isSearchable:j,isMultiSelect:y,width:x,allowFreeForm:O,height:C,onClose:M,onSelect:D,onSearch:L,version:k,skipSorting:A,headerRef:F,hideSelectAll:I,primaryButtonText:B,onInfiniteScroll:H,onMultiSelectClear:T,onDropdownItemClick:R,buttonOptions:Z,isSearchLoading:q}=w;const{dropdownOptions:z,search:K,searchedString:N,searchedOptions:P,onApplyHandler:W,selectAllHandler:E,onMultiSelectClear:G,onFreeFormSelect:J,onMultiSelectApply:Q,latestDropdownOptionsRef:U,getSelectedOptions:V}=s(k,v,D,A,y,L),[X,Y]=o(null!=x?x:b),[$,_]=o(null),ee=n(null);l(ee,(()=>{if(_(null),y&&"2.0"===k){const e=V(U.current);null==M||M(e)}else null==M||M(z)}),[F]);const te=null!=C?C:g,oe="number"==typeof te?j&&y?te-96:j&&!y||!j&&y?te-48:te:te;i((()=>{const e=null!=x?x:b;if(null===$)Y(e);else if("number"==typeof e)Y(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));Y(t)}}),[$]);const ne=[],ie=(N&&L?P:z).map((e=>{var t,o;if(N&&!L){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(N.toLowerCase()))&&(ne.push(!N||e.label===N),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(N.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(N.toLowerCase()))?(ne.push(!N||e.label===N),e):null}return e})).filter((e=>null!==e)),re=!!j&&N&&0===ie.length;return e(h,Object.assign({version:k,ref:ee,style:{width:X}},{children:[e("div",Object.assign({style:{width:$?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!j&&t(f,{onSearch:K,version:k}),ie.length||N?e(m,Object.assign({minHeight:te,maxHeight:oe},{children:[!!y&&!re&&!I&&t(u,{version:k,options:N&&L?P:z,onSelect:E}),!O&&re&&t(S,{isLoading:q,height:oe,searchedString:N}),O&&(re||!!ne.length&&ne.every((e=>!1===e)))&&t(a,{version:k,isMultiSelect:y,onSelect:J,searchedString:N}),t(p,{onInfiniteScroll:H,onDropdownItemClick:R,version:k,onSelect:W,showDescription:function(e,t){_(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:ie})]})):t("div",Object.assign({style:{height:te,display:"flex"}},{children:t(r,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!ie.length&&!N)&&"2.0"!==k&&t(d,{onClear:()=>{G(),null==T||T()},onApply:Q,list:N&&L?P:z,buttonText:B,buttonOptions:Z})]})),!!$&&t(c,{title:$.title,description:$.description,version:k})]}))};export{w as OpenedDropdown};

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js

@@ -2,7 +2,7 @@ import o from"styled-components";import{COLORS as r}from"../../../../constants/T
 	border-radius: ${o=>"2.0"===o.version?8:4}px;
 	border: ${o=>"2.0"===o.version?0:1}px solid
 		${r.stroke.primary};
-	max-height: 480px;
+	max-height: 640px;
 	overflow: hidden;
 	display: flex;
 	flex-direction: row;

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { MultiSelectOption, SingleOption } from '../../../type';
 interface MenuItemProps {
     option: SingleOption | MultiSelectOption;
@@ -9,5 +9,5 @@ interface MenuItemProps {
     last?: boolean;
     version?: '1.0' | '2.0';
 }
-export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuItem: React.FC<MenuItemProps>;
 export {};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js

@@ -1,13 +1,5 @@
-import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import n from"../../../../../assets/icons/chevronRight.svg.js";import{forwardRef as i,useState as r}from"react";import s from"styled-components";import{CheckBox as l}from"../../../../checkBox/CheckBox.js";import{ListItem as c}from"../../../../list-item/ListItem.js";import{Tooltip as a}from"../../../../tooltips/Tooltip.js";import{BodyCaption as d}from"../../../../TypographyStyle.js";import{DEFAULT_THEME as p,COLORS as m}from"../../../../../constants/Theme.js";import{FreeFormContainer as u}from"./FreeFormMenu.styled.js";const g=s(c)`
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"styled-components";import{CheckBox as o}from"../../../../checkBox/CheckBox.js";import{ListItem as s}from"../../../../list-item/ListItem.js";import{BodyCaption as r}from"../../../../TypographyStyle.js";import{COLORS as l}from"../../../../../constants/Theme.js";import{FreeFormContainer as c}from"./FreeFormMenu.styled.js";const a=i(s)`
 	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
-`,v=s.div`
-	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	border-radius: ${e=>{let{version:t}=e;return"1.0"===t?"0":"8px"}};
-	padding: ${e=>{let{version:t}=e;return"1.0"===t?"0":"4px"}};
-	min-width: 148px;
-	border: ${e=>{let{version:t}=e;return"1.0"===t?`1px solid ${p.colorsV2.stroke.primary}`:"none"}};
-	max-height: 248px;
-	overflow-y: auto;
-`,h=i(((i,s)=>{let{option:c,isMultiSelect:h,showDescription:b,onSelect:x,last:f,version:j,onDropdownItemClick:y}=i;var I;const[C,O]=r(c.selected),k=(e,t)=>{if(!e.children){T(!e.selected);const o=t?Object.assign(Object.assign({},e),{parent:t}):e;null==y||y(o)}},T=e=>{c.disabled||x(Object.assign(Object.assign({},c),{selected:e}))};return e(t,{children:e(a,Object.assign({body:"",tooltipContent:c.children?e("div",Object.assign({style:{backgroundColor:p.colorsV2.surface.standard},ref:s,onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1)},{children:e(v,Object.assign({version:null!=j?j:"2.0"},{children:c.children.map((t=>{var o;return e(g,{version:j,style:(null!==(o=null==c?void 0:c.children)&&void 0!==o?o:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),k(t,c)},listItem:{value:t.value,label:t.label},subText:t.subText,leadingIcon:t.leadingIcon||void 0,customComponent:t.customComponent,trailingIcon:t.trailingIcon||void 0,variant:c.disabled?"inactive":t.selected?"selected":"default"},t.value)}))}))})):e(t,{}),placement:"right-start",hideArrow:!0},{children:e(g,{version:j,style:f?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),k(c)},onMouseOver:()=>{c.description?b(c.label,c.description):b()},listItem:{value:c.value,label:c.label},subText:c.subText,leadingIcon:h?o("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e(l,{size:"2.0"===j?"SMALL":"DEFAULT",isDisabled:null!==(I=c.disabled)&&void 0!==I&&I,isChecked:!!c.selected,onValueChange:T}),e("div",Object.assign({style:{marginRight:"-4px"}},{children:c.leadingIcon}))]})):c.leadingIcon?e(t,{children:c.leadingIcon}):void 0,customComponent:c.customComponent,trailingIcon:c.isFreeForm?e(u,{children:e(d,Object.assign({style:{color:m.content.secondary}},{children:"Freeform"}))}):c.children?e(n,{width:12,height:12}):c.trailingIcon?e(t,{children:c.trailingIcon}):void 0,variant:c.disabled?"inactive":c.selected||!h&&C?"selected":"default"})}))})}));export{h as MenuItem};
+`,d=i=>{let{option:s,isMultiSelect:d,showDescription:m,onSelect:p,last:g,version:u,onDropdownItemClick:b}=i;var f;function h(e){s.disabled||p(Object.assign(Object.assign({},s),{selected:e}))}return e(a,{version:u,style:g?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),h(!s.selected),null==b||b(s)},onMouseOver:function(){s.description?m(s.label,s.description):m()},listItem:{value:s.value,label:s.label},subText:s.subText,leadingIcon:d?t("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e(o,{size:"2.0"===u?"SMALL":"DEFAULT",isDisabled:null!==(f=s.disabled)&&void 0!==f&&f,isChecked:!!s.selected,onValueChange:h}),e("div",Object.assign({style:{marginRight:"-4px"}},{children:s.leadingIcon}))]})):s.leadingIcon?e(n,{children:s.leadingIcon}):e(n,{}),customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(c,{children:e(r,Object.assign({style:{color:l.content.secondary}},{children:"Freeform"}))}):s.trailingIcon?e(n,{children:s.trailingIcon}):e(n,{}),variant:s.disabled?"inactive":s.selected?"selected":"default"})};export{d as MenuItem};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { DropdownOption, SingleOption } from '../../../type';
 interface MenuListProps {
     options: DropdownOption[];
@@ -9,5 +9,5 @@ interface MenuListProps {
     onInfiniteScroll?: () => void;
     onDropdownItemClick?: (option: DropdownOption) => void;
 }
-export declare const MenuList: import("react").ForwardRefExoticComponent<MenuListProps & import("react").RefAttributes<HTMLDivElement[]>>;
+export declare const MenuList: React.FC<MenuListProps>;
 export {};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js

@@ -1 +1 @@
-import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useCallback as i,useEffect as c}from"react";import{MenuItem as s}from"./MenuItem.js";import{StyledGroupedLabel as l}from"./MenuList.styled.js";const u=r(((r,u)=>{let{options:p,isMultiSelect:a,showDescription:m,onSelect:d,version:f,onInfiniteScroll:g,onDropdownItemClick:h}=r;const I=o(null),b=o(null),j=i((()=>{I.current&&I.current.disconnect(),I.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==g||g())})),b.current&&I.current.observe(b.current)}),[g]);return c((()=>(j(),()=>{I.current&&I.current.disconnect()})),[j,p]),e(n,{children:p.map(((n,r)=>{const o=r===p.length-1;if(n.options){const i=n;return t("div",Object.assign({style:{marginTop:"2.0"===f?2:0}},{children:[t(l,Object.assign({version:f},{children:[i.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:i.leadingIcon})):null,i.label]})),i.options.map(((n,t)=>e(s,{version:f,last:t===i.options.length-1,onSelect:d,showDescription:m,onDropdownItemClick:h,isMultiSelect:a,option:n,ref:e=>{u&&"object"==typeof u&&u.current&&e&&e&&e&&e&&(u.current[r]=e)}},`${r}-${t}`))),o?e("span",{ref:b}):null]}),r)}return t("div",{children:[e(s,{version:f,last:o,onSelect:d,showDescription:m,onDropdownItemClick:h,isMultiSelect:a,option:n,ref:e=>{u&&"object"==typeof u&&u.current&&e&&e&&e&&e&&(u.current[r]=e)}},r),o?e("span",{ref:b}):null]},r)}))})}));export{u as MenuList};
+import{jsx as n,Fragment as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useCallback as o,useEffect as i}from"react";import{MenuItem as s}from"./MenuItem.js";import{StyledGroupedLabel as c}from"./MenuList.styled.js";const l=l=>{let{options:p,isMultiSelect:u,showDescription:a,onSelect:m,version:d,onInfiniteScroll:g,onDropdownItemClick:h}=l;const I=r(null),f=r(null),v=o((()=>{I.current&&I.current.disconnect(),I.current=new IntersectionObserver((n=>{n[0].isIntersecting&&(null==g||g())})),f.current&&I.current.observe(f.current)}),[g]);return i((()=>(v(),()=>{I.current&&I.current.disconnect()})),[v,p]),n(e,{children:p.map(((r,o)=>{const i=o===p.length-1;if(r.options){const l=r;return t("div",Object.assign({style:{marginTop:"2.0"===d?2:0}},{children:[t(c,Object.assign({version:d},{children:[l.leadingIcon?n("span",Object.assign({style:{marginRight:8}},{children:l.leadingIcon})):n(e,{}),l.label]})),l.options.map(((e,t)=>n(s,{version:d,last:t===l.options.length-1,onSelect:m,showDescription:a,onDropdownItemClick:h,isMultiSelect:u,option:e},`${o}-${t}`))),i?n("span",{ref:f}):null]}),o)}return t("div",{children:[n(s,{version:d,last:i,onSelect:m,showDescription:a,onDropdownItemClick:h,isMultiSelect:u,option:r},o),i?n("span",{ref:f}):null]},o)}))})};export{l as MenuList};

package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts

@@ -13,8 +13,6 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
     selectedLabel?: string | undefined;
-    children?: SingleOption[] | undefined;
-    parent?: SingleOption | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -28,8 +26,6 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
     selectedLabel?: string | undefined;
-    children?: SingleOption[] | undefined;
-    parent?: SingleOption | undefined;
     options: SingleOption[];
 })[];
 export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;

package/dist/esm/components/dropdown/hooks/useDropdown.d.ts

@@ -20,8 +20,6 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
         selectedLabel?: string | undefined;
-        children?: SingleOption[] | undefined;
-        parent?: SingleOption | undefined;
     } | {
         label?: string | undefined;
         value?: string | undefined;
@@ -35,8 +33,6 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
         selectedLabel?: string | undefined;
-        children?: SingleOption[] | undefined;
-        parent?: SingleOption | undefined;
         options: SingleOption[];
     })[] | undefined;
     selectAllHandler: (newState: SelectAllCheckboxState) => void;

package/dist/esm/components/dropdown/type.d.ts

@@ -44,8 +44,6 @@ export type SingleOption = {
     customComponent?: JSX.Element;
     searchKey?: string;
     selectedLabel?: string;
-    children?: SingleOption[];
-    parent?: SingleOption;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

package/dist/esm/components/floater/floater.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-export type FloaterProps = {
+type FloaterProps = {
     children?: React.ReactNode;
     refElement: React.MutableRefObject<any>;
     leftOffset?: number;
-    topOffset?: number;
-    useDefaultOffsets?: boolean;
 };
 export declare const Floater: (props: FloaterProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/components/floater/floater.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{useRef as e,useState as n,useEffect as f}from"react";const i=i=>{const o=e(null),[r,s]=n(0),[l,d]=n(0),[c,u]=n(!1);return f((()=>{if(i.refElement.current){const t=i.refElement.current.getBoundingClientRect();(t=>{if(i.useDefaultOffsets)return void d(t.left);let e=0;e=i.leftOffset?t.left+i.leftOffset:t.left+t.width+30;const n=null==o?void 0:o.current;n?(e>window.innerWidth-n.offsetWidth&&(e=window.innerWidth-n.offsetWidth-50),d(e)):d(e)})(t),(t=>{if(i.useDefaultOffsets)return void s(t.top);let e=t.top;i.topOffset&&(e=t.top+i.topOffset);const n=null==o?void 0:o.current;if(!n)return void s(e);const f=window.innerHeight;t.top+n.offsetHeight>f&&(e=t.top-(t.top+n.offsetHeight-f)-10),s(e)})(t),u(!0)}})),c?t("div",Object.assign({style:{top:r,left:l,position:"fixed",zIndex:1e3}},{children:t("div",Object.assign({ref:o},{children:i.children}))})):null};export{i as Floater};
+import{jsx as t}from"react/jsx-runtime";import{useRef as e,useState as n,useEffect as i}from"react";const o=o=>{const r=e(null),[f,l]=n(0),[s,c]=n(0),[d,u]=n(!1);return i((()=>{if(o.refElement.current){const t=o.refElement.current.getBoundingClientRect();(t=>{let e=0;e=o.leftOffset?t.left+o.leftOffset:t.left+t.width+30;const n=null==r?void 0:r.current;n?(e>window.innerWidth-n.offsetWidth&&(e=window.innerWidth-n.offsetWidth-50),c(e)):c(e)})(t),(t=>{let e=t.top;const n=null==r?void 0:r.current;if(!n)return void l(e);const i=window.innerHeight;t.top+n.offsetHeight>i&&(e=t.top-(t.top+n.offsetHeight-i)-10),l(e)})(t),u(!0)}})),d?t("div",Object.assign({style:{top:f,left:s,position:"fixed"}},{children:t("div",Object.assign({ref:r},{children:o.children}))})):null};export{o as Floater};

package/dist/esm/components/input/Input.d.ts

@@ -62,7 +62,5 @@ export interface InputProps {
     labelTextBold?: boolean;
     truncateText?: boolean;
     maxCharLimitPosition?: 'TOP' | 'BOTTOM';
-    hightlightInputColor?: string;
-    onKeyDownEvent?: (e: Event) => void;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

package/dist/esm/components/input/Input.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as o,useContext as r,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,validateInput as u}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as b}from"./context/InputStyleProvider.js";import{RootContainer as f,InputFooter as x,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as O,InputContainer as T,InputContainerSmall as w,SuffixHolder as k,InputHeader as I}from"./Input.styled.js";const L=l(((l,L)=>{var B,E,H,M,P,D,S;const{placeholder:z,leftIcon:A,rightIcon:F,labelText:K,maxCharLimit:N,isRequired:R,hintText:G,type:_,state:q,validate:V,variant:W,button:$,suffixText:J,prefixText:Q,onChangeText:U,value:X,noErrorHint:Y,reset:Z,rangeValidation:tt,noKeyDownChange:et,version:nt,noMaxCharCheck:it,labelElement:lt,autoGrow:ot,minHeight:rt,maxHeight:at,labelTextBold:st,truncateText:ct,maxCharLimitPosition:ht,hightlightInputColor:ut,onKeyDownEvent:dt}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},l),vt=null==A?void 0:A.icon,pt=null==F?void 0:F.icon,[gt,mt]=o(!1),[bt,ft]=o(!1),[xt,yt]=o(),jt="small"===W?"18px":"22px",Ct=r(b),[Ot,Tt]=o(),wt=a(null),kt=null!=L?L:wt;s((()=>{Tt(X),!X&&ot&&(kt.current.style.height=rt||"48px")}),[X]),s((()=>{var t;kt.current&&(null===(t=l.onReferenceInit)||void 0===t||t.call(l,kt.current))}),[kt]),s((()=>{const t=kt.current;if(t&&["phonenumber","zip","number"].includes(_))return t.addEventListener("wheel",Et,{passive:!1}),()=>{t.removeEventListener("wheel",Et)}}),[]),s((()=>{Z&&Tt("")}),[Z]),s((()=>{var t;ft(!!l.isActive),l.isActive&&(null===(t=kt.current)||void 0===t||t.focus())}),[l.isActive]),s((()=>{yt(l.errorMessage)}),[l.errorMessage]),s((()=>{var t;mt(!1),("invalid"===l.state||xt||"disabled-invalid"===l.state)&&mt(!0),"active"===l.state&&(null===(t=kt.current)||void 0===t||t.focus())}),[l.state,xt]),s((()=>{mt(!!xt||"invalid"===l.state)}),[xt,l.state]);const It=function(t){if(h(t)){for(var e=arguments.length,n=new Array(e>1?e-1:0),i=1;i<e;i++)n[i-1]=arguments[i];t(...n)}},Lt=()=>"zip"===_?6:2e3,Bt=t=>{const e=0!==N?N:Lt();if(dt&&dt(t),et||U(X||"",t),it)return;const n=t.target.value;![8].includes(t.which)&&e>0&&n.length>=e&&t.preventDefault()},Et=t=>{t.preventDefault()},Ht=t=>{let e=t.target.value;const n=0!==N?N+1:Lt();!it&&n>0&&e.length>=n&&(e=e.substring(0,n-1)),U(e,t),l.textControl||Tt(e),ot&&(kt.current.style.height=`${kt.current.scrollHeight}px`,e||(kt.current.style.height=rt||"48px"));const i=V||u;if(!i||!h(i))return;const[o,r]=i(e,_,tt);mt(!o),yt(l.errorMessage?l.errorMessage:r)},Mt=t=>{var e;l.skipFocus||ft(!0),It(null===(e=l.onFocus)||void 0===e?void 0:e.call(l,t))},Pt=t=>{var e;l.skipFocus||ft(!1),It(null===(e=l.onBlur)||void 0===e?void 0:e.call(l,t))},Dt=()=>{var i;return t(n,{children:["multiline"!==_&&e("input",{className:ct?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==Ct?void 0:Ct.input)&&void 0!==i?i:{},ref:kt,type:["phonenumber","zip","number"].includes(_)?"number":_,value:Ot,onFocus:t=>Mt(t),onBlur:t=>Pt(t),placeholder:z||"Enter here",onChange:Ht,onClick:t=>It(l.onClick),onKeyDown:t=>Bt(t)}),"multiline"===_&&e("textarea",{"data-test":l["data-test"],value:Ot,ref:kt,onFocus:t=>Mt(t),onBlur:t=>Pt(t),onClick:t=>It(l.onClick),placeholder:z||"Enter here",onChange:Ht,onKeyDown:t=>Bt(t),maxLength:N>0?N:void 0})]})};return t(f,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(B=null==Ct?void 0:Ct.RootContainer)&&void 0!==B?B:{}},{children:[t("div",Object.assign({className:"flex-align-center"},{children:[!Y&&(!!G||!!xt)&&t(x,Object.assign({invalid:!!xt},{children:[!!xt&&e(m,{width:16,height:16}),xt||G]})),N>0&&"BOTTOM"===ht&&t(y,Object.assign({position:"BOTTOM"},{children:[null!==(H=null===(E=(null!=X?X:"").toString())||void 0===E?void 0:E.length)&&void 0!==H?H:0,"/",N]}))]})),t(j,Object.assign({variant:W,state:q,width:l.width,isActive:"active"===q||bt,isInvalid:gt,style:null!==(M=null==Ct?void 0:Ct.InputWrapper)&&void 0!==M?M:{},version:nt,height:l.height,hightlightInputColor:ut},{children:[!!vt&&e(C,Object.assign({variant:W,iconSize:jt,onClick:()=>It(null==A?void 0:A.callback),isLeft:!0,style:null!==(P=null==Ct?void 0:Ct.IconHolder)&&void 0!==P?P:{}},{children:e(vt,{})})),!!Q&&e(O,Object.assign({variant:W},{children:Q})),"default"===W&&e(T,Object.assign({height:l.height,type:l.type,minHeight:rt,maxHeight:at,autoGrow:ot},{children:Dt()})),"small"===W&&e(w,Object.assign({height:l.height,type:l.type},{children:Dt()})),!!pt&&e(C,Object.assign({variant:W,iconSize:jt,onClick:()=>It(null==F?void 0:F.callback),isLeft:!1},{children:e(pt,{})})),!!J&&e(k,Object.assign({variant:W},{children:J})),$&&$.text&&e(c,{buttonText:$.text,onClick:()=>It(null==$?void 0:$.onClick)}),$&&$.buttonProps&&e(c,Object.assign({},$.buttonProps))]})),(!!K||!!N)&&t(I,Object.assign({invalid:gt},{children:[lt&&lt,t("div",Object.assign({className:"label__container"},{children:[t(st?v:p,{children:[K,R?e("span",{children:"*"}):""]}),l.tooltipText&&e(d,Object.assign({body:l.tooltipText,placement:"top"},{children:e("span",{children:e(i,{style:{marginTop:-3},width:18,height:18,color:gt?g.content.negative:g.content.primary})})}))]})),N>0&&"TOP"===ht&&t(y,{children:[null!==(S=null===(D=(null!=X?X:"").toString())||void 0===D?void 0:D.length)&&void 0!==S?S:0,"/",N]})]}))]}))}));L.displayName="Input";export{L as Input};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as u,validateInput as h}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as b}from"./context/InputStyleProvider.js";import{RootContainer as f,InputFooter as x,MaxCharStyle as y,InputWrapper as j,IconHolder as O,PrefixHolder as C,InputContainer as T,InputContainerSmall as w,SuffixHolder as k,InputHeader as I}from"./Input.styled.js";const L=l(((l,L)=>{var B,H,M,P,E,S,z;const{placeholder:A,leftIcon:D,rightIcon:F,labelText:N,maxCharLimit:K,isRequired:R,hintText:G,type:_,state:q,validate:V,variant:W,button:$,suffixText:J,prefixText:Q,onChangeText:U,value:X,noErrorHint:Y,reset:Z,rangeValidation:ee,noKeyDownChange:te,version:ne,noMaxCharCheck:ie,labelElement:le,autoGrow:re,minHeight:oe,maxHeight:ae,labelTextBold:se,truncateText:ce,maxCharLimitPosition:ue}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},l),he=null==D?void 0:D.icon,de=null==F?void 0:F.icon,[ve,pe]=r(!1),[ge,me]=r(!1),[be,fe]=r(),xe="small"===W?"18px":"22px",ye=o(b),[je,Oe]=r(),Ce=a(null),Te=null!=L?L:Ce;s((()=>{Oe(X),!X&&re&&(Te.current.style.height=oe||"48px")}),[X]),s((()=>{var e;Te.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Te.current))}),[Te]),s((()=>{const e=Te.current;if(e&&["phonenumber","zip","number"].includes(_))return e.addEventListener("wheel",Le,{passive:!1}),()=>{e.removeEventListener("wheel",Le)}}),[]),s((()=>{Z&&Oe("")}),[Z]),s((()=>{var e;me(!!l.isActive),l.isActive&&(null===(e=Te.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{fe(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;pe(!1),("invalid"===l.state||be||"disabled-invalid"===l.state)&&pe(!0),"active"===l.state&&(null===(e=Te.current)||void 0===e||e.focus())}),[l.state,be]),s((()=>{pe(!!be||"invalid"===l.state)}),[be,l.state]);const we=function(e){if(u(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},ke=()=>"zip"===_?6:2e3,Ie=e=>{const t=0!==K?K:ke();if(te||U(X||"",e),ie)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},Le=e=>{e.preventDefault()},Be=e=>{let t=e.target.value;const n=0!==K?K+1:ke();!ie&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),U(t,e),l.textControl||Oe(t),re&&(Te.current.style.height=`${Te.current.scrollHeight}px`,t||(Te.current.style.height=oe||"48px"));const i=V||h;if(!i||!u(i))return;const[r,o]=i(t,_,ee);pe(!r),fe(l.errorMessage?l.errorMessage:o)},He=e=>{var t;l.skipFocus||me(!0),we(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Me=e=>{var t;l.skipFocus||me(!1),we(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Pe=()=>{var i;return e(n,{children:["multiline"!==_&&t("input",{className:ce?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==ye?void 0:ye.input)&&void 0!==i?i:{},ref:Te,type:["phonenumber","zip","number"].includes(_)?"number":_,value:je,onFocus:e=>He(e),onBlur:e=>Me(e),placeholder:A||"Enter here",onChange:Be,onClick:e=>we(l.onClick),onKeyDown:e=>Ie(e)}),"multiline"===_&&t("textarea",{"data-test":l["data-test"],value:je,ref:Te,onFocus:e=>He(e),onBlur:e=>Me(e),onClick:e=>we(l.onClick),placeholder:A||"Enter here",onChange:Be,onKeyDown:e=>Ie(e),maxLength:K>0?K:void 0})]})};return e(f,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(B=null==ye?void 0:ye.RootContainer)&&void 0!==B?B:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!Y&&(!!G||!!be)&&e(x,Object.assign({invalid:!!be},{children:[!!be&&t(m,{width:16,height:16}),be||G]})),K>0&&"BOTTOM"===ue&&e(y,Object.assign({position:"BOTTOM"},{children:[null!==(M=null===(H=(null!=X?X:"").toString())||void 0===H?void 0:H.length)&&void 0!==M?M:0,"/",K]}))]})),e(j,Object.assign({variant:W,state:q,width:l.width,isActive:"active"===q||ge,isInvalid:ve,style:null!==(P=null==ye?void 0:ye.InputWrapper)&&void 0!==P?P:{},version:ne,height:l.height},{children:[!!he&&t(O,Object.assign({variant:W,iconSize:xe,onClick:()=>we(null==D?void 0:D.callback),isLeft:!0,style:null!==(E=null==ye?void 0:ye.IconHolder)&&void 0!==E?E:{}},{children:t(he,{})})),!!Q&&t(C,Object.assign({variant:W},{children:Q})),"default"===W&&t(T,Object.assign({height:l.height,type:l.type,minHeight:oe,maxHeight:ae,autoGrow:re},{children:Pe()})),"small"===W&&t(w,Object.assign({height:l.height,type:l.type},{children:Pe()})),!!de&&t(O,Object.assign({variant:W,iconSize:xe,onClick:()=>we(null==F?void 0:F.callback),isLeft:!1},{children:t(de,{})})),!!J&&t(k,Object.assign({variant:W},{children:J})),$&&$.text&&t(c,{buttonText:$.text,onClick:()=>we(null==$?void 0:$.onClick)}),$&&$.buttonProps&&t(c,Object.assign({},$.buttonProps))]})),(!!N||!!K)&&e(I,Object.assign({invalid:ve},{children:[le&&le,e("div",Object.assign({className:"label__container"},{children:[e(se?v:p,{children:[N,R?t("span",{children:"*"}):""]}),l.tooltipText&&t(d,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(i,{style:{marginTop:-3},width:18,height:18,color:ve?g.content.negative:g.content.primary})})}))]})),K>0&&"TOP"===ue&&e(y,{children:[null!==(z=null===(S=(null!=X?X:"").toString())||void 0===S?void 0:S.length)&&void 0!==z?z:0,"/",K]})]}))]}))}));L.displayName="Input";export{L as Input};

package/dist/esm/components/input/Input.styled.d.ts

@@ -11,7 +11,6 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     state?: InputStateI | undefined;
     variant?: InputVariant | undefined;
     version?: "1.0" | "2.0" | undefined;
-    hightlightInputColor?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;