npm - @bikdotai/bik-component-library - Versions diffs - 0.0.876-beta.1 → 0.0.876-beta.3 - Mend

@bikdotai/bik-component-library 0.0.876-beta.1 → 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 (131) hide show

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

@@ -65,6 +65,28 @@ export interface OpenDropdownProps {
     checkboxActiveColor?: string;
     /** Renders rows with the brand selected theme (brandLight bg + primary text), square corners and flush spacing */
     brandSelectedRow?: boolean;
+    /**
+     * How options that declare `children` are laid out.
+     *
+     * - `'flyout'` (default) — the parent row shows a chevron and its children
+     *   open in a submenu to the right on hover. The parent is not selectable.
+     * - `'nested'` — children render inline, indented under the parent and joined
+     *   by an elbow connector. With `isMultiSelect` the parent carries a
+     *   tri-state checkbox that selects or clears all of its children.
+     */
+    childrenLayout?: 'flyout' | 'nested';
+    /**
+     * With `childrenLayout='nested'`, gives every parent row a chevron that
+     * collapses and expands its children. Groups start expanded.
+     */
+    collapsibleChildren?: boolean;
+    /**
+     * With `collapsibleChildren`, renders every group collapsed to begin with, so
+     * the list opens as its group names alone.
+     */
+    defaultCollapsed?: boolean;
+    /** Hides the "N selected" text in the multiselect bottom bar. */
+    hideSelectedCount?: boolean;
 }
 export type GroupedOption = {
     label?: string;

package/dist/esm/components/dual-icon-button/DualIconButton.styled.js CHANGED Viewed

@@ -19,10 +19,10 @@ const t = n.div`
 	background: transparent;
 	${(e) => e.disabled ? "" : `
-		&:hover {
+		:hover {
 			background-color: ${i.background.inverse};
 		}
-		&:active {
+		:active {
 			box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);
 		}
 	`}

package/dist/esm/components/dual-icon-button/DualIconButton.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DualIconButton.styled.js","sources":["../../../../src/components/dual-icon-button/DualIconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{ disabled?: boolean }>`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder-radius: 4px;\n\toverflow: hidden;\n\tbackground: ${(props) =>\n\t\tprops.disabled\n\t\t\t? COLORS.background.inactive\n\t\t\t: COLORS.background.inverseLight};\n`;\n\nexport const IconHalf = styled.button<{ disabled?: boolean }>`\n\tall: unset;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tpadding: 4px;\n\tbox-sizing: border-box;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tbackground: transparent;\n\n\t${(props) =>\n\t\t!props.disabled\n\t\t\t? `\n\t\t&:hover {\n\t\t\tbackground-color: ${COLORS.background.inverse};\n\t\t}\n\t\t&:active {\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const Divider = styled.div`\n\twidth: 1px;\n\theight: 12px;\n\tbackground: rgba(255, 255, 255, 0.3);\n\tflex-shrink: 0;\n`;\n"],"names":["Container","styled","props","COLORS","IconHalf","Divider"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB,CAACC,MACdA,EAAM,WACHC,EAAO,WAAW,WAClBA,EAAO,WAAW,YAAY;AAAA,GAGtBC,IAAWH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASpB,CAACC,MAAWA,EAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA;AAAA,GAG/D,CAACA,MACDA,EAAM,WASJ,KARA;AAAA;AAAA,uBAEkBC,EAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzC;AAAA,GAGME,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"DualIconButton.styled.js","sources":["../../../../src/components/dual-icon-button/DualIconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{ disabled?: boolean }>`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder-radius: 4px;\n\toverflow: hidden;\n\tbackground: ${(props) =>\n\t\tprops.disabled\n\t\t\t? COLORS.background.inactive\n\t\t\t: COLORS.background.inverseLight};\n`;\n\nexport const IconHalf = styled.button<{ disabled?: boolean }>`\n\tall: unset;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tpadding: 4px;\n\tbox-sizing: border-box;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tbackground: transparent;\n\n\t${(props) =>\n\t\t!props.disabled\n\t\t\t? `\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.background.inverse};\n\t\t}\n\t\t:active {\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const Divider = styled.div`\n\twidth: 1px;\n\theight: 12px;\n\tbackground: rgba(255, 255, 255, 0.3);\n\tflex-shrink: 0;\n`;\n"],"names":["Container","styled","props","COLORS","IconHalf","Divider"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB,CAACC,MACdA,EAAM,WACHC,EAAO,WAAW,WAClBA,EAAO,WAAW,YAAY;AAAA,GAGtBC,IAAWH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASpB,CAACC,MAAWA,EAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA;AAAA,GAG/D,CAACA,MACDA,EAAM,WASJ,KARA;AAAA;AAAA,uBAEkBC,EAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzC;AAAA,GAGME,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/esm/components/floating-action-button/FloatingActionButton.styles.js CHANGED Viewed

@@ -32,7 +32,7 @@ const c = e.div`
 			padding: 14px;
 			border-bottom: 1px solid ${o.stroke.primary};
-			&:last-child {
+			:last-child {
 				border-bottom: none !important;
 			}
 		}

package/dist/esm/components/floating-action-button/FloatingActionButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingActionButton.styles.js","sources":["../../../../src/components/floating-action-button/FloatingActionButton.styles.ts"],"sourcesContent":["import { Dropdown } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport enum FAB_POSITION {\n\tTOP_LEFT = 'top left',\n\tTOP_RIGHT = 'top right',\n\tBOTTOM_LEFT = 'bottom left',\n\tBOTTOM_RIGHT = 'botton right',\n}\n\nexport enum DROP_POSITION {\n\tUP = 'up',\n\tUP_CENTERED = 'up-centered',\n\tSTART = 'start',\n\tEND = 'end',\n\tDOWN = 'down',\n\tDOWN_CENTERED = 'down-centered',\n}\n\nexport enum MENU_ALIGNMENT {\n\tSTART = 'start',\n\tEND = 'end',\n}\n\nexport const FloatingActionButtonContainer = styled.div<{\n\twidth: number;\n\theight: number;\n\tcolor: string;\n\tisRound?: boolean;\n}>`\n\twidth: ${(props) => props.width}px;\n\theight: ${(props) => props.height}px;\n\tbackground: ${(props) => props.color};\n\t${(props) =>\n\t\tprops.isRound\n\t\t\t? 'border-radius: 50%;'\n\t\t\t: 'border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius:50%;'}\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: flex;\n`;\nexport const FloatingActionButtonOuterContainer = styled.div<{\n\twidth: number;\n\theight: number;\n\tcolor: string;\n\tposition: FAB_POSITION;\n\tbuttonPaddingHorizontal: number;\n\tbuttonPaddingVertical: number;\n\tzIndex: number;\n}>`\n\tdisplay: flex;\n\tborder-radius: 50%;\n\tflex-direction: column;\n\talign-items: flex-end;\n\tposition: fixed;\n\twidth: ${(props) => props.width}px;\n\theight: ${(props) => props.height}px;\n\tz-index: ${(props) => props.zIndex};\n\t${(props) =>\n\t\tprops.position === FAB_POSITION.BOTTOM_RIGHT\n\t\t\t? `right: ${props.buttonPaddingHorizontal}px; bottom: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.BOTTOM_LEFT\n\t\t\t? `left: ${props.buttonPaddingHorizontal}px; bottom: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.TOP_LEFT\n\t\t\t? `left: ${props.buttonPaddingHorizontal}px; top: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.TOP_RIGHT\n\t\t\t? `right: ${props.buttonPaddingHorizontal}px; top: ${props.buttonPaddingVertical}px`\n\t\t\t: ``};\n`;\n\nexport const StyledDropdown = styled(Dropdown)<{\n\tactive?: string;\n\twidth?: string;\n\theight?: string;\n}>`\n\t.filter-container {\n\t\t.single-row {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: flex-start;\n\t\t\tgap: 8px;\n\t\t\tpadding: 14px;\n\t\t\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\n\t\t\t&:last-child {\n\t\t\t\tborder-bottom: none !important;\n\t\t\t}\n\t\t}\n\t}\n\tbutton:not(.date-picker-save-button-container button) {\n\t\tborder: 1px solid\n\t\t\t${(props) =>\n\t\t\t\tprops.active === 'true'\n\t\t\t\t\t? COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.stroke.primary};\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 6px 0px;\n\t\tbackground: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.standard};\n\t\tcolor: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.content.positive\n\t\t\t\t: COLORS.content.primary};\n\t}\n\n\t.btn-primary:hover,\n\t.btn-primary:active,\n\t.btn-primary:focus,\n\t.btn-primary.dropdown-toggle,\n\t.show > .btn-primary.dropdown-toggle {\n\t\tcolor: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.content.positive\n\t\t\t\t: COLORS.content.primary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: 'transparent'};\n\t\tborder: none;\n\t}\n\t.btn:focus {\n\t\toutline: 0;\n\t\tbox-shadow: 0 0 0 0.25rem transparent !important;\n\t}\n\n\t.dropdown-toggle::after {\n\t\tborder-top: 0.3em solid ${COLORS.content.primary};\n\t\tdisplay: none !important;\n\t}\n\n\t.dropdown-toggle::before {\n\t\tborder-top: 0.3em solid ${COLORS.content.primary};\n\t\tdisplay: none !important;\n\t}\n\t.dropdown-menu {\n\t\tmin-width: 12rem;\n\t\tpadding: 0 0;\n\t}\n\t.dropdown-item:active,\n\t.dropdown-item:hover {\n\t\tcolor: ${COLORS.content.positive};\n\t\ttext-decoration: none;\n\t\tbackground-color: ${COLORS.background.positive.light};\n\t}\n`;\n\nexport const DropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n`;\n\nexport const TooltipStyled = styled.div<{ tooltipWidth?: number }>`\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\tborder-radius: 4px;\n\tpadding: 8px;\n\tbackground-color: ${COLORS.content.primary};\n\tcolor: ${COLORS.content.primaryInverse};\n\twidth: ${(props) =>\n\t\tprops.tooltipWidth ? props.tooltipWidth + 'px' : '120px'};\n`;\n"],"names":["FAB_POSITION","DROP_POSITION","MENU_ALIGNMENT","FloatingActionButtonContainer","styled","props","FloatingActionButtonOuterContainer","StyledDropdown","Dropdown","COLORS","DropdownToggleContainer","TooltipStyled"],"mappings":";;;AAIO,IAAKA,sBAAAA,OACXA,EAAA,WAAW,YACXA,EAAA,YAAY,aACZA,EAAA,cAAc,eACdA,EAAA,eAAe,gBAJJA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACXA,EAAA,KAAK,MACLA,EAAA,cAAc,eACdA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,OAAO,QACPA,EAAA,gBAAgB,iBANLA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OAFKA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAgCC,EAAO;AAAA,UAM1C,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,MAAM;AAAA,eACnB,CAACA,MAAUA,EAAM,KAAK;AAAA,GAClC,CAACA,MACFA,EAAM,UACH,wBACA,8FAA8F;AAAA;AAAA;AAAA;AAAA;AAAA,GAMtFC,IAAqCF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAc/C,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,MAAM;AAAA,YACtB,CAACA,MAAUA,EAAM,MAAM;AAAA,GAChC,CAACA,MACFA,EAAM,aAAa,iBAChB,UAAUA,EAAM,uBAAuB,eAAeA,EAAM,qBAAqB,OACjFA,EAAM,aAAa,gBACnB,SAASA,EAAM,uBAAuB,eAAeA,EAAM,qBAAqB,OAChFA,EAAM,aAAa,aACnB,SAASA,EAAM,uBAAuB,YAAYA,EAAM,qBAAqB,OAC7EA,EAAM,aAAa,cACnB,UAAUA,EAAM,uBAAuB,YAAYA,EAAM,qBAAqB,OAC9E,EAAE;AAAA,GAGME,IAAiBH,EAAOI,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAafC,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAS9C,CAACJ,MACFA,EAAM,WAAW,SACdI,EAAO,OAAO,SAAS,WACvBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOZ,CAACJ,MACdA,EAAM,WAAW,SACdI,EAAO,WAAW,SAAS,QAC3BA,EAAO,QAAQ,QAAQ;AAAA,WAClB,CAACJ,MACTA,EAAM,WAAW,SACdI,EAAO,QAAQ,WACfA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQjB,CAACJ,MACTA,EAAM,WAAW,SACdI,EAAO,QAAQ,WACfA,EAAO,QAAQ,OAAO;AAAA,sBACN,CAACJ,MACpBA,EAAM,WAAW,SACdI,EAAO,WAAW,SAAS,QAC3B,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BASSA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASvCA,EAAO,QAAQ,QAAQ;AAAA;AAAA,sBAEZA,EAAO,WAAW,SAAS,KAAK;AAAA;AAAA,GAIzCC,IAA0BN,EAAOI,EAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYhDG,IAAgBP,EAAO;AAAA;AAAA;AAAA;AAAA,qBAIfK,EAAO,QAAQ,OAAO;AAAA,UACjCA,EAAO,QAAQ,cAAc;AAAA,UAC7B,CAACJ,MACTA,EAAM,eAAeA,EAAM,eAAe,OAAO,OAAO;AAAA;"}
1	+ {"version":3,"file":"FloatingActionButton.styles.js","sources":["../../../../src/components/floating-action-button/FloatingActionButton.styles.ts"],"sourcesContent":["import { Dropdown } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport enum FAB_POSITION {\n\tTOP_LEFT = 'top left',\n\tTOP_RIGHT = 'top right',\n\tBOTTOM_LEFT = 'bottom left',\n\tBOTTOM_RIGHT = 'botton right',\n}\n\nexport enum DROP_POSITION {\n\tUP = 'up',\n\tUP_CENTERED = 'up-centered',\n\tSTART = 'start',\n\tEND = 'end',\n\tDOWN = 'down',\n\tDOWN_CENTERED = 'down-centered',\n}\n\nexport enum MENU_ALIGNMENT {\n\tSTART = 'start',\n\tEND = 'end',\n}\n\nexport const FloatingActionButtonContainer = styled.div<{\n\twidth: number;\n\theight: number;\n\tcolor: string;\n\tisRound?: boolean;\n}>`\n\twidth: ${(props) => props.width}px;\n\theight: ${(props) => props.height}px;\n\tbackground: ${(props) => props.color};\n\t${(props) =>\n\t\tprops.isRound\n\t\t\t? 'border-radius: 50%;'\n\t\t\t: 'border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius:50%;'}\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: flex;\n`;\nexport const FloatingActionButtonOuterContainer = styled.div<{\n\twidth: number;\n\theight: number;\n\tcolor: string;\n\tposition: FAB_POSITION;\n\tbuttonPaddingHorizontal: number;\n\tbuttonPaddingVertical: number;\n\tzIndex: number;\n}>`\n\tdisplay: flex;\n\tborder-radius: 50%;\n\tflex-direction: column;\n\talign-items: flex-end;\n\tposition: fixed;\n\twidth: ${(props) => props.width}px;\n\theight: ${(props) => props.height}px;\n\tz-index: ${(props) => props.zIndex};\n\t${(props) =>\n\t\tprops.position === FAB_POSITION.BOTTOM_RIGHT\n\t\t\t? `right: ${props.buttonPaddingHorizontal}px; bottom: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.BOTTOM_LEFT\n\t\t\t? `left: ${props.buttonPaddingHorizontal}px; bottom: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.TOP_LEFT\n\t\t\t? `left: ${props.buttonPaddingHorizontal}px; top: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.TOP_RIGHT\n\t\t\t? `right: ${props.buttonPaddingHorizontal}px; top: ${props.buttonPaddingVertical}px`\n\t\t\t: ``};\n`;\n\nexport const StyledDropdown = styled(Dropdown)<{\n\tactive?: string;\n\twidth?: string;\n\theight?: string;\n}>`\n\t.filter-container {\n\t\t.single-row {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: flex-start;\n\t\t\tgap: 8px;\n\t\t\tpadding: 14px;\n\t\t\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\n\t\t\t:last-child {\n\t\t\t\tborder-bottom: none !important;\n\t\t\t}\n\t\t}\n\t}\n\tbutton:not(.date-picker-save-button-container button) {\n\t\tborder: 1px solid\n\t\t\t${(props) =>\n\t\t\t\tprops.active === 'true'\n\t\t\t\t\t? COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.stroke.primary};\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 6px 0px;\n\t\tbackground: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.standard};\n\t\tcolor: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.content.positive\n\t\t\t\t: COLORS.content.primary};\n\t}\n\n\t.btn-primary:hover,\n\t.btn-primary:active,\n\t.btn-primary:focus,\n\t.btn-primary.dropdown-toggle,\n\t.show > .btn-primary.dropdown-toggle {\n\t\tcolor: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.content.positive\n\t\t\t\t: COLORS.content.primary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: 'transparent'};\n\t\tborder: none;\n\t}\n\t.btn:focus {\n\t\toutline: 0;\n\t\tbox-shadow: 0 0 0 0.25rem transparent !important;\n\t}\n\n\t.dropdown-toggle::after {\n\t\tborder-top: 0.3em solid ${COLORS.content.primary};\n\t\tdisplay: none !important;\n\t}\n\n\t.dropdown-toggle::before {\n\t\tborder-top: 0.3em solid ${COLORS.content.primary};\n\t\tdisplay: none !important;\n\t}\n\t.dropdown-menu {\n\t\tmin-width: 12rem;\n\t\tpadding: 0 0;\n\t}\n\t.dropdown-item:active,\n\t.dropdown-item:hover {\n\t\tcolor: ${COLORS.content.positive};\n\t\ttext-decoration: none;\n\t\tbackground-color: ${COLORS.background.positive.light};\n\t}\n`;\n\nexport const DropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n`;\n\nexport const TooltipStyled = styled.div<{ tooltipWidth?: number }>`\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\tborder-radius: 4px;\n\tpadding: 8px;\n\tbackground-color: ${COLORS.content.primary};\n\tcolor: ${COLORS.content.primaryInverse};\n\twidth: ${(props) =>\n\t\tprops.tooltipWidth ? props.tooltipWidth + 'px' : '120px'};\n`;\n"],"names":["FAB_POSITION","DROP_POSITION","MENU_ALIGNMENT","FloatingActionButtonContainer","styled","props","FloatingActionButtonOuterContainer","StyledDropdown","Dropdown","COLORS","DropdownToggleContainer","TooltipStyled"],"mappings":";;;AAIO,IAAKA,sBAAAA,OACXA,EAAA,WAAW,YACXA,EAAA,YAAY,aACZA,EAAA,cAAc,eACdA,EAAA,eAAe,gBAJJA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACXA,EAAA,KAAK,MACLA,EAAA,cAAc,eACdA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,OAAO,QACPA,EAAA,gBAAgB,iBANLA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OAFKA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAgCC,EAAO;AAAA,UAM1C,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,MAAM;AAAA,eACnB,CAACA,MAAUA,EAAM,KAAK;AAAA,GAClC,CAACA,MACFA,EAAM,UACH,wBACA,8FAA8F;AAAA;AAAA;AAAA;AAAA;AAAA,GAMtFC,IAAqCF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAc/C,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,MAAM;AAAA,YACtB,CAACA,MAAUA,EAAM,MAAM;AAAA,GAChC,CAACA,MACFA,EAAM,aAAa,iBAChB,UAAUA,EAAM,uBAAuB,eAAeA,EAAM,qBAAqB,OACjFA,EAAM,aAAa,gBACnB,SAASA,EAAM,uBAAuB,eAAeA,EAAM,qBAAqB,OAChFA,EAAM,aAAa,aACnB,SAASA,EAAM,uBAAuB,YAAYA,EAAM,qBAAqB,OAC7EA,EAAM,aAAa,cACnB,UAAUA,EAAM,uBAAuB,YAAYA,EAAM,qBAAqB,OAC9E,EAAE;AAAA,GAGME,IAAiBH,EAAOI,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAafC,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAS9C,CAACJ,MACFA,EAAM,WAAW,SACdI,EAAO,OAAO,SAAS,WACvBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOZ,CAACJ,MACdA,EAAM,WAAW,SACdI,EAAO,WAAW,SAAS,QAC3BA,EAAO,QAAQ,QAAQ;AAAA,WAClB,CAACJ,MACTA,EAAM,WAAW,SACdI,EAAO,QAAQ,WACfA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQjB,CAACJ,MACTA,EAAM,WAAW,SACdI,EAAO,QAAQ,WACfA,EAAO,QAAQ,OAAO;AAAA,sBACN,CAACJ,MACpBA,EAAM,WAAW,SACdI,EAAO,WAAW,SAAS,QAC3B,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BASSA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASvCA,EAAO,QAAQ,QAAQ;AAAA;AAAA,sBAEZA,EAAO,WAAW,SAAS,KAAK;AAAA;AAAA,GAIzCC,IAA0BN,EAAOI,EAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYhDG,IAAgBP,EAAO;AAAA;AAAA;AAAA;AAAA,qBAIfK,EAAO,QAAQ,OAAO;AAAA,UACjCA,EAAO,QAAQ,cAAc;AAAA,UAC7B,CAACJ,MACTA,EAAM,eAAeA,EAAM,eAAe,OAAO,OAAO;AAAA;"}

package/dist/esm/components/icon-button/IconButton.styled.js CHANGED Viewed

@@ -11,17 +11,17 @@ const c = a.button`
 	${o.bordered && o.iconButtonType !== "ai" && o.iconButtonType !== "primary" ? `border: 1px solid ${r.stroke.primary};` : ""}
 	${o.iconButtonType === "primary" ? `
 				background: ${n("primary")};
-				${o.isSelected ? "" : `&:hover { background-color: ${r.background.inverse}; }`}
-				&:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }
+				${o.isSelected ? "" : `:hover { background-color: ${r.background.inverse}; }`}
+				:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }
 			` : o.isSelected ? `background: ${n(o.iconButtonType)};` : `
-				&:hover {
+				:hover {
 					background-color: rgba(0, 0, 0, 0.03);
 				}
 			`}
 	${o.disabled ? o.iconButtonType === "primary" ? `
 					cursor: not-allowed !important;
 					background-color: ${r.background.inactive};
-					&:hover { background-color: ${r.background.inactive}; }
+					:hover { background-color: ${r.background.inactive}; }
 				` : `
 					cursor: not-allowed !important;
 					background-color: rgba(0, 0, 0, 0.03);

package/dist/esm/components/icon-button/IconButton.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonSize, IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n\ticonPadding?: number;\n\tsize?: IconButtonSize;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${\n\t\tprops.iconPadding !== undefined\n\t\t\t? props.iconPadding\n\t\t\t: props.size === 'xs'\n\t\t\t? 4\n\t\t\t: 6\n\t}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered &&\n\t\tprops.iconButtonType !== 'ai' &&\n\t\tprops.iconButtonType !== 'primary'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.iconButtonType === 'primary'\n\t\t\t? `\n\t\t\t\tbackground: ${generateBackgroundColor('primary')};\n\t\t\t\t${\n\t\t\t\t\t!props.isSelected\n\t\t\t\t\t\t? ~~`&:~~hover { background-color: ${COLORS.background.inverse}; }`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t&:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }\n\t\t\t`\n\t\t\t: props.isSelected\n\t\t\t? `background: ${generateBackgroundColor(props.iconButtonType)};`\n\t\t\t: `\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled\n\t\t\t? props.iconButtonType === 'primary'\n\t\t\t\t? `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: ${COLORS.background.inactive};\n\t\t\t\t\t&:hover { background-color: ${COLORS.background.inactive}; }\n\t\t\t\t`\n\t\t\t\t: `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t`\n\t\t\t: ''\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":";;;AAKO,MAAMA,IAAaC,EAAO;AAAA,GAO9B,CAACC,MAAU;AAAA;AAAA;AAAA,YAIZA,EAAM,gBAAgB,SACnBA,EAAM,cACNA,EAAM,SAAS,OACf,IACA,CACJ;AAAA;AAAA;AAAA,GAICA,EAAM,YACNA,EAAM,mBAAmB,QACzBA,EAAM,mBAAmB,YACtB,qBAAqBC,EAAO,OAAO,OAAO,MAC1C,EACJ;AAAA,GAECD,EAAM,mBAAmB,YACtB;AAAA,kBACaE,EAAwB,SAAS,CAAC;AAAA,MAE9CF,EAAM,aAEJ,KADA~~,+BAA+BC~~,EAAO,WAAW,OAAO,~~KAE5D~~;AAAA;AAAA,OAGCD,EAAM,aACN,eAAeE,EAAwBF,EAAM,cAAc,CAAC,MAC5D;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,WACHA,EAAM,mBAAmB,YACxB;AAAA;AAAA,yBAEmBC,EAAO,WAAW,QAAQ;AAAA,~~mCAChBA~~,EAAO,WAAW,QAAQ;AAAA,~~QAEvD~~;AAAA;AAAA;AAAA,QAID,EACJ;AAAA;AAAA,EAEC;AAAA;"}
1	+ {"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonSize, IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n\ticonPadding?: number;\n\tsize?: IconButtonSize;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${\n\t\tprops.iconPadding !== undefined\n\t\t\t? props.iconPadding\n\t\t\t: props.size === 'xs'\n\t\t\t? 4\n\t\t\t: 6\n\t}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered &&\n\t\tprops.iconButtonType !== 'ai' &&\n\t\tprops.iconButtonType !== 'primary'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.iconButtonType === 'primary'\n\t\t\t? `\n\t\t\t\tbackground: ${generateBackgroundColor('primary')};\n\t\t\t\t${\n\t\t\t\t\t!props.isSelected\n\t\t\t\t\t\t? `:hover { background-color: ${COLORS.background.inverse}; }`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }\n\t\t\t`\n\t\t\t: props.isSelected\n\t\t\t? `background: ${generateBackgroundColor(props.iconButtonType)};`\n\t\t\t: `\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled\n\t\t\t? props.iconButtonType === 'primary'\n\t\t\t\t? `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: ${COLORS.background.inactive};\n\t\t\t\t\t:hover { background-color: ${COLORS.background.inactive}; }\n\t\t\t\t`\n\t\t\t\t: `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t`\n\t\t\t: ''\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":";;;AAKO,MAAMA,IAAaC,EAAO;AAAA,GAO9B,CAACC,MAAU;AAAA;AAAA;AAAA,YAIZA,EAAM,gBAAgB,SACnBA,EAAM,cACNA,EAAM,SAAS,OACf,IACA,CACJ;AAAA;AAAA;AAAA,GAICA,EAAM,YACNA,EAAM,mBAAmB,QACzBA,EAAM,mBAAmB,YACtB,qBAAqBC,EAAO,OAAO,OAAO,MAC1C,EACJ;AAAA,GAECD,EAAM,mBAAmB,YACtB;AAAA,kBACaE,EAAwB,SAAS,CAAC;AAAA,MAE9CF,EAAM,aAEJ,KADA,8BAA8BC,EAAO,WAAW,OAAO,KAE3D;AAAA;AAAA,OAGCD,EAAM,aACN,eAAeE,EAAwBF,EAAM,cAAc,CAAC,MAC5D;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,WACHA,EAAM,mBAAmB,YACxB;AAAA;AAAA,yBAEmBC,EAAO,WAAW,QAAQ;AAAA,kCACjBA,EAAO,WAAW,QAAQ;AAAA,QAEtD;AAAA;AAAA;AAAA,QAID,EACJ;AAAA;AAAA,EAEC;AAAA;"}

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

@@ -1,34 +1,35 @@
 import { jsx as t, jsxs as j } from "react/jsx-runtime";
 import v, { useState as z, useEffect as p } from "react";
 import { ZeroState as A } from "../zeroState/ZeroState.js";
-import { COLORS as S } from "../../constants/Theme.js";
-import { SearchBox as F } from "../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";
-import { MenuList as M } from "./MenuList.js";
-import { DropdownContainer as _, OptionsContainer as q, NoResultsContainer as B } from "./MultiLevelDropdown.styled.js";
-import { Floater as H } from "../floater/floater.js";
-const U = ({
+import { COLORS as L } from "../../constants/Theme.js";
+import { SearchBox as M } from "../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";
+import { MenuList as _ } from "./MenuList.js";
+import { DropdownContainer as q, OptionsContainer as B, NoResultsContainer as H, FooterContainer as I } from "./MultiLevelDropdown.styled.js";
+import { Floater as T } from "../floater/floater.js";
+const W = ({
   options: l,
   width: i,
-  isSearchable: L,
-  onDropdownItemClick: b,
+  isSearchable: b,
+  onDropdownItemClick: C,
   refElement: w,
-  topOffset: C,
-  leftOffset: R,
-  isDropdownOpen: u,
+  topOffset: R,
+  leftOffset: E,
+  isDropdownOpen: d,
   onDropdownOutsideClick: o,
-  allowParentSelection: E,
+  allowParentSelection: F,
   maxLevels: N,
   hideGroupLabel: O,
-  version: n = "1.0"
+  version: n = "1.0",
+  footer: m
 }) => {
-  const d = v.useRef(null), [f, m] = z(l), x = (a) => {
-    const c = Array.isArray(l) ? [...l] : [], y = [];
+  const u = v.useRef(null), [a, x] = z(l), g = (f) => {
+    const c = Array.isArray(l) ? [...l] : [], S = [];
     for (; c.length > 0; ) {
       const e = c.shift();
-      e && e.label.toLowerCase().includes(a.toLowerCase()) && y.push(e), e && "children" in e && e.children ? c.push(...e.children) : e && "options" in e && e.options && c.push(...e.options);
+      e && e.label.toLowerCase().includes(f.toLowerCase()) && S.push(e), e && "children" in e && e.children ? c.push(...e.children) : e && "options" in e && e.options && c.push(...e.options);
     }
     const h = (e) => e.map((r) => {
-      if (y.includes(r))
+      if (S.includes(r))
         return r;
       if ("children" in r && r.children) {
         const s = h(
@@ -46,36 +47,36 @@ const U = ({
       }
       return null;
     }).filter((r) => r !== null);
-    m(h(l));
-  }, g = (a) => {
-    d.current && !d.current.contains(a.target) ? o && o(!0) : o && o(!1);
+    x(h(l));
+  }, y = (f) => {
+    u.current && !u.current.contains(f.target) ? o && o(!0) : o && o(!1);
   };
   return p(() => {
-    u && x("");
-  }, [u]), p(() => (document.addEventListener("mousedown", g), () => {
-    document.removeEventListener("mousedown", g);
+    d && g("");
+  }, [d]), p(() => (document.addEventListener("mousedown", y), () => {
+    document.removeEventListener("mousedown", y);
   }), []), p(() => {
-    m(l);
+    x(l);
   }, [l]), /* @__PURE__ */ t(
-    H,
+    T,
     {
       refElement: w,
-      topOffset: C,
-      leftOffset: R,
-      children: u && /* @__PURE__ */ t(
+      topOffset: R,
+      leftOffset: E,
+      children: d && /* @__PURE__ */ t(
         "div",
         {
-          ref: d,
+          ref: u,
           style: {
-            backgroundColor: S.surface.standard,
+            backgroundColor: L.surface.standard,
             zIndex: 99999,
             borderRadius: n === "3.0" ? "4px" : "8px",
             overflow: "hidden",
             boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
             whiteSpace: "normal"
           },
-          children: /* @__PURE__ */ j(_, { width: i, version: n, children: [
-            L && /* @__PURE__ */ t(
+          children: /* @__PURE__ */ j(q, { width: i, version: n, children: [
+            b && /* @__PURE__ */ t(
               "div",
               {
                 style: {
@@ -83,30 +84,30 @@ const U = ({
                   width: i ?? "200px"
                 },
                 children: /* @__PURE__ */ t(
-                  F,
+                  M,
                   {
-                    onSearch: x,
+                    onSearch: g,
                     version: n === "3.0" ? "3.0" : "2.0"
                   }
                 )
               }
             ),
-            /* @__PURE__ */ t(q, { width: i, version: n, children: (f ?? []).length > 0 && /* @__PURE__ */ t(
-              M,
+            /* @__PURE__ */ t(B, { width: i, version: n, children: (a ?? []).length > 0 && /* @__PURE__ */ t(
+              _,
               {
                 width: i ?? "200px",
-                onDropdownItemClick: b,
-                options: f,
+                onDropdownItemClick: C,
+                options: a,
                 parents: [],
-                allowParentSelection: E,
+                allowParentSelection: F,
                 maxLevels: N,
                 hideGroupLabel: O,
                 currentLevel: 1,
                 version: n
               }
             ) }),
-            (f ?? []).length === 0 && /* @__PURE__ */ t(
-              B,
+            (a ?? []).length === 0 && /* @__PURE__ */ t(
+              H,
               {
                 style: { width: i ?? "200px" },
                 version: n,
@@ -115,7 +116,7 @@ const U = ({
                   {
                     style: {
                       fontSize: "12px",
-                      color: S.content.placeholder,
+                      color: L.content.placeholder,
                       lineHeight: "16px"
                     },
                     children: "No results found!"
@@ -128,7 +129,8 @@ const U = ({
                   }
                 )
               }
-            )
+            ),
+            m && /* @__PURE__ */ t(I, { children: m })
           ] })
         }
       )
@@ -136,6 +138,6 @@ const U = ({
   );
 };
 export {
-  U as MultiLevelDropdown
+  W as MultiLevelDropdown
 };
 //# sourceMappingURL=MultiLevelDropdown.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\tNoResultsContainer,\n\tOptionsContainer,\n} from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, MultiLevelDropdownProps } from './type';\n\nexport const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({\n\toptions,\n\twidth,\n\tisSearchable,\n\tonDropdownItemClick,\n\trefElement,\n\ttopOffset,\n\tleftOffset,\n\tisDropdownOpen,\n\tonDropdownOutsideClick,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tversion = '1.0',\n}) => {\n\tconst dropdownRef = React.useRef<HTMLDivElement>(null);\n\tconst [filteredOptions, setFilteredOptions] =\n\t\tuseState<MultiLevelDropdownOption[]>(options);\n\n\tconst search = (searchString: string) => {\n\t\tconst queue = Array.isArray(options) ? [...options] : [];\n\t\tconst result: MultiLevelDropdownOption[] = [];\n\n\t\twhile (queue.length > 0) {\n\t\t\tconst current = queue.shift();\n\t\t\tif (\n\t\t\t\tcurrent &&\n\t\t\t\tcurrent.label.toLowerCase().includes(searchString.toLowerCase())\n\t\t\t) {\n\t\t\t\tresult.push(current);\n\t\t\t}\n\t\t\tif (current && 'children' in current && current.children) {\n\t\t\t\tqueue.push(...current.children);\n\t\t\t} else if (current && 'options' in current && current.options) {\n\t\t\t\tqueue.push(...current.options);\n\t\t\t}\n\t\t}\n\n\t\tconst filterOptions = (options: MultiLevelDropdownOption[]) => {\n\t\t\treturn options\n\t\t\t\t.map((option: MultiLevelDropdownOption) => {\n\t\t\t\t\tif (result.includes(option)) {\n\t\t\t\t\t\treturn option;\n\t\t\t\t\t}\n\t\t\t\t\tif ('children' in option && option.children) {\n\t\t\t\t\t\tconst filteredChildren = filterOptions(\n\t\t\t\t\t\t\toption.children as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredChildren.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, children: filteredChildren };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ('options' in option && option.options) {\n\t\t\t\t\t\tconst filteredOptions = filterOptions(\n\t\t\t\t\t\t\toption.options as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredOptions.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, options: filteredOptions };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter((option) => option !== null);\n\t\t};\n\n\t\tsetFilteredOptions(filterOptions(options) as MultiLevelDropdownOption[]);\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(true);\n\t\t\t}\n\t\t} else {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDropdownOpen) {\n\t\t\tsearch('');\n\t\t}\n\t}, [isDropdownOpen]);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsetFilteredOptions(options);\n\t}, [options]);\n\n\treturn (\n\t\t<Floater\n\t\t\trefElement={refElement}\n\t\t\ttopOffset={topOffset}\n\t\t\tleftOffset={leftOffset}\n\t\t>\n\t\t\t{isDropdownOpen && (\n\t\t\t\t<div\n\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\tzIndex: 99999,\n\t\t\t\t\t\tborderRadius: version === '3.0' ? '4px' : '8px',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<DropdownContainer width={width} version={version}>\n\t\t\t\t\t\t{isSearchable && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpadding: version === '3.0' ? '0px' : '4px',\n\t\t\t\t\t\t\t\t\twidth: width ?? '200px',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<SearchBox\n\t\t\t\t\t\t\t\t\tonSearch={search}\n\t\t\t\t\t\t\t\t\tversion={version === '3.0' ? '3.0' : '2.0'}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OptionsContainer width={width} version={version}>\n\t\t\t\t\t\t\t{(filteredOptions ?? []).length > 0 && (\n\t\t\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\t\t\twidth={width ?? '200px'}\n\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\toptions={filteredOptions}\n\t\t\t\t\t\t\t\t\tparents={[]}\n\t\t\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\t\t\tcurrentLevel={1}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</OptionsContainer>\n\n\t\t\t\t\t\t{(filteredOptions ?? []).length === 0 && (\n\t\t\t\t\t\t\t<NoResultsContainer\n\t\t\t\t\t\t\t\tstyle={{ width: width ?? '200px' }}\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{version === '3.0' ? (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\t\t\t\tcolor: COLORS.content.placeholder,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '16px',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tNo results found!\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t\t\t\ttitle=\"No results found!\"\n\t\t\t\t\t\t\t\t\t\tsubTitle={`Sorry, we are unable to find any results for your search.`}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</NoResultsContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownContainer>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Floater>\n\t);\n};\n"],"names":["MultiLevelDropdown","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","version","dropdownRef","React","filteredOptions","setFilteredOptions","useState","search","searchString","queue","result","current","filterOptions","option","filteredChildren","handleClickOutside","event","useEffect","jsx","Floater","COLORS","jsxs","DropdownContainer","SearchBox","OptionsContainer","MenuList","NoResultsContainer","ZeroState"],"mappings":";;;;;;;;~~AAaO~~,MAAMA,IAAwD,CAAC;AAAA,EACrE,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC,IAAU;~~AACX~~,MAAM;AACL,QAAMC,IAAcC,EAAM,OAAuB,IAAI,GAC/C,CAACC,GAAiBC,CAAkB,IACzCC,~~EAAqCjB~~,CAAO,~~GAEvCkB~~,IAAS,CAACC,MAAyB;AACxC,UAAMC,IAAQ,MAAM,~~QAAQpB~~,CAAO,IAAI,CAAC,GAAGA,CAAO,IAAI,CAAA,~~GAChDqB~~,IAAqC,CAAA;AAE3C,WAAOD,EAAM,SAAS,KAAG;AACxB,YAAME,IAAUF,EAAM,MAAA;AACtB,MACCE,KACAA,EAAQ,MAAM,YAAA,EAAc,SAASH,EAAa,YAAA,CAAa,KAE/DE,EAAO,KAAKC,CAAO,GAEhBA,KAAW,cAAcA,KAAWA,EAAQ,WAC/CF,EAAM,KAAK,GAAGE,EAAQ,QAAQ,IACpBA,KAAW,aAAaA,KAAWA,EAAQ,WACrDF,EAAM,KAAK,GAAGE,EAAQ,OAAO;AAAA,IAE/B;AAEA,UAAMC,IAAgB,~~CAACvB~~,MACfA,EACL,IAAI,~~CAACwB~~,MAAqC;AAC1C,UAAIH,EAAO,SAASG,CAAM;AACzB,eAAOA;AAER,UAAI,cAAcA,KAAUA,EAAO,UAAU;AAC5C,cAAMC,IAAmBF;AAAA,UACxBC,EAAO;AAAA,QAAA;AAER,YAAIC,EAAiB,SAAS;AAC7B,iBAAO,EAAE,GAAGD,GAAQ,UAAUC,EAAA;AAAA,MAEhC;AACA,UAAI,aAAaD,KAAUA,EAAO,SAAS;AAC1C,cAAMT,IAAkBQ;AAAA,UACvBC,EAAO;AAAA,QAAA;AAER,YAAIT,EAAgB,SAAS;AAC5B,iBAAO,EAAE,GAAGS,GAAQ,SAAST,EAAAA;AAAAA,MAE/B;AACA,aAAO;AAAA,IACR,CAAC,EACA,OAAO,CAACS,MAAWA,MAAW,IAAI;AAGrC,IAAAR,EAAmBO,~~EAAcvB~~,CAAO,CAA+B;AAAA,EACxE,~~GAEM0B~~,IAAqB,CAACC,MAAsB;AACjD,IACCd,EAAY,WACZ,CAACA,EAAY,QAAQ,SAASc,EAAM,MAAc,~~IAE9CnB~~,KACHA,EAAuB,EAAI,IAGxBA,KACHA,EAAuB,EAAK;AAAA,EAG/B;AAEA,~~SAAAoB~~,EAAU,MAAM;AACf,~~IAAIrB~~,~~KACHW~~,EAAO,EAAE;AAAA,EAEX,GAAG,~~CAACX~~,CAAc,CAAC,~~GAEnBqB~~,EAAU,OACT,SAAS,iBAAiB,aAAaF,CAAkB,GAClD,MAAM;AACZ,aAAS,oBAAoB,aAAaA,CAAkB;AAAA,EAC7D,IACE,CAAA,CAAE,GAELE,EAAU,MAAM;AACf,IAAAZ,~~EAAmBhB~~,CAAO;AAAA,EAC3B,GAAG,CAACA,CAAO,CAAC,GAGX,~~gBAAA6B~~;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,~~YAAA1B~~;AAAA,MACA,WAAAC;AAAA,MACA,YAAAC;AAAA,MAEC,UAAAC,KACA,~~gBAAAsB~~;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,KAAKhB;AAAA,UACL,OAAO;AAAA,YACN,iBAAiBkB,EAAO,QAAQ;AAAA,YAChC,QAAQ;AAAA,YACR,~~cAAcnB~~,MAAY,QAAQ,QAAQ;AAAA,YAC1C,UAAU;AAAA,YACV,WAAW;AAAA,YACX,YAAY;AAAA,UAAA;AAAA,UAGb,UAAA,~~gBAAAoB~~,EAACC,GAAA,EAAkB,~~OAAAhC~~,GAAc,SAAAW,GAC/B,UAAA;AAAA,YAAAV,KACA,~~gBAAA2B~~;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,OAAO;AAAA,kBACN,~~SAASjB~~,MAAY,QAAQ,QAAQ;AAAA,kBACrC,OAAOX,KAAS;AAAA,gBAAA;AAAA,gBAGjB,UAAA,~~gBAAA4B~~;AAAA,kBAACK;AAAA,kBAAA;AAAA,oBACA,UAAUhB;AAAA,oBACV,~~SAASN~~,MAAY,QAAQ,QAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACtC;AAAA,YAAA;AAAA,YAGF,~~gBAAAiB~~,EAACM,KAAiB,~~OAAAlC~~,GAAc,SAAAW,GAC7B,gBAAmB,CAAA,GAAI,SAAS,KACjC,~~gBAAAiB~~;AAAA,cAACO;AAAA,cAAA;AAAA,gBACA,~~OAAOnC~~,KAAS;AAAA,gBAChB,qBAAAE;AAAA,gBACA,~~SAASY~~;AAAA,gBACT,SAAS,CAAA;AAAA,gBACT,~~sBAAAN~~;AAAA,gBACA,WAAAC;AAAA,gBACA,gBAAAC;AAAA,gBACA,cAAc;AAAA,gBACd,SAAAC;AAAA,cAAA;AAAA,YAAA,GAGH;AAAA,~~aAEEG~~,KAAmB,CAAA,GAAI,WAAW,KACnC,gBAAAc;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACA,OAAO,EAAE,~~OAAOpC~~,KAAS,QAAA;AAAA,gBACzB,SAAAW;AAAA,gBAEC,gBAAY,QACZ,~~gBAAAiB~~;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACA,OAAO;AAAA,sBACN,UAAU;AAAA,sBACV,OAAOE,EAAO,QAAQ;AAAA,sBACtB,YAAY;AAAA,oBAAA;AAAA,oBAEb,UAAA;AAAA,kBAAA;AAAA,gBAAA,IAID,gBAAAF;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACA,OAAM;AAAA,oBACN,UAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACX;AAAA,YAAA;AAAA,~~UAEF~~,EAAA,~~CAEF~~;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAIJ;"}
1	+ {"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\tFooterContainer,\n\tNoResultsContainer,\n\tOptionsContainer,\n} from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, MultiLevelDropdownProps } from './type';\n\nexport const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({\n\toptions,\n\twidth,\n\tisSearchable,\n\tonDropdownItemClick,\n\trefElement,\n\ttopOffset,\n\tleftOffset,\n\tisDropdownOpen,\n\tonDropdownOutsideClick,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tversion = '1.0',\n\tfooter,\n}) => {\n\tconst dropdownRef = React.useRef<HTMLDivElement>(null);\n\tconst [filteredOptions, setFilteredOptions] =\n\t\tuseState<MultiLevelDropdownOption[]>(options);\n\n\tconst search = (searchString: string) => {\n\t\tconst queue = Array.isArray(options) ? [...options] : [];\n\t\tconst result: MultiLevelDropdownOption[] = [];\n\n\t\twhile (queue.length > 0) {\n\t\t\tconst current = queue.shift();\n\t\t\tif (\n\t\t\t\tcurrent &&\n\t\t\t\tcurrent.label.toLowerCase().includes(searchString.toLowerCase())\n\t\t\t) {\n\t\t\t\tresult.push(current);\n\t\t\t}\n\t\t\tif (current && 'children' in current && current.children) {\n\t\t\t\tqueue.push(...current.children);\n\t\t\t} else if (current && 'options' in current && current.options) {\n\t\t\t\tqueue.push(...current.options);\n\t\t\t}\n\t\t}\n\n\t\tconst filterOptions = (options: MultiLevelDropdownOption[]) => {\n\t\t\treturn options\n\t\t\t\t.map((option: MultiLevelDropdownOption) => {\n\t\t\t\t\tif (result.includes(option)) {\n\t\t\t\t\t\treturn option;\n\t\t\t\t\t}\n\t\t\t\t\tif ('children' in option && option.children) {\n\t\t\t\t\t\tconst filteredChildren = filterOptions(\n\t\t\t\t\t\t\toption.children as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredChildren.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, children: filteredChildren };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ('options' in option && option.options) {\n\t\t\t\t\t\tconst filteredOptions = filterOptions(\n\t\t\t\t\t\t\toption.options as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredOptions.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, options: filteredOptions };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter((option) => option !== null);\n\t\t};\n\n\t\tsetFilteredOptions(filterOptions(options) as MultiLevelDropdownOption[]);\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(true);\n\t\t\t}\n\t\t} else {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDropdownOpen) {\n\t\t\tsearch('');\n\t\t}\n\t}, [isDropdownOpen]);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsetFilteredOptions(options);\n\t}, [options]);\n\n\treturn (\n\t\t<Floater\n\t\t\trefElement={refElement}\n\t\t\ttopOffset={topOffset}\n\t\t\tleftOffset={leftOffset}\n\t\t>\n\t\t\t{isDropdownOpen && (\n\t\t\t\t<div\n\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\tzIndex: 99999,\n\t\t\t\t\t\tborderRadius: version === '3.0' ? '4px' : '8px',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<DropdownContainer width={width} version={version}>\n\t\t\t\t\t\t{isSearchable && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tpadding: version === '3.0' ? '0px' : '4px',\n\t\t\t\t\t\t\t\t\twidth: width ?? '200px',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<SearchBox\n\t\t\t\t\t\t\t\t\tonSearch={search}\n\t\t\t\t\t\t\t\t\tversion={version === '3.0' ? '3.0' : '2.0'}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OptionsContainer width={width} version={version}>\n\t\t\t\t\t\t\t{(filteredOptions ?? []).length > 0 && (\n\t\t\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\t\t\twidth={width ?? '200px'}\n\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\toptions={filteredOptions}\n\t\t\t\t\t\t\t\t\tparents={[]}\n\t\t\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\t\t\tcurrentLevel={1}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</OptionsContainer>\n\n\t\t\t\t\t\t{(filteredOptions ?? []).length === 0 && (\n\t\t\t\t\t\t\t<NoResultsContainer\n\t\t\t\t\t\t\t\tstyle={{ width: width ?? '200px' }}\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{version === '3.0' ? (\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\t\t\t\tcolor: COLORS.content.placeholder,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '16px',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tNo results found!\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t\t\t\ttitle=\"No results found!\"\n\t\t\t\t\t\t\t\t\t\tsubTitle={`Sorry, we are unable to find any results for your search.`}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</NoResultsContainer>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{footer && <FooterContainer>{footer}</FooterContainer>}\n\t\t\t\t\t</DropdownContainer>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Floater>\n\t);\n};\n"],"names":["MultiLevelDropdown","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","version","footer","dropdownRef","React","filteredOptions","setFilteredOptions","useState","search","searchString","queue","result","current","filterOptions","option","filteredChildren","handleClickOutside","event","useEffect","jsx","Floater","COLORS","jsxs","DropdownContainer","SearchBox","OptionsContainer","MenuList","NoResultsContainer","ZeroState","FooterContainer"],"mappings":";;;;;;;;AAcO,MAAMA,IAAwD,CAAC;AAAA,EACrE,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,QAAAC;AACD,MAAM;AACL,QAAMC,IAAcC,EAAM,OAAuB,IAAI,GAC/C,CAACC,GAAiBC,CAAkB,IACzCC,EAAqClB,CAAO,GAEvCmB,IAAS,CAACC,MAAyB;AACxC,UAAMC,IAAQ,MAAM,QAAQrB,CAAO,IAAI,CAAC,GAAGA,CAAO,IAAI,CAAA,GAChDsB,IAAqC,CAAA;AAE3C,WAAOD,EAAM,SAAS,KAAG;AACxB,YAAME,IAAUF,EAAM,MAAA;AACtB,MACCE,KACAA,EAAQ,MAAM,YAAA,EAAc,SAASH,EAAa,YAAA,CAAa,KAE/DE,EAAO,KAAKC,CAAO,GAEhBA,KAAW,cAAcA,KAAWA,EAAQ,WAC/CF,EAAM,KAAK,GAAGE,EAAQ,QAAQ,IACpBA,KAAW,aAAaA,KAAWA,EAAQ,WACrDF,EAAM,KAAK,GAAGE,EAAQ,OAAO;AAAA,IAE/B;AAEA,UAAMC,IAAgB,CAACxB,MACfA,EACL,IAAI,CAACyB,MAAqC;AAC1C,UAAIH,EAAO,SAASG,CAAM;AACzB,eAAOA;AAER,UAAI,cAAcA,KAAUA,EAAO,UAAU;AAC5C,cAAMC,IAAmBF;AAAA,UACxBC,EAAO;AAAA,QAAA;AAER,YAAIC,EAAiB,SAAS;AAC7B,iBAAO,EAAE,GAAGD,GAAQ,UAAUC,EAAA;AAAA,MAEhC;AACA,UAAI,aAAaD,KAAUA,EAAO,SAAS;AAC1C,cAAMT,IAAkBQ;AAAA,UACvBC,EAAO;AAAA,QAAA;AAER,YAAIT,EAAgB,SAAS;AAC5B,iBAAO,EAAE,GAAGS,GAAQ,SAAST,EAAAA;AAAAA,MAE/B;AACA,aAAO;AAAA,IACR,CAAC,EACA,OAAO,CAACS,MAAWA,MAAW,IAAI;AAGrC,IAAAR,EAAmBO,EAAcxB,CAAO,CAA+B;AAAA,EACxE,GAEM2B,IAAqB,CAACC,MAAsB;AACjD,IACCd,EAAY,WACZ,CAACA,EAAY,QAAQ,SAASc,EAAM,MAAc,IAE9CpB,KACHA,EAAuB,EAAI,IAGxBA,KACHA,EAAuB,EAAK;AAAA,EAG/B;AAEA,SAAAqB,EAAU,MAAM;AACf,IAAItB,KACHY,EAAO,EAAE;AAAA,EAEX,GAAG,CAACZ,CAAc,CAAC,GAEnBsB,EAAU,OACT,SAAS,iBAAiB,aAAaF,CAAkB,GAClD,MAAM;AACZ,aAAS,oBAAoB,aAAaA,CAAkB;AAAA,EAC7D,IACE,CAAA,CAAE,GAELE,EAAU,MAAM;AACf,IAAAZ,EAAmBjB,CAAO;AAAA,EAC3B,GAAG,CAACA,CAAO,CAAC,GAGX,gBAAA8B;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,YAAA3B;AAAA,MACA,WAAAC;AAAA,MACA,YAAAC;AAAA,MAEC,UAAAC,KACA,gBAAAuB;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,KAAKhB;AAAA,UACL,OAAO;AAAA,YACN,iBAAiBkB,EAAO,QAAQ;AAAA,YAChC,QAAQ;AAAA,YACR,cAAcpB,MAAY,QAAQ,QAAQ;AAAA,YAC1C,UAAU;AAAA,YACV,WAAW;AAAA,YACX,YAAY;AAAA,UAAA;AAAA,UAGb,UAAA,gBAAAqB,EAACC,GAAA,EAAkB,OAAAjC,GAAc,SAAAW,GAC/B,UAAA;AAAA,YAAAV,KACA,gBAAA4B;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,OAAO;AAAA,kBACN,SAASlB,MAAY,QAAQ,QAAQ;AAAA,kBACrC,OAAOX,KAAS;AAAA,gBAAA;AAAA,gBAGjB,UAAA,gBAAA6B;AAAA,kBAACK;AAAA,kBAAA;AAAA,oBACA,UAAUhB;AAAA,oBACV,SAASP,MAAY,QAAQ,QAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACtC;AAAA,YAAA;AAAA,YAGF,gBAAAkB,EAACM,KAAiB,OAAAnC,GAAc,SAAAW,GAC7B,gBAAmB,CAAA,GAAI,SAAS,KACjC,gBAAAkB;AAAA,cAACO;AAAA,cAAA;AAAA,gBACA,OAAOpC,KAAS;AAAA,gBAChB,qBAAAE;AAAA,gBACA,SAASa;AAAA,gBACT,SAAS,CAAA;AAAA,gBACT,sBAAAP;AAAA,gBACA,WAAAC;AAAA,gBACA,gBAAAC;AAAA,gBACA,cAAc;AAAA,gBACd,SAAAC;AAAA,cAAA;AAAA,YAAA,GAGH;AAAA,aAEEI,KAAmB,CAAA,GAAI,WAAW,KACnC,gBAAAc;AAAA,cAACQ;AAAA,cAAA;AAAA,gBACA,OAAO,EAAE,OAAOrC,KAAS,QAAA;AAAA,gBACzB,SAAAW;AAAA,gBAEC,gBAAY,QACZ,gBAAAkB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACA,OAAO;AAAA,sBACN,UAAU;AAAA,sBACV,OAAOE,EAAO,QAAQ;AAAA,sBACtB,YAAY;AAAA,oBAAA;AAAA,oBAEb,UAAA;AAAA,kBAAA;AAAA,gBAAA,IAID,gBAAAF;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACA,OAAM;AAAA,oBACN,UAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACX;AAAA,YAAA;AAAA,YAKF1B,KAAU,gBAAAiB,EAACU,GAAA,EAAiB,UAAA3B,EAAA,CAAO;AAAA,UAAA,EAAA,CACrC;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAIJ;"}

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

@@ -11,6 +11,9 @@ export declare const OptionsContainer: import('styled-components/dist/types').IS
     width?: string | undefined;
     version?: "1.0" | "2.0" | "3.0" | undefined;
 }>> & string;
+export declare const FooterContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const NoResultsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
 }, {

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

@@ -15,20 +15,29 @@ const c = n.div`
 		width: 0px;
 	}
 `, l = n.div`
+	/* Own stacking context, otherwise the option rows' text paints over the
+	   upward shadow and it disappears. */
+	position: relative;
+	z-index: 1;
+	padding: 8px;
+	background-color: ${e.surface.standard};
+	border-top: 1px solid ${e.stroke.primary};
+	box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.12);
+`, u = n.div`
 	margin-top: ${({ version: t }) => t === "3.0" ? 0 : 64}px;
 	height: ${({ version: t }) => t === "3.0" ? 236 : 200}px;
 	width: ${({ width: t }) => t || "200px"};
 	display: ${({ version: t }) => t === "3.0" ? "flex" : "block"};
 	align-items: center;
 	justify-content: center;
-`, u = n.div`
+`, g = n.div`
 	width: 100%;
 	justify-content: center;
 	cursor: pointer;
 	align-items: center;
 	justify-content: space-between;
 	margin: ${({ version: t }) => t === "3.0" ? "0" : "4px 0"};
-`, g = n.div`
+`, h = n.div`
 	z-index: 1000;
 	position: relative;
 	margin: 0px;
@@ -43,7 +52,7 @@ const c = n.div`
 	&:focus-within > .submenu {
 		display: block;
 	}
-`, h = n.div`
+`, f = n.div`
 	position: relative;
 	padding: ${({ version: t }) => t === "3.0" ? "8px" : "4px 8px"};
 	transition: background-color 0.2s;
@@ -65,7 +74,7 @@ const c = n.div`
 	&:hover {
 		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};
 	}
-`, f = n.div`
+`, v = n.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -86,7 +95,7 @@ const c = n.div`
 	&::-webkit-scrollbar {
 		display: none;
 	}
-`, v = n.div`
+`, w = n.div`
 	width: 16px;
 	height: 16px;
 	display: flex;
@@ -100,25 +109,26 @@ const c = n.div`
 	align-items: center;
 	justify-content: center;
 	margin-left: 4px;
-`, w = n.div`
+`, y = n.div`
 	width: ${(t) => t.width};
-`, y = n(p)`
+`, k = n(p)`
 	width: ${(t) => t.width};
 	top: ${(t) => t.top}px;
 	left: ${(t) => t.left}px;
 `;
 export {
-  f as ContentContainer,
+  v as ContentContainer,
   c as DropdownContainer,
-  u as GroupedMenuListContainer,
-  v as LeadingIconContainer,
-  h as MenuItemContainer,
+  l as FooterContainer,
+  g as GroupedMenuListContainer,
+  w as LeadingIconContainer,
+  f as MenuItemContainer,
   b as MenuItemWrapper,
-  l as NoResultsContainer,
+  u as NoResultsContainer,
   x as OptionsContainer,
-  g as StyledMenuList,
-  y as StyledSubMenuWrapper,
-  w as SubMenuContainer,
+  h as StyledMenuList,
+  k as StyledSubMenuWrapper,
+  y as SubMenuContainer,
   m as SubMenuListContainer,
   p as SubMenuWrapper,
   $ as TrailingIconContainer

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

	@@ -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\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","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","~~COLORS","~~ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA;AAAA,kBAKtB,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA,mBAE3C,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA,GAGlDC,IAAmBF,EAAO;AAAA,UAI7B,CAAC,EAAE,OAAAG,EAAA,MAAaA,KAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA,YAItC,CAAC,EAAE,SAAAF,EAAA,MAAeA,MAAY,QAAQ,MAAM,SAAU;AAAA;AAAA;AAAA;AAAA,~~GAMrDG~~,~~IAAqBJ~~,EAAO;AAAA,eAI1B,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,IAAI,EAAG;AAAA,WACjD,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,MAAM,GAAI;AAAA,UACjD,CAAC,EAAE,OAAAE,EAAA,MAAaA,KAAgB,OAAQ;AAAA,YACtC,CAAC,EAAE,SAAAF,EAAA,MAAeA,MAAY,QAAQ,SAAS,OAAQ;AAAA;AAAA;AAAA,~~GAKtDI~~,~~IAA2BL~~,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQpC,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,MAAM,OAAQ;AAAA,~~GAGlDK~~,~~IAAiBN~~,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAQxBO~~,~~IAAkBP~~,EAAO;AAAA;AAAA,YAE1B,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,QAAQ,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAiBvDO~~,~~IAAoBR~~,EAAO;AAAA;AAAA,YAE5B,CAAC,EAAE,SAAAC,EAAA,MAAeA,MAAY,QAAQ,QAAQ,SAAU;AAAA;AAAA;AAAA,kBAGlD,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA,qBAEzC,CAAC;AAAA,EACpB,~~YAAAQ~~;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,~~SAAAX~~;AACD,~~MACCW~~,~~IACGC~~,EAAO,QAAQ,~~WACfJ~~,KAAcE,~~IACdV~~,MAAY,~~QACXY~~,EAAO,WAAW,aAClBA,EAAO,WAAW,SAAS,~~QAC5BH~~,~~IACAG~~,EAAO,QAAQ,UACfA,EAAO,QAAQ,QAAQ;AAAA,UAClB,CAAC,EAAE,~~YAAAJ~~,GAAY,eAAAE,GAAe,~~SAAAV~~,EAAA,~~MACtCQ~~,KAAcE,~~IACXV~~,MAAY,~~QACXY~~,EAAO,KAAK,UACZA,EAAO,QAAQ,WAChBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAML,CAAC,EAAE,~~YAAAJ~~,GAAY,YAAAG,GAAY,~~SAAAX~~,~~QAC9CW~~,~~IACGC~~,EAAO,QAAQ,~~WACfJ~~,~~IACAR~~,MAAY,~~QACXY~~,EAAO,WAAW,aAClBA,EAAO,WAAW,SAAS,QAC5BA,EAAO,QAAQ,OAAO;AAAA;AAAA,~~GAIfC~~,~~IAAmBd~~,EAAO;AAAA;AAAA;AAAA;AAAA,~~GAM1Be~~,~~IAAiBf~~,EAAO;AAAA;AAAA;AAAA;AAAA,~~GAMxBgB~~,~~IAAuBhB~~,EAAO;AAAA;AAAA,~~qBAItBa~~,EAAO,QAAQ,QAAQ;AAAA;AAAA,kBAE1B,CAAC,EAAE,~~SAAAZ~~,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA,gBAC9C,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA,mBAEzC,CAAC,EAAE,SAAAA,EAAA,MAAeA,MAAY,QAAQ,IAAI,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAQlDgB~~,~~IAAuBjB~~,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAS9BkB~~,~~IAAwBlB~~,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/~~BmB~~,~~IAAmBnB~~,EAAO;AAAA,UAC7B,~~CAACoB~~,MAAUA,EAAM,KAAK;AAAA,GAGnBC,~~IAAuBrB~~,~~EAAOe~~,CAAc;AAAA,UAK/C,CAACK,MAAUA,EAAM,KAAK;AAAA,QACxB,CAACA,MAAUA,EAAM,GAAG;AAAA,SACnB,CAACA,MAAUA,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":"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"}

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

@@ -9,6 +9,11 @@ export interface MultiLevelDropdownProps extends FloaterProps {
     maxLevels?: number;
     hideGroupLabel?: boolean;
     version?: '1.0' | '2.0' | '3.0';
+    /**
+     * Pinned below the options list, outside the scroll area — for actions that
+     * must stay reachable however long the list is, e.g. "＋ New label".
+     */
+    footer?: ReactNode;
     onDropdownOutsideClick?: (isOutsideClick: any) => void;
     onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
 }

package/dist/esm/components/plans/SubscriptionPlanSelector.js CHANGED Viewed

@@ -70,7 +70,7 @@ const C = r.div`
 	.input--class {
 		border: none;
 		:active,
-		&:focus {
+		:focus {
 			border: none;
 			outline: none;
 		}