@bikdotai/bik-component-library 0.0.77-4.beta.0.9 → 0.0.78

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

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

package/dist/esm/components/datePicker/DatePickerWrapper.styled.d.ts

@@ -1,8 +1,6 @@
-import { DateButtonType } from './model';
 export declare const DateBtn: import("styled-components").StyledComponent<"div", any, {
     bgColor: string;
     borderColor: string;
-    dateButtonType: DateButtonType;
 }, never>;
 export declare const PickerContainer: import("styled-components").StyledComponent<"div", any, {
     bgColor: string;

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

@@ -1,4 +1,4 @@
-import o from"styled-components";import{DateButtonType as r}from"./model.js";const e=o.div`
+import o from"styled-components";const r=o.div`
 	display: flex;
 	padding: 5px 8px;
 	background: ${o=>o.bgColor};
@@ -10,8 +10,7 @@ import o from"styled-components";import{DateButtonType as r}from"./model.js";con
 	align-items: center;
 	gap: 8px;
 	position: relative;
-	height: ${o=>o.dateButtonType===r.LARGE?"48px":"32px"};
-`,t=o.div`
+`,e=o.div`
 	position: absolute;
 	top: calc(100% + 8px);
 	zindex: 9;
@@ -66,4 +65,4 @@ import o from"styled-components";import{DateButtonType as r}from"./model.js";con
 			font-size: 20px;
 		}
 	}
-`;export{e as DateBtn,t as PickerContainer};
+`;export{r as DateBtn,e as PickerContainer};

package/dist/esm/components/datePicker/index.d.ts

@@ -1,3 +1 @@
 export * from './DatePicker';
-export * from './DatePickerWrapper';
-export * from './TimePicker';

package/dist/esm/components/dropShadow/DropShadow.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-export declare const DropShadow: React.FC<{
+declare const DropShadow: React.FC<{
     level: 'z1' | 'z2';
     position: 'up' | 'down';
     children: React.ReactNode;
     style?: React.CSSProperties;
 }>;
+export default DropShadow;

package/dist/esm/components/dropShadow/DropShadow.js

@@ -1 +1 @@
-import{jsx as p}from"react/jsx-runtime";const x={z1:{up:"0px -2px 8px rgba(0, 0, 0, 0.12)",down:"0px 2px 8px rgba(0, 0, 0, 0.12)"},z2:{up:"0px -4px 12px rgba(0, 0, 0, 0.12)",down:"0px 4px 12px rgba(0, 0, 0, 0.12)"}},e=e=>{let{level:n="z1",position:r="down",children:t,style:o}=e;const s=x[n][r];return p("div",Object.assign({style:Object.assign({boxShadow:s},null!=o?o:{})},{children:t}))};export{e as DropShadow};
+import{jsx as p}from"react/jsx-runtime";const x={z1:{up:"0px -2px 8px rgba(0, 0, 0, 0.12)",down:"0px 2px 8px rgba(0, 0, 0, 0.12)"},z2:{up:"0px -4px 12px rgba(0, 0, 0, 0.12)",down:"0px 4px 12px rgba(0, 0, 0, 0.12)"}},e=e=>{let{level:t="z1",position:n="down",children:r,style:o}=e;const s=x[t][n];return p("div",Object.assign({style:Object.assign({boxShadow:s},null!=o?o:{})},{children:r}))};export{e as default};

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

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

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

@@ -1,37 +1,20 @@
-import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const o=e.div`
-	position: 
-	// if allowEvents is true, then position is relative, else position is absolute
-		${e=>(null==e?void 0:e.allowEvents)||(null==e?void 0:e.isChildLoading)?"relative":"absolute"};
+import o from"styled-components";import{COLORS as r}from"../../constants/Theme.js";const e=o.div`
+	position: absolute;
 	left: 0px;
 	top: 0px;
 	width: 100%;
 	height: 100%;
 	z-index: 2;
-	cursor: ${e=>(null==e?void 0:e.disabled)?"not-allowed":"pointer"};
-`,t=e.div`
+	cursor: pointer;
+`,i=o.div`
 	margin-top: 8px;
 	margin-bottom: 8px;
-`;e.div`
+`;o.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	padding: 6px 8px;
-	background: ${i.surface.hovered};
-	border: 1px solid ${i.stroke.primary};
+	background: ${r.surface.hovered};
+	border: 1px solid ${r.stroke.primary};
 	border-radius: 4px;
-`;const r=e.div`
-	width: 360px;
-	height: 100%;
-	padding: 8px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	border-radius: 4px;
-	border: ${e=>e.error?`1px solid ${i.stroke.negative.vibrant}`:`1px solid ${i.stroke.primary}`};
-	.chips-container {
-		display: flex;
-		gap: 8px;
-		flex-wrap: wrap;
-		align-items: center;
-	}
-`;export{r as ChipInputWrapper,t as OpenDropdownContainer,o as OverLapAbs};
+`;export{i as OpenDropdownContainer,e as OverLapAbs};

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

@@ -1,22 +1,10 @@
 import React from 'react';
-import { OpenDropdownProps, SingleOption } from './type';
+import { OpenDropdownProps } from './type';
 export type DropdownProps = OpenDropdownProps & {
     placeHolder?: string;
-    size?: 'default' | 'small' | 'x-small';
+    size?: 'default' | 'small';
     disabled?: boolean;
     noErrorHint?: boolean;
     buttonWidth?: string;
-    placeHolderHeight?: string;
-    showPlaceholderWhenSelected?: boolean;
-    inputStyle?: React.CSSProperties;
-    inputType?: 'chip' | 'default';
-    onDeleteChip?: (chip: SingleOption) => void;
-    truncatedText?: boolean;
-    'data-test'?: string;
-    showLeadingIconInPlaceholder?: boolean;
-    showTrailingIconPlaceholder?: boolean;
-    showLabelsOnMoreHover?: boolean;
-    backgroundColor?: string;
-    value?: string;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

package/dist/esm/components/dropdown/Dropdown.js

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as l,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import a from"../../assets/icons/chevronDown.svg.js";import{Input as d}from"../input/Input.js";import{InputStyleContext as c}from"../input/context/InputStyleProvider.js";import p from"./ChipInput.js";import{DropdownPopover as h}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function v(){}const m=m=>{var g,f,b,w,x,{placeHolder:j,size:O,onSelect:I,defaultOptions:y,disabled:H,noErrorHint:S,placeHolderHeight:E,showPlaceholderWhenSelected:C=!1,inputStyle:T={},inputType:D="default",onDeleteChip:P,truncatedText:M,showLeadingIconInPlaceholder:W=!1,showTrailingIconPlaceholder:L=!1,showLabelsOnMoreHover:z=!1,value:k}=m,A=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value"]);const[_,N]=i(!1),[U,V]=i(!1),q=null!=O?O:"default",B=l(),[F,G]=i(null!=y?y:[]);r((()=>{var e;const o=[];null===(e=null==A?void 0:A.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),G([...o])}),[A.options]),r((()=>{y&&G([...y])}),[y]);const J=u(F),K=C?j:null!==(g=null!=J?J:j)&&void 0!==g?g:"Select an option",Q=null!==(f=A.width)&&void 0!==f?f:A.buttonWidth,R=null!=Q?Q:"100%",X=null!==(b=A.dropdownWidth)&&void 0!==b?b:R;return o(n,{children:o(c.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:E||("x-small"===q?24:"small"===q?32:48),width:R},Q?{maxWidth:Q}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===q?"4px 8px":"6px 8px",backgroundColor:void 0!==k?"#C3E4C4":U?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"}),T),input:{minHeight:"100%",maxWidth:"100%",color:void 0!==k?"#00580E":"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1)},{children:t(h,Object.assign({"data-test":A["data-test"],ref:B,onSelect:function(e){Array.isArray(e)?G([...e]):G([e]),null==I||I(e)},disabled:H,onDropdownVisbilityChange:e=>N(e)},A,{width:X},{children:["default"==D&&o(d,{version:A.version,noErrorHint:S,state:H?"disabled":"none",value:void 0===k?K:k,errorMessage:A.error,variant:q,placeholder:null!=j?j:"Select an option",onChangeText:v,leftIcon:W&&(null===(w=F[0])||void 0===w?void 0:w.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=F[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[L&&(null===(e=F[0])||void 0===e?void 0:e.trailingIcon),o(a,{style:{transform:_?"rotate(180deg)":"rotate(0deg)"},onClick:v,width:"x-small"===q?16:"small"===q?20:24,height:"x-small"===q?16:"small"===q?20:24,color:s.content.primary})]}))}},truncateText:null==M||M}),"chip"==D&&o(p,{placeholder:null!=j?j:"Select options",chips:F,onDeleteChip:e=>{null==P||P(e)},errorMessage:A.error,isDropdownOpened:_,sizeToUse:q,containerStyle:{width:null!==(x=A.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:z})]}))}))}))})};m.displayName="Dropdown";export{m as Dropdown};
+import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useRef as n,useState as e,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,m,h,{placeHolder:v,size:f,onSelect:g,defaultOptions:b,disabled:j,noErrorHint:w}=c,x=o(c,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const y=null!=f?f:"default",H=n(),[O,E]=e(null!=b?b:[]);r((()=>{var o;const t=[];null===(o=null==x?void 0:x.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&t.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&t.push(o)})),E([...t])}),[x.options]),r((()=>{b&&E([...b])}),[b]);const I=O.length?O.map((o=>o.label)).join(", "):void 0;return t(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===y?32:48,width:null!==(m=null!==(u=x.buttonWidth)&&void 0!==u?u:x.width)&&void 0!==m?m:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:t(d,Object.assign({ref:H,onSelect:function(o){Array.isArray(o)?E([...o]):E([o]),null==g||g(o)},disabled:j},x,{children:t(s,{noErrorHint:w,state:j?"disabled":"none",value:null!=I?I:"",errorMessage:x.error,variant:y,placeholder:null!=v?v:"Select an option",width:null!==(h=x.width)&&void 0!==h?h:"100%",onChangeText:p,rightIcon:{icon:()=>{var o;return t(l,{style:{transform:(null===(o=null==H?void 0:H.current)||void 0===o?void 0:o.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===y?20:24,height:"small"===y?20:24,color:i.content.primary})}}})}))}))};c.displayName="Dropdown";export{c as Dropdown};

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

@@ -1,24 +1,9 @@
 import React from 'react';
-import { Placement } from "../../tooltips";
 import { OpenDropdownProps } from '../type';
 export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdownProps & {
     isLoading?: boolean | undefined;
     children?: React.ReactNode;
     disabled?: boolean | undefined;
-    onDropdownOpen?: (() => void) | undefined;
-    onDropdownVisbilityChange?: ((isOpen: boolean) => void) | undefined;
-    tooltipContent?: string | undefined;
-    tooltipDirection?: Placement | undefined;
-    showTooltipArrow?: boolean | undefined;
-    allowEvents?: boolean | undefined;
-    'data-test'?: string | undefined;
-    isChildLoading?: boolean | undefined;
-    /**
-     * If true, forces the dropdown to remain open regardless of user interaction or internal state.
-     * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.
-     * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.
-     */
-    forceOpen?: 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 t,jsxs as n}from"react/jsx-runtime";import l,{useState as r,useRef as i,useImperativeHandle as s,useEffect as d}from"react";import{usePopper as a}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as v,OpenDropdownContainer as u}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const w=l.forwardRef(((l,w)=>{var{children:h,onDropdownVisbilityChange:b,version:g="1.0",tooltipContent:f,tooltipDirection:O,showTooltipArrow:j,isChildLoading:D,forceOpen:y}=l,C=o(l,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const S=w,[R,x]=r(!1),[z,E]=r(null),[A,L]=r(null),T=i(null),{styles:I,attributes:M}=a(z,A,{placement:C.placement,strategy:C.strategy}),V=o=>{var e,t;"2.0"===g&&C.isMultiSelect&&o&&(null===(e=C.onSelect)||void 0===e||e.call(C,[...o])),x(!1),null===(t=null==C?void 0:C.onClose)||void 0===t||t.call(C)};s(S,(()=>({openDropdown:R})),[]),d((()=>{(null==S?void 0:S.current)&&(S.current.openDropdown=R)}),[R]),d((()=>{null==b||b(R)}),[R]);const _=()=>{var o;return n(t,{children:[n("div",Object.assign({style:{position:"relative"},ref:E},{children:[e(v,Object.assign({ref:T,allowEvents:C.allowEvents,disabled:C.disabled,onClick:o=>{var e;null===(e=C.onDropdownOpen)||void 0===e||e.call(C),R?(x(!1),o.preventDefault()):C.disabled||x(!0)},isChildLoading:D},{children:C.allowEvents?h:null})),C.allowEvents?null:h]})),(R||y)&&e(u,Object.assign({ref:L,style:Object.assign(Object.assign({},I.popper),{zIndex:null!==(o=C.dropdownZIndex)&&void 0!==o?o:3})},M.popper,{"data-test":C["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(m,Object.assign({},C,{onSelect:o=>{var e;"2.0"===g&&C.isMultiSelect||(null===(e=C.onSelect)||void 0===e||e.call(C,o),x(!1))},onClose:V,version:g,headerRef:T,zeroState:null==C?void 0:C.zeroState,isDraggable:C.isDraggable,onOptionsReorder:C.onOptionsReorder}))}))}))]})};return e(t,{children:R||y||void 0===f?_():e(c,Object.assign({body:f,placement:O,hideArrow:!j},{children:e("div",Object.assign({"data-test":C["data-test"]},{children:_()}))}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};
+import{__rest as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as r,jsx as n}from"react/jsx-runtime";import t,{useState as l,useImperativeHandle as i,useEffect as p}from"react";import{usePopper as s}from"react-popper";import d from"../../dropShadow/DropShadow.js";import{OverLapAbs as c,OpenDropdownContainer as a}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const u=t.forwardRef(((t,u)=>{var{children:f}=t,v=e(t,["children"]);const j=u,[b,w]=l(!1),[h,O]=l(null),[D,g]=l(null),{styles:y,attributes:C}=s(h,D,{placement:v.placement});return i(j,(()=>({openDropdown:b})),[]),p((()=>{(null==j?void 0:j.current)&&(j.current.openDropdown=b)}),[b]),o(r,{children:[o("div",Object.assign({style:{position:"relative"},ref:O},{children:[n(c,{onClick:e=>{b?e.preventDefault():v.disabled||w(!0)}}),f]})),b&&n(a,Object.assign({ref:g,style:Object.assign(Object.assign({},y.popper),{zIndex:3})},C.popper,{children:n(d,Object.assign({level:"z2",position:"down",style:{borderRadius:4}},{children:n(m,Object.assign({},v,{onSelect:e=>{var o;null===(o=v.onSelect)||void 0===o||o.call(v,e),w(!1)},onClose:function(){var e;w(!1),null===(e=null==v?void 0:v.onClose)||void 0===e||e.call(v)}}))}))}))]})}));u.displayName="DropdownPopover";export{u 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{useCallback as o,useState as n,useRef as r,useEffect as i}from"react";import{ZeroState as s}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as c}from"../../hooks/useDropdown.js";import{Description as u}from"./description/Description.js";import{FreeFormMenu as a}from"./menu/FreeFormMenu.js";import{MenuList as d}from"./menu/MenuList.js";import{SelectAllMenu as p}from"./menu/SelectAllMenu.js";import h from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as f,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as b}from"./searchbox/SearchBox.js";import{SearchZeroState as g}from"./searchbox/SearchZeroState.js";const S=304,v=290,j=j=>{let{options:O,isSearchable:w,isMultiSelect:y,maxSelections:x,width:C,allowFreeForm:D,height:k,onClose:L,onSelect:M,onSearch:I,version:A,skipSorting:T,headerRef:E,hideSelectAll:B,primaryButtonText:F,onInfiniteScroll:H,onMultiSelectClear:R,onDropdownItemClick:q,buttonOptions:z,isSearchLoading:V,disableSearchOptions:W,disableSearchedOptionExcept:Z,useDefaultCursor:$,containerStyle:K={},zeroState:N,isDraggable:P=!1,onOptionsReorder:U,hideClearButton:G=!1}=j;const J=o((e=>{if(!P||!y)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[P,y]),[Q,X]=n((()=>J(O))),Y=r(Q),_=r(!1),ee=r(U);i((()=>{X(J(O))}),[O,J]),i((()=>{Y.current=Q}),[Q]),i((()=>{ee.current=U}),[U]),i((()=>()=>{_.current&&ee.current&&ee.current(Y.current)}),[]);const te=o((e=>{X(e),"2.0"===A?null==U||U(e):_.current=!0}),[U,A]),oe=P?Q:O,{dropdownOptions:ne,search:re,searchedString:ie,searchedOptions:se,onApplyHandler:le,selectAllHandler:ce,onMultiSelectClear:ue,onFreeFormSelect:ae,onMultiSelectApply:de,latestDropdownOptionsRef:pe,getSelectedOptions:he,getCurrentSelectionCount:fe}=c(A,oe,M,T||P,y,I,W,Z,x),[me,be]=n(null!=C?C:v),[ge,Se]=n(null),[ve,je]=n(-1),Oe=r(null),we=r([]),ye=r(null);l(Oe,(()=>{if(Se(null),y&&"2.0"===A){const e=he(pe.current);null==L||L(e)}else null==L||L(ne)}),[E,we]),i((()=>{const e=setTimeout((()=>{Oe.current&&Oe.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);i((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(ie&&I?se:ne);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),je((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=ye.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),je((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=ye.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&ve>=0){e.preventDefault();const o=t[ve];o&&(le(Object.assign(Object.assign({},o),{selected:!o.selected})),q&&q(o))}},t=Oe.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[ve,ie,se,ne,I,le,q]);const xe=null!=k?k:S,Ce="number"==typeof xe?w&&y?xe-96:w&&!y||!w&&y?xe-48:xe:xe;i((()=>{const e=null!=C?C:v;if(null===ge)be(e);else if("number"==typeof e)be(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));be(t)}}),[ge]);const De=[],ke=(e=>{if(!y||!x&&0!==x)return e;const t=fe(ne)>=x;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((ie&&I?se:ne).map((e=>{var t,o;if(ie&&!I){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(ie.toLowerCase()))&&(De.push(!ie||e.label===ie),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(ie.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(ie.toLowerCase()))?(De.push(!ie||e.label===ie),e):null}return e})).filter((e=>null!==e))),Le=!!w&&ie&&0===ke.length;return e(f,Object.assign({version:A,ref:Oe,tabIndex:-1,style:Object.assign(Object.assign({width:me},K),{outline:"none"})},{children:[e("div",Object.assign({style:{width:ge?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!w&&t(b,{onSearch:re,version:A}),ke.length||ie?e(m,Object.assign({minHeight:xe,maxHeight:Ce,ref:ye},{children:[!!y&&!Le&&!B&&t(p,{version:A,options:ie&&I?se:ne,onSelect:ce}),!D&&Le&&t(g,{isLoading:V,height:Ce,searchedString:ie,containerWidth:C}),D&&(Le||!!De.length&&De.every((e=>!1===e)))&&t(a,{version:A,isMultiSelect:y,onSelect:ae,searchedString:ie}),t(d,{onInfiniteScroll:H,onDropdownItemClick:q,version:A,onSelect:le,showDescription:function(e,t){Se(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:ke,useDefaultCursor:$,ref:we,focusedIndex:ve,isDraggable:P,onOptionsReorder:te})]})):t("div",Object.assign({style:{height:xe,display:"flex"}},{children:t(s,Object.assign({},N,{title:(null==N?void 0:N.title)||"No results found",subTitle:(null==N?void 0:N.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance."}))})),!!y&&!(!ke.length&&!ie)&&"2.0"!==A&&t(h,{onClear:()=>{ue(),null==R||R()},onApply:de,list:ie&&I?se:ne,buttonText:F,buttonOptions:z,hideClearButton:G})]})),!!ge&&t(u,{title:ge.title,description:ge.description,version:A})]}))};export{j as OpenedDropdown};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as l,useRef as n}from"react";import{ZeroState as s}from"../../../zeroState/ZeroState.js";import{useOutside as i}from"../../../../hooks/useOutside.js";import{iterateOnOptions as r}from"../utils/iterationOnOptions.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as u}from"./menu/FreeFormMenu.js";import{MenuList as a}from"./menu/MenuList.js";import{SelectAllMenu as d}from"./menu/SelectAllMenu.js";import p from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as m,MenuListContainer as f}from"./OpennedDropdown.styled.js";import{SearchBox as h}from"./searchbox/SearchBox.js";import{SearchZeroState as b}from"./searchbox/SearchZeroState.js";const j=304,g=290,S=S=>{let{options:v,isSearchable:w,isMultiSelect:O,width:y,allowFreeForm:x,height:C,onClose:F,onSelect:L}=S;const[M,D]=o(null!=v?v:[]);l((()=>{D(v)}),[v]);const[A,B]=o(null!=y?y:g),[H,Z]=o(""),[k,z]=o(null),E=n(null);i(E,(()=>{z(null),null==F||F()}));const I=null!=C?C:j,N="number"==typeof I?w&&O?I-96:w&&!O||!w&&O?I-48:I:I;function T(e){if(O){const t=r(M,{selected:e.selected},(t=>t.value===e.value));D([...t])}else null==L||L(e)}l((()=>{const e=null!=y?y:g;if(null===k)B(e);else if("number"==typeof e)B(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));B(t)}}),[k]);const W=M.map((e=>{var t;if(H){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(H.toLowerCase()))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(H.toLowerCase()))?e:null}return e})).filter((e=>null!==e)),q=!!w&&H&&0===W.length;return e(m,Object.assign({ref:E,style:{width:A}},{children:[e("div",Object.assign({style:{width:k?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!w&&t(h,{onSearch:function(e){Z(e)}}),W.length||H?e(f,Object.assign({minHeight:I,maxHeight:N},{children:[!!O&&!q&&t(d,{options:M,onSelect:function(e){if("selectAll"===e){const e=r(M,{selected:!0},(e=>{var t;return H?(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(H.toLowerCase()))&&!e.disabled:!e.disabled}));D([...e])}else if("notSelected"===e){const e=r(M,{selected:!1},(e=>!e.disabled));D([...e])}}}),!x&&q&&t(b,{searchedString:H}),x&&q&&t(u,{isMultiSelect:O,onSelect:function(e){if(!O)return void T({label:H,value:H,isFreeForm:!0,selected:!0});const t=M.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===H&&t.value===H?e:t.selected})));e&&(t.some((e=>e.label===H&&e.value===H))||t.unshift({label:H,value:H,isFreeForm:!0,selected:!0})),D([...t])},searchedString:H}),t(a,{onSelect:T,showDescription:function(e,t){z(e&&t?{title:e,description:t}:null)},isMultiSelect:O,options:W})]})):t("div",Object.assign({style:{height:I,display:"flex"}},{children:t(s,{title:"No options passed",subTitle:"Sorry we could not find any options to show"})})),!!O&&!(!W.length&&!H)&&t(p,{onClear:function(){const e=r(M,{selected:!1});D([...e])},onApply:function(){const e=[];M.forEach((t=>{if(t.options){const o=t.options.filter((e=>!0===e.selected));e.push(Object.assign(Object.assign({},t),{options:[...o]}))}else t.selected&&e.push(Object.assign({},t))})),null==L||L([...e])},list:M})]})),!!k&&t(c,{title:k.title,description:k.description})]}))};export{S as OpenedDropdown};

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.d.ts

@@ -1,6 +1,4 @@
-export declare const OpennedDropdownContainer: import("styled-components").StyledComponent<"div", any, {
-    version?: "1.0" | "2.0" | undefined;
-}, never>;
+export declare const OpennedDropdownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuListContainer: import("styled-components").StyledComponent<"div", any, {
     maxHeight: number | string;

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

@@ -1,37 +1,26 @@
-import o from"styled-components";import{COLORS as r}from"../../../../constants/Theme.js";const e=o.div`
-	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;
+import o from"styled-components";import{COLORS as e}from"../../../../constants/Theme.js";const r=o.div`
+	border-radius: 4px;
+	border: 1px solid ${e.stroke.primary};
+	max-height: 640px;
 	overflow: hidden;
 	display: flex;
 	flex-direction: row;
 	position: relative;
-	padding: ${o=>"2.0"===o.version?4:0}px;
-	background-color: ${r.surface.standard};
 `;o.div`
 	padding: 14px 16px 14px 18px;
 	flex-direction: row;
 	align-items: center;
 	border-bottom-width: 1px;
 	border-bottom-style: solid;
-	border-bottom-color: ${r.stroke.primary};
+	border-bottom-color: ${e.stroke.primary};
 	width: 100%;
 	height: 100%;
-`;const i=o.div`
+`;const t=o.div`
 	max-height: ${o=>"number"==typeof o.maxHeight?`${o.maxHeight}px`:o.maxHeight};
+
 	overflow-y: auto;
-	position: relative;
-	&::-webkit-scrollbar-thumb {
-		background: #e0e0e0;
-		border-radius: 8px;
-	}
-	&::-webkit-scrollbar {
-		height: 5px;
-		display: block;
-		width: 8px;
-	}
-	&::-webkit-scrollbar-thumb:horizontal {
-		width: 8px;
-	}
-`;export{i as MenuListContainer,e as OpennedDropdownContainer};
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	background-color: ${e.surface.standard};
+`;export{t as MenuListContainer,r as OpennedDropdownContainer};

package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.d.ts

@@ -2,5 +2,4 @@ import React from 'react';
 export declare const Description: React.FC<{
     title: string;
     description: string;
-    version?: '1.0' | '2.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{TitleRegular as r,BodySecondary as o}from"../../../../TypographyStyle.js";import{COLORS as i}from"../../../../../constants/Theme.js";import{DescriptionContainer as n}from"./Description.styled.js";const s=s=>{let{title:c,description:l,version:m}=s;return t(n,Object.assign({version:m},{children:e("div",Object.assign({style:{padding:"2.0"===m?12:24}},{children:[t(r,Object.assign({style:{color:i.content.primary,marginBottom:4}},{children:c})),t(o,Object.assign({style:{color:i.content.secondary}},{children:l}))]}))}))};export{s as Description};
+import{jsx as t,jsxs as r}from"react/jsx-runtime";import{TitleRegular as e,BodySecondary as o}from"../../../../TypographyStyle.js";import{COLORS as i}from"../../../../../constants/Theme.js";import{DescriptionContainer as n}from"./Description.styled.js";const s=s=>{let{title:c,description:l}=s;return t(n,{children:r("div",Object.assign({style:{padding:24}},{children:[t(e,Object.assign({style:{color:i.content.primary,marginBottom:4}},{children:c})),t(o,Object.assign({style:{color:i.content.secondary}},{children:l}))]}))})};export{s as Description};

package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.styled.d.ts

@@ -1,3 +1 @@
-export declare const DescriptionContainer: import("styled-components").StyledComponent<"div", any, {
-    version?: "1.0" | "2.0" | undefined;
-}, never>;
+export declare const DescriptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.styled.js

@@ -1,6 +1,5 @@
 import o from"styled-components";import{COLORS as r}from"../../../../../constants/Theme.js";const t=o.div`
 	background: ${r.surface.standard};
-	border-left: ${o=>"2.0"===o.version?.5:1}px solid
-		${r.stroke.primary};
+	border-left: 1px solid ${r.stroke.primary};
 	width: 50%;
 `;export{t as DescriptionContainer};

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

@@ -3,5 +3,4 @@ export declare const FreeFormMenu: React.FC<{
     isMultiSelect?: boolean;
     searchedString: string;
     onSelect: (isChecked: boolean) => void;
-    version?: '1.0' | '2.0';
 }>;

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

@@ -1 +1 @@
-import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useState as o}from"react";import{CheckBox as r}from"../../../../checkBox/CheckBox.js";import{ListItem as i}from"../../../../list-item/ListItem.js";import{BodyCaption as n}from"../../../../TypographyStyle.js";import{COLORS as s}from"../../../../../constants/Theme.js";import{FreeFormContainer as c}from"./FreeFormMenu.styled.js";const m=m=>{let{searchedString:l,onSelect:a,isMultiSelect:p,version:f}=m;const[h,u]=o(!1);function d(){u(!h),a(!h)}return e(i,{version:f,onClick:e=>{e.preventDefault(),d()},listItem:{label:l,value:l},leadingIcon:p?e(r,{size:"2.0"===f?"SMALL":"DEFAULT",isChecked:h,onValueChange:d}):e(t,{}),trailingIcon:e(c,{children:e(n,Object.assign({style:{color:s.content.secondary}},{children:"Freeform"}))})})};export{m as FreeFormMenu};
+import{jsx as e,Fragment as t}from"react/jsx-runtime";import{useState as o}from"react";import{CheckBox as r}from"../../../../checkBox/CheckBox.js";import{ListItem as n}from"../../../../list-item/ListItem.js";import{BodyCaption as i}from"../../../../TypographyStyle.js";import{COLORS as c}from"../../../../../constants/Theme.js";import{FreeFormContainer as m}from"./FreeFormMenu.styled.js";const s=s=>{let{searchedString:l,onSelect:a,isMultiSelect:p}=s;const[f,h]=o(!1);function u(){h(!f),a(!f)}return e(n,{onClick:e=>{e.preventDefault(),u()},listItem:{label:l,value:l},leadingIcon:p?e(r,{isChecked:f,onValueChange:u}):e(t,{}),trailingIcon:e(m,{children:e(i,Object.assign({style:{color:c.content.secondary}},{children:"Freeform"}))})})};export{s as FreeFormMenu};

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

@@ -1,22 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { MultiSelectOption, SingleOption } from '../../../type';
-interface MenuItemProps {
+export declare const MenuItem: React.FC<{
     option: SingleOption | MultiSelectOption;
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (option: SingleOption) => void;
-    onDropdownItemClick?: (option: SingleOption) => void;
-    last?: boolean;
-    version?: '1.0' | '2.0';
-    useDefaultCursor?: boolean;
-    isFocused?: boolean;
-    dataIndex?: number;
-    isDraggable?: boolean;
-    onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
-    isDraggedOver?: boolean;
-}
-export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};
+}>;

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

@@ -1,43 +1,4 @@
-import{jsx as e,Fragment as n,jsxs as o}from"react/jsx-runtime";import t from"../../../../../assets/icons/chevronRight.svg.js";import{forwardRef as r,useState as i}from"react";import l from"styled-components";import{CheckBox as a}from"../../../../checkBox/CheckBox.js";import{ListItem as s}from"../../../../list-item/ListItem.js";import{Tooltip as d}from"../../../../tooltips/Tooltip.js";import{BodyCaption as c}from"../../../../TypographyStyle.js";import{DEFAULT_THEME as p,COLORS as g}from"../../../../../constants/Theme.js";import{FreeFormContainer as m}from"./FreeFormMenu.styled.js";const u=l(s)`
-	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
-	cursor: pointer;
-	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
-`,v=l.div`
-	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	border-radius: ${e=>{let{version:n}=e;return"1.0"===n?"0":"8px"}};
-	padding: ${e=>{let{version:n}=e;return"1.0"===n?"0":"4px"}};
-	min-width: 148px;
-	border: ${e=>{let{version:n}=e;return"1.0"===n?`1px solid ${p.colorsV2.stroke.primary}`:"none"}};
-	max-height: 248px;
-	overflow-y: auto;
-`,h=l.div`
-	display: grid;
-	grid-template-columns: repeat(2, 2.86px);
-	grid-template-rows: repeat(3, 2.86px);
-	column-gap: 3.8px;
-	row-gap: 4px;
-	margin-right: 8px;
-	cursor: move;
-	flex-shrink: 0;
-	align-self: center;
-	height: fit-content;
-	min-height: 18px;
-`,x=l.div`
-	width: 2.86px;
-	height: 2.86px;
-	border-radius: 50%;
-	background-color: ${g.content.inactive};
-	flex-shrink: 0;
-`,b=l.div`
-	display: flex;
-	align-content: center;
-	justify-content: center;
-	gap: 8px;
-`,f=l.div`
-	margin-right: -4px;
-`,D=l.div`
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-	flex: 1;
-`,j=n=>{let{onDragStart:t,onDragEnd:r}=n;return o(h,Object.assign({draggable:!0,onDragStart:t,onDragEnd:r},{children:[e(x,{}),e(x,{}),e(x,{}),e(x,{}),e(x,{}),e(x,{})]}))},y=r(((r,l)=>{let{option:s,isMultiSelect:h,showDescription:x,onSelect:y,last:I,version:O,onDropdownItemClick:C,useDefaultCursor:k,isFocused:w=!1,dataIndex:T=-1,isDraggable:$=!1,onDragStart:S,onDragOver:E,onDrop:F,onDragEnd:M,isDraggedOver:L=!1}=r;var B;const[A,V]=i(s.selected),z=(e,n)=>{if(!e.children){R(!e.selected);const o=n?Object.assign(Object.assign({},e),{parent:n}):e;null==C||C(o)}},R=e=>{s.disabled||y(Object.assign(Object.assign({},s),{selected:e}))},U=k?{cursor:"default"}:{};return e(n,{children:e(d,Object.assign({body:"",tooltipContent:s.children?e("div",Object.assign({style:{backgroundColor:p.colorsV2.surface.standard},ref:l,onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1)},{children:e(v,Object.assign({version:null!=O?O:"2.0"},{children:s.children.map((n=>{var o;return e(u,{version:O,style:"1.0"!==O&&(null!==(o=null==s?void 0:s.children)&&void 0!==o?o:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),z(n,s)},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:n.leadingIcon||void 0,customComponent:n.customComponent,trailingIcon:n.trailingIcon||void 0,variant:s.disabled?"inactive":n.selected?"selected":"default"},n.value)}))}))})):e(n,{}),placement:"right-start",hideArrow:!0},{children:e(u,{version:O,style:I?Object.assign(Object.assign({borderBottom:0},U),L?{borderTop:`2px solid ${g.content.brand}`,opacity:.5}:{}):Object.assign(Object.assign({},U),L?{borderTop:`2px solid ${g.content.brand}`,opacity:.5}:{}),onClick:e=>{e.preventDefault(),z(s)},onMouseOver:()=>{s.description?x(s.label,s.description):x()},listItem:{value:s.value,label:s.label},subText:s.subText,"data-option-index":T,role:"option",id:`dropdown-option-${T}`,"aria-selected":!!s.selected,onDragOver:$?E:void 0,onDrop:$?F:void 0,leadingIcon:h?o(b,{children:[$&&e(j,{onDragStart:S,onDragEnd:M}),e(a,{size:"2.0"===O?"SMALL":"DEFAULT",isDisabled:null!==(B=s.disabled)&&void 0!==B&&B,isChecked:!!s.selected,onValueChange:R}),e(f,{children:s.leadingIcon})]}):$?o(D,{children:[e(j,{onDragStart:S,onDragEnd:M}),s.leadingIcon&&e("div",{children:s.leadingIcon})]}):s.leadingIcon?e(n,{children:s.leadingIcon}):void 0,customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(m,{children:e(c,Object.assign({style:{color:g.content.secondary}},{children:"Freeform"}))}):s.children?e(t,{width:12,height:12}):s.trailingIcon?e(n,{children:s.trailingIcon}):void 0,variant:s.disabled?"inactive":w||s.selected||!h&&A?"selected":"default"})}))})}));export{y as MenuItem};
+import{jsx as e,Fragment as t}from"react/jsx-runtime";import o from"styled-components";import{CheckBox as i}from"../../../../checkBox/CheckBox.js";import{ListItem as n}from"../../../../list-item/ListItem.js";import{BodyCaption as s}from"../../../../TypographyStyle.js";import{COLORS as r}from"../../../../../constants/Theme.js";import{FreeFormContainer as l}from"./FreeFormMenu.styled.js";const c=o(n)`
+	padding: 14px 16px !important;
+	cursor: default;
+`,a=o=>{let{option:n,isMultiSelect:a,showDescription:m,onSelect:d}=o;var p;function u(e){n.disabled||d(Object.assign(Object.assign({},n),{selected:e}))}return e(c,{onClick:e=>{e.preventDefault(),u(!n.selected)},onMouseOver:function(){n.description?m(n.label,n.description):m()},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:a?e(i,{isDisabled:null!==(p=n.disabled)&&void 0!==p&&p,isChecked:!!n.selected,onValueChange:u}):e(t,{}),customComponent:n.customComponent,trailingIcon:n.isFreeForm?e(l,{children:e(s,Object.assign({style:{color:r.content.secondary}},{children:"Freeform"}))}):n.trailingIcon?e(t,{children:n.trailingIcon}):e(t,{}),variant:n.disabled?"inactive":n.selected?"selected":"default"})};export{a as MenuItem};

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

@@ -1,17 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { DropdownOption, SingleOption } from '../../../type';
-interface MenuListProps {
+export declare const MenuList: React.FC<{
     options: DropdownOption[];
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (optionSelect: SingleOption) => void;
-    version?: '1.0' | '2.0';
-    onInfiniteScroll?: () => void;
-    onDropdownItemClick?: (option: DropdownOption) => void;
-    useDefaultCursor?: boolean;
-    focusedIndex?: number;
-    isDraggable?: boolean;
-    onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
-}
-export declare const MenuList: import("react").ForwardRefExoticComponent<MenuListProps & import("react").RefAttributes<HTMLDivElement[]>>;
-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,useState as s,useCallback as l,useEffect as i}from"react";import{MenuItem as c}from"./MenuItem.js";import{StyledGroupedLabel as a}from"./MenuList.styled.js";const u=r(((r,u)=>{let{options:d,isMultiSelect:p,showDescription:f,onSelect:g,version:m,onInfiniteScroll:D,onDropdownItemClick:b,useDefaultCursor:v,focusedIndex:h=-1,isDraggable:I=!1,onOptionsReorder:w}=r;const j=o(null),S=o(null),[O,C]=s(null),[M,x]=s(null),y=l((()=>{j.current&&j.current.disconnect(),j.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==D||D())})),S.current&&j.current.observe(S.current)}),[D]);i((()=>(y(),()=>{j.current&&j.current.disconnect()})),[y,d]);const E=l((e=>n=>{I&&(C(e),n.dataTransfer.effectAllowed="move")}),[I]),k=l((e=>n=>{I&&(n.preventDefault(),n.dataTransfer.dropEffect="move",x(e))}),[I]),T=l((e=>n=>{if(I&&null!==O){if(n.preventDefault(),O!==e){const n=[...d],[t]=n.splice(O,1);n.splice(e,0,t),null==w||w(n)}C(null),x(null)}}),[I,O,d,w]),F=l((()=>{C(null),x(null)}),[]),R=new Map;let $=-1;return d.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||($++,R.set(e,$))}));else{const n=e;n.disabled||($++,R.set(n,$))}})),e(n,{children:d.map(((n,r)=>{const o=r===d.length-1;if(n.options){const s=n;return t("div",Object.assign({style:{marginTop:"2.0"===m?2:0}},{children:[t(a,Object.assign({version:m},{children:[s.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:s.leadingIcon})):null,s.label]})),s.options.map(((n,t)=>{const o=R.get(n),l=o===h&&!n.disabled;return e(c,{version:m,last:t===s.options.length-1,onSelect:g,showDescription:f,onDropdownItemClick:b,isMultiSelect:p,option:n,useDefaultCursor:v,isFocused:l,dataIndex:o,isDraggable:!1,ref:e=>{u&&"object"==typeof u&&u.current&&e&&e&&e&&e&&(u.current[r]=e)}},`${r}-${t}`)})),o?e("span",{ref:S}):null]}),r)}const s=n,l=R.get(s),i=l===h&&!s.disabled;return t("div",{children:[e(c,{version:m,last:o,onSelect:g,showDescription:f,onDropdownItemClick:b,isMultiSelect:p,option:s,useDefaultCursor:v,isFocused:i,dataIndex:l,isDraggable:I,onDragStart:E(r),onDragOver:k(r),onDrop:T(r),onDragEnd:F,isDraggedOver:M===r,ref:e=>{u&&"object"==typeof u&&u.current&&e&&(u.current[r]=e)}},s.value),o?e("span",{ref:S}):null]},r)}))})}));export{u as MenuList};
+import{jsx as t,Fragment as e,jsxs as o}from"react/jsx-runtime";import{MenuItem as i}from"./MenuItem.js";import{StyledGroupedLabel as n}from"./MenuList.styled.js";const r=r=>{let{options:s,isMultiSelect:l,showDescription:c,onSelect:p}=r;return t(e,{children:s.map(((e,r)=>{if(e.options){const s=e;return o("div",{children:[t(n,{children:s.label}),s.options.map(((e,o)=>t(i,{onSelect:p,showDescription:c,isMultiSelect:l,option:e},o)))]},r)}return t(i,{onSelect:p,showDescription:c,isMultiSelect:l,option:e},r)}))})};export{r as MenuList};

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

@@ -1,6 +1 @@
-export declare const StyledGroupedLabel: import("styled-components").StyledComponent<"div", any, {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
-} & {
-    version?: "1.0" | "2.0" | undefined;
-}, never>;
+export declare const StyledGroupedLabel: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,6 +1,5 @@
-import o from"styled-components";import{BodyCaption as r}from"../../../../TypographyStyle.js";import{COLORS as n}from"../../../../../constants/Theme.js";const e=o(r)`
-	padding: 8px ${o=>"2.0"===o.version?12:16}px;
-	color: ${o=>"2.0"===o.version?n.content.placeholder:n.content.secondary};
-	background-color: ${o=>"2.0"===o.version?n.surface.standard:n.background.base};
-	font-size: ${o=>"2.0"===o.version?10:12}px;
-`;export{e as StyledGroupedLabel};
+import o from"styled-components";import{BodyCaption as r}from"../../../../TypographyStyle.js";import{COLORS as t}from"../../../../../constants/Theme.js";const n=o(r)`
+	padding: 8px 16px;
+	color: ${t.content.secondary};
+	background-color: ${t.background.base};
+`;export{n as StyledGroupedLabel};

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

@@ -4,5 +4,4 @@ export type SelectAllCheckboxState = 'notSelected' | 'selectAll' | 'partiallySel
 export declare const SelectAllMenu: React.FC<{
     options: DropdownOption[];
     onSelect: (newState: SelectAllCheckboxState) => void;
-    version?: '1.0' | '2.0';
 }>;

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

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as t,useEffect as l}from"react";import{CheckBox as o}from"../../../../checkBox/CheckBox.js";import{ListItem as i}from"../../../../list-item/ListItem.js";const c=c=>{let{options:n,onSelect:r,version:s}=c;const[a,d]=t("notSelected");function p(){"partiallySelected"===a&&r("notSelected"),"selectAll"===a&&r("notSelected"),"notSelected"===a&&r("selectAll")}return l((()=>{const e=[];n.filter((e=>!e.disabled)).forEach((t=>{t.options?t.options.filter((e=>!e.disabled)).forEach((t=>{e.push(t.selected||!1)})):e.push(t.selected||!1)})),e.every(Boolean)?d("selectAll"):e.filter(Boolean).length>0?d("partiallySelected"):d("notSelected")}),[n]),e(i,{version:s,onClick:e=>{e.preventDefault(),p()},listItem:{label:"Select All",value:"All"},leadingIcon:e("div",Object.assign({style:{width:18,height:18}},{children:e(o,{size:"2.0"===s?"SMALL":"DEFAULT",isChecked:"selectAll"===a||"partiallySelected"===a,isPartiallyChecked:"partiallySelected"===a,onValueChange:p})})),variant:"default"})};export{c as SelectAllMenu};
+import{jsx as e}from"react/jsx-runtime";import{useState as t,useEffect as l}from"react";import o from"styled-components";import{CheckBox as c}from"../../../../checkBox/CheckBox.js";import{ListItem as i}from"../../../../list-item/ListItem.js";const r=o(i)``,n=o=>{let{options:i,onSelect:n}=o;const[a,s]=t("notSelected");function d(){"partiallySelected"===a&&n("notSelected"),"selectAll"===a&&n("notSelected"),"notSelected"===a&&n("selectAll")}return l((()=>{const e=[];i.filter((e=>!e.disabled)).forEach((t=>{t.options?t.options.filter((e=>!e.disabled)).forEach((t=>{e.push(t.selected||!1)})):e.push(t.selected||!1)})),e.every(Boolean)?s("selectAll"):e.filter(Boolean).length>0?s("partiallySelected"):s("notSelected")}),[i]),e(r,{onClick:e=>{e.preventDefault(),d()},listItem:{label:"Select All",value:"All"},leadingIcon:e(c,{isChecked:"selectAll"===a||"partiallySelected"===a,isPartiallyChecked:"partiallySelected"===a,onValueChange:d}),variant:"default"})};export{n as SelectAllMenu};

package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts

@@ -1,12 +1,8 @@
 import React from 'react';
-import { ButtonOptions, DropdownOption } from '../../../type';
-interface MultiSelectDropdownBottomBarProps {
+import { DropdownOption } from '../../../type';
+declare const MultiSelectDropdownBottomBar: React.FC<{
     onClear?: () => void;
     onApply: () => void;
     list: DropdownOption[];
-    buttonText?: string;
-    buttonOptions?: ButtonOptions;
-    hideClearButton?: boolean;
-}
-declare const MultiSelectDropdownBottomBar: React.FC<MultiSelectDropdownBottomBarProps>;
+}>;
 export default MultiSelectDropdownBottomBar;

package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Button as o}from"../../../../button/Button.js";import{BodySecondary as n}from"../../../../TypographyStyle.js";import{COLORS as r}from"../../../../../constants/Theme.js";import{BottomBarContainer as s}from"./MultiSelectDropdownBottomBar.styled.js";const l=l=>{const{onClear:i,onApply:p,list:a,buttonText:c,buttonOptions:u,hideClearButton:y}=l,{primaryButtonText:m,primaryButtonType:d,secondaryButtonText:f,secondaryButtonType:b}=null!=u?u:{},T=a.reduce(((t,e)=>{if(e.options){return t+e.options.filter((t=>!0===t.selected)).length}return e.selected?t+1:t}),0);return t(s,Object.assign({style:{justifyContent:"space-between"}},{children:[e(n,Object.assign({style:{flex:1,color:r.content.primary}},{children:T?`${T} selected`:""})),t("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[!y&&e(o,{size:"small",buttonType:b||"primary",buttonText:f||"Clear",onClick:i}),e(o,{size:"small",buttonText:m||c||"Apply",buttonType:d||"primary",onClick:()=>{p()}})]}))]}))};export{l as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Button as o}from"../../../../button/Button.js";import{BodySecondary as r}from"../../../../TypographyStyle.js";import{COLORS as l}from"../../../../../constants/Theme.js";import{BottomBarContainer as n}from"./MultiSelectDropdownBottomBar.styled.js";const s=s=>{let{onApply:i,onClear:c,list:p}=s;const a=p.reduce(((t,e)=>{if(e.options){return t+e.options.filter((t=>!0===t.selected)).length}return e.selected?t+1:t}),0);return t(n,Object.assign({style:{justifyContent:"space-between"}},{children:[e(r,Object.assign({style:{flex:1,color:l.content.primary}},{children:a?`${a} selected`:""})),t("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(o,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:c}),e(o,{size:"small",buttonText:"Apply",onClick:i})]}))]}))};export{s as default};

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 export declare const SearchBox: React.FC<{
     onSearch: (searchString: string) => void;
-    version?: '1.0' | '2.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js

@@ -1 +1 @@
-import{jsx as o,Fragment as r}from"react/jsx-runtime";import{useState as t}from"react";import{IconButton as e}from"../../../../icon-button/IconButton.js";import{Input as n}from"../../../../input/Input.js";import{InputStyleContext as i}from"../../../../input/context/InputStyleProvider.js";import{COLORS as s}from"../../../../../constants/Theme.js";import c from"../../../../../assets/icons/cross.svg.js";import p from"../../../../../assets/icons/search.svg.js";const a=a=>{let{onSearch:m,version:l}=a;const[h,d]=t(""),[u,f]=t(!1);return o(i.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:`${"2.0"===l?.5:1}px solid ${s.stroke.primary}`,padding:""+("2.0"===l?"6px 8px":"14px 16px")},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:o(n,{noKeyDownChange:!0,skipFocus:!0,placeholder:"Search",variant:"2.0"===l?"small":"default",leftIcon:{icon:()=>o(p,{width:"2.0"===l?18:24,height:"2.0"===l?18:24,color:s.content.placeholder})},rightIcon:{icon:()=>h?o(e,{onClick:()=>{f(!0),m(""),d("")},Icon:c,width:"2.0"===l?18:24,height:"2.0"===l?18:24,iconColor:s.content.placeholder}):o(r,{})},reset:u,onChangeText:o=>{f(!1),d(o),m(o)}})}))};export{a as SearchBox};
+import{jsx as r,Fragment as o}from"react/jsx-runtime";import{createRef as t}from"react";import{Input as e}from"../../../../input/Input.js";import{InputStyleContext as n}from"../../../../input/context/InputStyleProvider.js";import{COLORS as i}from"../../../../../constants/Theme.js";import c from"../../../../../assets/icons/cross.svg.js";import s from"../../../../../assets/icons/search.svg.js";const p=p=>{let{onSearch:a}=p;const l=t();return r(n.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:"1px solid "+i.stroke.primary,padding:"14px 16px"},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:r(e,{ref:l,placeholder:"Search",leftIcon:{icon:()=>r(s,{width:24,height:24,color:i.content.placeholder})},rightIcon:{icon:()=>{var t;return(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.value)?r(c,{onClick:()=>{l.current&&(l.current.value=""),a("")},width:24,height:24,color:i.content.placeholder}):r(o,{})}},onChangeText:a})}))};export{p as SearchBox};

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
 export declare const SearchZeroState: React.FC<{
     searchedString: string;
-    height: number;
-    isLoading?: boolean;
-    containerWidth?: string;
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{ZeroState as e}from"../../../../zeroState/ZeroState.js";const i=i=>{let{searchedString:r,height:n,isLoading:o,containerWidth:s}=i;return t("div",Object.assign({style:{height:n,display:"flex",alignItems:"center"}},{children:t(e,{isLoading:o,title:"No results found",subTitle:`Sorry we could not find any results for "${null!=r?r:""}"`,containerWidth:s})}))};export{i as SearchZeroState};
+import{jsx as t}from"react/jsx-runtime";import{ZeroState as r}from"../../../../zeroState/ZeroState.js";const e=e=>{let{searchedString:o}=e;return t("div",Object.assign({style:{margin:"28px auto"}},{children:t(r,{title:"No results found",subTitle:`Sorry we could not find any results for "${null!=o?o:""}"`})}))};export{e as SearchZeroState};