@bikdotai/bik-component-library 0.0.620-mldn.3 → 0.0.620-mldn.4

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/multi-level-dropdown/GroupedMenuList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),n=require("./MenuItem.js"),o=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:p,option:l,parents:u}=s;return e.jsxs(o.GroupedMenuListContainer,{children:[e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 12px"},color:r.COLORS.content.placeholder},{children:l.label})),l.options.map(((r,t)=>e.jsx(n.MenuItem,{width:i,onDropdownItemClick:p,option:r,parents:u},t)))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),n=require("./MenuItem.js"),o=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:p,option:l,parents:u}=s;return e.jsxs(o.GroupedMenuListContainer,{children:[e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 16px"},color:r.COLORS.content.placeholder},{children:l.label})),l.options.map(((r,t)=>e.jsx(n.MenuItem,{width:i,onDropdownItemClick:p,option:r,parents:u},t)))]})};

package/dist/cjs/components/multi-level-dropdown/MenuItem.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight2.svg.js"),n=require("react"),i=require("../../constants/Theme.js"),s=require("../TypographyStyle.js"),o=require("./MenuList.js"),r=require("./MultiLevelDropdown.styled.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(n);exports.MenuItem=l=>{let{width:c,onDropdownItemClick:a,option:u,parents:p}=l;var h,O,v,j,b,g,C;const[x,m]=d.default.useState(!1),[f,y]=d.default.useState(!1),[S,L]=d.default.useState({top:0,left:0}),M=n.useRef({top:0,left:0});return e.jsxs(r.MenuItemWrapper,Object.assign({onMouseEnter:e=>{m(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();L({top:t.top,left:t.right}),M.current={top:t.top,left:t.right}})(e)},onMouseLeave:()=>{m(!1)},onClick:()=>{var e;null!==(e=u.disabled)&&void 0!==e&&e||u.children||a(u,p)},id:"menuItemWrapper",style:{cursor:null!==(h=u.disabled)&&void 0!==h&&h?"not-allowed":"pointer",backgroundColor:null!==(O=u.disabled)&&void 0!==O&&O?i.COLORS.surface.standard:"transparent"}},{children:[u.customComponent?u.customComponent:e.jsxs(r.MenuItemContainer,Object.assign({isSelected:u.selected,isSubMenuOpen:x,isHovered:f,isDisabled:null!==(v=u.disabled)&&void 0!==v&&v},{children:[e.jsxs(r.ContentContainer,{children:[u.leadingIcon&&u.leadingIcon,e.jsxs("div",{children:[e.jsx(s.BodyCaption,Object.assign({style:{color:null!==(j=u.disabled)&&void 0!==j&&j?i.COLORS.content.inactive:u.selected||f?i.COLORS.content.positive:i.COLORS.content.primary}},{children:u.label})),u.subText&&e.jsx(s.BodyTiny,Object.assign({style:{color:null!==(b=u.disabled)&&void 0!==b&&b?i.COLORS.content.inactive:u.selected||f?i.COLORS.content.positive:i.COLORS.content.secondary,marginTop:"2px"}},{children:u.subText}))]})]}),u.children&&u.children.length>0?e.jsx(t.default,{width:16,height:16,color:null!==(g=u.disabled)&&void 0!==g&&g?i.COLORS.content.inactive:u.selected||f?i.COLORS.content.positive:i.COLORS.content.primary}):u.trailingIcon?u.trailingIcon:e.jsx(e.Fragment,{})]})),!(null!==(C=u.disabled)&&void 0!==C&&C)&&u.children&&u.children.length>0&&x&&e.jsx("div",Object.assign({style:{width:c},className:"submenu",onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1)},{children:e.jsx(r.SubMenuWrapper,Object.assign({style:{width:c,top:`${S.top}px`,left:`${S.left}px`}},{children:e.jsx(r.Container,{children:e.jsx(o.MenuList,{width:c,onDropdownItemClick:a,options:u.children,parents:[...p,u]})})}))}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight2.svg.js"),n=require("react"),i=require("../../constants/Theme.js"),s=require("../TypographyStyle.js"),o=require("./MenuList.js"),r=require("./MultiLevelDropdown.styled.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(n);exports.MenuItem=l=>{let{width:c,onDropdownItemClick:a,option:u,parents:p}=l;var h,O,v,j,b,g,C;const[x,m]=d.default.useState(!1),[S,f]=d.default.useState(!1),[y,L]=d.default.useState({top:0,left:0}),M=n.useRef({top:0,left:0});return e.jsxs(r.MenuItemWrapper,Object.assign({onMouseEnter:e=>{m(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();L({top:t.top,left:t.right}),M.current={top:t.top,left:t.right}})(e)},onMouseLeave:()=>{m(!1)},onClick:()=>{var e;null!==(e=u.disabled)&&void 0!==e&&e||u.children||a(u,p)},id:"menuItemWrapper",style:{cursor:null!==(h=u.disabled)&&void 0!==h&&h?"not-allowed":"pointer",backgroundColor:null!==(O=u.disabled)&&void 0!==O&&O?i.COLORS.surface.standard:"transparent"}},{children:[u.customComponent?u.customComponent:e.jsxs(r.MenuItemContainer,Object.assign({isSelected:u.selected,isSubMenuOpen:x,isHovered:S,isDisabled:null!==(v=u.disabled)&&void 0!==v&&v},{children:[e.jsxs(r.ContentContainer,{children:[u.leadingIcon&&u.leadingIcon,e.jsxs("div",{children:[e.jsx(s.BodyCaption,Object.assign({style:{color:null!==(j=u.disabled)&&void 0!==j&&j?i.COLORS.content.inactive:u.selected||S?i.COLORS.content.positive:i.COLORS.content.primary}},{children:u.label})),u.subText&&e.jsx(s.BodyTiny,Object.assign({style:{color:null!==(b=u.disabled)&&void 0!==b&&b?i.COLORS.content.inactive:u.selected||S?i.COLORS.content.positive:i.COLORS.content.secondary,marginTop:"2px"}},{children:u.subText}))]})]}),u.children&&u.children.length>0?e.jsx(t.default,{width:16,height:16,color:null!==(g=u.disabled)&&void 0!==g&&g?i.COLORS.content.inactive:u.selected||S?i.COLORS.content.positive:i.COLORS.content.primary}):u.trailingIcon?u.trailingIcon:e.jsx(e.Fragment,{})]})),!(null!==(C=u.disabled)&&void 0!==C&&C)&&u.children&&u.children.length>0&&x&&e.jsx("div",Object.assign({style:{width:c},className:"submenu",onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1)},{children:e.jsx(r.SubMenuWrapper,Object.assign({style:{width:c,top:`${y.top}px`,left:`${y.left}px`}},{children:e.jsx(r.SubMenuListContainer,{children:e.jsx(o.MenuList,{width:c,onDropdownItemClick:a,options:u.children,parents:[...p,u]})})}))}))]}))};

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../zeroState/ZeroState.js"),t=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),o=require("./MenuList.js"),s=require("./MultiLevelDropdown.styled.js");exports.MultiLevelDropdown=n=>{let{options:i,width:l,isSearchable:a,onDropdownItemClick:u}=n;return e.jsxs(s.DropdownContainer,Object.assign({width:l},{children:[a&&e.jsx("div",Object.assign({style:{padding:"4px 4px 0",width:null!=l?l:"200px"}},{children:e.jsx(t.SearchBox,{onSearch:e=>{console.log({searchString:e})},version:"2.0"})})),(null!=i?i:[]).length>0&&e.jsx(o.MenuList,{width:null!=l?l:"200px",onDropdownItemClick:u,options:i,parents:[]}),0===(null!=i?i:[]).length&&e.jsx(s.NoResultsContainer,{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."})})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../zeroState/ZeroState.js"),r=require("../../constants/Theme.js"),s=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),o=require("../floater/floater.js"),i=require("./MenuList.js"),l=require("./MultiLevelDropdown.styled.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(t);exports.MultiLevelDropdown=u=>{let{options:d,width:a,isSearchable:p,onDropdownItemClick:f,refElement:h,topOffset:j,leftOffset:O,isDropdownOpen:w,onDropdownOutsideClick:x}=u;const b=c.default.useRef(null),[g,m]=t.useState(d),v=e=>{b.current&&!b.current.contains(e.target)?x&&x(!0):x&&x(!1)};return t.useEffect((()=>(document.addEventListener("mousedown",v),()=>{document.removeEventListener("mousedown",v)})),[]),e.jsx(o.Floater,Object.assign({refElement:h,topOffset:j,leftOffset:O},{children:w&&e.jsx("div",Object.assign({ref:b,style:{backgroundColor:r.COLORS.surface.standard,zIndex:99999}},{children:e.jsxs(l.DropdownContainer,Object.assign({width:a},{children:[p&&e.jsx("div",Object.assign({style:{padding:"4px",width:null!=a?a:"200px"}},{children:e.jsx(s.SearchBox,{onSearch:e=>{const t=[...d],n=[];for(;t.length>0;){const r=t.shift();r&&r.label.toLowerCase().includes(e.toLowerCase())&&n.push(r),r&&"children"in r&&r.children?t.push(...r.children):r&&"options"in r&&r.options&&t.push(...r.options)}const r=e=>e.map((e=>{if(n.includes(e))return e;if("children"in e&&e.children){const t=r(e.children);if(t.length>0)return Object.assign(Object.assign({},e),{children:t})}if("options"in e&&e.options){const t=r(e.options);if(t.length>0)return Object.assign(Object.assign({},e),{options:t})}return null})).filter((e=>null!==e));m(r(d))},version:"2.0"})})),e.jsx(l.OptionsContainer,Object.assign({width:a},{children:(null!=g?g:[]).length>0&&e.jsx(i.MenuList,{width:null!=a?a:"200px",onDropdownItemClick:f,options:g,parents:[]})})),0===(null!=g?g:[]).length&&e.jsx(l.NoResultsContainer,{children:e.jsx(n.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})})]}))}))}))};

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts

@@ -1,6 +1,9 @@
 export declare const DropdownContainer: import("styled-components").StyledComponent<"div", any, {
     width?: string | undefined;
 }, never>;
+export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;
 export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -14,4 +17,4 @@ export interface MenuItemContainerProps {
 export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", any, MenuItemContainerProps, never>;
 export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SubMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js

@@ -1,32 +1,33 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const o=i.default.div`
 	position: relative;
+	border-radius: 8px;
+	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
+	padding-bottom: 4px;
+`,n=i.default.div`
 	width: ${e=>{let{width:t}=e;return t||"200px"}};
 	max-width: 300px;
 	max-height: 280px;
 	overflow-y: scroll;
-	border-radius: 8px;
-	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	&::-webkit-scrollbar {
 		width: 0px;
 	}
-`,n=i.default.div`
+`,a=i.default.div`
 	margin-top: 64px;
 	height: 200px;
-`,a=i.default.div`
+`,d=i.default.div`
 	width: 100%;
 	justify-content: center;
 	cursor: pointer;
 	align-items: center;
 	justify-content: space-between;
 	margin: 4px 0;
-`,d=i.default.div`
+`,s=i.default.div`
 	z-index: 1000;
 	position: relative;
 	margin: 0px;
 	padding: 0px;
-	padding-bottom: 4px;
 	width: 100%;
-`,s=i.default.div`
+`,p=i.default.div`
 	position: relative;
 	padding: 1px 4px;
 	cursor: pointer;
@@ -35,7 +36,7 @@
 	&:focus-within > .submenu {
 		display: block;
 	}
-`,p=i.default.div`
+`,u=i.default.div`
 	position: relative;
 	padding: 4px 8px 4px 12px;
 	transition: background-color 0.2s;
@@ -51,24 +52,25 @@
 	&:hover {
 		background-color: ${e=>{let{isSelected:r,isDisabled:i}=e;return i?t.COLORS.surface.standard:r?t.COLORS.background.positive.light:t.COLORS.surface.hovered}};
 	}
-`,u=i.default.div`
+`,l=i.default.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`,l=i.default.div`
+`,x=i.default.div`
 	z-index: 1001;
 	position: fixed;
 	border-left: 4px solid transparent;
-`,x=i.default.div`
+`,c=i.default.div`
 	margin: 4px;
 	background-color: ${t.COLORS.surface.standard};
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	border-radius: 8px;
 	padding-top: 4px;
 	max-height: 480px;
+	padding-bottom: 4px;
 	overflow-y: scroll;
 
 	&::-webkit-scrollbar {
 		display: none;
 	}
-`;exports.Container=x,exports.ContentContainer=u,exports.DropdownContainer=o,exports.GroupedMenuListContainer=a,exports.MenuItemContainer=p,exports.MenuItemWrapper=s,exports.NoResultsContainer=n,exports.StyledMenuList=d,exports.SubMenuWrapper=l;
+`;exports.ContentContainer=l,exports.DropdownContainer=o,exports.GroupedMenuListContainer=d,exports.MenuItemContainer=u,exports.MenuItemWrapper=p,exports.NoResultsContainer=a,exports.OptionsContainer=n,exports.StyledMenuList=s,exports.SubMenuListContainer=c,exports.SubMenuWrapper=x;

package/dist/cjs/components/multi-level-dropdown/type.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-export interface MultiLevelDropdownProps {
+import { FloaterProps } from '../floater/floater';
+export interface MultiLevelDropdownProps extends FloaterProps {
     options: MultiLevelDropdownOption[];
     width?: string;
     isSearchable?: boolean;
+    isDropdownOpen?: boolean;
+    onDropdownOutsideClick?: (isOutsideClick: any) => void;
     onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
 }
 export type GroupedOption = {

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/multi-level-dropdown/GroupedMenuList.js

@@ -1 +1 @@
-import{jsxs as o,jsx as t}from"react/jsx-runtime";import{COLORS as e}from"../../constants/Theme.js";import{BodyTiny as r}from"../TypographyStyle.js";import{MenuItem as p}from"./MenuItem.js";import{GroupedMenuListContainer as n}from"./MultiLevelDropdown.styled.js";const i=i=>{let{width:m,onDropdownItemClick:l,option:s,parents:c}=i;return o(n,{children:[t(r,Object.assign({style:{padding:"4px 8px 4px 12px"},color:e.content.placeholder},{children:s.label})),s.options.map(((o,e)=>t(p,{width:m,onDropdownItemClick:l,option:o,parents:c},e)))]})};export{i as GroupedMenuList};
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import{COLORS as e}from"../../constants/Theme.js";import{BodyTiny as r}from"../TypographyStyle.js";import{MenuItem as p}from"./MenuItem.js";import{GroupedMenuListContainer as n}from"./MultiLevelDropdown.styled.js";const i=i=>{let{width:m,onDropdownItemClick:l,option:s,parents:c}=i;return o(n,{children:[t(r,Object.assign({style:{padding:"4px 8px 4px 16px"},color:e.content.placeholder},{children:s.label})),s.options.map(((o,e)=>t(p,{width:m,onDropdownItemClick:l,option:o,parents:c},e)))]})};export{i as GroupedMenuList};

package/dist/esm/components/multi-level-dropdown/MenuItem.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronRight2.svg.js";import i,{useRef as l}from"react";import{COLORS as s}from"../../constants/Theme.js";import{BodyCaption as r,BodyTiny as c}from"../TypographyStyle.js";import{MenuList as d}from"./MenuList.js";import{MenuItemWrapper as a,MenuItemContainer as p,ContentContainer as u,SubMenuWrapper as h,Container as m}from"./MultiLevelDropdown.styled.js";const v=v=>{let{width:g,onDropdownItemClick:b,option:f,parents:j}=v;var y,w,x,C,I,M,O;const[S,T]=i.useState(!1),[k,D]=i.useState(!1),[L,E]=i.useState({top:0,left:0}),R=l({top:0,left:0});return e(a,Object.assign({onMouseEnter:e=>{T(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();E({top:t.top,left:t.right}),R.current={top:t.top,left:t.right}})(e)},onMouseLeave:()=>{T(!1)},onClick:()=>{var e;null!==(e=f.disabled)&&void 0!==e&&e||f.children||b(f,j)},id:"menuItemWrapper",style:{cursor:null!==(y=f.disabled)&&void 0!==y&&y?"not-allowed":"pointer",backgroundColor:null!==(w=f.disabled)&&void 0!==w&&w?s.surface.standard:"transparent"}},{children:[f.customComponent?f.customComponent:e(p,Object.assign({isSelected:f.selected,isSubMenuOpen:S,isHovered:k,isDisabled:null!==(x=f.disabled)&&void 0!==x&&x},{children:[e(u,{children:[f.leadingIcon&&f.leadingIcon,e("div",{children:[t(r,Object.assign({style:{color:null!==(C=f.disabled)&&void 0!==C&&C?s.content.inactive:f.selected||k?s.content.positive:s.content.primary}},{children:f.label})),f.subText&&t(c,Object.assign({style:{color:null!==(I=f.disabled)&&void 0!==I&&I?s.content.inactive:f.selected||k?s.content.positive:s.content.secondary,marginTop:"2px"}},{children:f.subText}))]})]}),f.children&&f.children.length>0?t(o,{width:16,height:16,color:null!==(M=f.disabled)&&void 0!==M&&M?s.content.inactive:f.selected||k?s.content.positive:s.content.primary}):f.trailingIcon?f.trailingIcon:t(n,{})]})),!(null!==(O=f.disabled)&&void 0!==O&&O)&&f.children&&f.children.length>0&&S&&t("div",Object.assign({style:{width:g},className:"submenu",onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1)},{children:t(h,Object.assign({style:{width:g,top:`${L.top}px`,left:`${L.left}px`}},{children:t(m,{children:t(d,{width:g,onDropdownItemClick:b,options:f.children,parents:[...j,f]})})}))}))]}))};export{v as MenuItem};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronRight2.svg.js";import i,{useRef as l}from"react";import{COLORS as s}from"../../constants/Theme.js";import{BodyCaption as r,BodyTiny as c}from"../TypographyStyle.js";import{MenuList as d}from"./MenuList.js";import{MenuItemWrapper as a,MenuItemContainer as p,ContentContainer as u,SubMenuWrapper as h,SubMenuListContainer as m}from"./MultiLevelDropdown.styled.js";const v=v=>{let{width:g,onDropdownItemClick:b,option:f,parents:j}=v;var y,w,x,C,I,M,O;const[S,T]=i.useState(!1),[k,D]=i.useState(!1),[L,E]=i.useState({top:0,left:0}),R=l({top:0,left:0});return e(a,Object.assign({onMouseEnter:e=>{T(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();E({top:t.top,left:t.right}),R.current={top:t.top,left:t.right}})(e)},onMouseLeave:()=>{T(!1)},onClick:()=>{var e;null!==(e=f.disabled)&&void 0!==e&&e||f.children||b(f,j)},id:"menuItemWrapper",style:{cursor:null!==(y=f.disabled)&&void 0!==y&&y?"not-allowed":"pointer",backgroundColor:null!==(w=f.disabled)&&void 0!==w&&w?s.surface.standard:"transparent"}},{children:[f.customComponent?f.customComponent:e(p,Object.assign({isSelected:f.selected,isSubMenuOpen:S,isHovered:k,isDisabled:null!==(x=f.disabled)&&void 0!==x&&x},{children:[e(u,{children:[f.leadingIcon&&f.leadingIcon,e("div",{children:[t(r,Object.assign({style:{color:null!==(C=f.disabled)&&void 0!==C&&C?s.content.inactive:f.selected||k?s.content.positive:s.content.primary}},{children:f.label})),f.subText&&t(c,Object.assign({style:{color:null!==(I=f.disabled)&&void 0!==I&&I?s.content.inactive:f.selected||k?s.content.positive:s.content.secondary,marginTop:"2px"}},{children:f.subText}))]})]}),f.children&&f.children.length>0?t(o,{width:16,height:16,color:null!==(M=f.disabled)&&void 0!==M&&M?s.content.inactive:f.selected||k?s.content.positive:s.content.primary}):f.trailingIcon?f.trailingIcon:t(n,{})]})),!(null!==(O=f.disabled)&&void 0!==O&&O)&&f.children&&f.children.length>0&&S&&t("div",Object.assign({style:{width:g},className:"submenu",onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1)},{children:t(h,Object.assign({style:{width:g,top:`${L.top}px`,left:`${L.left}px`}},{children:t(m,{children:t(d,{width:g,onDropdownItemClick:b,options:f.children,parents:[...j,f]})})}))}))]}))};export{v as MenuItem};

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{ZeroState as o}from"../zeroState/ZeroState.js";import{SearchBox as r}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{MenuList as n}from"./MenuList.js";import{DropdownContainer as i,NoResultsContainer as s}from"./MultiLevelDropdown.styled.js";const l=l=>{let{options:p,width:a,isSearchable:c,onDropdownItemClick:d}=l;return t(i,Object.assign({width:a},{children:[c&&e("div",Object.assign({style:{padding:"4px 4px 0",width:null!=a?a:"200px"}},{children:e(r,{onSearch:t=>{console.log({searchString:t})},version:"2.0"})})),(null!=p?p:[]).length>0&&e(n,{width:null!=a?a:"200px",onDropdownItemClick:d,options:p,parents:[]}),0===(null!=p?p:[]).length&&e(s,{children:e(o,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})]}))};export{l as MultiLevelDropdown};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as o,useEffect as r}from"react";import{ZeroState as s}from"../zeroState/ZeroState.js";import{COLORS as i}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as c}from"../floater/floater.js";import{MenuList as d}from"./MenuList.js";import{DropdownContainer as p,OptionsContainer as a,NoResultsContainer as f}from"./MultiLevelDropdown.styled.js";const u=u=>{let{options:h,width:m,isSearchable:g,onDropdownItemClick:w,refElement:j,topOffset:O,leftOffset:b,isDropdownOpen:x,onDropdownOutsideClick:v}=u;const y=t.useRef(null),[C,D]=o(h),L=e=>{y.current&&!y.current.contains(e.target)?v&&v(!0):v&&v(!1)};return r((()=>(document.addEventListener("mousedown",L),()=>{document.removeEventListener("mousedown",L)})),[]),e(c,Object.assign({refElement:j,topOffset:O,leftOffset:b},{children:x&&e("div",Object.assign({ref:y,style:{backgroundColor:i.surface.standard,zIndex:99999}},{children:n(p,Object.assign({width:m},{children:[g&&e("div",Object.assign({style:{padding:"4px",width:null!=m?m:"200px"}},{children:e(l,{onSearch:e=>{const n=[...h],t=[];for(;n.length>0;){const o=n.shift();o&&o.label.toLowerCase().includes(e.toLowerCase())&&t.push(o),o&&"children"in o&&o.children?n.push(...o.children):o&&"options"in o&&o.options&&n.push(...o.options)}const o=e=>e.map((e=>{if(t.includes(e))return e;if("children"in e&&e.children){const n=o(e.children);if(n.length>0)return Object.assign(Object.assign({},e),{children:n})}if("options"in e&&e.options){const n=o(e.options);if(n.length>0)return Object.assign(Object.assign({},e),{options:n})}return null})).filter((e=>null!==e));D(o(h))},version:"2.0"})})),e(a,Object.assign({width:m},{children:(null!=C?C:[]).length>0&&e(d,{width:null!=m?m:"200px",onDropdownItemClick:w,options:C,parents:[]})})),0===(null!=C?C:[]).length&&e(f,{children:e(s,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})})]}))}))}))};export{u as MultiLevelDropdown};

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts

@@ -1,6 +1,9 @@
 export declare const DropdownContainer: import("styled-components").StyledComponent<"div", any, {
     width?: string | undefined;
 }, never>;
+export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;
 export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -14,4 +17,4 @@ export interface MenuItemContainerProps {
 export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", any, MenuItemContainerProps, never>;
 export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SubMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js

@@ -1,32 +1,33 @@
 import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
 	position: relative;
+	border-radius: 8px;
+	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
+	padding-bottom: 4px;
+`,r=e.div`
 	width: ${e=>{let{width:i}=e;return i||"200px"}};
 	max-width: 300px;
 	max-height: 280px;
 	overflow-y: scroll;
-	border-radius: 8px;
-	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	&::-webkit-scrollbar {
 		width: 0px;
 	}
-`,r=e.div`
+`,o=e.div`
 	margin-top: 64px;
 	height: 200px;
-`,o=e.div`
+`,n=e.div`
 	width: 100%;
 	justify-content: center;
 	cursor: pointer;
 	align-items: center;
 	justify-content: space-between;
 	margin: 4px 0;
-`,n=e.div`
+`,d=e.div`
 	z-index: 1000;
 	position: relative;
 	margin: 0px;
 	padding: 0px;
-	padding-bottom: 4px;
 	width: 100%;
-`,d=e.div`
+`,p=e.div`
 	position: relative;
 	padding: 1px 4px;
 	cursor: pointer;
@@ -51,24 +52,25 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	&:hover {
 		background-color: ${e=>{let{isSelected:t,isDisabled:r}=e;return r?i.surface.standard:t?i.background.positive.light:i.surface.hovered}};
 	}
-`,p=e.div`
+`,a=e.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`,a=e.div`
+`,c=e.div`
 	z-index: 1001;
 	position: fixed;
 	border-left: 4px solid transparent;
-`,c=e.div`
+`,x=e.div`
 	margin: 4px;
 	background-color: ${i.surface.standard};
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	border-radius: 8px;
 	padding-top: 4px;
 	max-height: 480px;
+	padding-bottom: 4px;
 	overflow-y: scroll;
 
 	&::-webkit-scrollbar {
 		display: none;
 	}
-`;export{c as Container,p as ContentContainer,t as DropdownContainer,o as GroupedMenuListContainer,s as MenuItemContainer,d as MenuItemWrapper,r as NoResultsContainer,n as StyledMenuList,a as SubMenuWrapper};
+`;export{a as ContentContainer,t as DropdownContainer,n as GroupedMenuListContainer,s as MenuItemContainer,p as MenuItemWrapper,o as NoResultsContainer,r as OptionsContainer,d as StyledMenuList,x as SubMenuListContainer,c as SubMenuWrapper};

package/dist/esm/components/multi-level-dropdown/type.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-export interface MultiLevelDropdownProps {
+import { FloaterProps } from '../floater/floater';
+export interface MultiLevelDropdownProps extends FloaterProps {
     options: MultiLevelDropdownOption[];
     width?: string;
     isSearchable?: boolean;
+    isDropdownOpen?: boolean;
+    onDropdownOutsideClick?: (isOutsideClick: any) => void;
     onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
 }
 export type GroupedOption = {

package/package.json

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