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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.d.ts +1 -1
  2. package/dist/cjs/components/multi-level-dropdown/MenuItem.d.ts +1 -1
  3. package/dist/cjs/components/multi-level-dropdown/MenuItem.js +1 -1
  4. package/dist/cjs/components/multi-level-dropdown/MenuList.d.ts +1 -1
  5. package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
  6. package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +3 -1
  7. package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js +10 -8
  8. package/dist/cjs/components/multi-level-dropdown/type.d.ts +1 -1
  9. package/dist/esm/components/multi-level-dropdown/GroupedMenuList.d.ts +1 -1
  10. package/dist/esm/components/multi-level-dropdown/MenuItem.d.ts +1 -1
  11. package/dist/esm/components/multi-level-dropdown/MenuItem.js +1 -1
  12. package/dist/esm/components/multi-level-dropdown/MenuList.d.ts +1 -1
  13. package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
  14. package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +3 -1
  15. package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +5 -3
  16. package/dist/esm/components/multi-level-dropdown/type.d.ts +1 -1
  17. package/package.json +1 -1
package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { GroupedOption, MultiLevelDropdownOption } from './type';
3
3
  export declare const GroupedMenuList: React.FC<{
4
4
  width: string;
5
- onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
5
+ onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
6
6
  option: GroupedOption;
7
7
  parents: MultiLevelDropdownOption[];
8
8
  }>;
package/dist/cjs/components/multi-level-dropdown/MenuItem.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { MultiLevelDropdownOption, SingleOption } from './type';
3
3
  export declare const MenuItem: React.FC<{
4
4
  width: string;
5
- onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
5
+ onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
6
6
  option: SingleOption;
7
7
  parents: MultiLevelDropdownOption[];
8
8
  }>;
package/dist/cjs/components/multi-level-dropdown/MenuItem.js CHANGED
@@ -1 +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),[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]})})}))}))]}))};
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),[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;!a||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/MenuList.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { MultiLevelDropdownOption } from './type';
3
3
  export declare const MenuList: React.FC<{
4
4
  width: string;
5
- onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
5
+ onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
6
6
  options: MultiLevelDropdownOption[];
7
7
  parents: MultiLevelDropdownOption[];
8
8
  }>;
package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js CHANGED
@@ -1 +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: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."})})]}))}))}))};
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: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,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."})}))]}))}))}))};
package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts CHANGED
@@ -4,7 +4,9 @@ export declare const DropdownContainer: import("styled-components").StyledCompon
4
4
  export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
5
5
  width?: string | undefined;
6
6
  }, never>;
7
- export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
8
+ width?: string | undefined;
9
+ }, never>;
8
10
  export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
9
11
  export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
10
12
  export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js CHANGED
@@ -1,33 +1,35 @@
1
- "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`
1
+ "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`
2
2
  position: relative;
3
3
  border-radius: 8px;
4
4
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
5
5
  padding-bottom: 4px;
6
- `,n=i.default.div`
6
+ `,o=i.default.div`
7
7
  width: ${e=>{let{width:t}=e;return t||"200px"}};
8
8
  max-width: 300px;
9
9
  max-height: 280px;
10
10
  overflow-y: scroll;
11
+ padding: 4px 0 0;
11
12
  &::-webkit-scrollbar {
12
13
  width: 0px;
13
14
  }
14
- `,a=i.default.div`
15
+ `,d=i.default.div`
15
16
  margin-top: 64px;
16
17
  height: 200px;
17
- `,d=i.default.div`
18
+ width: ${e=>{let{width:t}=e;return t||"200px"}};
19
+ `,a=i.default.div`
18
20
  width: 100%;
19
21
  justify-content: center;
20
22
  cursor: pointer;
21
23
  align-items: center;
22
24
  justify-content: space-between;
23
25
  margin: 4px 0;
24
- `,s=i.default.div`
26
+ `,p=i.default.div`
25
27
  z-index: 1000;
26
28
  position: relative;
27
29
  margin: 0px;
28
30
  padding: 0px;
29
31
  width: 100%;
30
- `,p=i.default.div`
32
+ `,s=i.default.div`
31
33
  position: relative;
32
34
  padding: 1px 4px;
33
35
  cursor: pointer;
@@ -43,7 +45,7 @@
43
45
  width: 100%;
44
46
  border-radius: 8px;
45
47
  justify-content: center;
46
- background-color: ${e=>{let{isSelected:r,isHovered:i,isSubMenuOpen:o,isDisabled:n}=e;return n?t.COLORS.surface.standard:r||o?t.COLORS.background.positive.light:i?t.COLORS.surface.hovered:t.COLORS.surface.standard}};
48
+ 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}};
47
49
  color: ${e=>{let{isSelected:r,isSubMenuOpen:i}=e;return r||i?t.COLORS.content.positive:t.COLORS.content.primary}};
48
50
  display: flex;
49
51
  align-items: center;
@@ -73,4 +75,4 @@
73
75
  &::-webkit-scrollbar {
74
76
  display: none;
75
77
  }
76
- `;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;
78
+ `;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;
package/dist/cjs/components/multi-level-dropdown/type.d.ts CHANGED
@@ -6,7 +6,7 @@ export interface MultiLevelDropdownProps extends FloaterProps {
6
6
  isSearchable?: boolean;
7
7
  isDropdownOpen?: boolean;
8
8
  onDropdownOutsideClick?: (isOutsideClick: any) => void;
9
- onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
9
+ onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
10
10
  }
11
11
  export type GroupedOption = {
12
12
  label: string;
package/dist/esm/components/multi-level-dropdown/GroupedMenuList.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { GroupedOption, MultiLevelDropdownOption } from './type';
3
3
  export declare const GroupedMenuList: React.FC<{
4
4
  width: string;
5
- onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
5
+ onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
6
6
  option: GroupedOption;
7
7
  parents: MultiLevelDropdownOption[];
8
8
  }>;
package/dist/esm/components/multi-level-dropdown/MenuItem.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { MultiLevelDropdownOption, SingleOption } from './type';
3
3
  export declare const MenuItem: React.FC<{
4
4
  width: string;
5
- onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
5
+ onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
6
6
  option: SingleOption;
7
7
  parents: MultiLevelDropdownOption[];
8
8
  }>;
package/dist/esm/components/multi-level-dropdown/MenuItem.js CHANGED
@@ -1 +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,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};
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,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;!b||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/MenuList.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { MultiLevelDropdownOption } from './type';
3
3
  export declare const MenuList: React.FC<{
4
4
  width: string;
5
- onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
5
+ onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
6
6
  options: MultiLevelDropdownOption[];
7
7
  parents: MultiLevelDropdownOption[];
8
8
  }>;
package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js CHANGED
@@ -1 +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 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};
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 p,OptionsContainer as a,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const f=f=>{let{options:h,width:m,isSearchable:g,onDropdownItemClick:w=(()=>{}),refElement:j,topOffset:O,leftOffset:b,isDropdownOpen:x,onDropdownOutsideClick:v}=f;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(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 CHANGED
@@ -4,7 +4,9 @@ export declare const DropdownContainer: import("styled-components").StyledCompon
4
4
  export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
5
5
  width?: string | undefined;
6
6
  }, never>;
7
- export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
7
+ export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
8
+ width?: string | undefined;
9
+ }, never>;
8
10
  export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
9
11
  export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
10
12
  export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js CHANGED
@@ -8,12 +8,14 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
8
8
  max-width: 300px;
9
9
  max-height: 280px;
10
10
  overflow-y: scroll;
11
+ padding: 4px 0 0;
11
12
  &::-webkit-scrollbar {
12
13
  width: 0px;
13
14
  }
14
15
  `,o=e.div`
15
16
  margin-top: 64px;
16
17
  height: 200px;
18
+ width: ${e=>{let{width:i}=e;return i||"200px"}};
17
19
  `,n=e.div`
18
20
  width: 100%;
19
21
  justify-content: center;
@@ -56,11 +58,11 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
56
58
  display: flex;
57
59
  align-items: center;
58
60
  gap: 8px;
59
- `,c=e.div`
61
+ `,x=e.div`
60
62
  z-index: 1001;
61
63
  position: fixed;
62
64
  border-left: 4px solid transparent;
63
- `,x=e.div`
65
+ `,c=e.div`
64
66
  margin: 4px;
65
67
  background-color: ${i.surface.standard};
66
68
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
@@ -73,4 +75,4 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
73
75
  &::-webkit-scrollbar {
74
76
  display: none;
75
77
  }
76
- `;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};
78
+ `;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};
package/dist/esm/components/multi-level-dropdown/type.d.ts CHANGED
@@ -6,7 +6,7 @@ export interface MultiLevelDropdownProps extends FloaterProps {
6
6
  isSearchable?: boolean;
7
7
  isDropdownOpen?: boolean;
8
8
  onDropdownOutsideClick?: (isOutsideClick: any) => void;
9
- onDropdownItemClick: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
9
+ onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
10
10
  }
11
11
  export type GroupedOption = {
12
12
  label: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.620-mldn.4",
3
+ "version": "0.0.620-mldn.8",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",