@bikdotai/bik-component-library 0.0.876-beta.2 → 0.0.876-beta.3

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 (5) hide show
  1. package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js +13 -9
  2. package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
  3. package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +33 -29
  4. package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
  5. package/package.json +1 -1
package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js CHANGED
@@ -3,7 +3,7 @@
3
3
  border-radius: ${({version:t})=>t==="3.0"?4:8}px;
4
4
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
5
5
  padding-bottom: ${({version:t})=>t==="3.0"?0:4}px;
6
- `,l=n.default.div`
6
+ `,c=n.default.div`
7
7
  width: ${({width:t})=>t||"200px"};
8
8
  max-width: 300px;
9
9
  max-height: 280px;
@@ -12,7 +12,11 @@
12
12
  &::-webkit-scrollbar {
13
13
  width: 0px;
14
14
  }
15
- `,c=n.default.div`
15
+ `,l=n.default.div`
16
+ /* Own stacking context, otherwise the option rows' text paints over the
17
+ upward shadow and it disappears. */
18
+ position: relative;
19
+ z-index: 1;
16
20
  padding: 8px;
17
21
  background-color: ${e.COLORS.surface.standard};
18
22
  border-top: 1px solid ${e.COLORS.stroke.primary};
@@ -46,7 +50,7 @@
46
50
  &:focus-within > .submenu {
47
51
  display: block;
48
52
  }
49
- `,C=n.default.div`
53
+ `,h=n.default.div`
50
54
  position: relative;
51
55
  padding: ${({version:t})=>t==="3.0"?"8px":"4px 8px"};
52
56
  transition: background-color 0.2s;
@@ -62,7 +66,7 @@
62
66
  &:hover {
63
67
  background-color: ${({isSelected:t,isDisabled:i,version:o})=>i?e.COLORS.surface.standard:t?o==="3.0"?e.COLORS.background.brandLight:e.COLORS.background.positive.light:e.COLORS.surface.hovered};
64
68
  }
65
- `,h=n.default.div`
69
+ `,C=n.default.div`
66
70
  display: flex;
67
71
  align-items: center;
68
72
  gap: 8px;
@@ -83,25 +87,25 @@
83
87
  &::-webkit-scrollbar {
84
88
  display: none;
85
89
  }
86
- `,m=n.default.div`
90
+ `,v=n.default.div`
87
91
  width: 16px;
88
92
  height: 16px;
89
93
  display: flex;
90
94
  align-items: center;
91
95
  justify-content: center;
92
96
  margin-right: 4px;
93
- `,S=n.default.div`
97
+ `,m=n.default.div`
94
98
  width: 16px;
95
99
  height: 16px;
96
100
  display: flex;
97
101
  align-items: center;
98
102
  justify-content: center;
99
103
  margin-left: 4px;
100
- `,v=n.default.div`
104
+ `,w=n.default.div`
101
105
  width: ${t=>t.width};
102
- `,y=n.default(r)`
106
+ `,S=n.default(r)`
103
107
  width: ${t=>t.width};
104
108
  top: ${t=>t.top}px;
105
109
  left: ${t=>t.left}px;
106
- `;exports.ContentContainer=h;exports.DropdownContainer=u;exports.FooterContainer=c;exports.GroupedMenuListContainer=g;exports.LeadingIconContainer=m;exports.MenuItemContainer=C;exports.MenuItemWrapper=b;exports.NoResultsContainer=x;exports.OptionsContainer=l;exports.StyledMenuList=f;exports.StyledSubMenuWrapper=y;exports.SubMenuContainer=v;exports.SubMenuListContainer=O;exports.SubMenuWrapper=r;exports.TrailingIconContainer=S;
110
+ `;exports.ContentContainer=C;exports.DropdownContainer=u;exports.FooterContainer=l;exports.GroupedMenuListContainer=g;exports.LeadingIconContainer=v;exports.MenuItemContainer=h;exports.MenuItemWrapper=b;exports.NoResultsContainer=x;exports.OptionsContainer=c;exports.StyledMenuList=f;exports.StyledSubMenuWrapper=S;exports.SubMenuContainer=w;exports.SubMenuListContainer=O;exports.SubMenuWrapper=r;exports.TrailingIconContainer=m;
107
111
  //# sourceMappingURL=MultiLevelDropdown.styled.js.map
package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\n// Sits outside OptionsContainer so it stays put while the options scroll. The\n// upward shadow lifts it off the list the way the design's z1 elevation does.\nexport const FooterContainer = styled.div`\n\tpadding: 8px;\n\tbackground-color: ${COLORS.surface.standard};\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tbox-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12);\n`;\n\nexport const NoResultsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin-top: ${({ version }) => (version === '3.0' ? 0 : 64)}px;\n\theight: ${({ version }) => (version === '3.0' ? 236 : 200)}px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tdisplay: ${({ version }) => (version === '3.0' ? 'flex' : 'block')};\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const GroupedMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: ${({ version }) => (version === '3.0' ? '0' : '4px 0')};\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div<{ version?: '1.0' | '2.0' | '3.0' }>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '0px' : '1px 4px')};\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '8px' : '4px 8px')};\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 0 : 8)}px;\n\tjustify-content: center;\n\tbackground-color: ${({\n\t\tisSelected,\n\t\tisHovered,\n\t\tisSubMenuOpen,\n\t\tisDisabled,\n\t\tversion,\n\t}) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen, version }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.text.primary\n\t\t\t\t: COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled, version }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? version === '3.0'\n\t\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t\t: COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tpadding-top: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\tmax-height: 480px;\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","version","OptionsContainer","width","FooterContainer","COLORS","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":"0NAGaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA,kBAKtB,CAAC,CAAE,QAAAC,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA;AAAA,mBAE3C,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA,EAGlDC,EAAmBF,EAAAA,QAAO;AAAA,UAI7B,CAAC,CAAE,MAAAG,CAAA,IAAaA,GAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA,YAItC,CAAC,CAAE,QAAAF,CAAA,IAAeA,IAAY,MAAQ,IAAM,SAAU;AAAA;AAAA;AAAA;AAAA,EAQrDG,EAAkBJ,EAAAA,QAAO;AAAA;AAAA,qBAEjBK,EAAAA,OAAO,QAAQ,QAAQ;AAAA,yBACnBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAIjCC,EAAqBN,EAAAA,QAAO;AAAA,eAI1B,CAAC,CAAE,QAAAC,CAAA,IAAeA,IAAY,MAAQ,EAAI,EAAG;AAAA,WACjD,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,IAAM,GAAI;AAAA,UACjD,CAAC,CAAE,MAAAE,CAAA,IAAaA,GAAgB,OAAQ;AAAA,YACtC,CAAC,CAAE,QAAAF,CAAA,IAAeA,IAAY,MAAQ,OAAS,OAAQ;AAAA;AAAA;AAAA,EAKtDM,EAA2BP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQpC,CAAC,CAAE,QAAAC,CAAA,IAAeA,IAAY,MAAQ,IAAM,OAAQ;AAAA,EAGlDO,EAAiBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxBS,EAAkBT,EAAAA,QAAO;AAAA;AAAA,YAE1B,CAAC,CAAE,QAAAC,CAAA,IAAeA,IAAY,MAAQ,MAAQ,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBvDS,EAAoBV,EAAAA,QAAO;AAAA;AAAA,YAE5B,CAAC,CAAE,QAAAC,CAAA,IAAeA,IAAY,MAAQ,MAAQ,SAAU;AAAA;AAAA;AAAA,kBAGlD,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA;AAAA,qBAEzC,CAAC,CACpB,WAAAU,EACA,UAAAC,EACA,cAAAC,EACA,WAAAC,EACA,QAAAb,CACD,IACCa,EACGT,EAAAA,OAAO,QAAQ,SACfM,GAAcE,EACdZ,IAAY,MACXI,EAAAA,OAAO,WAAW,WAClBA,EAAAA,OAAO,WAAW,SAAS,MAC5BO,EACAP,EAAAA,OAAO,QAAQ,QACfA,EAAAA,OAAO,QAAQ,QAAQ;AAAA,UAClB,CAAC,CAAE,WAAAM,EAAY,cAAAE,EAAe,QAAAZ,CAAA,IACtCU,GAAcE,EACXZ,IAAY,MACXI,EAAAA,OAAO,KAAK,QACZA,SAAO,QAAQ,SAChBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAML,CAAC,CAAE,WAAAM,EAAY,WAAAG,EAAY,QAAAb,KAC9Ca,EACGT,SAAO,QAAQ,SACfM,EACAV,IAAY,MACXI,SAAO,WAAW,WAClBA,SAAO,WAAW,SAAS,MAC5BA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIfU,EAAmBf,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAM1BgB,EAAiBhB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMxBiB,EAAuBjB,EAAAA,QAAO;AAAA;AAAA,qBAItBK,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,kBAE1B,CAAC,CAAE,QAAAJ,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA,gBAC9C,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA;AAAA,mBAEzC,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlDiB,EAAuBlB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9BmB,EAAwBnB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/BoB,EAAmBpB,EAAAA,QAAO;AAAA,UAC5BqB,GAAUA,EAAM,KAAK;AAAA,EAGnBC,EAAuBtB,EAAAA,QAAOgB,CAAc;AAAA,UAK9CK,GAAUA,EAAM,KAAK;AAAA,QACvBA,GAAUA,EAAM,GAAG;AAAA,SAClBA,GAAUA,EAAM,IAAI;AAAA"}
1
+ {"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\n// Sits outside OptionsContainer so it stays put while the options scroll. The\n// upward shadow lifts it off the list the way the design's z1 elevation does.\nexport const FooterContainer = styled.div`\n\t/* Own stacking context, otherwise the option rows' text paints over the\n\t upward shadow and it disappears. */\n\tposition: relative;\n\tz-index: 1;\n\tpadding: 8px;\n\tbackground-color: ${COLORS.surface.standard};\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tbox-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12);\n`;\n\nexport const NoResultsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin-top: ${({ version }) => (version === '3.0' ? 0 : 64)}px;\n\theight: ${({ version }) => (version === '3.0' ? 236 : 200)}px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tdisplay: ${({ version }) => (version === '3.0' ? 'flex' : 'block')};\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const GroupedMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: ${({ version }) => (version === '3.0' ? '0' : '4px 0')};\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div<{ version?: '1.0' | '2.0' | '3.0' }>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '0px' : '1px 4px')};\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '8px' : '4px 8px')};\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 0 : 8)}px;\n\tjustify-content: center;\n\tbackground-color: ${({\n\t\tisSelected,\n\t\tisHovered,\n\t\tisSubMenuOpen,\n\t\tisDisabled,\n\t\tversion,\n\t}) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen, version }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.text.primary\n\t\t\t\t: COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled, version }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? version === '3.0'\n\t\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t\t: COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tpadding-top: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\tmax-height: 480px;\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","version","OptionsContainer","width","FooterContainer","COLORS","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":"0NAGaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA,kBAKtB,CAAC,CAAE,QAAAC,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA;AAAA,mBAE3C,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA,EAGlDC,EAAmBF,EAAAA,QAAO;AAAA,UAI7B,CAAC,CAAE,MAAAG,CAAA,IAAaA,GAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA,YAItC,CAAC,CAAE,QAAAF,CAAA,IAAeA,IAAY,MAAQ,IAAM,SAAU;AAAA;AAAA;AAAA;AAAA,EAQrDG,EAAkBJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMjBK,EAAAA,OAAO,QAAQ,QAAQ;AAAA,yBACnBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAIjCC,EAAqBN,EAAAA,QAAO;AAAA,eAI1B,CAAC,CAAE,QAAAC,CAAA,IAAeA,IAAY,MAAQ,EAAI,EAAG;AAAA,WACjD,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,IAAM,GAAI;AAAA,UACjD,CAAC,CAAE,MAAAE,CAAA,IAAaA,GAAgB,OAAQ;AAAA,YACtC,CAAC,CAAE,QAAAF,CAAA,IAAeA,IAAY,MAAQ,OAAS,OAAQ;AAAA;AAAA;AAAA,EAKtDM,EAA2BP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQpC,CAAC,CAAE,QAAAC,CAAA,IAAeA,IAAY,MAAQ,IAAM,OAAQ;AAAA,EAGlDO,EAAiBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxBS,EAAkBT,EAAAA,QAAO;AAAA;AAAA,YAE1B,CAAC,CAAE,QAAAC,CAAA,IAAeA,IAAY,MAAQ,MAAQ,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBvDS,EAAoBV,EAAAA,QAAO;AAAA;AAAA,YAE5B,CAAC,CAAE,QAAAC,CAAA,IAAeA,IAAY,MAAQ,MAAQ,SAAU;AAAA;AAAA;AAAA,kBAGlD,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA;AAAA,qBAEzC,CAAC,CACpB,WAAAU,EACA,UAAAC,EACA,cAAAC,EACA,WAAAC,EACA,QAAAb,CACD,IACCa,EACGT,EAAAA,OAAO,QAAQ,SACfM,GAAcE,EACdZ,IAAY,MACXI,EAAAA,OAAO,WAAW,WAClBA,EAAAA,OAAO,WAAW,SAAS,MAC5BO,EACAP,EAAAA,OAAO,QAAQ,QACfA,EAAAA,OAAO,QAAQ,QAAQ;AAAA,UAClB,CAAC,CAAE,WAAAM,EAAY,cAAAE,EAAe,QAAAZ,CAAA,IACtCU,GAAcE,EACXZ,IAAY,MACXI,EAAAA,OAAO,KAAK,QACZA,SAAO,QAAQ,SAChBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAML,CAAC,CAAE,WAAAM,EAAY,WAAAG,EAAY,QAAAb,KAC9Ca,EACGT,SAAO,QAAQ,SACfM,EACAV,IAAY,MACXI,SAAO,WAAW,WAClBA,SAAO,WAAW,SAAS,MAC5BA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIfU,EAAmBf,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAM1BgB,EAAiBhB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMxBiB,EAAuBjB,EAAAA,QAAO;AAAA;AAAA,qBAItBK,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,kBAE1B,CAAC,CAAE,QAAAJ,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA,gBAC9C,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA;AAAA,mBAEzC,CAAC,CAAE,QAAAA,CAAA,IAAeA,IAAY,MAAQ,EAAI,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlDiB,EAAuBlB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9BmB,EAAwBnB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/BoB,EAAmBpB,EAAAA,QAAO;AAAA,UAC5BqB,GAAUA,EAAM,KAAK;AAAA,EAGnBC,EAAuBtB,EAAAA,QAAOgB,CAAc;AAAA,UAK9CK,GAAUA,EAAM,KAAK;AAAA,QACvBA,GAAUA,EAAM,GAAG;AAAA,SAClBA,GAAUA,EAAM,IAAI;AAAA"}
package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js CHANGED
@@ -1,11 +1,11 @@
1
- import e from "styled-components";
2
- import { COLORS as n } from "../../constants/Theme.js";
3
- const c = e.div`
1
+ import n from "styled-components";
2
+ import { COLORS as e } from "../../constants/Theme.js";
3
+ const c = n.div`
4
4
  position: relative;
5
5
  border-radius: ${({ version: t }) => t === "3.0" ? 4 : 8}px;
6
6
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
7
7
  padding-bottom: ${({ version: t }) => t === "3.0" ? 0 : 4}px;
8
- `, x = e.div`
8
+ `, x = n.div`
9
9
  width: ${({ width: t }) => t || "200px"};
10
10
  max-width: 300px;
11
11
  max-height: 280px;
@@ -14,32 +14,36 @@ const c = e.div`
14
14
  &::-webkit-scrollbar {
15
15
  width: 0px;
16
16
  }
17
- `, l = e.div`
17
+ `, l = n.div`
18
+ /* Own stacking context, otherwise the option rows' text paints over the
19
+ upward shadow and it disappears. */
20
+ position: relative;
21
+ z-index: 1;
18
22
  padding: 8px;
19
- background-color: ${n.surface.standard};
20
- border-top: 1px solid ${n.stroke.primary};
23
+ background-color: ${e.surface.standard};
24
+ border-top: 1px solid ${e.stroke.primary};
21
25
  box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12);
22
- `, u = e.div`
26
+ `, u = n.div`
23
27
  margin-top: ${({ version: t }) => t === "3.0" ? 0 : 64}px;
24
28
  height: ${({ version: t }) => t === "3.0" ? 236 : 200}px;
25
29
  width: ${({ width: t }) => t || "200px"};
26
30
  display: ${({ version: t }) => t === "3.0" ? "flex" : "block"};
27
31
  align-items: center;
28
32
  justify-content: center;
29
- `, g = e.div`
33
+ `, g = n.div`
30
34
  width: 100%;
31
35
  justify-content: center;
32
36
  cursor: pointer;
33
37
  align-items: center;
34
38
  justify-content: space-between;
35
39
  margin: ${({ version: t }) => t === "3.0" ? "0" : "4px 0"};
36
- `, b = e.div`
40
+ `, h = n.div`
37
41
  z-index: 1000;
38
42
  position: relative;
39
43
  margin: 0px;
40
44
  padding: 0px;
41
45
  width: 100%;
42
- `, h = e.div`
46
+ `, b = n.div`
43
47
  position: relative;
44
48
  padding: ${({ version: t }) => t === "3.0" ? "0px" : "1px 4px"};
45
49
  cursor: pointer;
@@ -48,7 +52,7 @@ const c = e.div`
48
52
  &:focus-within > .submenu {
49
53
  display: block;
50
54
  }
51
- `, f = e.div`
55
+ `, f = n.div`
52
56
  position: relative;
53
57
  padding: ${({ version: t }) => t === "3.0" ? "8px" : "4px 8px"};
54
58
  transition: background-color 0.2s;
@@ -61,26 +65,26 @@ const c = e.div`
61
65
  isSubMenuOpen: o,
62
66
  isDisabled: r,
63
67
  version: a
64
- }) => r ? n.surface.standard : t || o ? a === "3.0" ? n.background.brandLight : n.background.positive.light : i ? n.surface.hovered : n.surface.standard};
65
- color: ${({ isSelected: t, isSubMenuOpen: i, version: o }) => t || i ? o === "3.0" ? n.text.primary : n.content.positive : n.content.primary};
68
+ }) => r ? e.surface.standard : t || o ? a === "3.0" ? e.background.brandLight : e.background.positive.light : i ? e.surface.hovered : e.surface.standard};
69
+ color: ${({ isSelected: t, isSubMenuOpen: i, version: o }) => t || i ? o === "3.0" ? e.text.primary : e.content.positive : e.content.primary};
66
70
  display: flex;
67
71
  align-items: center;
68
72
  justify-content: space-between;
69
73
 
70
74
  &:hover {
71
- background-color: ${({ isSelected: t, isDisabled: i, version: o }) => i ? n.surface.standard : t ? o === "3.0" ? n.background.brandLight : n.background.positive.light : n.surface.hovered};
75
+ background-color: ${({ isSelected: t, isDisabled: i, version: o }) => i ? e.surface.standard : t ? o === "3.0" ? e.background.brandLight : e.background.positive.light : e.surface.hovered};
72
76
  }
73
- `, m = e.div`
77
+ `, v = n.div`
74
78
  display: flex;
75
79
  align-items: center;
76
80
  gap: 8px;
77
- `, p = e.div`
81
+ `, p = n.div`
78
82
  z-index: 1001;
79
83
  position: fixed;
80
84
  border-left: 4px solid transparent;
81
- `, v = e.div`
85
+ `, m = n.div`
82
86
  margin: 4px;
83
- background-color: ${n.surface.standard};
87
+ background-color: ${e.surface.standard};
84
88
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
85
89
  border-radius: ${({ version: t }) => t === "3.0" ? 4 : 8}px;
86
90
  padding-top: ${({ version: t }) => t === "3.0" ? 0 : 4}px;
@@ -91,42 +95,42 @@ const c = e.div`
91
95
  &::-webkit-scrollbar {
92
96
  display: none;
93
97
  }
94
- `, $ = e.div`
98
+ `, w = n.div`
95
99
  width: 16px;
96
100
  height: 16px;
97
101
  display: flex;
98
102
  align-items: center;
99
103
  justify-content: center;
100
104
  margin-right: 4px;
101
- `, w = e.div`
105
+ `, $ = n.div`
102
106
  width: 16px;
103
107
  height: 16px;
104
108
  display: flex;
105
109
  align-items: center;
106
110
  justify-content: center;
107
111
  margin-left: 4px;
108
- `, y = e.div`
112
+ `, y = n.div`
109
113
  width: ${(t) => t.width};
110
- `, k = e(p)`
114
+ `, k = n(p)`
111
115
  width: ${(t) => t.width};
112
116
  top: ${(t) => t.top}px;
113
117
  left: ${(t) => t.left}px;
114
118
  `;
115
119
  export {
116
- m as ContentContainer,
120
+ v as ContentContainer,
117
121
  c as DropdownContainer,
118
122
  l as FooterContainer,
119
123
  g as GroupedMenuListContainer,
120
- $ as LeadingIconContainer,
124
+ w as LeadingIconContainer,
121
125
  f as MenuItemContainer,
122
- h as MenuItemWrapper,
126
+ b as MenuItemWrapper,
123
127
  u as NoResultsContainer,
124
128
  x as OptionsContainer,
125
- b as StyledMenuList,
129
+ h as StyledMenuList,
126
130
  k as StyledSubMenuWrapper,
127
131
  y as SubMenuContainer,
128
- v as SubMenuListContainer,
132
+ m as SubMenuListContainer,
129
133
  p as SubMenuWrapper,
130
- w as TrailingIconContainer
134
+ $ as TrailingIconContainer
131
135
  };
132
136
  //# sourceMappingURL=MultiLevelDropdown.styled.js.map
package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\n// Sits outside OptionsContainer so it stays put while the options scroll. The\n// upward shadow lifts it off the list the way the design's z1 elevation does.\nexport const FooterContainer = styled.div`\n\tpadding: 8px;\n\tbackground-color: ${COLORS.surface.standard};\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tbox-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12);\n`;\n\nexport const NoResultsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin-top: ${({ version }) => (version === '3.0' ? 0 : 64)}px;\n\theight: ${({ version }) => (version === '3.0' ? 236 : 200)}px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tdisplay: ${({ version }) => (version === '3.0' ? 'flex' : 'block')};\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const GroupedMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: ${({ version }) => (version === '3.0' ? '0' : '4px 0')};\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div<{ version?: '1.0' | '2.0' | '3.0' }>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '0px' : '1px 4px')};\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '8px' : '4px 8px')};\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 0 : 8)}px;\n\tjustify-content: center;\n\tbackground-color: ${({\n\t\tisSelected,\n\t\tisHovered,\n\t\tisSubMenuOpen,\n\t\tisDisabled,\n\t\tversion,\n\t}) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen, version }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.text.primary\n\t\t\t\t: COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled, version }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? version === '3.0'\n\t\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t\t: COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tpadding-top: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\tmax-height: 480px;\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","version","OptionsContainer","width","FooterContainer","COLORS","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":"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"}
1
+ {"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tposition: relative;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n`;\n\nexport const OptionsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: ${({ version }) => (version === '3.0' ? '0' : '4px 0 0')};\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\n// Sits outside OptionsContainer so it stays put while the options scroll. The\n// upward shadow lifts it off the list the way the design's z1 elevation does.\nexport const FooterContainer = styled.div`\n\t/* Own stacking context, otherwise the option rows' text paints over the\n\t upward shadow and it disappears. */\n\tposition: relative;\n\tz-index: 1;\n\tpadding: 8px;\n\tbackground-color: ${COLORS.surface.standard};\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n\tbox-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12);\n`;\n\nexport const NoResultsContainer = styled.div<{\n\twidth?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin-top: ${({ version }) => (version === '3.0' ? 0 : 64)}px;\n\theight: ${({ version }) => (version === '3.0' ? 236 : 200)}px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tdisplay: ${({ version }) => (version === '3.0' ? 'flex' : 'block')};\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const GroupedMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: ${({ version }) => (version === '3.0' ? '0' : '4px 0')};\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div<{ version?: '1.0' | '2.0' | '3.0' }>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '0px' : '1px 4px')};\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: ${({ version }) => (version === '3.0' ? '8px' : '4px 8px')};\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: ${({ version }) => (version === '3.0' ? 0 : 8)}px;\n\tjustify-content: center;\n\tbackground-color: ${({\n\t\tisSelected,\n\t\tisHovered,\n\t\tisSubMenuOpen,\n\t\tisDisabled,\n\t\tversion,\n\t}) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen, version }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? version === '3.0'\n\t\t\t\t? COLORS.text.primary\n\t\t\t\t: COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled, version }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? version === '3.0'\n\t\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t\t: COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '3.0' ? 4 : 8)}px;\n\tpadding-top: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\tmax-height: 480px;\n\tpadding-bottom: ${({ version }) => (version === '3.0' ? 0 : 4)}px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","version","OptionsContainer","width","FooterContainer","COLORS","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.876-beta.2",
3
+ "version": "0.0.876-beta.3",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",