@bikdotai/bik-component-library 0.0.517-beta.drop.7 → 0.0.517-beta.drop.8

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

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

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { MultiSelectOption, SingleOption } from '../../../type';
-export declare const MenuItem: React.FC<{
+interface MenuItemProps {
     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';
-}>;
+}
+export declare const MenuItem: React.FC<MenuItemProps>;
+export {};

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

@@ -2,4 +2,4 @@
 	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
-`;exports.MenuItem=t=>{let{option:i,isMultiSelect:l,showDescription:a,onSelect:d,last:u,version:p}=t;var x;function g(e){i.disabled||d(Object.assign(Object.assign({},i),{selected:e}))}return e.jsx(c,{version:p,style:u?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),g(!i.selected)},onMouseOver:function(){i.description?a(i.label,i.description):a()},listItem:{value:i.value,label:i.label},subText:i.subText,leadingIcon:l?e.jsxs("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e.jsx(n.CheckBox,{size:"2.0"===p?"SMALL":"DEFAULT",isDisabled:null!==(x=i.disabled)&&void 0!==x&&x,isChecked:!!i.selected,onValueChange:g}),e.jsx("div",Object.assign({style:{marginRight:"-4px"}},{children:i.leadingIcon}))]})):i.leadingIcon?e.jsx(e.Fragment,{children:i.leadingIcon}):e.jsx(e.Fragment,{}),customComponent:i.customComponent,trailingIcon:i.isFreeForm?e.jsx(o.FreeFormContainer,{children:e.jsx(s.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"Freeform"}))}):i.trailingIcon?e.jsx(e.Fragment,{children:i.trailingIcon}):e.jsx(e.Fragment,{}),variant:i.disabled?"inactive":i.selected?"selected":"default"})};
+`;exports.MenuItem=t=>{let{option:i,isMultiSelect:l,showDescription:a,onSelect:d,last:u,version:p,onDropdownItemClick:m}=t;var x;function g(e){i.disabled||d(Object.assign(Object.assign({},i),{selected:e}))}return e.jsx(c,{version:p,style:u?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),g(!i.selected),null==m||m(i)},onMouseOver:function(){i.description?a(i.label,i.description):a()},listItem:{value:i.value,label:i.label},subText:i.subText,leadingIcon:l?e.jsxs("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e.jsx(n.CheckBox,{size:"2.0"===p?"SMALL":"DEFAULT",isDisabled:null!==(x=i.disabled)&&void 0!==x&&x,isChecked:!!i.selected,onValueChange:g}),e.jsx("div",Object.assign({style:{marginRight:"-4px"}},{children:i.leadingIcon}))]})):i.leadingIcon?e.jsx(e.Fragment,{children:i.leadingIcon}):e.jsx(e.Fragment,{}),customComponent:i.customComponent,trailingIcon:i.isFreeForm?e.jsx(o.FreeFormContainer,{children:e.jsx(s.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:"Freeform"}))}):i.trailingIcon?e.jsx(e.Fragment,{children:i.trailingIcon}):e.jsx(e.Fragment,{}),variant:i.disabled?"inactive":i.selected?"selected":"default"})};

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

@@ -7,6 +7,7 @@ interface MenuListProps {
     onSelect: (optionSelect: SingleOption) => void;
     version?: '1.0' | '2.0';
     onInfiniteScroll?: () => void;
+    onDropdownItemClick?: (option: DropdownOption) => void;
 }
 export declare const MenuList: React.FC<MenuListProps>;
 export {};

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

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

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

@@ -21,6 +21,7 @@ export interface OpenDropdownProps {
     primaryButtonText?: string;
     onInfiniteScroll?: () => void;
     onMultiSelectClear?: () => void;
+    onDropdownItemClick?: (option: DropdownOption) => void;
 }
 export type GroupedOption = {
     label?: string;

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

@@ -1 +1 @@
-import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useState as t,useRef as n,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";import{getSelectedOptionsAsText as p}from"./OpenedDropdown/utils/iterationOnOptions.js";function c(){}const u=u=>{var m,h,g,{placeHolder:f,size:v,onSelect:b,defaultOptions:j,disabled:w,noErrorHint:x,placeHolderHeight:H}=u,O=o(u,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight"]);const[y,D]=t(!1),E=null!=v?v:"default",I=n(),[S,z]=t(null!=j?j:[]);r((()=>{var o;const e=[];null===(o=null==O?void 0:O.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&e.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&e.push(o)})),z([...e])}),[O.options]),r((()=>{j&&z([...j])}),[j]);const C=p(S);return console.log("textVal",C),console.log("selectedOption",S),e(a.Provider,Object.assign({value:{InputWrapper:{height:H||("small"===E?32:48),width:null!==(h=null!==(m=O.buttonWidth)&&void 0!==m?m:O.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:e(d,Object.assign({ref:I,onSelect:function(o){Array.isArray(o)?z([...o]):z([o]),null==b||b(o)},disabled:w,onDropdownVisbilityChange:o=>D(o)},O,{children:e(s,{version:O.version,noErrorHint:x,state:w?"disabled":"none",value:null!=C?C:"",errorMessage:O.error,variant:E,placeholder:null!=f?f:"Select an option",width:null!==(g=O.width)&&void 0!==g?g:"100%",onChangeText:c,rightIcon:{icon:()=>e(l,{style:{transform:y?"rotate(180deg)":"rotate(0deg)"},onClick:c,width:"small"===E?20:24,height:"small"===E?20:24,color:i.content.primary})},truncateText:!0})}))}))};u.displayName="Dropdown";export{u as Dropdown};
+import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useState as e,useRef as n,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";import{getSelectedOptionsAsText as p}from"./OpenedDropdown/utils/iterationOnOptions.js";function c(){}const u=u=>{var m,h,f,{placeHolder:v,size:g,onSelect:b,defaultOptions:j,disabled:w,noErrorHint:H,placeHolderHeight:x}=u,O=o(u,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight"]);const[y,D]=e(!1),E=null!=g?g:"default",I=n(),[S,z]=e(null!=j?j:[]);r((()=>{var o;const t=[];null===(o=null==O?void 0:O.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)})),z([...t])}),[O.options]),r((()=>{j&&z([...j])}),[j]);const C=p(S);return t(a.Provider,Object.assign({value:{InputWrapper:{height:x||("small"===E?32:48),width:null!==(h=null!==(m=O.buttonWidth)&&void 0!==m?m:O.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:t(d,Object.assign({ref:I,onSelect:function(o){Array.isArray(o)?z([...o]):z([o]),null==b||b(o)},disabled:w,onDropdownVisbilityChange:o=>D(o)},O,{children:t(s,{version:O.version,noErrorHint:H,state:w?"disabled":"none",value:null!=C?C:"",errorMessage:O.error,variant:E,placeholder:null!=v?v:"Select an option",width:null!==(f=O.width)&&void 0!==f?f:"100%",onChangeText:c,rightIcon:{icon:()=>t(l,{style:{transform:y?"rotate(180deg)":"rotate(0deg)"},onClick:c,width:"small"===E?20:24,height:"small"===E?20:24,color:i.content.primary})},truncateText:!0})}))}))};u.displayName="Dropdown";export{u 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{useState as o,useRef as n,useEffect as r}from"react";import{ZeroState as l}from"../../../zeroState/ZeroState.js";import{useOutside as i}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 u}from"./menu/MenuList.js";import{SelectAllMenu as p}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,v=v=>{let{options:j,isSearchable:w,isMultiSelect:y,width:x,allowFreeForm:O,height:C,onClose:M,onSelect:D,onSearch:L,version:A,skipSorting:F,headerRef:k,hideSelectAll:B,primaryButtonText:H,onInfiniteScroll:I,onMultiSelectClear:T}=v;const{dropdownOptions:R,search:Z,searchedString:q,searchedOptions:z,onApplyHandler:K,selectAllHandler:N,onMultiSelectClear:P,onFreeFormSelect:W,onMultiSelectApply:E,latestDropdownOptionsRef:G,getSelectedOptions:J}=s(A,j,D,F,y,L),[Q,U]=o(null!=x?x:b),[V,X]=o(null),Y=n(null);i(Y,(()=>{if(X(null),y&&"2.0"===A){const e=J(G.current);null==M||M(e)}else null==M||M(R)}),[k]);const $=null!=C?C:g,_="number"==typeof $?w&&y?$-96:w&&!y||!w&&y?$-48:$:$;r((()=>{const e=null!=x?x:b;if(null===V)U(e);else if("number"==typeof e)U(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));U(t)}}),[V]);const ee=[],te=(q&&L?z:R).map((e=>{var t,o;if(q&&!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(q.toLowerCase()))&&(ee.push(!q||e.label===q),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(q.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(q.toLowerCase()))?(ee.push(!q||e.label===q),e):null}return e})).filter((e=>null!==e)),oe=!!w&&q&&0===te.length;return e(h,Object.assign({version:A,ref:Y,style:{width:Q}},{children:[e("div",Object.assign({style:{width:V?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!w&&t(f,{onSearch:Z,version:A}),te.length||q?e(m,Object.assign({minHeight:$,maxHeight:_},{children:[!!y&&!oe&&!B&&t(p,{version:A,options:q&&L?z:R,onSelect:N}),!O&&oe&&t(S,{height:_,searchedString:q}),O&&(oe||!!ee.length&&ee.every((e=>!1===e)))&&t(a,{version:A,isMultiSelect:y,onSelect:W,searchedString:q}),t(u,{onInfiniteScroll:I,version:A,onSelect:K,showDescription:function(e,t){X(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:te})]})):t("div",Object.assign({style:{height:$,display:"flex"}},{children:t(l,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!te.length&&!q)&&"2.0"!==A&&t(d,{onClear:()=>{P(),null==T||T()},onApply:E,list:q&&L?z:R,buttonText:H})]})),!!V&&t(c,{title:V.title,description:V.description,version:A})]}))};export{v as OpenedDropdown};
+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 l}from"../../../zeroState/ZeroState.js";import{useOutside as i}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 u}from"./menu/MenuList.js";import{SelectAllMenu as p}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,v=v=>{let{options:w,isSearchable:j,isMultiSelect:y,width:x,allowFreeForm:C,height:O,onClose:M,onSelect:D,onSearch:L,version:k,skipSorting:A,headerRef:F,hideSelectAll:B,primaryButtonText:H,onInfiniteScroll:I,onMultiSelectClear:T,onDropdownItemClick:R}=v;const{dropdownOptions:Z,search:q,searchedString:z,searchedOptions:K,onApplyHandler:N,selectAllHandler:P,onMultiSelectClear:W,onFreeFormSelect:E,onMultiSelectApply:G,latestDropdownOptionsRef:J,getSelectedOptions:Q}=s(k,w,D,A,y,L),[U,V]=o(null!=x?x:b),[X,Y]=o(null),$=n(null);i($,(()=>{if(Y(null),y&&"2.0"===k){const e=Q(J.current);null==M||M(e)}else null==M||M(Z)}),[F]);const _=null!=O?O:g,ee="number"==typeof _?j&&y?_-96:j&&!y||!j&&y?_-48:_:_;r((()=>{const e=null!=x?x:b;if(null===X)V(e);else if("number"==typeof e)V(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));V(t)}}),[X]);const te=[],oe=(z&&L?K:Z).map((e=>{var t,o;if(z&&!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(z.toLowerCase()))&&(te.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===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(z.toLowerCase()))?(te.push(!z||e.label===z),e):null}return e})).filter((e=>null!==e)),ne=!!j&&z&&0===oe.length;return e(h,Object.assign({version:k,ref:$,style:{width:U}},{children:[e("div",Object.assign({style:{width:X?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!j&&t(f,{onSearch:q,version:k}),oe.length||z?e(m,Object.assign({minHeight:_,maxHeight:ee},{children:[!!y&&!ne&&!B&&t(p,{version:k,options:z&&L?K:Z,onSelect:P}),!C&&ne&&t(S,{height:ee,searchedString:z}),C&&(ne||!!te.length&&te.every((e=>!1===e)))&&t(a,{version:k,isMultiSelect:y,onSelect:E,searchedString:z}),t(u,{onInfiniteScroll:I,version:k,onSelect:N,showDescription:function(e,t){Y(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:oe})]})):t("div",Object.assign({style:{height:_,display:"flex"}},{children:t(l,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!oe.length&&!z)&&"2.0"!==k&&t(d,{onClear:()=>{W(),null==T||T()},onApply:G,list:z&&L?K:Z,buttonText:H})]})),!!X&&t(c,{title:X.title,description:X.description,version:k})]}))};export{v as OpenedDropdown};

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { MultiSelectOption, SingleOption } from '../../../type';
-export declare const MenuItem: React.FC<{
+interface MenuItemProps {
     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';
-}>;
+}
+export declare const MenuItem: React.FC<MenuItemProps>;
+export {};

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

@@ -2,4 +2,4 @@ import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"st
 	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
-`,d=i=>{let{option:s,isMultiSelect:d,showDescription:m,onSelect:p,last:g,version:u}=i;var b;function f(e){s.disabled||p(Object.assign(Object.assign({},s),{selected:e}))}return e(a,{version:u,style:g?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),f(!s.selected)},onMouseOver:function(){s.description?m(s.label,s.description):m()},listItem:{value:s.value,label:s.label},subText:s.subText,leadingIcon:d?t("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e(o,{size:"2.0"===u?"SMALL":"DEFAULT",isDisabled:null!==(b=s.disabled)&&void 0!==b&&b,isChecked:!!s.selected,onValueChange:f}),e("div",Object.assign({style:{marginRight:"-4px"}},{children:s.leadingIcon}))]})):s.leadingIcon?e(n,{children:s.leadingIcon}):e(n,{}),customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(c,{children:e(r,Object.assign({style:{color:l.content.secondary}},{children:"Freeform"}))}):s.trailingIcon?e(n,{children:s.trailingIcon}):e(n,{}),variant:s.disabled?"inactive":s.selected?"selected":"default"})};export{d as MenuItem};
+`,d=i=>{let{option:s,isMultiSelect:d,showDescription:m,onSelect:p,last:g,version:u,onDropdownItemClick:b}=i;var f;function h(e){s.disabled||p(Object.assign(Object.assign({},s),{selected:e}))}return e(a,{version:u,style:g?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),h(!s.selected),null==b||b(s)},onMouseOver:function(){s.description?m(s.label,s.description):m()},listItem:{value:s.value,label:s.label},subText:s.subText,leadingIcon:d?t("div",Object.assign({style:{display:"flex",alignContent:"center",justifyContent:"center",gap:8}},{children:[e(o,{size:"2.0"===u?"SMALL":"DEFAULT",isDisabled:null!==(f=s.disabled)&&void 0!==f&&f,isChecked:!!s.selected,onValueChange:h}),e("div",Object.assign({style:{marginRight:"-4px"}},{children:s.leadingIcon}))]})):s.leadingIcon?e(n,{children:s.leadingIcon}):e(n,{}),customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(c,{children:e(r,Object.assign({style:{color:l.content.secondary}},{children:"Freeform"}))}):s.trailingIcon?e(n,{children:s.trailingIcon}):e(n,{}),variant:s.disabled?"inactive":s.selected?"selected":"default"})};export{d as MenuItem};

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

@@ -7,6 +7,7 @@ interface MenuListProps {
     onSelect: (optionSelect: SingleOption) => void;
     version?: '1.0' | '2.0';
     onInfiniteScroll?: () => void;
+    onDropdownItemClick?: (option: DropdownOption) => void;
 }
 export declare const MenuList: React.FC<MenuListProps>;
 export {};

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

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

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

@@ -21,6 +21,7 @@ export interface OpenDropdownProps {
     primaryButtonText?: string;
     onInfiniteScroll?: () => void;
     onMultiSelectClear?: () => void;
+    onDropdownItemClick?: (option: DropdownOption) => void;
 }
 export type GroupedOption = {
     label?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.517-beta.drop.7",
+	"version": "0.0.517-beta.drop.8",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",