@bikdotai/bik-component-library 0.0.763-beta.22 → 0.0.763-beta.24

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

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"),s=require("../../../../hooks/useOutside.js"),o=require("../../hooks/useDropdown.js"),r=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,f=290;exports.OpenedDropdown=b=>{let{options:S,isSearchable:g,isMultiSelect:j,maxSelections:v,width:x,allowFreeForm:O,height:m,onClose:w,onSelect:y,onSearch:C,version:D,skipSorting:k,headerRef:q,hideSelectAll:M,primaryButtonText:L,onInfiniteScroll:E,onMultiSelectClear:A,onDropdownItemClick:I,buttonOptions:F,isSearchLoading:R,disableSearchOptions:T,disableSearchedOptionExcept:B,useDefaultCursor:H,containerStyle:Z={},zeroState:z,isDraggable:P=!1,onOptionsReorder:V,hideClearButton:W=!1}=b;const $=t.useCallback((e=>{if(!P||!j)return e;const t=[],n=[];return e.forEach((e=>{if(e.options)n.push(e);else{e.selected?t.push(e):n.push(e)}})),[...t,...n]}),[P,j]),[_,K]=t.useState((()=>$(S))),N=t.useRef(_);t.useEffect((()=>{K($(S))}),[S,$]),t.useEffect((()=>{N.current=_}),[_]);const U=t.useCallback((e=>{const t=$(e);K(t),"2.0"===D&&(null==V||V(t))}),[V,$,D]),G=P?_:S,{dropdownOptions:J,search:Q,searchedString:X,searchedOptions:Y,onApplyHandler:ee,selectAllHandler:te,onMultiSelectClear:ne,onFreeFormSelect:se,onMultiSelectApply:oe,latestDropdownOptionsRef:re,getSelectedOptions:ie,getCurrentSelectionCount:le}=o.useDropdown(D,G,y,k||P,j,C,T,B,v),[ue,ce]=t.useState(null!=x?x:f),[ae,de]=t.useState(null),[pe,he]=t.useState(-1),fe=t.useRef(null),be=t.useRef([]),Se=t.useRef(null);s.useOutside(fe,(()=>{if(de(null),j&&"2.0"===D){const e=ie(re.current);null==w||w(e)}else null==w||w(J);P&&V&&V(N.current)}),[q,be]),t.useEffect((()=>{const e=setTimeout((()=>{fe.current&&fe.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);t.useEffect((()=>{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 n=e;n.disabled||t.push(n)}})),t})(X&&C?Y:J);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),he((e=>{const n=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Se.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("ArrowUp"===e.key)e.preventDefault(),he((e=>{const n=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Se.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("Enter"===e.key&&pe>=0){e.preventDefault();const n=t[pe];n&&(ee(Object.assign(Object.assign({},n),{selected:!n.selected})),I&&I(n))}},t=fe.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[pe,X,Y,J,C,ee,I]);const ge=null!=m?m:h,je="number"==typeof ge?g&&j?ge-96:g&&!j||!g&&j?ge-48:ge:ge;t.useEffect((()=>{const e=null!=x?x:f;if(null===ae)ce(e);else if("number"==typeof e)ce(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));ce(t)}}),[ae]);const ve=[],xe=(e=>{if(!j||!v&&0!==v)return e;const t=le(e)>=v;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 n=e;return Object.assign(Object.assign({},n),{disabled:n.disabled||!n.selected&&t})}})):e})((X&&C?Y:J).map((e=>{var t,n;if(X&&!C){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(X.toLowerCase()))&&(ve.push(!X||e.label===X),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(X.toLowerCase()))||(null===(n=e.searchKey)||void 0===n?void 0:n.toLowerCase().includes(X.toLowerCase()))?(ve.push(!X||e.label===X),e):null}return e})).filter((e=>null!==e))),Oe=!!g&&X&&0===xe.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:D,ref:fe,tabIndex:-1,style:Object.assign(Object.assign({width:ue},Z),{outline:"none"})},{children:[e.jsxs("div",Object.assign({style:{width:ae?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!g&&e.jsx(d.SearchBox,{onSearch:Q,version:D}),xe.length||X?e.jsxs(a.MenuListContainer,Object.assign({minHeight:ge,maxHeight:je,ref:Se},{children:[!!j&&!Oe&&!M&&e.jsx(u.SelectAllMenu,{version:D,options:X&&C?Y:J,onSelect:te}),!O&&Oe&&e.jsx(p.SearchZeroState,{isLoading:R,height:je,searchedString:X,containerWidth:x}),O&&(Oe||!!ve.length&&ve.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:D,isMultiSelect:j,onSelect:se,searchedString:X}),e.jsx(l.MenuList,{onInfiniteScroll:E,onDropdownItemClick:I,version:D,onSelect:ee,showDescription:function(e,t){de(e&&t?{title:e,description:t}:null)},isMultiSelect:j,options:xe,useDefaultCursor:H,ref:be,focusedIndex:pe,isDraggable:P,onOptionsReorder:U})]})):e.jsx("div",Object.assign({style:{height:ge,display:"flex"}},{children:e.jsx(n.ZeroState,Object.assign({},z,{title:(null==z?void 0:z.title)||"No results found",subTitle:(null==z?void 0:z.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance."}))})),!!j&&!(!xe.length&&!X)&&"2.0"!==D&&e.jsx(c.default,{onClear:()=>{ne(),null==A||A()},onApply:oe,list:X&&C?Y:J,buttonText:L,buttonOptions:F,hideClearButton:W})]})),!!ae&&e.jsx(r.Description,{title:ae.title,description:ae.description,version:D})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../zeroState/ZeroState.js"),s=require("../../../../hooks/useOutside.js"),r=require("../../hooks/useDropdown.js"),o=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 f=304,h=290;exports.OpenedDropdown=b=>{let{options:S,isSearchable:g,isMultiSelect:j,maxSelections:v,width:x,allowFreeForm:O,height:m,onClose:w,onSelect:y,onSearch:C,version:D,skipSorting:k,headerRef:q,hideSelectAll:M,primaryButtonText:E,onInfiniteScroll:L,onMultiSelectClear:R,onDropdownItemClick:A,buttonOptions:I,isSearchLoading:F,disableSearchOptions:T,disableSearchedOptionExcept:B,useDefaultCursor:H,containerStyle:Z={},zeroState:z,isDraggable:P=!1,onOptionsReorder:V,hideClearButton:W=!1}=b;const $=t.useCallback((e=>{if(!P||!j)return e;const t=[],n=[];return e.forEach((e=>{if(e.options)n.push(e);else{e.selected?t.push(e):n.push(e)}})),[...t,...n]}),[P,j]),[_,K]=t.useState((()=>$(S))),N=t.useRef(_),U=t.useRef(!1),G=t.useRef(V);t.useEffect((()=>{K($(S))}),[S,$]),t.useEffect((()=>{N.current=_}),[_]),t.useEffect((()=>{G.current=V}),[V]),t.useEffect((()=>()=>{U.current&&G.current&&G.current(N.current)}),[]);const J=t.useCallback((e=>{const t=$(e);K(t),"2.0"===D?null==V||V(t):U.current=!0}),[V,$,D]),Q=P?_:S,{dropdownOptions:X,search:Y,searchedString:ee,searchedOptions:te,onApplyHandler:ne,selectAllHandler:se,onMultiSelectClear:re,onFreeFormSelect:oe,onMultiSelectApply:ie,latestDropdownOptionsRef:le,getSelectedOptions:ue,getCurrentSelectionCount:ce}=r.useDropdown(D,Q,y,k||P,j,C,T,B,v),[ae,de]=t.useState(null!=x?x:h),[pe,fe]=t.useState(null),[he,be]=t.useState(-1),Se=t.useRef(null),ge=t.useRef([]),je=t.useRef(null);s.useOutside(Se,(()=>{if(fe(null),j&&"2.0"===D){const e=ue(le.current);null==w||w(e)}else null==w||w(X)}),[q,ge]),t.useEffect((()=>{const e=setTimeout((()=>{Se.current&&Se.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);t.useEffect((()=>{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 n=e;n.disabled||t.push(n)}})),t})(ee&&C?te:X);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),be((e=>{const n=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=je.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("ArrowUp"===e.key)e.preventDefault(),be((e=>{const n=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=je.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("Enter"===e.key&&he>=0){e.preventDefault();const n=t[he];n&&(ne(Object.assign(Object.assign({},n),{selected:!n.selected})),A&&A(n))}},t=Se.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[he,ee,te,X,C,ne,A]);const ve=null!=m?m:f,xe="number"==typeof ve?g&&j?ve-96:g&&!j||!g&&j?ve-48:ve:ve;t.useEffect((()=>{const e=null!=x?x:h;if(null===pe)de(e);else if("number"==typeof e)de(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));de(t)}}),[pe]);const Oe=[],me=(e=>{if(!j||!v&&0!==v)return e;const t=ce(e)>=v;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 n=e;return Object.assign(Object.assign({},n),{disabled:n.disabled||!n.selected&&t})}})):e})((ee&&C?te:X).map((e=>{var t,n;if(ee&&!C){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(ee.toLowerCase()))&&(Oe.push(!ee||e.label===ee),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(ee.toLowerCase()))||(null===(n=e.searchKey)||void 0===n?void 0:n.toLowerCase().includes(ee.toLowerCase()))?(Oe.push(!ee||e.label===ee),e):null}return e})).filter((e=>null!==e))),we=!!g&&ee&&0===me.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:D,ref:Se,tabIndex:-1,style:Object.assign(Object.assign({width:ae},Z),{outline:"none"})},{children:[e.jsxs("div",Object.assign({style:{width:pe?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!g&&e.jsx(d.SearchBox,{onSearch:Y,version:D}),me.length||ee?e.jsxs(a.MenuListContainer,Object.assign({minHeight:ve,maxHeight:xe,ref:je},{children:[!!j&&!we&&!M&&e.jsx(u.SelectAllMenu,{version:D,options:ee&&C?te:X,onSelect:se}),!O&&we&&e.jsx(p.SearchZeroState,{isLoading:F,height:xe,searchedString:ee,containerWidth:x}),O&&(we||!!Oe.length&&Oe.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:D,isMultiSelect:j,onSelect:oe,searchedString:ee}),e.jsx(l.MenuList,{onInfiniteScroll:L,onDropdownItemClick:A,version:D,onSelect:ne,showDescription:function(e,t){fe(e&&t?{title:e,description:t}:null)},isMultiSelect:j,options:me,useDefaultCursor:H,ref:ge,focusedIndex:he,isDraggable:P,onOptionsReorder:J})]})):e.jsx("div",Object.assign({style:{height:ve,display:"flex"}},{children:e.jsx(n.ZeroState,Object.assign({},z,{title:(null==z?void 0:z.title)||"No results found",subTitle:(null==z?void 0:z.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance."}))})),!!j&&!(!me.length&&!ee)&&"2.0"!==D&&e.jsx(c.default,{onClear:()=>{re(),null==R||R()},onApply:ie,list:ee&&C?te:X,buttonText:E,buttonOptions:I,hideClearButton:W})]})),!!pe&&e.jsx(o.Description,{title:pe.title,description:pe.description,version:D})]}))};

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

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as n,Fragment as t}from"react/jsx-runtime";import{useState as l,useRef as r,useEffect as i}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,w,b,x,{placeHolder:I,size:j,onSelect:O,defaultOptions:y,disabled:H,noErrorHint:S,placeHolderHeight:T,showPlaceholderWhenSelected:D=!1,inputStyle:P={},inputType:C="default",onDeleteChip:E,truncatedText:L,showLeadingIconInPlaceholder:M=!1,showTrailingIconPlaceholder:z=!1,showLabelsOnMoreHover:W=!1}=m,A=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover"]);const[_,k]=l(!1),N=null!=j?j:"default",U=r(),[V,q]=l(null!=y?y:[]);i((()=>{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)})),q([...o])}),[A.options]),i((()=>{y&&q([...y])}),[y]);const B=u(V);return o(c.Provider,Object.assign({value:{InputWrapper:Object.assign({height:T||("x-small"===N?24:"small"===N?32:48),width:null!==(f=null!==(g=A.buttonWidth)&&void 0!==g?g:A.width)&&void 0!==f?f:"100%",zIndex:1,cursor:"pointer",padding:"x-small"===N?"4px 8px":"6px 8px"},P),input:{minHeight:"100%"}}},{children:n(h,Object.assign({"data-test":A["data-test"],ref:U,onSelect:function(e){Array.isArray(e)?q([...e]):q([e]),null==O||O(e)},disabled:H,onDropdownVisbilityChange:e=>k(e)},A,{children:["default"==C&&o(d,{version:A.version,noErrorHint:S,state:H?"disabled":"none",value:A.value?A.value:D?B:"",errorMessage:A.error,variant:N,placeholder:null!=I?I:"Select an option",width:null!==(w=A.width)&&void 0!==w?w:"100%",onChangeText:v,leftIcon:M&&(null===(b=V[0])||void 0===b?void 0:b.leadingIcon)?{icon:()=>{var e;return o(t,{children:null===(e=V[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return n("div",Object.assign({style:{display:"flex"}},{children:[z&&(null===(e=V[0])||void 0===e?void 0:e.trailingIcon),o(a,{style:{transform:_?"rotate(180deg)":"rotate(0deg)"},onClick:v,width:"x-small"===N?16:"small"===N?20:24,height:"x-small"===N?16:"small"===N?20:24,color:s.content.primary})]}))}},truncateText:null==L||L}),"chip"==C&&o(p,{placeholder:null!=I?I:"Select options",chips:V,onDeleteChip:e=>{null==E||E(e)},errorMessage:A.error,isDropdownOpened:_,sizeToUse:N,containerStyle:{width:null!==(x=A.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:W})]}))}))};m.displayName="Dropdown";export{m as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as n,Fragment as t}from"react/jsx-runtime";import{useState as l,useRef as r,useEffect as i}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,w,b,x,{placeHolder:I,size:j,onSelect:O,defaultOptions:y,disabled:H,noErrorHint:S,placeHolderHeight:T,showPlaceholderWhenSelected:D=!1,inputStyle:P={},inputType:C="default",onDeleteChip:E,truncatedText:L,showLeadingIconInPlaceholder:M=!1,showTrailingIconPlaceholder:z=!1,showLabelsOnMoreHover:W=!1}=m,A=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover"]);const[_,k]=l(!1),N=null!=j?j:"default",U=r(),[V,q]=l(null!=y?y:[]);i((()=>{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)})),q([...o])}),[A.options]),i((()=>{y&&q([...y])}),[y]);const B=u(V);return o(c.Provider,Object.assign({value:{InputWrapper:Object.assign({height:T||("x-small"===N?24:"small"===N?32:48),width:null!==(f=null!==(g=A.buttonWidth)&&void 0!==g?g:A.width)&&void 0!==f?f:"100%",zIndex:1,cursor:"pointer",padding:"x-small"===N?"4px 8px":"6px 8px"},P),input:{minHeight:"100%"}}},{children:n(h,Object.assign({"data-test":A["data-test"],ref:U,onSelect:function(e){Array.isArray(e)?q([...e]):q([e]),null==O||O(e)},disabled:H,onDropdownVisbilityChange:e=>k(e)},A,{children:["default"==C&&o(d,{version:A.version,noErrorHint:S,state:H?"disabled":"none",value:void 0!==A.value?A.value:D?B:"",errorMessage:A.error,variant:N,placeholder:null!=I?I:"Select an option",width:null!==(w=A.width)&&void 0!==w?w:"100%",onChangeText:v,leftIcon:M&&(null===(b=V[0])||void 0===b?void 0:b.leadingIcon)?{icon:()=>{var e;return o(t,{children:null===(e=V[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return n("div",Object.assign({style:{display:"flex"}},{children:[z&&(null===(e=V[0])||void 0===e?void 0:e.trailingIcon),o(a,{style:{transform:_?"rotate(180deg)":"rotate(0deg)"},onClick:v,width:"x-small"===N?16:"small"===N?20:24,height:"x-small"===N?16:"small"===N?20:24,color:s.content.primary})]}))}},truncateText:null==L||L}),"chip"==C&&o(p,{placeholder:null!=I?I:"Select options",chips:V,onDeleteChip:e=>{null==E||E(e)},errorMessage:A.error,isDropdownOpened:_,sizeToUse:N,containerStyle:{width:null!==(x=A.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:W})]}))}))};m.displayName="Dropdown";export{m as Dropdown};

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 a}from"./description/Description.js";import{FreeFormMenu as u}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);i((()=>{X(J(O))}),[O,J]),i((()=>{Y.current=Q}),[Q]);const _=o((e=>{const t=J(e);X(t),"2.0"===A&&(null==U||U(t))}),[U,J,A]),ee=P?Q:O,{dropdownOptions:te,search:oe,searchedString:ne,searchedOptions:re,onApplyHandler:ie,selectAllHandler:se,onMultiSelectClear:le,onFreeFormSelect:ce,onMultiSelectApply:ae,latestDropdownOptionsRef:ue,getSelectedOptions:de,getCurrentSelectionCount:pe}=c(A,ee,M,T||P,y,I,W,Z,x),[he,fe]=n(null!=C?C:v),[me,be]=n(null),[ge,Se]=n(-1),ve=r(null),je=r([]),Oe=r(null);l(ve,(()=>{if(be(null),y&&"2.0"===A){const e=de(ue.current);null==L||L(e)}else null==L||L(te);P&&U&&U(Y.current)}),[E,je]),i((()=>{const e=setTimeout((()=>{ve.current&&ve.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})(ne&&I?re:te);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),Se((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Oe.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(),Se((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Oe.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&&ge>=0){e.preventDefault();const o=t[ge];o&&(ie(Object.assign(Object.assign({},o),{selected:!o.selected})),q&&q(o))}},t=ve.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[ge,ne,re,te,I,ie,q]);const we=null!=k?k:S,ye="number"==typeof we?w&&y?we-96:w&&!y||!w&&y?we-48:we:we;i((()=>{const e=null!=C?C:v;if(null===me)fe(e);else if("number"==typeof e)fe(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));fe(t)}}),[me]);const xe=[],Ce=(e=>{if(!y||!x&&0!==x)return e;const t=pe(e)>=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})((ne&&I?re:te).map((e=>{var t,o;if(ne&&!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(ne.toLowerCase()))&&(xe.push(!ne||e.label===ne),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(ne.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(ne.toLowerCase()))?(xe.push(!ne||e.label===ne),e):null}return e})).filter((e=>null!==e))),De=!!w&&ne&&0===Ce.length;return e(f,Object.assign({version:A,ref:ve,tabIndex:-1,style:Object.assign(Object.assign({width:he},K),{outline:"none"})},{children:[e("div",Object.assign({style:{width:me?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!w&&t(b,{onSearch:oe,version:A}),Ce.length||ne?e(m,Object.assign({minHeight:we,maxHeight:ye,ref:Oe},{children:[!!y&&!De&&!B&&t(p,{version:A,options:ne&&I?re:te,onSelect:se}),!D&&De&&t(g,{isLoading:V,height:ye,searchedString:ne,containerWidth:C}),D&&(De||!!xe.length&&xe.every((e=>!1===e)))&&t(u,{version:A,isMultiSelect:y,onSelect:ce,searchedString:ne}),t(d,{onInfiniteScroll:H,onDropdownItemClick:q,version:A,onSelect:ie,showDescription:function(e,t){be(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:Ce,useDefaultCursor:$,ref:je,focusedIndex:ge,isDraggable:P,onOptionsReorder:_})]})):t("div",Object.assign({style:{height:we,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&&!(!Ce.length&&!ne)&&"2.0"!==A&&t(h,{onClear:()=>{le(),null==R||R()},onApply:ae,list:ne&&I?re:te,buttonText:F,buttonOptions:z,hideClearButton:G})]})),!!me&&t(a,{title:me.title,description:me.description,version:A})]}))};export{j as OpenedDropdown};
+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=>{const t=J(e);X(t),"2.0"===A?null==U||U(t):_.current=!0}),[U,J,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(e)>=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};

package/package.json

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