@bikdotai/bik-component-library 0.0.620-mldn.13 → 0.0.620-mldn.14

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"),o=require("./MenuItem.js"),n=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:p,option:u,parents:l}=s;return e.jsxs(n.GroupedMenuListContainer,{children:[e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 16px",cursor:"default"},color:r.COLORS.content.placeholder},{children:u.label})),u.options.map(((r,t)=>e.jsx(o.MenuItem,{width:i,onDropdownItemClick:p,option:r,parents:l},t)))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),o=require("./MenuItem.js"),n=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:p,option:u,parents:l}=s;return e.jsxs(n.GroupedMenuListContainer,{children:[e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.COLORS.content.placeholder},{children:u.label})),u.options.map(((r,t)=>e.jsx(o.MenuItem,{width:i,onDropdownItemClick:p,option:r,parents:l},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,v,O,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,t;!a||null!==(e=u.disabled)&&void 0!==e&&e||(null===(t=u.children)||void 0===t?void 0:t.length)||a(u,p)},id:"menuItemWrapper",style:{cursor:null!==(h=u.disabled)&&void 0!==h&&h?"not-allowed":"pointer",backgroundColor:null!==(v=u.disabled)&&void 0!==v&&v?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!==(O=u.disabled)&&void 0!==O&&O},{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]})})}))}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("../../assets/icons/chevronRight2.svg.js"),t=require("react"),i=require("../../constants/Theme.js"),o=require("../TypographyStyle.js"),r=require("./MenuList.js"),s=require("./MultiLevelDropdown.styled.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(t);exports.MenuItem=l=>{let{width:a,onDropdownItemClick:c,option:u,parents:p}=l;var h,j,g,v,O,b,C;const[x,S]=d.default.useState(!1),[m,f]=d.default.useState(!1),[L,y]=d.default.useState({top:0,left:0}),M=t.useRef({top:0,left:0});return e.jsxs(s.MenuItemWrapper,Object.assign({onMouseEnter:e=>{S(!0),(e=>{const n=e.currentTarget.getBoundingClientRect();y({top:n.top,left:n.right}),M.current={top:n.top,left:n.right}})(e)},onMouseLeave:()=>{S(!1)},onClick:()=>{var e,n;!c||null!==(e=u.disabled)&&void 0!==e&&e||(null===(n=u.children)||void 0===n?void 0:n.length)||c(u,p)},id:"menuItemWrapper",style:{cursor:null!==(h=u.disabled)&&void 0!==h&&h?"not-allowed":"pointer",backgroundColor:null!==(j=u.disabled)&&void 0!==j&&j?i.COLORS.surface.standard:"transparent"}},{children:[u.customComponent?u.customComponent:e.jsxs(s.MenuItemContainer,Object.assign({isSelected:u.selected,isSubMenuOpen:x,isHovered:m,isDisabled:null!==(g=u.disabled)&&void 0!==g&&g},{children:[e.jsxs(s.ContentContainer,{children:[u.leadingIcon&&e.jsx(s.LeadingIconContainer,{children:u.leadingIcon}),e.jsxs("div",{children:[e.jsx(o.BodyCaption,Object.assign({style:{color:null!==(v=u.disabled)&&void 0!==v&&v?i.COLORS.content.inactive:u.selected||m?i.COLORS.content.positive:i.COLORS.content.primary}},{children:u.label})),u.subText&&e.jsx(o.BodyTiny,Object.assign({style:{color:null!==(O=u.disabled)&&void 0!==O&&O?i.COLORS.content.inactive:u.selected||m?i.COLORS.content.positive:i.COLORS.content.secondary,marginTop:"2px"}},{children:u.subText}))]})]}),u.children&&u.children.length>0?e.jsx(s.TrailingIconContainer,{children:e.jsx(n.default,{width:16,height:16,color:null!==(b=u.disabled)&&void 0!==b&&b?i.COLORS.content.inactive:u.selected||m?i.COLORS.content.positive:i.COLORS.content.primary})}):u.trailingIcon?e.jsx(s.TrailingIconContainer,{children:u.trailingIcon}):e.jsx(e.Fragment,{})]})),!(null!==(C=u.disabled)&&void 0!==C&&C)&&u.children&&u.children.length>0&&x&&e.jsx(s.SubMenuContainer,Object.assign({width:a,className:"submenu",onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1)},{children:e.jsx(s.StyledSubMenuWrapper,Object.assign({width:a,top:L.top,left:L.left},{children:e.jsx(s.SubMenuListContainer,{children:e.jsx(r.MenuList,{width:a,onDropdownItemClick:c,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"),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:x,isDropdownOpen:O,onDropdownOutsideClick:w}=u;const b=c.default.useRef(null),[g,m]=t.useState(d),v=e=>{b.current&&!b.current.contains(e.target)?w&&w(!0):w&&w(!1)};return t.useEffect((()=>(document.addEventListener("mousedown",v),()=>{document.removeEventListener("mousedown",v)})),[]),t.useEffect((()=>{m(d)}),[d]),e.jsx(o.Floater,Object.assign({refElement:h,topOffset:j,leftOffset:x},{children:O&&e.jsx("div",Object.assign({ref:b,style:{backgroundColor:r.COLORS.surface.standard,zIndex:99999,borderRadius:"8px"}},{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=Array.isArray(d)?[...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,Object.assign({style:{width:null!=a?a:"200px"}},{children:e.jsx(n.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};
+"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:a,width:d,isSearchable:p,onDropdownItemClick:f,refElement:h,topOffset:j,leftOffset:w,isDropdownOpen:x,onDropdownOutsideClick:O}=u;const b=c.default.useRef(null),[g,m]=t.useState(a),v=e=>{b.current&&!b.current.contains(e.target)?O&&O(!0):O&&O(!1)};return t.useEffect((()=>(document.addEventListener("mousedown",v),()=>{document.removeEventListener("mousedown",v)})),[]),t.useEffect((()=>{m(a)}),[a]),e.jsx(o.Floater,Object.assign({refElement:h,topOffset:j,leftOffset:w},{children:x&&e.jsx("div",Object.assign({ref:b,style:{backgroundColor:r.COLORS.surface.standard,zIndex:99999,borderRadius:"8px",whiteSpace:"normal"}},{children:e.jsxs(l.DropdownContainer,Object.assign({width:d},{children:[p&&e.jsx("div",Object.assign({style:{padding:"4px",width:null!=d?d:"200px"}},{children:e.jsx(s.SearchBox,{onSearch:e=>{const t=Array.isArray(a)?[...a]:[],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(a))},version:"2.0"})})),e.jsx(l.OptionsContainer,Object.assign({width:d},{children:(null!=g?g:[]).length>0&&e.jsx(i.MenuList,{width:null!=d?d:"200px",onDropdownItemClick:f,options:g,parents:[]})})),0===(null!=g?g:[]).length&&e.jsx(l.NoResultsContainer,Object.assign({style:{width:null!=d?d:"200px"}},{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

@@ -20,3 +20,13 @@ export declare const MenuItemContainer: import("styled-components").StyledCompon
 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 SubMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeadingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrailingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubMenuContainer: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+}, never>;
+export declare const StyledSubMenuWrapper: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+    top: number;
+    left: number;
+}, never>;

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

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

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

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

@@ -1 +1 @@
-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 a,OptionsContainer as p,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const f=f=>{let{options:h,width:m,isSearchable:g,onDropdownItemClick:w=(()=>{}),refElement:b,topOffset:j,leftOffset:O,isDropdownOpen:x,onDropdownOutsideClick:y}=f;const v=t.useRef(null),[C,D]=o(h),L=e=>{v.current&&!v.current.contains(e.target)?y&&y(!0):y&&y(!1)};return r((()=>(document.addEventListener("mousedown",L),()=>{document.removeEventListener("mousedown",L)})),[]),r((()=>{D(h)}),[h]),e(c,Object.assign({refElement:b,topOffset:j,leftOffset:O},{children:x&&e("div",Object.assign({ref:v,style:{backgroundColor:i.surface.standard,zIndex:99999,borderRadius:"8px"}},{children:n(a,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=Array.isArray(h)?[...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(p,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(u,Object.assign({style:{width:null!=m?m:"200px"}},{children:e(s,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};export{f 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 a,OptionsContainer as p,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const f=f=>{let{options:h,width:m,isSearchable:w,onDropdownItemClick:g,refElement:b,topOffset:j,leftOffset:O,isDropdownOpen:x,onDropdownOutsideClick:y}=f;const v=t.useRef(null),[S,C]=o(h),D=e=>{v.current&&!v.current.contains(e.target)?y&&y(!0):y&&y(!1)};return r((()=>(document.addEventListener("mousedown",D),()=>{document.removeEventListener("mousedown",D)})),[]),r((()=>{C(h)}),[h]),e(c,Object.assign({refElement:b,topOffset:j,leftOffset:O},{children:x&&e("div",Object.assign({ref:v,style:{backgroundColor:i.surface.standard,zIndex:99999,borderRadius:"8px",whiteSpace:"normal"}},{children:n(a,Object.assign({width:m},{children:[w&&e("div",Object.assign({style:{padding:"4px",width:null!=m?m:"200px"}},{children:e(l,{onSearch:e=>{const n=Array.isArray(h)?[...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));C(o(h))},version:"2.0"})})),e(p,Object.assign({width:m},{children:(null!=S?S:[]).length>0&&e(d,{width:null!=m?m:"200px",onDropdownItemClick:g,options:S,parents:[]})})),0===(null!=S?S:[]).length&&e(u,Object.assign({style:{width:null!=m?m:"200px"}},{children:e(s,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};export{f as MultiLevelDropdown};

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

@@ -20,3 +20,13 @@ export declare const MenuItemContainer: import("styled-components").StyledCompon
 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 SubMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeadingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrailingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubMenuContainer: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+}, never>;
+export declare const StyledSubMenuWrapper: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+    top: number;
+    left: number;
+}, never>;

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

@@ -12,18 +12,18 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	&::-webkit-scrollbar {
 		width: 0px;
 	}
-`,o=e.div`
+`,n=e.div`
 	margin-top: 64px;
 	height: 200px;
 	width: ${e=>{let{width:i}=e;return i||"200px"}};
-`,n=e.div`
+`,d=e.div`
 	width: 100%;
 	justify-content: center;
 	cursor: pointer;
 	align-items: center;
 	justify-content: space-between;
 	margin: 4px 0;
-`,d=e.div`
+`,o=e.div`
 	z-index: 1000;
 	position: relative;
 	margin: 0px;
@@ -40,12 +40,12 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	}
 `,s=e.div`
 	position: relative;
-	padding: 4px 8px 4px 12px;
+	padding: 4px 8px 4px 8px;
 	transition: background-color 0.2s;
 	width: 100%;
 	border-radius: 8px;
 	justify-content: center;
-	background-color: ${e=>{let{isSelected:t,isHovered:r,isSubMenuOpen:o,isDisabled:n}=e;return n?i.surface.standard:t||o?i.background.positive.light:r?i.surface.hovered:i.surface.standard}};
+	background-color: ${e=>{let{isSelected:t,isHovered:r,isSubMenuOpen:n,isDisabled:d}=e;return d?i.surface.standard:t||n?i.background.positive.light:r?i.surface.hovered:i.surface.standard}};
 	color: ${e=>{let{isSelected:t,isSubMenuOpen:r}=e;return t||r?i.content.positive:i.content.primary}};
 	display: flex;
 	align-items: center;
@@ -62,7 +62,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	z-index: 1001;
 	position: fixed;
 	border-left: 4px solid transparent;
-`,c=e.div`
+`,l=e.div`
 	margin: 4px;
 	background-color: ${i.surface.standard};
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
@@ -75,4 +75,24 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	&::-webkit-scrollbar {
 		display: none;
 	}
-`;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,c as SubMenuListContainer,x as SubMenuWrapper};
+`,c=e.div`
+	width: 16px;
+	height: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 4px;
+`,h=e.div`
+	width: 16px;
+	height: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-left: 4px;
+`,u=e.div`
+	width: ${e=>e.width};
+`,g=e(x)`
+	width: ${e=>e.width};
+	top: ${e=>e.top}px;
+	left: ${e=>e.left}px;
+`;export{a as ContentContainer,t as DropdownContainer,d as GroupedMenuListContainer,c as LeadingIconContainer,s as MenuItemContainer,p as MenuItemWrapper,n as NoResultsContainer,r as OptionsContainer,o as StyledMenuList,g as StyledSubMenuWrapper,u as SubMenuContainer,l as SubMenuListContainer,x as SubMenuWrapper,h as TrailingIconContainer};

package/package.json

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