@bikdotai/bik-component-library 0.0.552-beta.3 → 0.0.552-beta.5

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/cjs/components/dropdown/ChipInput.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { SingleOption } from './type';
 interface ChipInputProps {
+    placeholder?: string;
     chips: SingleOption[];
     onDeleteChip: (chip: SingleOption) => void;
     containerStyle?: React.CSSProperties;
     isDropdownOpened?: boolean;
     sizeToUse?: 'default' | 'small';
-    setDropdownVisibility?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 declare const ChipInput: React.FC<ChipInputProps>;
 export default ChipInput;

package/dist/cjs/components/dropdown/ChipInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),t=require("../../assets/icons/chevronDown.svg.js"),r=require("../../assets/icons/cross.svg.js"),i=require("../tag/Tag.js"),l=require("../TypographyStyle.js"),n=require("./Common.styled.js");exports.default=a=>{let{chips:c,onDeleteChip:o,containerStyle:d={},sizeToUse:h="default",isDropdownOpened:j}=a;return e.jsxs(n.ChipInputWrapper,Object.assign({style:Object.assign({},d)},{children:[e.jsxs("div",Object.assign({className:"chips-container"},{children:[c.slice(0,2).map(((s,t)=>e.jsx("div",Object.assign({style:{zIndex:10}},{children:e.jsx(i.Tag,Object.assign({tagText:s.selectedLabel||s.label,TrailingIcon:()=>e.jsx(r.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{o(s)}})},{children:s.selectedLabel||s.label}))}),t))),c.length>2&&e.jsx(l.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:`+${c.length-2} more`})),0===c.length&&e.jsx(l.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:"Select.."}))]})),e.jsx("div",{children:e.jsx(t.default,{style:{transform:j?"rotate(180deg)":"rotate(0deg)"},width:"small"===h?20:24,height:"small"===h?20:24,color:s.COLORS.content.primary})})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),t=require("../../assets/icons/chevronDown.svg.js"),r=require("../../assets/icons/cross.svg.js"),l=require("../tag/Tag.js"),i=require("../TypographyStyle.js"),n=require("./Common.styled.js");exports.default=a=>{let{chips:c,onDeleteChip:o,containerStyle:d={},sizeToUse:h="default",isDropdownOpened:j,placeholder:g="Select.."}=a;return e.jsxs(n.ChipInputWrapper,Object.assign({style:Object.assign({},d)},{children:[e.jsxs("div",Object.assign({className:"chips-container"},{children:[c.slice(0,2).map(((s,t)=>e.jsx("div",Object.assign({style:{zIndex:10}},{children:e.jsx(l.Tag,Object.assign({tagText:s.selectedLabel||s.label,TrailingIcon:()=>e.jsx(r.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{o(s)}})},{children:s.selectedLabel||s.label}))}),t))),c.length>2&&e.jsx(i.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:`+${c.length-2} more`})),0===c.length&&e.jsx("div",Object.assign({style:{color:s.COLORS.content.placeholder}},{children:g}))]})),e.jsx("div",{children:e.jsx(t.default,{style:{transform:j?"rotate(180deg)":"rotate(0deg)"},width:"small"===h?20:24,height:"small"===h?20:24,color:s.COLORS.content.primary})})]}))};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/chevronDown.svg.js"),r=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),d=require("./DropdownPopover/index.js"),u=require("./OpenedDropdown/utils/iterationOnOptions.js");function a(){}const p=p=>{var c,h,v,g,j,{placeHolder:f,size:w,onSelect:b,defaultOptions:x,disabled:y,noErrorHint:O,placeHolderHeight:S,showPlaceholderWhenSelected:D=!1,inputStyle:q={},inputType:C="default",onDeleteChip:H}=p,m=e.__rest(p,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[I,E]=n.useState(!1),P=null!=w?w:"default",T=n.useRef(),[_,z]=n.useState(null!=x?x:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==m?void 0:m.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),z([...t])}),[m.options]),n.useEffect((()=>{x&&z([...x])}),[x]);const W=u.getSelectedOptionsAsText(_);return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign({height:S||("small"===P?32:48),width:null!==(h=null!==(c=m.buttonWidth)&&void 0!==c?c:m.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},q),input:{minHeight:"100%"}}},{children:t.jsxs(d.DropdownPopover,Object.assign({ref:T,onSelect:function(e){Array.isArray(e)?z([...e]):z([e]),null==b||b(e)},disabled:y,onDropdownVisbilityChange:e=>E(e)},m,{children:["default"==C&&t.jsx(r.Input,{version:m.version,noErrorHint:O,state:y?"disabled":"none",value:D?f:null!=W?W:"",errorMessage:m.error,variant:P,placeholder:null!=f?f:"Select an option",width:null!==(v=m.width)&&void 0!==v?v:"100%",onChangeText:a,rightIcon:{icon:()=>t.jsx(i.default,{style:{transform:I?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===P?20:24,height:"small"===P?20:24,color:o.COLORS.content.primary})},truncateText:!0}),"chip"==C&&t.jsx(s.default,{chips:_,onDeleteChip:e=>{null==H||H(e),console.log("onDeleteChip",e)},isDropdownOpened:I,sizeToUse:P,containerStyle:{width:null!==(g=m.width)&&void 0!==g?g:"100%",cursor:"pointer"},setDropdownVisibility:null===(j=null==T?void 0:T.current)||void 0===j?void 0:j.setDropdownVisibility})]}))}))};p.displayName="Dropdown",exports.Dropdown=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),o=require("../../constants/Theme.js"),r=require("../../assets/icons/chevronDown.svg.js"),i=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),u=require("./DropdownPopover/index.js"),a=require("./OpenedDropdown/utils/iterationOnOptions.js");function d(){}const p=p=>{var c,h,v,j,{placeHolder:f,size:g,onSelect:w,defaultOptions:x,disabled:S,noErrorHint:b,placeHolderHeight:O,showPlaceholderWhenSelected:y=!1,inputStyle:D={},inputType:q="default",onDeleteChip:H}=p,m=e.__rest(p,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[C,I]=n.useState(!1),E=null!=g?g:"default",P=n.useRef(),[T,_]=n.useState(null!=x?x:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==m?void 0:m.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),_([...t])}),[m.options]),n.useEffect((()=>{x&&_([...x])}),[x]);const z=a.getSelectedOptionsAsText(T);return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign({height:O||("small"===E?32:48),width:null!==(h=null!==(c=m.buttonWidth)&&void 0!==c?c:m.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},D),input:{minHeight:"100%"}}},{children:t.jsxs(u.DropdownPopover,Object.assign({ref:P,onSelect:function(e){Array.isArray(e)?_([...e]):_([e]),null==w||w(e)},disabled:S,onDropdownVisbilityChange:e=>I(e)},m,{children:["default"==q&&t.jsx(i.Input,{version:m.version,noErrorHint:b,state:S?"disabled":"none",value:y?f:null!=z?z:"",errorMessage:m.error,variant:E,placeholder:null!=f?f:"Select an option",width:null!==(v=m.width)&&void 0!==v?v:"100%",onChangeText:d,rightIcon:{icon:()=>t.jsx(r.default,{style:{transform:C?"rotate(180deg)":"rotate(0deg)"},onClick:d,width:"small"===E?20:24,height:"small"===E?20:24,color:o.COLORS.content.primary})},truncateText:!0}),"chip"==q&&t.jsx(s.default,{placeholder:null!=f?f:"Select options",chips:T,onDeleteChip:e=>{null==H||H(e)},isDropdownOpened:C,sizeToUse:E,containerStyle:{width:null!==(j=m.width)&&void 0!==j?j:"100%",cursor:"pointer"}})]}))}))};p.displayName="Dropdown",exports.Dropdown=p;

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

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

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

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

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

@@ -9,6 +9,7 @@
 	position: relative;
 	padding: ${e=>"2.0"===e.version?4:0}px;
 	background-color: ${r.COLORS.surface.standard};
+	z-index: 100;
 `;t.default.div`
 	padding: 14px 16px 14px 18px;
 	flex-direction: row;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../zeroState/ZeroState.js");exports.SearchZeroState=r=>{let{searchedString:s,height:i}=r;return e.jsx("div",Object.assign({style:{height:i,display:"flex",alignItems:"center"}},{children:e.jsx(t.ZeroState,{title:"No results found",subTitle:`Sorry we could not find any results for "${null!=s?s:""}"`})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../zeroState/ZeroState.js");exports.SearchZeroState=r=>{let{searchedString:s,height:i,isLoading:o}=r;return e.jsx("div",Object.assign({style:{height:i,display:"flex",alignItems:"center"}},{children:e.jsx(t.ZeroState,{isLoading:o,title:"No results found",subTitle:`Sorry we could not find any results for "${null!=s?s:""}"`})}))};

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

@@ -24,6 +24,7 @@ export interface OpenDropdownProps {
     onMultiSelectClear?: () => void;
     onDropdownItemClick?: (option: DropdownOption) => void;
     buttonOptions?: ButtonOptions;
+    isSearchLoading?: boolean;
 }
 export type GroupedOption = {
     label?: string;

package/dist/cjs/components/side-modal/SideModal.style.js

@@ -31,6 +31,7 @@
 	svg:hover {
 		cursor: pointer;
 		background: ${t.COLORS.background.base};
+		border-radius: 4px;
 	}
 	${t=>{let{headerStyle:o}=t;return e.css`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
@@ -42,7 +43,7 @@
 	${t=>{let{bodyStyle:o}=t;return e.css`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,l=r.default.div`
+`,p=r.default.div`
 	height: 60px;
 	width: 100%;
 	position: sticky;
@@ -57,8 +58,8 @@
 	${t=>{let{footerStyle:o}=t;return e.css`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,p=r.default.div`
+`,l=r.default.div`
 	display: flex;
 	flex-direction: ${e=>e.footerDirection||"row"};
 	gap: 8px;
-`;exports.FooterButtonWrapper=p,exports.SideModalBody=s,exports.SideModalContainer=n,exports.SideModalFooter=l,exports.SideModalHeader=a,exports.SideModalStyle=d;
+`;exports.FooterButtonWrapper=l,exports.SideModalBody=s,exports.SideModalContainer=n,exports.SideModalFooter=p,exports.SideModalHeader=a,exports.SideModalStyle=d;

package/dist/cjs/components/zeroState/ZeroState.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare const ZeroState: React.FC<{
+    isLoading?: boolean;
     title: string;
     subTitle?: string;
     IconHolderStyle?: React.CSSProperties;

package/dist/cjs/components/zeroState/ZeroState.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../TypographyStyle.js"),n=require("../../constants/Theme.js"),s=require("../../assets/icons/alert.svg.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(t);const o=i.default.div`
-	background: ${n.COLORS.surface.standard};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),n=require("../TypographyStyle.js"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/alert.svg.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(t);const o=l.default.div`
+	background: ${r.COLORS.surface.standard};
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	flex: 1;
-`,c=i.default.div`
-	background: ${n.COLORS.background.base};
+`,c=l.default.div`
+	background: ${r.COLORS.background.base};
 	width: 48px;
 	height: 48px;
 	display: flex;
@@ -14,4 +14,4 @@
 	align-items: center;
 	justify-content: center;
 	border-radius: 24px;
-`;exports.ZeroState=t=>{let{subTitle:l,title:i,IconHolderStyle:a,style:d}=t;return e.jsxs(o,Object.assign({style:null!=d?d:{}},{children:[e.jsx(c,Object.assign({style:null!=a?a:{}},{children:e.jsx(s.default,{color:n.COLORS.content.placeholder,height:24,width:24})})),e.jsx(r.TitleRegular,Object.assign({style:{marginTop:8,color:n.COLORS.content.primary}},{children:null!=i?i:"No results found"})),!!l&&e.jsx(r.BodyCaption,Object.assign({style:{marginTop:4,color:n.COLORS.content.secondary,textAlign:"center",maxWidth:184}},{children:l}))]}))};
+`;exports.ZeroState=t=>{let{subTitle:i,title:l,IconHolderStyle:a,style:d,isLoading:u}=t;return e.jsxs(o,Object.assign({style:null!=d?d:{}},{children:[e.jsx(c,Object.assign({style:null!=a?a:{}},{children:e.jsx(s.default,{color:r.COLORS.content.placeholder,height:24,width:24})})),e.jsx(n.TitleRegular,Object.assign({style:{marginTop:8,color:r.COLORS.content.primary}},{children:u?"Loading...":l||"No results found"})),!!i&&!u&&e.jsx(n.BodyCaption,Object.assign({style:{marginTop:4,color:r.COLORS.content.secondary,textAlign:"center",maxWidth:184}},{children:i}))]}))};

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { SingleOption } from './type';
 interface ChipInputProps {
+    placeholder?: string;
     chips: SingleOption[];
     onDeleteChip: (chip: SingleOption) => void;
     containerStyle?: React.CSSProperties;
     isDropdownOpened?: boolean;
     sizeToUse?: 'default' | 'small';
-    setDropdownVisibility?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 declare const ChipInput: React.FC<ChipInputProps>;
 export default ChipInput;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import o from"../../assets/icons/chevronDown.svg.js";import r from"../../assets/icons/cross.svg.js";import{Tag as n}from"../tag/Tag.js";import{BodyCaption as l}from"../TypographyStyle.js";import{ChipInputWrapper as i}from"./Common.styled.js";const c=c=>{let{chips:a,onDeleteChip:m,containerStyle:d={},sizeToUse:h="default",isDropdownOpened:g}=c;return e(i,Object.assign({style:Object.assign({},d)},{children:[e("div",Object.assign({className:"chips-container"},{children:[a.slice(0,2).map(((e,s)=>t("div",Object.assign({style:{zIndex:10}},{children:t(n,Object.assign({tagText:e.selectedLabel||e.label,TrailingIcon:()=>t(r,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{m(e)}})},{children:e.selectedLabel||e.label}))}),s))),a.length>2&&t(l,Object.assign({color:s.content.placeholder},{children:`+${a.length-2} more`})),0===a.length&&t(l,Object.assign({color:s.content.placeholder},{children:"Select.."}))]})),t("div",{children:t(o,{style:{transform:g?"rotate(180deg)":"rotate(0deg)"},width:"small"===h?20:24,height:"small"===h?20:24,color:s.content.primary})})]}))};export{c as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import o from"../../assets/icons/chevronDown.svg.js";import r from"../../assets/icons/cross.svg.js";import{Tag as l}from"../tag/Tag.js";import{BodyCaption as n}from"../TypographyStyle.js";import{ChipInputWrapper as i}from"./Common.styled.js";const c=c=>{let{chips:a,onDeleteChip:d,containerStyle:h={},sizeToUse:m="default",isDropdownOpened:g,placeholder:p="Select.."}=c;return e(i,Object.assign({style:Object.assign({},h)},{children:[e("div",Object.assign({className:"chips-container"},{children:[a.slice(0,2).map(((e,s)=>t("div",Object.assign({style:{zIndex:10}},{children:t(l,Object.assign({tagText:e.selectedLabel||e.label,TrailingIcon:()=>t(r,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{d(e)}})},{children:e.selectedLabel||e.label}))}),s))),a.length>2&&t(n,Object.assign({color:s.content.placeholder},{children:`+${a.length-2} more`})),0===a.length&&t("div",Object.assign({style:{color:s.content.placeholder}},{children:p}))]})),t("div",{children:t(o,{style:{transform:g?"rotate(180deg)":"rotate(0deg)"},width:"small"===m?20:24,height:"small"===m?20:24,color:s.content.primary})})]}))};export{c as default};

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

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useState as n,useRef as i,useEffect as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import s from"../../assets/icons/chevronDown.svg.js";import{Input as p}from"../input/Input.js";import{InputStyleContext as d}from"../input/context/InputStyleProvider.js";import a from"./ChipInput.js";import{DropdownPopover as c}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function h(){}const m=m=>{var v,f,g,w,b,{placeHolder:j,size:y,onSelect:D,defaultOptions:O,disabled:H,noErrorHint:S,placeHolderHeight:x,showPlaceholderWhenSelected:C=!1,inputStyle:I={},inputType:T="default",onDeleteChip:E}=m,P=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[z,W]=n(!1),V=null!=y?y:"default",A=i(),[_,k]=n(null!=O?O:[]);r((()=>{var e;const o=[];null===(e=null==P?void 0:P.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)})),k([...o])}),[P.options]),r((()=>{O&&k([...O])}),[O]);const M=u(_);return o(d.Provider,Object.assign({value:{InputWrapper:Object.assign({height:x||("small"===V?32:48),width:null!==(f=null!==(v=P.buttonWidth)&&void 0!==v?v:P.width)&&void 0!==f?f:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},I),input:{minHeight:"100%"}}},{children:t(c,Object.assign({ref:A,onSelect:function(e){Array.isArray(e)?k([...e]):k([e]),null==D||D(e)},disabled:H,onDropdownVisbilityChange:e=>W(e)},P,{children:["default"==T&&o(p,{version:P.version,noErrorHint:S,state:H?"disabled":"none",value:C?j:null!=M?M:"",errorMessage:P.error,variant:V,placeholder:null!=j?j:"Select an option",width:null!==(g=P.width)&&void 0!==g?g:"100%",onChangeText:h,rightIcon:{icon:()=>o(s,{style:{transform:z?"rotate(180deg)":"rotate(0deg)"},onClick:h,width:"small"===V?20:24,height:"small"===V?20:24,color:l.content.primary})},truncateText:!0}),"chip"==T&&o(a,{chips:_,onDeleteChip:e=>{null==E||E(e),console.log("onDeleteChip",e)},isDropdownOpened:z,sizeToUse:V,containerStyle:{width:null!==(w=P.width)&&void 0!==w?w:"100%",cursor:"pointer"},setDropdownVisibility:null===(b=null==A?void 0:A.current)||void 0===b?void 0:b.setDropdownVisibility})]}))}))};m.displayName="Dropdown";export{m as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useState as n,useRef as i,useEffect as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import s from"../../assets/icons/chevronDown.svg.js";import{Input as p}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import d from"./ChipInput.js";import{DropdownPopover as c}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function h(){}const m=m=>{var f,v,g,w,{placeHolder:b,size:j,onSelect:y,defaultOptions:O,disabled:S,noErrorHint:H,placeHolderHeight:x,showPlaceholderWhenSelected:D=!1,inputStyle:C={},inputType:I="default",onDeleteChip:T}=m,E=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[P,z]=n(!1),W=null!=j?j:"default",A=i(),[_,k]=n(null!=O?O:[]);r((()=>{var e;const o=[];null===(e=null==E?void 0:E.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)})),k([...o])}),[E.options]),r((()=>{O&&k([...O])}),[O]);const M=u(_);return o(a.Provider,Object.assign({value:{InputWrapper:Object.assign({height:x||("small"===W?32:48),width:null!==(v=null!==(f=E.buttonWidth)&&void 0!==f?f:E.width)&&void 0!==v?v:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},C),input:{minHeight:"100%"}}},{children:t(c,Object.assign({ref:A,onSelect:function(e){Array.isArray(e)?k([...e]):k([e]),null==y||y(e)},disabled:S,onDropdownVisbilityChange:e=>z(e)},E,{children:["default"==I&&o(p,{version:E.version,noErrorHint:H,state:S?"disabled":"none",value:D?b:null!=M?M:"",errorMessage:E.error,variant:W,placeholder:null!=b?b:"Select an option",width:null!==(g=E.width)&&void 0!==g?g:"100%",onChangeText:h,rightIcon:{icon:()=>o(s,{style:{transform:P?"rotate(180deg)":"rotate(0deg)"},onClick:h,width:"small"===W?20:24,height:"small"===W?20:24,color:l.content.primary})},truncateText:!0}),"chip"==I&&o(d,{placeholder:null!=b?b:"Select options",chips:_,onDeleteChip:e=>{null==T||T(e)},isDropdownOpened:P,sizeToUse:W,containerStyle:{width:null!==(w=E.width)&&void 0!==w?w:"100%",cursor:"pointer"}})]}))}))};m.displayName="Dropdown";export{m as Dropdown};

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

@@ -1 +1 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as n,jsxs as r}from"react/jsx-runtime";import t,{useState as i,useRef as l,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 m,OpenDropdownContainer as v}from"../Common.styled.js";import{OpenedDropdown as u}from"../OpenedDropdown/components/OpennedDropdown.js";const w=t.forwardRef(((t,w)=>{var{children:b,onDropdownVisbilityChange:h,version:f="1.0",tooltipContent:D,tooltipDirection:j,showTooltipArrow:g}=t,y=o(t,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const O=w,[C,S]=i(!1),[x,A]=i(null),[R,T]=i(null),V=l(null),{styles:z,attributes:M}=d(x,R,{placement:y.placement,strategy:y.strategy}),P=o=>{var e,n;"2.0"===f&&y.isMultiSelect&&o&&(null===(e=y.onSelect)||void 0===e||e.call(y,[...o])),S(!1),null===(n=null==y?void 0:y.onClose)||void 0===n||n.call(y)};s(O,(()=>({openDropdown:C,closeDropdown:()=>S(!1),openDropdownFn:()=>S(!0),setDropdownVisibility:S})),[]),p((()=>{(null==O?void 0:O.current)&&(O.current.openDropdown=C)}),[C]),p((()=>{null==h||h(C)}),[C]);const _=()=>r(n,{children:[r("div",Object.assign({style:{position:"relative"},ref:A},{children:[e(m,{ref:V,disabled:y.disabled,onClick:o=>{var e;o.stopPropagation(),null===(e=y.onDropdownOpen)||void 0===e||e.call(y),C?(S(!1),o.preventDefault()):y.disabled||S(!0)}}),b]})),C&&e(v,Object.assign({ref:T,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:P,version:f,headerRef:V}))}))}))]});return e(n,{children:C||void 0===D?_():e(c,Object.assign({body:D,placement:j,hideArrow:!g},{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 i,useRef as l,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 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:g,showTooltipArrow:D}=t,y=o(t,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const O=h,[C,S]=i(!1),[x,A]=i(null),[R,T]=i(null),z=l(null),{styles:M,attributes:P}=d(x,R,{placement:y.placement,strategy:y.strategy}),V=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 _=()=>n(r,{children:[n("div",Object.assign({style:{position:"relative"},ref:A},{children:[e(m,{ref:z,disabled:y.disabled,onClick:o=>{var e;o.stopPropagation(),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})},P.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:z}))}))}))]});return e(r,{children:C||void 0===j?_():e(c,Object.assign({body:j,placement:g,hideArrow:!D},{children:e("div",{children:_()})}))})}));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 r}from"react";import{ZeroState as i}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 p}from"./menu/FreeFormMenu.js";import{MenuList as u}from"./menu/MenuList.js";import{SelectAllMenu as a}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as m,MenuListContainer as h}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:k,version:L,skipSorting:A,headerRef:F,hideSelectAll:I,primaryButtonText:B,onInfiniteScroll:H,onMultiSelectClear:T,onDropdownItemClick:R,buttonOptions:Z}=w;const{dropdownOptions:q,search:z,searchedString:K,searchedOptions:N,onApplyHandler:P,selectAllHandler:W,onMultiSelectClear:E,onFreeFormSelect:G,onMultiSelectApply:J,latestDropdownOptionsRef:Q,getSelectedOptions:U}=s(L,v,D,A,y,k),[V,X]=o(null!=x?x:b),[Y,$]=o(null),_=n(null);l(_,(()=>{if($(null),y&&"2.0"===L){const e=U(Q.current);null==M||M(e)}else null==M||M(q)}),[F]);const ee=null!=C?C:g,te="number"==typeof ee?j&&y?ee-96:j&&!y||!j&&y?ee-48:ee:ee;r((()=>{const e=null!=x?x:b;if(null===Y)X(e);else if("number"==typeof e)X(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));X(t)}}),[Y]);const oe=[],ne=(K&&k?N:q).map((e=>{var t,o;if(K&&!k){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(K.toLowerCase()))&&(oe.push(!K||e.label===K),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(K.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(K.toLowerCase()))?(oe.push(!K||e.label===K),e):null}return e})).filter((e=>null!==e)),re=!!j&&K&&0===ne.length;return e(m,Object.assign({version:L,ref:_,style:{width:V}},{children:[e("div",Object.assign({style:{width:Y?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!j&&t(f,{onSearch:z,version:L}),ne.length||K?e(h,Object.assign({minHeight:ee,maxHeight:te},{children:[!!y&&!re&&!I&&t(a,{version:L,options:K&&k?N:q,onSelect:W}),!O&&re&&t(S,{height:te,searchedString:K}),O&&(re||!!oe.length&&oe.every((e=>!1===e)))&&t(p,{version:L,isMultiSelect:y,onSelect:G,searchedString:K}),t(u,{onInfiniteScroll:H,onDropdownItemClick:R,version:L,onSelect:P,showDescription:function(e,t){$(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:ne})]})):t("div",Object.assign({style:{height:ee,display:"flex"}},{children:t(i,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!ne.length&&!K)&&"2.0"!==L&&t(d,{onClear:()=>{E(),null==T||T()},onApply:J,list:K&&k?N:q,buttonText:B,buttonOptions:Z})]})),!!Y&&t(c,{title:Y.title,description:Y.description,version:L})]}))};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

@@ -9,6 +9,7 @@ import o from"styled-components";import{COLORS as r}from"../../../../constants/T
 	position: relative;
 	padding: ${o=>"2.0"===o.version?4:0}px;
 	background-color: ${r.surface.standard};
+	z-index: 100;
 `;o.div`
 	padding: 14px 16px 14px 18px;
 	flex-direction: row;

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

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

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

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

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

@@ -24,6 +24,7 @@ export interface OpenDropdownProps {
     onMultiSelectClear?: () => void;
     onDropdownItemClick?: (option: DropdownOption) => void;
     buttonOptions?: ButtonOptions;
+    isSearchLoading?: boolean;
 }
 export type GroupedOption = {
     label?: string;

package/dist/esm/components/side-modal/SideModal.style.js

@@ -31,6 +31,7 @@ import e,{css as t}from"styled-components";import{COLORS as o}from"../../constan
 	svg:hover {
 		cursor: pointer;
 		background: ${o.background.base};
+		border-radius: 4px;
 	}
 	${e=>{let{headerStyle:o}=e;return t`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}

package/dist/esm/components/zeroState/ZeroState.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare const ZeroState: React.FC<{
+    isLoading?: boolean;
     title: string;
     subTitle?: string;
     IconHolderStyle?: React.CSSProperties;

package/dist/esm/components/zeroState/ZeroState.js

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{TitleRegular as r,BodyCaption as o}from"../TypographyStyle.js";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/alert.svg.js";const s=n.div`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{TitleRegular as r,BodyCaption as o}from"../TypographyStyle.js";import{COLORS as i}from"../../constants/Theme.js";import s from"../../assets/icons/alert.svg.js";const l=n.div`
 	background: ${i.surface.standard};
 	display: flex;
 	flex-direction: column;
@@ -14,4 +14,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-component
 	align-items: center;
 	justify-content: center;
 	border-radius: 24px;
-`,a=n=>{let{subTitle:a,title:d,IconHolderStyle:m,style:p}=n;return e(s,Object.assign({style:null!=p?p:{}},{children:[t(c,Object.assign({style:null!=m?m:{}},{children:t(l,{color:i.content.placeholder,height:24,width:24})})),t(r,Object.assign({style:{marginTop:8,color:i.content.primary}},{children:null!=d?d:"No results found"})),!!a&&t(o,Object.assign({style:{marginTop:4,color:i.content.secondary,textAlign:"center",maxWidth:184}},{children:a}))]}))};export{a as ZeroState};
+`,a=n=>{let{subTitle:a,title:d,IconHolderStyle:m,style:g,isLoading:p}=n;return e(l,Object.assign({style:null!=g?g:{}},{children:[t(c,Object.assign({style:null!=m?m:{}},{children:t(s,{color:i.content.placeholder,height:24,width:24})})),t(r,Object.assign({style:{marginTop:8,color:i.content.primary}},{children:p?"Loading...":d||"No results found"})),!!a&&!p&&t(o,Object.assign({style:{marginTop:4,color:i.content.secondary,textAlign:"center",maxWidth:184}},{children:a}))]}))};export{a as ZeroState};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.552-beta.3",
+	"version": "0.0.552-beta.5",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",