npm - @bikdotai/bik-component-library - Versions diffs - 0.0.829-beta.0 → 0.0.829 - Mend

@bikdotai/bik-component-library 0.0.829-beta.0 → 0.0.829

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 (333) hide show

package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js CHANGED Viewed

@@ -1,25 +1,24 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),o=require("../../../../constants/Theme.js"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=i(r),n=t.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("../../../../constants/Theme.js"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=i(r),d=o.default.div`
 	border-radius: ${e=>e.version==="2.0"?8:4}px;
-	border: ${e=>e.version==="2.0"||e.version==="3.0"?0:1}px
-		solid ${o.COLORS.stroke.primary};
-	box-shadow: ${e=>e.version==="3.0"?"0px 2px 8px 0px rgba(0, 0, 0, 0.12)":"none"};
+	border: ${e=>e.version==="2.0"?0:1}px solid
+		${t.COLORS.stroke.primary};
 	max-height: 480px;
 	overflow: hidden;
 	display: flex;
 	flex-direction: row;
 	position: relative;
 	padding: ${e=>e.version==="2.0"?4:0}px;
-	background-color: ${o.COLORS.surface.standard};
-`;t.default.div`
+	background-color: ${t.COLORS.surface.standard};
+`;o.default.div`
 	padding: 14px 16px 14px 18px;
 	flex-direction: row;
 	align-items: center;
 	border-bottom-width: 1px;
 	border-bottom-style: solid;
-	border-bottom-color: ${o.COLORS.stroke.primary};
+	border-bottom-color: ${t.COLORS.stroke.primary};
 	width: 100%;
 	height: 100%;
-`;const d=t.default.div`
+`;const n=o.default.div`
 	max-height: ${e=>typeof e.maxHeight=="number"?`${e.maxHeight}px`:e.maxHeight};
 	overflow-y: auto;
 	position: relative;
@@ -35,5 +34,5 @@
 	&::-webkit-scrollbar-thumb:horizontal {
 		width: 8px;
 	}
-`;exports.MenuListContainer=d;exports.OpennedDropdownContainer=n;
+`;exports.MenuListContainer=n;exports.OpennedDropdownContainer=d;
 //# sourceMappingURL=OpennedDropdown.styled.js.map

package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OpennedDropdown.styled.js","sources":["../../../../../../src/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const OpennedDropdownContainer = styled.div<{~~\n\tversion~~?: '1.0' \| '2.0' ~~\| '3.0';\n~~}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tborder: ${(props) ~~=>\n\t\t\tprops.version~~ ~~=== '2.0' \|\|~~ props.version === '3.0' ? 0 : 1}px\n\t\~~tsolid~~ ${COLORS.stroke.primary};\n\~~tbox-shadow: ${(props) =>\n\t\tprops.version === '3.0' ? '0px 2px 8px 0px rgba(0, 0, 0, 0.12)' : 'none'};\n\~~tmax-height: 480px;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: row;\n\tposition: relative;\n\tpadding: ${(props) => (props.version === '2.0' ? 4 : 0)}px;\n\tbackground-color: ${COLORS.surface.standard};\n`;\n\nexport const ItemContainer = styled.div`\n\tpadding: 14px 16px 14px 18px;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-bottom-width: 1px;\n\tborder-bottom-style: solid;\n\tborder-bottom-color: ${COLORS.stroke.primary};\n\twidth: 100%;\n\theight: 100%;\n`;\n\nexport const MenuListContainer = styled.div<{\n\tmaxHeight: number \| string;\n\tminHeight: number \| string;\n}>`\n\tmax-height: ${(props) =>\n\t\ttypeof props.maxHeight === 'number'\n\t\t\t? `${props.maxHeight}px`\n\t\t\t: props.maxHeight};\n\toverflow-y: auto;\n\tposition: relative;\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: #e0e0e0;\n\t\tborder-radius: 8px;\n\t}\n\t&::-webkit-scrollbar {\n\t\theight: 5px;\n\t\tdisplay: block;\n\t\twidth: 8px;\n\t}\n\t&::-webkit-scrollbar-thumb:horizontal {\n\t\twidth: 8px;\n\t}\n`;\n"],"names":["OpennedDropdownContainer","styled","props","COLORS","MenuListContainer"],"mappings":"gOAGaA,EAA2BC,EAAAA,QAAO;AAAA,~~kBAG5BC~~,GAAWA,EAAM,UAAY,MAAQ,EAAI,CAAE;AAAA,WAClDA,~~GACTA~~,EAAM,UAAY,~~OAASA,EAAM,UAAY,~~MAAQ,EAAI,~~CAAC~~;AAAA,~~UACnDC~~,EAAAA,OAAO,OAAO,OAAO;AAAA~~,eACfD,GACdA,EAAM,UAAY,MAAQ,sCAAwC,MAAM~~;AAAA;AAAA;AAAA;AAAA;AAAA~~;AAAA~~,~~YAM7DA~~,GAAWA,EAAM,UAAY,MAAQ,EAAI,CAAE;AAAA,qBACnCC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGfF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMZE,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAKtC,MAAMC,EAAoBH,EAAAA,QAAO;AAAA,eAIxBC,GACd,OAAOA,EAAM,WAAc,SACxB,GAAGA,EAAM,SAAS,KAClBA,EAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"OpennedDropdown.styled.js","sources":["../../../../../../src/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const OpennedDropdownContainer = styled.div<{ version?: '1.0' \| '2.0' }>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tborder: ${(props) => (props.version === '2.0' ? 0 : 1)}px solid\n\t\t${COLORS.stroke.primary};\n\tmax-height: 480px;\n\toverflow: hidden;\n\tdisplay: flex;\n\tflex-direction: row;\n\tposition: relative;\n\tpadding: ${(props) => (props.version === '2.0' ? 4 : 0)}px;\n\tbackground-color: ${COLORS.surface.standard};\n`;\n\nexport const ItemContainer = styled.div`\n\tpadding: 14px 16px 14px 18px;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-bottom-width: 1px;\n\tborder-bottom-style: solid;\n\tborder-bottom-color: ${COLORS.stroke.primary};\n\twidth: 100%;\n\theight: 100%;\n`;\n\nexport const MenuListContainer = styled.div<{\n\tmaxHeight: number \| string;\n\tminHeight: number \| string;\n}>`\n\tmax-height: ${(props) =>\n\t\ttypeof props.maxHeight === 'number'\n\t\t\t? `${props.maxHeight}px`\n\t\t\t: props.maxHeight};\n\toverflow-y: auto;\n\tposition: relative;\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: #e0e0e0;\n\t\tborder-radius: 8px;\n\t}\n\t&::-webkit-scrollbar {\n\t\theight: 5px;\n\t\tdisplay: block;\n\t\twidth: 8px;\n\t}\n\t&::-webkit-scrollbar-thumb:horizontal {\n\t\twidth: 8px;\n\t}\n`;\n"],"names":["OpennedDropdownContainer","styled","props","COLORS","MenuListContainer"],"mappings":"gOAGaA,EAA2BC,EAAAA,QAAO;AAAA,kBAC5BC,GAAWA,EAAM,UAAY,MAAQ,EAAI,CAAE;AAAA,WAClDA,GAAWA,EAAM,UAAY,MAAQ,EAAI,CAAE;AAAA,IACnDC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMZD,GAAWA,EAAM,UAAY,MAAQ,EAAI,CAAE;AAAA,qBACnCC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,EAGfF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMZE,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAKtC,MAAMC,EAAoBH,EAAAA,QAAO;AAAA,eAIxBC,GACd,OAAOA,EAAM,WAAc,SACxB,GAAGA,EAAM,SAAS,KAClBA,EAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/description/Description.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Description.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/description/Description.tsx"],"sourcesContent":["import React from 'react';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { DescriptionContainer } from './Description.styled';\n\nexport const Description: React.FC<{\n\ttitle: string;\n\tdescription: string;\n\tversion?: '1.0' \| '2.0' ~~\| '3.0'~~;\n}> = ({ title, description, version }) => {\n\treturn (\n\t\t<DescriptionContainer version={version}>\n\t\t\t<div style={{ padding: version === '2.0' ? 12 : 24 }}>\n\t\t\t\t<TitleRegular\n\t\t\t\t\tstyle={{ color: COLORS.content.primary, marginBottom: 4 }}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</TitleRegular>\n\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t{description}\n\t\t\t\t</BodySecondary>\n\t\t\t</div>\n\t\t</DescriptionContainer>\n\t);\n};\n"],"names":["Description","title","description","version","jsx","DescriptionContainer","jsxs","TitleRegular","COLORS","BodySecondary"],"mappings":"qPAKaA,EAIR,CAAC,CAAE,MAAAC,EAAO,YAAAC,EAAa,QAAAC,KAE1BC,EAAAA,IAACC,EAAAA,qBAAA,CAAqB,QAAAF,EACrB,SAAAG,EAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAASH,IAAY,MAAQ,GAAK,EAAA,EAC/C,SAAA,CAAAC,EAAAA,IAACG,EAAAA,aAAA,CACA,MAAO,CAAE,MAAOC,EAAAA,OAAO,QAAQ,QAAS,aAAc,CAAA,EAErD,SAAAP,CAAA,CAAA,EAEFG,EAAAA,IAACK,EAAAA,eAAc,MAAO,CAAE,MAAOD,SAAO,QAAQ,SAAA,EAC5C,SAAAN,CAAA,CACF,CAAA,CAAA,CACD,CAAA,CACD"}
1	+ {"version":3,"file":"Description.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/description/Description.tsx"],"sourcesContent":["import React from 'react';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { DescriptionContainer } from './Description.styled';\n\nexport const Description: React.FC<{\n\ttitle: string;\n\tdescription: string;\n\tversion?: '1.0' \| '2.0';\n}> = ({ title, description, version }) => {\n\treturn (\n\t\t<DescriptionContainer version={version}>\n\t\t\t<div style={{ padding: version === '2.0' ? 12 : 24 }}>\n\t\t\t\t<TitleRegular\n\t\t\t\t\tstyle={{ color: COLORS.content.primary, marginBottom: 4 }}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</TitleRegular>\n\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t{description}\n\t\t\t\t</BodySecondary>\n\t\t\t</div>\n\t\t</DescriptionContainer>\n\t);\n};\n"],"names":["Description","title","description","version","jsx","DescriptionContainer","jsxs","TitleRegular","COLORS","BodySecondary"],"mappings":"qPAKaA,EAIR,CAAC,CAAE,MAAAC,EAAO,YAAAC,EAAa,QAAAC,KAE1BC,EAAAA,IAACC,EAAAA,qBAAA,CAAqB,QAAAF,EACrB,SAAAG,EAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAASH,IAAY,MAAQ,GAAK,EAAA,EAC/C,SAAA,CAAAC,EAAAA,IAACG,EAAAA,aAAA,CACA,MAAO,CAAE,MAAOC,EAAAA,OAAO,QAAQ,QAAS,aAAc,CAAA,EAErD,SAAAP,CAAA,CAAA,EAEFG,EAAAA,IAACK,EAAAA,eAAc,MAAO,CAAE,MAAOD,SAAO,QAAQ,SAAA,EAC5C,SAAAN,CAAA,CACF,CAAA,CAAA,CACD,CAAA,CACD"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/description/Description.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Description.styled.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/description/Description.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DescriptionContainer = styled.div<{~~\n\tversion~~?: '1.0' \| '2.0' ~~\| '3.0';\n~~}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-left: ${(props) => (props.version === '2.0' ? 0.5 : 1)}px solid\n\t\t${COLORS.stroke.primary};\n\twidth: 50%;\n`;\n"],"names":["DescriptionContainer","styled","COLORS","props"],"mappings":"mOAGaA,EAAuBC,EAAAA,QAAO;AAAA,~~eAG5BC~~,EAAAA,OAAO,QAAQ,QAAQ;AAAA,gBACrBC,GAAWA,EAAM,UAAY,MAAQ,GAAM,CAAE;AAAA,IAC1DD,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA"}
1	+ {"version":3,"file":"Description.styled.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/description/Description.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DescriptionContainer = styled.div<{ version?: '1.0' \| '2.0' }>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-left: ${(props) => (props.version === '2.0' ? 0.5 : 1)}px solid\n\t\t${COLORS.stroke.primary};\n\twidth: 50%;\n`;\n"],"names":["DescriptionContainer","styled","COLORS","props"],"mappings":"mOAGaA,EAAuBC,EAAAA,QAAO;AAAA,eAC5BC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,gBACrBC,GAAWA,EAAM,UAAY,MAAQ,GAAM,CAAE;AAAA,IAC1DD,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),C=require("../../../../TypographyStyle.js"),F=require("../../../../../constants/Theme.js"),d=require("./FreeFormMenu.styled.js"),h=require("../../../../list-item/ListItem.js"),y=require("../../../../checkBox/CheckBox.js"),x=({searchedString:r,onSelect:c,isMultiSelect:s,version:n,checkboxActiveColor:i,brandSelectedRow:l})=>{const[t,u]=m.useState(!1);function o(){u(!t),c(!t)}return e.jsx(h.ListItem,{version:n,brandSelectedRow:l,onClick:a=>{a.preventDefault(),o()},listItem:{label:r,value:r},leadingIcon:s?e.jsx(y.CheckBox,{size:n==="2.0"?"SMALL":"DEFAULT",isChecked:t,onValueChange:o,activeColor:i}):e.jsx(e.Fragment,{}),trailingIcon:e.jsx(d.FreeFormContainer,{children:e.jsx(C.BodyCaption,{style:{color:F.COLORS.content.secondary},children:"Freeform"})})})};exports.FreeFormMenu=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),a=require("../../../../TypographyStyle.js"),m=require("../../../../../constants/Theme.js"),F=require("./FreeFormMenu.styled.js"),d=require("../../../../list-item/ListItem.js"),C=require("../../../../checkBox/CheckBox.js"),h=({searchedString:r,onSelect:s,isMultiSelect:c,version:n})=>{const[t,i]=u.useState(!1);function o(){i(!t),s(!t)}return e.jsx(d.ListItem,{version:n,onClick:l=>{l.preventDefault(),o()},listItem:{label:r,value:r},leadingIcon:c?e.jsx(C.CheckBox,{size:n==="2.0"?"SMALL":"DEFAULT",isChecked:t,onValueChange:o}):e.jsx(e.Fragment,{}),trailingIcon:e.jsx(F.FreeFormContainer,{children:e.jsx(a.BodyCaption,{style:{color:m.COLORS.content.secondary},children:"Freeform"})})})};exports.FreeFormMenu=h;
 //# sourceMappingURL=FreeFormMenu.js.map

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FreeFormMenu.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { FreeFormContainer } from './FreeFormMenu.styled';\n\nexport const FreeFormMenu: React.FC<{\n\tisMultiSelect?: boolean;\n\tsearchedString: string;\n\tonSelect: (isChecked: boolean) => void;\n\tversion?: '1.0' \| '2.0' ~~\| '3.0'~~;\n~~\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n~~}> = ({~~\n\tsearchedString,\n\tonSelect,\n\tisMultiSelect,\n\tversion,\n\tcheckboxActiveColor,\n\tbrandSelectedRow,\n~~}) => {\n\tconst [isChecked, setChecked] = useState(false);\n\tfunction onCheckHandler() {\n\t\tsetChecked(!isChecked);\n\t\tonSelect(!isChecked);\n\t}\n\n\treturn (\n\t\t<ListItem\n\t\t\tversion={version}\n\t\t\~~tbrandSelectedRow={brandSelectedRow}\n\t\t\~~tonClick={(e) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tonCheckHandler();\n\t\t\t}}\n\t\t\tlistItem={{\n\t\t\t\tlabel: searchedString,\n\t\t\t\tvalue: searchedString,\n\t\t\t}}\n\t\t\tleadingIcon={\n\t\t\t\tisMultiSelect ? (\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t~~\tactiveColor={checkboxActiveColor}\n\t\t\t\t\t~~/>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)\n\t\t\t}\n\t\t\ttrailingIcon={\n\t\t\t\t<FreeFormContainer>\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tFreeform\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</FreeFormContainer>\n\t\t\t}\n\t\t/>\n\t);\n};\n"],"names":["FreeFormMenu","searchedString","onSelect","isMultiSelect","version","~~checkboxActiveColor","brandSelectedRow","~~isChecked","setChecked","useState","onCheckHandler","jsx","ListItem","e","CheckBox","Fragment","FreeFormContainer","BodyCaption","COLORS"],"mappings":"sWAOaA,~~EAOR~~,CAAC,~~CACL~~,eAAAC,~~EACA~~,SAAAC,~~EACA~~,cAAAC,~~EACA~~,QAAAC,~~EACA~~,~~oBAAAC~~,~~EACA,iBAAAC,CACD,IAAM,CACL,~~KAAM,CAACC,EAAWC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAC9C,SAASC,GAAiB,CACzBF,EAAW,CAACD,CAAS,~~EACrBL~~,EAAS,~~CAACK~~,CAAS,CACpB,CAEA,OACCI,EAAAA,IAACC,EAAAA,SAAA,CACA,~~QAAAR~~,EACA,~~iBAAAE,EACA,~~QAAUO,GAAM,CACfA,EAAE,eAAA,EACFH,EAAA,CACD,EACA,SAAU,CACT,~~MAAOT~~,EACP,MAAOA,CAAA,EAER,YACCE,~~EACCQ~~,EAAAA,IAACG,EAAAA,SAAA,CACA,~~KAAMV~~,IAAY,MAAQ,QAAU,UACpC,~~UAAAG~~,EACA,cAAeG,~~EACf,YAAaL,~~CAAA,CAAA,~~EAGdM~~,EAAAA,IAAAI,EAAAA,SAAA,EAAE,EAGJ,mBACEC,oBAAA,CACA,SAAAL,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,QAAQ,SAAA,EAEvB,SAAA,UAAA,CAAA,CAED,CACD,CAAA,CAAA,CAIJ"}
1	+ {"version":3,"file":"FreeFormMenu.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { FreeFormContainer } from './FreeFormMenu.styled';\n\nexport const FreeFormMenu: React.FC<{\n\tisMultiSelect?: boolean;\n\tsearchedString: string;\n\tonSelect: (isChecked: boolean) => void;\n\tversion?: '1.0' \| '2.0';\n}> = ({ searchedString, onSelect, isMultiSelect, version }) => {\n\tconst [isChecked, setChecked] = useState(false);\n\tfunction onCheckHandler() {\n\t\tsetChecked(!isChecked);\n\t\tonSelect(!isChecked);\n\t}\n\n\treturn (\n\t\t<ListItem\n\t\t\tversion={version}\n\t\t\tonClick={(e) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tonCheckHandler();\n\t\t\t}}\n\t\t\tlistItem={{\n\t\t\t\tlabel: searchedString,\n\t\t\t\tvalue: searchedString,\n\t\t\t}}\n\t\t\tleadingIcon={\n\t\t\t\tisMultiSelect ? (\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)\n\t\t\t}\n\t\t\ttrailingIcon={\n\t\t\t\t<FreeFormContainer>\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tFreeform\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</FreeFormContainer>\n\t\t\t}\n\t\t/>\n\t);\n};\n"],"names":["FreeFormMenu","searchedString","onSelect","isMultiSelect","version","isChecked","setChecked","useState","onCheckHandler","jsx","ListItem","e","CheckBox","Fragment","FreeFormContainer","BodyCaption","COLORS"],"mappings":"sWAOaA,EAKR,CAAC,CAAE,eAAAC,EAAgB,SAAAC,EAAU,cAAAC,EAAe,QAAAC,KAAc,CAC9D,KAAM,CAACC,EAAWC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAC9C,SAASC,GAAiB,CACzBF,EAAW,CAACD,CAAS,EACrBH,EAAS,CAACG,CAAS,CACpB,CAEA,OACCI,EAAAA,IAACC,EAAAA,SAAA,CACA,QAAAN,EACA,QAAUO,GAAM,CACfA,EAAE,eAAA,EACFH,EAAA,CACD,EACA,SAAU,CACT,MAAOP,EACP,MAAOA,CAAA,EAER,YACCE,EACCM,EAAAA,IAACG,EAAAA,SAAA,CACA,KAAMR,IAAY,MAAQ,QAAU,UACpC,UAAAC,EACA,cAAeG,CAAA,CAAA,EAGhBC,EAAAA,IAAAI,EAAAA,SAAA,EAAE,EAGJ,mBACEC,oBAAA,CACA,SAAAL,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,QAAQ,SAAA,EAEvB,SAAA,UAAA,CAAA,CAED,CACD,CAAA,CAAA,CAIJ"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js CHANGED Viewed

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),B=require("../../../../../assets/icons/chevronRight.svg.js"),I=require("react"),E=require("styled-components"),_=require("../../../../TypographyStyle.js"),d=require("../../../../../constants/Theme.js"),U=require("./FreeFormMenu.styled.js"),V=require("../../../../tooltips/Tooltip.js"),L=require("../../../../checkBox/CheckBox.js"),z=require("../../../../list-item/ListItem.js"),P=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=P(E),T=r.default(z.ListItem)`
-	padding: ${e=>e.version==="3.0"?"8px":e.version==="2.0"?"8px 12px":"14px 16px"} !important;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),A=require("../../../../../assets/icons/chevronRight.svg.js"),b=require("react"),D=require("styled-components"),B=require("../../../../TypographyStyle.js"),d=require("../../../../../constants/Theme.js"),E=require("./FreeFormMenu.styled.js"),_=require("../../../../tooltips/Tooltip.js"),y=require("../../../../checkBox/CheckBox.js"),U=require("../../../../list-item/ListItem.js"),V=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=V(D),I=r.default(U.ListItem)`
+	padding: ${e=>e.version==="2.0"?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
-	margin-top: ${e=>e.brandSelectedRow?"0":e.version==="2.0"?"2px":"0"};
-`,W=r.default.div`
+	margin-top: ${e=>e.version==="2.0"?"2px":"0"};
+`,z=r.default.div`
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	border-radius: ${({version:e})=>e==="1.0"?"0":"8px"};
 	padding: ${({version:e})=>e==="1.0"?"0":"4px"};
@@ -10,7 +10,7 @@
 	border: ${({version:e})=>e==="1.0"?`1px solid ${d.DEFAULT_THEME.colorsV2.stroke.primary}`:"none"};
 	max-height: 248px;
 	overflow-y: auto;
-`,G=r.default.div`
+`,P=r.default.div`
 	display: grid;
 	grid-template-columns: repeat(2, 2.86px);
 	grid-template-rows: repeat(3, 2.86px);
@@ -28,17 +28,17 @@
 	border-radius: 50%;
 	background-color: ${d.COLORS.content.inactive};
 	flex-shrink: 0;
-`,F=r.default.div`
+`,L=r.default.div`
 	display: flex;
 	align-content: center;
 	justify-content: center;
 	gap: 8px;
-`,J=r.default.div`
+`,W=r.default.div`
 	margin-right: -4px;
-`,K=r.default.div`
+`,G=r.default.div`
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	flex: 1;
-`,m=({onDragStart:e,onDragEnd:a})=>t.jsxs(G,{draggable:!0,onDragStart:e,onDragEnd:a,children:[t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{})]}),N=I.forwardRef(({option:e,isMultiSelect:a,showDescription:f,onSelect:O,last:k,version:s,onDropdownItemClick:S,useDefaultCursor:q,isFocused:M=!1,dataIndex:g=-1,isDraggable:i=!1,onDragStart:o,onDragOver:$,onDrop:w,onDragEnd:u,isDraggedOver:h=!1,showCheckboxForCustomElement:p=!1,checkboxActiveColor:v,brandSelectedRow:C},H)=>{const[R,j]=I.useState(e.selected),b=(n,c)=>{if(!n.children){x(!n.selected);const A=c?{...n,parent:c}:n;S?.(A)}},x=n=>{e.disabled||O({...e,selected:n})},D=()=>{e.description?f(e.label,e.description):f()},y=q?{cursor:"default"}:{};return t.jsx(t.Fragment,{children:t.jsx(V.Tooltip,{body:"",tooltipContent:e.children?t.jsx("div",{style:{backgroundColor:d.DEFAULT_THEME.colorsV2.surface.standard},ref:H,onMouseEnter:()=>j(!0),onMouseLeave:()=>j(!1),children:t.jsx(W,{version:s??"2.0",children:e.children.map(n=>t.jsx(T,{version:s,brandSelectedRow:C,style:s!=="1.0"&&(e?.children??[]).length-1?{borderBottom:0}:{},onClick:c=>{c.preventDefault(),b(n,e)},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:n.leadingIcon||void 0,customComponent:n.customComponent,trailingIcon:n.trailingIcon||void 0,variant:e.disabled?"inactive":n.selected?"selected":"default"},n.value))})}):t.jsx(t.Fragment,{}),placement:"right-start",hideArrow:!0,children:t.jsx(T,{version:s,brandSelectedRow:C,style:k?{borderBottom:0,...y,...h?{borderTop:`2px solid ${d.COLORS.content.brand}`,opacity:.5}:{}}:{...y,...h?{borderTop:`2px solid ${d.COLORS.content.brand}`,opacity:.5}:{}},onClick:n=>{n.preventDefault(),b(e)},onMouseOver:D,listItem:{value:e.value,label:e.label},subText:e.subText,"data-option-index":g,role:"option",id:`dropdown-option-${g}`,"aria-selected":!!e.selected,onDragOver:i?$:void 0,onDrop:i?w:void 0,leadingIcon:a&&!(p&&e.customComponent)?t.jsxs(F,{children:[i&&t.jsx(m,{onDragStart:o,onDragEnd:u}),t.jsx(L.CheckBox,{size:s==="2.0"?"SMALL":"DEFAULT",isDisabled:e.disabled??!1,isChecked:!!e.selected,onValueChange:x,activeColor:v}),t.jsx(J,{children:e.leadingIcon})]}):i?t.jsxs(K,{children:[t.jsx(m,{onDragStart:o,onDragEnd:u}),e.leadingIcon&&t.jsx("div",{children:e.leadingIcon})]}):e.leadingIcon?t.jsx(t.Fragment,{children:e.leadingIcon}):void 0,customComponent:a&&p&&e.customComponent?t.jsxs(F,{children:[i&&t.jsx(m,{onDragStart:o,onDragEnd:u}),t.jsx(L.CheckBox,{size:s==="2.0"?"SMALL":"DEFAULT",isDisabled:e.disabled??!1,isChecked:!!e.selected,onValueChange:x,activeColor:v}),e.customComponent]}):e.customComponent,trailingIcon:e.isFreeForm?t.jsx(U.FreeFormContainer,{children:t.jsx(_.BodyCaption,{style:{color:d.COLORS.content.secondary},children:"Freeform"})}):e.children?t.jsx(B.default,{width:12,height:12}):e.trailingIcon?t.jsx(t.Fragment,{children:e.trailingIcon}):void 0,variant:e.disabled?"inactive":e.selected||!a&&R?"selected":M?"focused":"default"})})})});exports.MenuItem=N;
+`,m=({onDragStart:e,onDragEnd:a})=>t.jsxs(P,{draggable:!0,onDragStart:e,onDragEnd:a,children:[t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{}),t.jsx(l,{})]}),J=b.forwardRef(({option:e,isMultiSelect:a,showDescription:g,onSelect:T,last:F,version:s,onDropdownItemClick:O,useDefaultCursor:k,isFocused:S=!1,dataIndex:f=-1,isDraggable:i=!1,onDragStart:o,onDragOver:q,onDrop:M,onDragEnd:u,isDraggedOver:h=!1,showCheckboxForCustomElement:p=!1},$)=>{const[w,j]=b.useState(e.selected),v=(n,c)=>{if(!n.children){x(!n.selected);const R=c?{...n,parent:c}:n;O?.(R)}},x=n=>{e.disabled||T({...e,selected:n})},H=()=>{e.description?g(e.label,e.description):g()},C=k?{cursor:"default"}:{};return t.jsx(t.Fragment,{children:t.jsx(_.Tooltip,{body:"",tooltipContent:e.children?t.jsx("div",{style:{backgroundColor:d.DEFAULT_THEME.colorsV2.surface.standard},ref:$,onMouseEnter:()=>j(!0),onMouseLeave:()=>j(!1),children:t.jsx(z,{version:s??"2.0",children:e.children.map(n=>t.jsx(I,{version:s,style:s!=="1.0"&&(e?.children??[]).length-1?{borderBottom:0}:{},onClick:c=>{c.preventDefault(),v(n,e)},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:n.leadingIcon||void 0,customComponent:n.customComponent,trailingIcon:n.trailingIcon||void 0,variant:e.disabled?"inactive":n.selected?"selected":"default"},n.value))})}):t.jsx(t.Fragment,{}),placement:"right-start",hideArrow:!0,children:t.jsx(I,{version:s,style:F?{borderBottom:0,...C,...h?{borderTop:`2px solid ${d.COLORS.content.brand}`,opacity:.5}:{}}:{...C,...h?{borderTop:`2px solid ${d.COLORS.content.brand}`,opacity:.5}:{}},onClick:n=>{n.preventDefault(),v(e)},onMouseOver:H,listItem:{value:e.value,label:e.label},subText:e.subText,"data-option-index":f,role:"option",id:`dropdown-option-${f}`,"aria-selected":!!e.selected,onDragOver:i?q:void 0,onDrop:i?M:void 0,leadingIcon:a&&!(p&&e.customComponent)?t.jsxs(L,{children:[i&&t.jsx(m,{onDragStart:o,onDragEnd:u}),t.jsx(y.CheckBox,{size:s==="2.0"?"SMALL":"DEFAULT",isDisabled:e.disabled??!1,isChecked:!!e.selected,onValueChange:x}),t.jsx(W,{children:e.leadingIcon})]}):i?t.jsxs(G,{children:[t.jsx(m,{onDragStart:o,onDragEnd:u}),e.leadingIcon&&t.jsx("div",{children:e.leadingIcon})]}):e.leadingIcon?t.jsx(t.Fragment,{children:e.leadingIcon}):void 0,customComponent:a&&p&&e.customComponent?t.jsxs(L,{children:[i&&t.jsx(m,{onDragStart:o,onDragEnd:u}),t.jsx(y.CheckBox,{size:s==="2.0"?"SMALL":"DEFAULT",isDisabled:e.disabled??!1,isChecked:!!e.selected,onValueChange:x}),e.customComponent]}):e.customComponent,trailingIcon:e.isFreeForm?t.jsx(E.FreeFormContainer,{children:t.jsx(B.BodyCaption,{style:{color:d.COLORS.content.secondary},children:"Freeform"})}):e.children?t.jsx(A.default,{width:12,height:12}):e.trailingIcon?t.jsx(t.Fragment,{children:e.trailingIcon}):void 0,variant:e.disabled?"inactive":S||e.selected||!a&&w?"selected":"default"})})})});exports.MenuItem=J;
 //# sourceMappingURL=MenuItem.js.map

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight.svg';\nimport { forwardRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { MultiSelectOption, SingleOption } from '../../../type';\nimport { FreeFormContainer } from './FreeFormMenu.styled';\n\nconst StyledListItem = styled(ListItem)<{\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tbrandSelectedRow?: boolean;\n}>`\n\tpadding: ${(props) =>\n\t\tprops.version === '3.0'\n\t\t\t? '8px'\n\t\t\t: props.version === '2.0'\n\t\t\t? '8px 12px'\n\t\t\t: '14px 16px'} !important;\n\tcursor: pointer;\n\tmargin-top: ${(props) =>\n\t\tprops.brandSelectedRow ? '0' : props.version === '2.0' ? '2px' : '0'};\n`;\n\nconst StyledChildDropdownContainer = styled.div<{ version: string }>`\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '1.0' ? '0' : '8px')};\n\tpadding: ${({ version }) => (version === '1.0' ? '0' : '4px')};\n\tmin-width: 148px;\n\tborder: ${({ version }) =>\n\t\tversion === '1.0'\n\t\t\t? `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`\n\t\t\t: 'none'};\n\tmax-height: 248px;\n\toverflow-y: auto;\n`;\n\nconst DragHandleContainer = styled.div`\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 2.86px);\n\tgrid-template-rows: repeat(3, 2.86px);\n\tcolumn-gap: 3.8px;\n\trow-gap: 4px;\n\tmargin-right: 8px;\n\tcursor: move;\n\tflex-shrink: 0;\n\talign-self: center;\n\theight: fit-content;\n\tmin-height: 18px;\n`;\n\nconst DragDot = styled.div`\n\twidth: 2.86px;\n\theight: 2.86px;\n\tborder-radius: 50%;\n\tbackground-color: ${COLORS.content.inactive};\n\tflex-shrink: 0;\n`;\n\nconst MultiSelectLeadingContainer = styled.div`\n\tdisplay: flex;\n\talign-content: center;\n\tjustify-content: center;\n\tgap: 8px;\n`;\n\nconst LeadingIconWrapper = styled.div`\n\tmargin-right: -4px;\n`;\n\nconst SingleSelectDragContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tflex: 1;\n`;\n\ninterface DragHandleIconProps {\n\tonDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;\n}\n\nconst DragHandleIcon = ({ onDragStart, onDragEnd }: DragHandleIconProps) => (\n\t<DragHandleContainer\n\t\tdraggable\n\t\tonDragStart={onDragStart}\n\t\tonDragEnd={onDragEnd}\n\t>\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t</DragHandleContainer>\n);\n\ninterface MenuItemProps {\n\toption: SingleOption \| MultiSelectOption;\n\tisMultiSelect?: boolean;\n\tshowDescription: (title?: string, description?: string) => void;\n\tonSelect: (option: SingleOption) => void;\n\tonDropdownItemClick?: (option: SingleOption) => void;\n\tlast?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tuseDefaultCursor?: boolean;\n\tisFocused?: boolean;\n\tdataIndex?: number;\n\tisDraggable?: boolean;\n\tonDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDrop?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tisDraggedOver?: boolean;\n\tshowCheckboxForCustomElement?: boolean;\n\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n}\n// eslint-disable-next-line react/display-name\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n\t(\n\t\t{\n\t\t\toption,\n\t\t\tisMultiSelect,\n\t\t\tshowDescription,\n\t\t\tonSelect,\n\t\t\tlast,\n\t\t\tversion,\n\t\t\tonDropdownItemClick,\n\t\t\tuseDefaultCursor,\n\t\t\tisFocused = false,\n\t\t\tdataIndex = -1,\n\t\t\tisDraggable = false,\n\t\t\tonDragStart,\n\t\t\tonDragOver,\n\t\t\tonDrop,\n\t\t\tonDragEnd,\n\t\t\tisDraggedOver = false,\n\t\t\tshowCheckboxForCustomElement = false,\n\t\t\tcheckboxActiveColor,\n\t\t\tbrandSelectedRow,\n\t\t},\n\t\tchildRef,\n\t) => {\n\t\tconst [isChildOptionHovered, setIsChildOptionHovered] = useState(\n\t\t\toption.selected,\n\t\t);\n\n\t\tconst handleOptionClick = (option: SingleOption, parent?: SingleOption) => {\n\t\t\tif (!option.children) {\n\t\t\t\tonCheckHandler(!option.selected);\n\t\t\t\tconst updatedOption = parent ? { ...option, parent } : option;\n\t\t\t\tonDropdownItemClick?.(updatedOption);\n\t\t\t}\n\t\t};\n\n\t\tconst onCheckHandler = (checked: boolean) => {\n\t\t\tif (!option.disabled) {\n\t\t\t\tonSelect({ ...option, selected: checked });\n\t\t\t}\n\t\t};\n\n\t\tconst onHoverIn = () => {\n\t\t\tif (option.description) {\n\t\t\t\tshowDescription(option.label, option.description);\n\t\t\t} else {\n\t\t\t\tshowDescription();\n\t\t\t}\n\t\t};\n\n\t\tconst cursorConfig = useDefaultCursor ? { cursor: 'default' } : {};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Tooltip\n\t\t\t\t\tbody={''}\n\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\toption.children ? (\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\tbackgroundColor: DEFAULT_THEME.colorsV2.surface.standard,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tref={childRef}\n\t\t\t\t\t\t\t\tonMouseEnter={() => setIsChildOptionHovered(true)}\n\t\t\t\t\t\t\t\tonMouseLeave={() => setIsChildOptionHovered(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<StyledChildDropdownContainer version={version ?? '2.0'}>\n\t\t\t\t\t\t\t\t\t{option.children.map((child) => (\n\t\t\t\t\t\t\t\t\t\t<StyledListItem\n\t\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t\t\t\tkey={child.value}\n\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\tversion !== '1.0' && (option?.children ?? []).length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { borderBottom: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\thandleOptionClick(child, option);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tlistItem={{ value: child.value, label: child.label }}\n\t\t\t\t\t\t\t\t\t\t\tsubText={child.subText}\n\t\t\t\t\t\t\t\t\t\t\tleadingIcon={child.leadingIcon \|\| undefined}\n\t\t\t\t\t\t\t\t\t\t\tcustomComponent={child.customComponent}\n\t\t\t\t\t\t\t\t\t\t\ttrailingIcon={child.trailingIcon \|\| undefined}\n\t\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\t\toption.disabled\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'inactive'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: child.selected\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'default'\n\t\t\t\t\t\t\t\t\t\t\t}\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</StyledChildDropdownContainer>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tplacement={'right-start'}\n\t\t\t\t\thideArrow={true}\n\t\t\t\t>\n\t\t\t\t\t<StyledListItem\n\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tlast\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tborderBottom: 0,\n\t\t\t\t\t\t\t\t\t\t...cursorConfig,\n\t\t\t\t\t\t\t\t\t\t...(isDraggedOver\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderTop: `2px solid ${COLORS.content.brand}`,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0.5,\n\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\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\t: {\n\t\t\t\t\t\t\t\t\t\t...cursorConfig,\n\t\t\t\t\t\t\t\t\t\t...(isDraggedOver\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderTop: `2px solid ${COLORS.content.brand}`,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0.5,\n\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\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}\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\thandleOptionClick(option);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonMouseOver={onHoverIn}\n\t\t\t\t\t\tlistItem={{ value: option.value, label: option.label }}\n\t\t\t\t\t\tsubText={option.subText}\n\t\t\t\t\t\tdata-option-index={dataIndex}\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\tid={`dropdown-option-${dataIndex}`}\n\t\t\t\t\t\taria-selected={!!option.selected}\n\t\t\t\t\t\tonDragOver={isDraggable ? onDragOver : undefined}\n\t\t\t\t\t\tonDrop={isDraggable ? onDrop : undefined}\n\t\t\t\t\t\tleadingIcon={\n\t\t\t\t\t\t\tisMultiSelect &&\n\t\t\t\t\t\t\t!(showCheckboxForCustomElement && option.customComponent) ? (\n\t\t\t\t\t\t\t\t<MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t\t\t{isDraggable && (\n\t\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\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<CheckBox\n\t\t\t\t\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\tisChecked={!!option.selected}\n\t\t\t\t\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t\t\t\t\t\tactiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<LeadingIconWrapper>{option.leadingIcon}</LeadingIconWrapper>\n\t\t\t\t\t\t\t\t</MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t) : isDraggable ? (\n\t\t\t\t\t\t\t\t<SingleSelectDragContainer>\n\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{option.leadingIcon && <div>{option.leadingIcon}</div>}\n\t\t\t\t\t\t\t\t</SingleSelectDragContainer>\n\t\t\t\t\t\t\t) : option.leadingIcon ? (\n\t\t\t\t\t\t\t\t<>{option.leadingIcon}</>\n\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcustomComponent={\n\t\t\t\t\t\t\tisMultiSelect &&\n\t\t\t\t\t\t\tshowCheckboxForCustomElement &&\n\t\t\t\t\t\t\toption.customComponent ? (\n\t\t\t\t\t\t\t\t<MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t\t\t{isDraggable && (\n\t\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\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<CheckBox\n\t\t\t\t\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\tisChecked={!!option.selected}\n\t\t\t\t\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t\t\t\t\t\tactiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{option.customComponent}\n\t\t\t\t\t\t\t\t</MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\toption.customComponent\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttrailingIcon={\n\t\t\t\t\t\t\toption.isFreeForm ? (\n\t\t\t\t\t\t\t\t<FreeFormContainer>\n\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\tFreeform\n\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t</FreeFormContainer>\n\t\t\t\t\t\t\t) : option.children ? (\n\t\t\t\t\t\t\t\t<ChevronRightIcon width={12} height={12} />\n\t\t\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t\t\t<>{option.trailingIcon}</>\n\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\toption.disabled\n\t\t\t\t\t\t\t\t? 'inactive'\n\t\t\t\t\t\t\t\t: option.selected \|\|\n\t\t\t\t\t\t\t\t (!isMultiSelect && isChildOptionHovered)\n\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t: isFocused\n\t\t\t\t\t\t\t\t? 'focused'\n\t\t\t\t\t\t\t\t: 'default'\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</Tooltip>\n\t\t\t</>\n\t\t);\n\t},\n);\n"],"names":["StyledListItem","styled","ListItem","props","StyledChildDropdownContainer","version","DEFAULT_THEME","DragHandleContainer","DragDot","COLORS","MultiSelectLeadingContainer","LeadingIconWrapper","SingleSelectDragContainer","DragHandleIcon","onDragStart","onDragEnd","jsxs","jsx","MenuItem","forwardRef","option","isMultiSelect","showDescription","onSelect","last","onDropdownItemClick","useDefaultCursor","isFocused","dataIndex","isDraggable","onDragOver","onDrop","isDraggedOver","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","childRef","isChildOptionHovered","setIsChildOptionHovered","useState","handleOptionClick","parent","onCheckHandler","updatedOption","checked","onHoverIn","cursorConfig","Fragment","Tooltip","child","e","CheckBox","FreeFormContainer","BodyCaption","ChevronRightIcon"],"mappings":"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"}
1	+ {"version":3,"file":"MenuItem.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight.svg';\nimport { forwardRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { MultiSelectOption, SingleOption } from '../../../type';\nimport { FreeFormContainer } from './FreeFormMenu.styled';\n\nconst StyledListItem = styled(ListItem)<{ version?: '1.0' \| '2.0' }>`\n\tpadding: ${(props) =>\n\t\tprops.version === '2.0' ? '8px 12px' : '14px 16px'} !important;\n\tcursor: pointer;\n\tmargin-top: ${(props) => (props.version === '2.0' ? '2px' : '0')};\n`;\n\nconst StyledChildDropdownContainer = styled.div<{ version: string }>`\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: ${({ version }) => (version === '1.0' ? '0' : '8px')};\n\tpadding: ${({ version }) => (version === '1.0' ? '0' : '4px')};\n\tmin-width: 148px;\n\tborder: ${({ version }) =>\n\t\tversion === '1.0'\n\t\t\t? `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`\n\t\t\t: 'none'};\n\tmax-height: 248px;\n\toverflow-y: auto;\n`;\n\nconst DragHandleContainer = styled.div`\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 2.86px);\n\tgrid-template-rows: repeat(3, 2.86px);\n\tcolumn-gap: 3.8px;\n\trow-gap: 4px;\n\tmargin-right: 8px;\n\tcursor: move;\n\tflex-shrink: 0;\n\talign-self: center;\n\theight: fit-content;\n\tmin-height: 18px;\n`;\n\nconst DragDot = styled.div`\n\twidth: 2.86px;\n\theight: 2.86px;\n\tborder-radius: 50%;\n\tbackground-color: ${COLORS.content.inactive};\n\tflex-shrink: 0;\n`;\n\nconst MultiSelectLeadingContainer = styled.div`\n\tdisplay: flex;\n\talign-content: center;\n\tjustify-content: center;\n\tgap: 8px;\n`;\n\nconst LeadingIconWrapper = styled.div`\n\tmargin-right: -4px;\n`;\n\nconst SingleSelectDragContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: column;\n\tflex: 1;\n`;\n\ninterface DragHandleIconProps {\n\tonDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;\n}\n\nconst DragHandleIcon = ({ onDragStart, onDragEnd }: DragHandleIconProps) => (\n\t<DragHandleContainer\n\t\tdraggable\n\t\tonDragStart={onDragStart}\n\t\tonDragEnd={onDragEnd}\n\t>\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t\t<DragDot />\n\t</DragHandleContainer>\n);\n\ninterface MenuItemProps {\n\toption: SingleOption \| MultiSelectOption;\n\tisMultiSelect?: boolean;\n\tshowDescription: (title?: string, description?: string) => void;\n\tonSelect: (option: SingleOption) => void;\n\tonDropdownItemClick?: (option: SingleOption) => void;\n\tlast?: boolean;\n\tversion?: '1.0' \| '2.0';\n\tuseDefaultCursor?: boolean;\n\tisFocused?: boolean;\n\tdataIndex?: number;\n\tisDraggable?: boolean;\n\tonDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDrop?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tonDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;\n\tisDraggedOver?: boolean;\n\tshowCheckboxForCustomElement?: boolean;\n}\n// eslint-disable-next-line react/display-name\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n\t(\n\t\t{\n\t\t\toption,\n\t\t\tisMultiSelect,\n\t\t\tshowDescription,\n\t\t\tonSelect,\n\t\t\tlast,\n\t\t\tversion,\n\t\t\tonDropdownItemClick,\n\t\t\tuseDefaultCursor,\n\t\t\tisFocused = false,\n\t\t\tdataIndex = -1,\n\t\t\tisDraggable = false,\n\t\t\tonDragStart,\n\t\t\tonDragOver,\n\t\t\tonDrop,\n\t\t\tonDragEnd,\n\t\t\tisDraggedOver = false,\n\t\t\tshowCheckboxForCustomElement = false,\n\t\t},\n\t\tchildRef,\n\t) => {\n\t\tconst [isChildOptionHovered, setIsChildOptionHovered] = useState(\n\t\t\toption.selected,\n\t\t);\n\n\t\tconst handleOptionClick = (option: SingleOption, parent?: SingleOption) => {\n\t\t\tif (!option.children) {\n\t\t\t\tonCheckHandler(!option.selected);\n\t\t\t\tconst updatedOption = parent ? { ...option, parent } : option;\n\t\t\t\tonDropdownItemClick?.(updatedOption);\n\t\t\t}\n\t\t};\n\n\t\tconst onCheckHandler = (checked: boolean) => {\n\t\t\tif (!option.disabled) {\n\t\t\t\tonSelect({ ...option, selected: checked });\n\t\t\t}\n\t\t};\n\n\t\tconst onHoverIn = () => {\n\t\t\tif (option.description) {\n\t\t\t\tshowDescription(option.label, option.description);\n\t\t\t} else {\n\t\t\t\tshowDescription();\n\t\t\t}\n\t\t};\n\n\t\tconst cursorConfig = useDefaultCursor ? { cursor: 'default' } : {};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Tooltip\n\t\t\t\t\tbody={''}\n\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\toption.children ? (\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\tbackgroundColor: DEFAULT_THEME.colorsV2.surface.standard,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tref={childRef}\n\t\t\t\t\t\t\t\tonMouseEnter={() => setIsChildOptionHovered(true)}\n\t\t\t\t\t\t\t\tonMouseLeave={() => setIsChildOptionHovered(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<StyledChildDropdownContainer version={version ?? '2.0'}>\n\t\t\t\t\t\t\t\t\t{option.children.map((child) => (\n\t\t\t\t\t\t\t\t\t\t<StyledListItem\n\t\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\t\tkey={child.value}\n\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\tversion !== '1.0' && (option?.children ?? []).length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { borderBottom: 0 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\thandleOptionClick(child, option);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tlistItem={{ value: child.value, label: child.label }}\n\t\t\t\t\t\t\t\t\t\t\tsubText={child.subText}\n\t\t\t\t\t\t\t\t\t\t\tleadingIcon={child.leadingIcon \|\| undefined}\n\t\t\t\t\t\t\t\t\t\t\tcustomComponent={child.customComponent}\n\t\t\t\t\t\t\t\t\t\t\ttrailingIcon={child.trailingIcon \|\| undefined}\n\t\t\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\t\t\toption.disabled\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'inactive'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: child.selected\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'default'\n\t\t\t\t\t\t\t\t\t\t\t}\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</StyledChildDropdownContainer>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tplacement={'right-start'}\n\t\t\t\t\thideArrow={true}\n\t\t\t\t>\n\t\t\t\t\t<StyledListItem\n\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tlast\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tborderBottom: 0,\n\t\t\t\t\t\t\t\t\t\t...cursorConfig,\n\t\t\t\t\t\t\t\t\t\t...(isDraggedOver\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderTop: `2px solid ${COLORS.content.brand}`,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0.5,\n\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\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\t: {\n\t\t\t\t\t\t\t\t\t\t...cursorConfig,\n\t\t\t\t\t\t\t\t\t\t...(isDraggedOver\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderTop: `2px solid ${COLORS.content.brand}`,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0.5,\n\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\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}\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\thandleOptionClick(option);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonMouseOver={onHoverIn}\n\t\t\t\t\t\tlistItem={{ value: option.value, label: option.label }}\n\t\t\t\t\t\tsubText={option.subText}\n\t\t\t\t\t\tdata-option-index={dataIndex}\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\tid={`dropdown-option-${dataIndex}`}\n\t\t\t\t\t\taria-selected={!!option.selected}\n\t\t\t\t\t\tonDragOver={isDraggable ? onDragOver : undefined}\n\t\t\t\t\t\tonDrop={isDraggable ? onDrop : undefined}\n\t\t\t\t\t\tleadingIcon={\n\t\t\t\t\t\t\tisMultiSelect &&\n\t\t\t\t\t\t\t!(showCheckboxForCustomElement && option.customComponent) ? (\n\t\t\t\t\t\t\t\t<MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t\t\t{isDraggable && (\n\t\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\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<CheckBox\n\t\t\t\t\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\tisChecked={!!option.selected}\n\t\t\t\t\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<LeadingIconWrapper>{option.leadingIcon}</LeadingIconWrapper>\n\t\t\t\t\t\t\t\t</MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t) : isDraggable ? (\n\t\t\t\t\t\t\t\t<SingleSelectDragContainer>\n\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{option.leadingIcon && <div>{option.leadingIcon}</div>}\n\t\t\t\t\t\t\t\t</SingleSelectDragContainer>\n\t\t\t\t\t\t\t) : option.leadingIcon ? (\n\t\t\t\t\t\t\t\t<>{option.leadingIcon}</>\n\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcustomComponent={\n\t\t\t\t\t\t\tisMultiSelect &&\n\t\t\t\t\t\t\tshowCheckboxForCustomElement &&\n\t\t\t\t\t\t\toption.customComponent ? (\n\t\t\t\t\t\t\t\t<MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t\t\t{isDraggable && (\n\t\t\t\t\t\t\t\t\t\t<DragHandleIcon\n\t\t\t\t\t\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\t\t\t\t\t\tonDragEnd={onDragEnd}\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<CheckBox\n\t\t\t\t\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\t\t\t\t\t\tisChecked={!!option.selected}\n\t\t\t\t\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{option.customComponent}\n\t\t\t\t\t\t\t\t</MultiSelectLeadingContainer>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\toption.customComponent\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttrailingIcon={\n\t\t\t\t\t\t\toption.isFreeForm ? (\n\t\t\t\t\t\t\t\t<FreeFormContainer>\n\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\tFreeform\n\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t</FreeFormContainer>\n\t\t\t\t\t\t\t) : option.children ? (\n\t\t\t\t\t\t\t\t<ChevronRightIcon width={12} height={12} />\n\t\t\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t\t\t<>{option.trailingIcon}</>\n\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\toption.disabled\n\t\t\t\t\t\t\t\t? 'inactive'\n\t\t\t\t\t\t\t\t: isFocused \|\|\n\t\t\t\t\t\t\t\t option.selected \|\|\n\t\t\t\t\t\t\t\t (!isMultiSelect && isChildOptionHovered)\n\t\t\t\t\t\t\t\t? 'selected'\n\t\t\t\t\t\t\t\t: 'default'\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</Tooltip>\n\t\t\t</>\n\t\t);\n\t},\n);\n"],"names":["StyledListItem","styled","ListItem","props","StyledChildDropdownContainer","version","DEFAULT_THEME","DragHandleContainer","DragDot","COLORS","MultiSelectLeadingContainer","LeadingIconWrapper","SingleSelectDragContainer","DragHandleIcon","onDragStart","onDragEnd","jsxs","jsx","MenuItem","forwardRef","option","isMultiSelect","showDescription","onSelect","last","onDropdownItemClick","useDefaultCursor","isFocused","dataIndex","isDraggable","onDragOver","onDrop","isDraggedOver","showCheckboxForCustomElement","childRef","isChildOptionHovered","setIsChildOptionHovered","useState","handleOptionClick","parent","onCheckHandler","updatedOption","checked","onHoverIn","cursorConfig","Fragment","Tooltip","child","e","CheckBox","FreeFormContainer","BodyCaption","ChevronRightIcon"],"mappings":"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"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),w=require("./MenuItem.js"),G=require("./MenuList.styled.js"),J=r.forwardRef(({options:d,isMultiSelect:h,showDescription:y,onSelect:O,version:o,onInfiniteScroll:m,onDropdownItemClick:D,useDefaultCursor:M,focusedIndex:E=-1,isDraggable:c=!1,onOptionsReorder:F,showCheckboxForCustomElement:R=!1,checkboxActiveColor:q,brandSelectedRow:L},s)=>{const f=r.useRef(null),g=r.useRef(null),[p,j]=r.useState(null),[P,I]=r.useState(null),T=r.useCallback(()=>{f.current&&f.current.disconnect(),f.current=new IntersectionObserver(n=>{n[0].isIntersecting&&m?.()}),g.current&&f.current.observe(g.current)},[m]);r.useEffect(()=>(T(),()=>{f.current&&f.current.disconnect()}),[T,d]);const _=r.useCallback(n=>e=>{c&&(j(n),e.dataTransfer.effectAllowed="move")},[c]),z=r.useCallback(n=>e=>{c&&(e.preventDefault(),e.dataTransfer.dropEffect="move",I(n))},[c]),A=r.useCallback(n=>e=>{if(!(!c||p===null)){if(e.preventDefault(),p!==n){const l=[...d],[u]=l.splice(p,1);l.splice(n,0,u),F?.(l)}j(null),I(null)}},[c,p,d,F]),B=r.useCallback(()=>{j(null),I(null)},[]),v=new Map;let x=-1;return d.forEach(n=>{if(n.options)n.options.forEach(e=>{e.disabled||(x++,v.set(e,x))});else{const e=n;e.disabled||(x++,v.set(e,x))}}),t.jsx(t.Fragment,{children:d.map((n,e)=>{const l=e===d.length-1;if(n.options){const a=n;return t.jsxs("div",{style:{marginTop:o==="2.0"?2:0},children:[t.jsxs(G.StyledGroupedLabel,{version:o,children:[a.leadingIcon?t.jsx("span",{style:{marginRight:8},children:a.leadingIcon}):null,a.label]}),a.options.map((b,k)=>{const $=v.get(b),H=$===E&&!b.disabled;return t.jsx(w.MenuItem,{version:o,last:k===a.options.length-1,onSelect:O,showDescription:y,onDropdownItemClick:D,isMultiSelect:h,option:b,useDefaultCursor:M,isFocused:H,dataIndex:$,isDraggable:!1,showCheckboxForCustomElement:R,checkboxActiveColor:q,brandSelectedRow:L,ref:i=>{s&&typeof s=="object"&&s.current&&i&&i&&i&&i&&(s.current[e]=i)}},`${e}-${k}`)}),l?t.jsx("span",{ref:g}):null]},e)}const u=n,S=v.get(u),C=S===E&&!u.disabled;return t.jsxs("div",{children:[u.hasDivider&&t.jsx(G.Divider,{}),t.jsx(w.MenuItem,{version:o,last:l,onSelect:O,showDescription:y,onDropdownItemClick:D,isMultiSelect:h,option:u,useDefaultCursor:M,isFocused:C,dataIndex:S,isDraggable:c,onDragStart:_(e),onDragOver:z(e),onDrop:A(e),onDragEnd:B,isDraggedOver:P===e,showCheckboxForCustomElement:R,checkboxActiveColor:q,brandSelectedRow:L,ref:a=>{s&&typeof s=="object"&&s.current&&a&&(s.current[e]=a)}},u.value),l?t.jsx("span",{ref:g}):null]},e)})})});exports.MenuList=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),k=require("./MenuItem.js"),z=require("./MenuList.styled.js"),B=t.forwardRef(({options:u,isMultiSelect:h,showDescription:y,onSelect:O,version:i,onInfiniteScroll:m,onDropdownItemClick:M,useDefaultCursor:R,focusedIndex:D=-1,isDraggable:a=!1,onOptionsReorder:E,showCheckboxForCustomElement:F=!1},s)=>{const d=t.useRef(null),g=t.useRef(null),[p,b]=t.useState(null),[w,j]=t.useState(null),q=t.useCallback(()=>{d.current&&d.current.disconnect(),d.current=new IntersectionObserver(n=>{n[0].isIntersecting&&m?.()}),g.current&&d.current.observe(g.current)},[m]);t.useEffect(()=>(q(),()=>{d.current&&d.current.disconnect()}),[q,u]);const $=t.useCallback(n=>e=>{a&&(b(n),e.dataTransfer.effectAllowed="move")},[a]),A=t.useCallback(n=>e=>{a&&(e.preventDefault(),e.dataTransfer.dropEffect="move",j(n))},[a]),C=t.useCallback(n=>e=>{if(!(!a||p===null)){if(e.preventDefault(),p!==n){const l=[...u],[f]=l.splice(p,1);l.splice(n,0,f),E?.(l)}b(null),j(null)}},[a,p,u,E]),G=t.useCallback(()=>{b(null),j(null)},[]),x=new Map;let v=-1;return u.forEach(n=>{if(n.options)n.options.forEach(e=>{e.disabled||(v++,x.set(e,v))});else{const e=n;e.disabled||(v++,x.set(e,v))}}),r.jsx(r.Fragment,{children:u.map((n,e)=>{const l=e===u.length-1;if(n.options){const c=n;return r.jsxs("div",{style:{marginTop:i==="2.0"?2:0},children:[r.jsxs(z.StyledGroupedLabel,{version:i,children:[c.leadingIcon?r.jsx("span",{style:{marginRight:8},children:c.leadingIcon}):null,c.label]}),c.options.map((I,S)=>{const T=x.get(I),_=T===D&&!I.disabled;return r.jsx(k.MenuItem,{version:i,last:S===c.options.length-1,onSelect:O,showDescription:y,onDropdownItemClick:M,isMultiSelect:h,option:I,useDefaultCursor:R,isFocused:_,dataIndex:T,isDraggable:!1,showCheckboxForCustomElement:F,ref:o=>{s&&typeof s=="object"&&s.current&&o&&o&&o&&o&&(s.current[e]=o)}},`${e}-${S}`)}),l?r.jsx("span",{ref:g}):null]},e)}const f=n,L=x.get(f),P=L===D&&!f.disabled;return r.jsxs("div",{children:[r.jsx(k.MenuItem,{version:i,last:l,onSelect:O,showDescription:y,onDropdownItemClick:M,isMultiSelect:h,option:f,useDefaultCursor:R,isFocused:P,dataIndex:L,isDraggable:a,onDragStart:$(e),onDragOver:A(e),onDrop:C(e),onDragEnd:G,isDraggedOver:w===e,showCheckboxForCustomElement:F,ref:c=>{s&&typeof s=="object"&&s.current&&c&&(s.current[e]=c)}},f.value),l?r.jsx("span",{ref:g}):null]},e)})})});exports.MenuList=B;
 //# sourceMappingURL=MenuList.js.map

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuList.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuList.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { DropdownOption, GroupedOption, SingleOption } from '../../../type';\nimport { MenuItem } from './MenuItem';\nimport { Divider, StyledGroupedLabel } from './MenuList.styled';\n\ninterface MenuListProps {\n\toptions: DropdownOption[];\n\tisMultiSelect?: boolean;\n\tshowDescription: (title?: string, description?: string) => void;\n\tonSelect: (optionSelect: SingleOption) => void;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tonInfiniteScroll?: () => void;\n\tonDropdownItemClick?: (option: DropdownOption) => void;\n\tuseDefaultCursor?: boolean;\n\tfocusedIndex?: number;\n\tisDraggable?: boolean;\n\tonOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;\n\tshowCheckboxForCustomElement?: boolean;\n\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n}\n// eslint-disable-next-line react/display-name\nexport const MenuList = forwardRef<HTMLDivElement[], MenuListProps>(\n\t(\n\t\t{\n\t\t\toptions,\n\t\t\tisMultiSelect,\n\t\t\tshowDescription,\n\t\t\tonSelect,\n\t\t\tversion,\n\t\t\tonInfiniteScroll,\n\t\t\tonDropdownItemClick,\n\t\t\tuseDefaultCursor,\n\t\t\tfocusedIndex = -1,\n\t\t\tisDraggable = false,\n\t\t\tonOptionsReorder,\n\t\t\tshowCheckboxForCustomElement = false,\n\t\t\tcheckboxActiveColor,\n\t\t\tbrandSelectedRow,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst observer = useRef<IntersectionObserver \| null>(null);\n\t\tconst spanRef = useRef<HTMLSpanElement \| null>(null);\n\t\tconst [draggedIndex, setDraggedIndex] = useState<number \| null>(null);\n\t\tconst [draggedOverIndex, setDraggedOverIndex] = useState<number \| null>(\n\t\t\tnull,\n\t\t);\n\n\t\tconst setupObserver = useCallback(() => {\n\t\t\tif (observer.current) {\n\t\t\t\tobserver.current.disconnect();\n\t\t\t}\n\t\t\tobserver.current = new IntersectionObserver((entries) => {\n\t\t\t\tif (entries[0].isIntersecting) {\n\t\t\t\t\tonInfiniteScroll?.();\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (spanRef.current) {\n\t\t\t\tobserver.current.observe(spanRef.current);\n\t\t\t}\n\t\t}, [onInfiniteScroll]);\n\n\t\tuseEffect(() => {\n\t\t\tsetupObserver();\n\t\t\treturn () => {\n\t\t\t\tif (observer.current) {\n\t\t\t\t\tobserver.current.disconnect();\n\t\t\t\t}\n\t\t\t};\n\t\t}, [setupObserver, options]);\n\n\t\tconst handleDragStart = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\tsetDraggedIndex(index);\n\t\t\t\te.dataTransfer.effectAllowed = 'move';\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDragOver = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\te.preventDefault();\n\t\t\t\te.dataTransfer.dropEffect = 'move';\n\t\t\t\tsetDraggedOverIndex(index);\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDrop = useCallback(\n\t\t\t(dropIndex: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable \|\| draggedIndex === null) return;\n\t\t\t\te.preventDefault();\n\n\t\t\t\tif (draggedIndex !== dropIndex) {\n\t\t\t\t\tconst newOptions = [...options];\n\t\t\t\t\tconst [item] = newOptions.splice(draggedIndex, 1);\n\t\t\t\t\tnewOptions.splice(dropIndex, 0, item);\n\t\t\t\t\tonOptionsReorder?.(newOptions);\n\t\t\t\t}\n\n\t\t\t\tsetDraggedIndex(null);\n\t\t\t\tsetDraggedOverIndex(null);\n\t\t\t},\n\t\t\t[isDraggable, draggedIndex, options, onOptionsReorder],\n\t\t);\n\n\t\tconst handleDragEnd = useCallback(() => {\n\t\t\tsetDraggedIndex(null);\n\t\t\tsetDraggedOverIndex(null);\n\t\t}, []);\n\n\t\t// Calculate flat indices for all options\n\t\tconst flatIndices = new Map<SingleOption, number>();\n\t\tlet currentIndex = -1;\n\t\toptions.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((menuOption) => {\n\t\t\t\t\tif (!menuOption.disabled) {\n\t\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\t\tflatIndices.set(menuOption, currentIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\tif (!singleOption.disabled) {\n\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\tflatIndices.set(singleOption, currentIndex);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{options.map((option, i) => {\n\t\t\t\t\tconst last = i === options.length - 1;\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = option as GroupedOption;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div key={i} style={{ marginTop: version === '2.0' ? 2 : 0 }}>\n\t\t\t\t\t\t\t\t<StyledGroupedLabel version={version}>\n\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon ? (\n\t\t\t\t\t\t\t\t\t\t<span style={{ marginRight: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{groupedOption.label}\n\t\t\t\t\t\t\t\t</StyledGroupedLabel>\n\t\t\t\t\t\t\t\t{groupedOption.options.map((menuOption, idx) => {\n\t\t\t\t\t\t\t\t\tconst currentFlatIndex = flatIndices.get(menuOption);\n\t\t\t\t\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !menuOption.disabled;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\t\tlast={idx === groupedOption.options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\t\t\toption={menuOption}\n\t\t\t\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\t\t\t\tkey={`${i}-${idx}`}\n\t\t\t\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\t\t\t\tisDraggable={false}\n\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={\n\t\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) ref.current[i] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\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})}\n\t\t\t\t\t\t\t\t{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tconst currentFlatIndex = flatIndices.get(singleOption);\n\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !singleOption.disabled;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={i}>\n\t\t\t\t\t\t\t{singleOption.hasDivider && <Divider />}\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\tlast={last}\n\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\toption={singleOption}\n\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\tkey={singleOption.value}\n\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\t\tonDragStart={handleDragStart(i)}\n\t\t\t\t\t\t\t\tonDragOver={handleDragOver(i)}\n\t\t\t\t\t\t\t\tonDrop={handleDrop(i)}\n\t\t\t\t\t\t\t\tonDragEnd={handleDragEnd}\n\t\t\t\t\t\t\t\tisDraggedOver={draggedOverIndex === i}\n\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current && el) {\n\t\t\t\t\t\t\t\t\t\tref.current[i] = el;\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/>\n\t\t\t\t\t\t\t{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</>\n\t\t);\n\t},\n);\n"],"names":["MenuList","forwardRef","options","isMultiSelect","showDescription","onSelect","version","onInfiniteScroll","onDropdownItemClick","useDefaultCursor","focusedIndex","isDraggable","onOptionsReorder","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","ref","observer","useRef","spanRef","draggedIndex","setDraggedIndex","useState","draggedOverIndex","setDraggedOverIndex","setupObserver","useCallback","entries","useEffect","handleDragStart","index","handleDragOver","handleDrop","dropIndex","newOptions","item","handleDragEnd","flatIndices","currentIndex","option","menuOption","singleOption","jsx","Fragment","i","last","groupedOption","jsxs","StyledGroupedLabel","idx","currentFlatIndex","isFocused","MenuItem","el","Divider"],"mappings":"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"}
1	+ {"version":3,"file":"MenuList.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuList.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { DropdownOption, GroupedOption, SingleOption } from '../../../type';\nimport { MenuItem } from './MenuItem';\nimport { StyledGroupedLabel } from './MenuList.styled';\n\ninterface MenuListProps {\n\toptions: DropdownOption[];\n\tisMultiSelect?: boolean;\n\tshowDescription: (title?: string, description?: string) => void;\n\tonSelect: (optionSelect: SingleOption) => void;\n\tversion?: '1.0' \| '2.0';\n\tonInfiniteScroll?: () => void;\n\tonDropdownItemClick?: (option: DropdownOption) => void;\n\tuseDefaultCursor?: boolean;\n\tfocusedIndex?: number;\n\tisDraggable?: boolean;\n\tonOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;\n\tshowCheckboxForCustomElement?: boolean;\n}\n// eslint-disable-next-line react/display-name\nexport const MenuList = forwardRef<HTMLDivElement[], MenuListProps>(\n\t(\n\t\t{\n\t\t\toptions,\n\t\t\tisMultiSelect,\n\t\t\tshowDescription,\n\t\t\tonSelect,\n\t\t\tversion,\n\t\t\tonInfiniteScroll,\n\t\t\tonDropdownItemClick,\n\t\t\tuseDefaultCursor,\n\t\t\tfocusedIndex = -1,\n\t\t\tisDraggable = false,\n\t\t\tonOptionsReorder,\n\t\t\tshowCheckboxForCustomElement = false,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst observer = useRef<IntersectionObserver \| null>(null);\n\t\tconst spanRef = useRef<HTMLSpanElement \| null>(null);\n\t\tconst [draggedIndex, setDraggedIndex] = useState<number \| null>(null);\n\t\tconst [draggedOverIndex, setDraggedOverIndex] = useState<number \| null>(\n\t\t\tnull,\n\t\t);\n\n\t\tconst setupObserver = useCallback(() => {\n\t\t\tif (observer.current) {\n\t\t\t\tobserver.current.disconnect();\n\t\t\t}\n\t\t\tobserver.current = new IntersectionObserver((entries) => {\n\t\t\t\tif (entries[0].isIntersecting) {\n\t\t\t\t\tonInfiniteScroll?.();\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (spanRef.current) {\n\t\t\t\tobserver.current.observe(spanRef.current);\n\t\t\t}\n\t\t}, [onInfiniteScroll]);\n\n\t\tuseEffect(() => {\n\t\t\tsetupObserver();\n\t\t\treturn () => {\n\t\t\t\tif (observer.current) {\n\t\t\t\t\tobserver.current.disconnect();\n\t\t\t\t}\n\t\t\t};\n\t\t}, [setupObserver, options]);\n\n\t\tconst handleDragStart = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\tsetDraggedIndex(index);\n\t\t\t\te.dataTransfer.effectAllowed = 'move';\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDragOver = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\te.preventDefault();\n\t\t\t\te.dataTransfer.dropEffect = 'move';\n\t\t\t\tsetDraggedOverIndex(index);\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDrop = useCallback(\n\t\t\t(dropIndex: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable \|\| draggedIndex === null) return;\n\t\t\t\te.preventDefault();\n\n\t\t\t\tif (draggedIndex !== dropIndex) {\n\t\t\t\t\tconst newOptions = [...options];\n\t\t\t\t\tconst [item] = newOptions.splice(draggedIndex, 1);\n\t\t\t\t\tnewOptions.splice(dropIndex, 0, item);\n\t\t\t\t\tonOptionsReorder?.(newOptions);\n\t\t\t\t}\n\n\t\t\t\tsetDraggedIndex(null);\n\t\t\t\tsetDraggedOverIndex(null);\n\t\t\t},\n\t\t\t[isDraggable, draggedIndex, options, onOptionsReorder],\n\t\t);\n\n\t\tconst handleDragEnd = useCallback(() => {\n\t\t\tsetDraggedIndex(null);\n\t\t\tsetDraggedOverIndex(null);\n\t\t}, []);\n\n\t\t// Calculate flat indices for all options\n\t\tconst flatIndices = new Map<SingleOption, number>();\n\t\tlet currentIndex = -1;\n\t\toptions.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((menuOption) => {\n\t\t\t\t\tif (!menuOption.disabled) {\n\t\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\t\tflatIndices.set(menuOption, currentIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\tif (!singleOption.disabled) {\n\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\tflatIndices.set(singleOption, currentIndex);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{options.map((option, i) => {\n\t\t\t\t\tconst last = i === options.length - 1;\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = option as GroupedOption;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div key={i} style={{ marginTop: version === '2.0' ? 2 : 0 }}>\n\t\t\t\t\t\t\t\t<StyledGroupedLabel version={version}>\n\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon ? (\n\t\t\t\t\t\t\t\t\t\t<span style={{ marginRight: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{groupedOption.label}\n\t\t\t\t\t\t\t\t</StyledGroupedLabel>\n\t\t\t\t\t\t\t\t{groupedOption.options.map((menuOption, idx) => {\n\t\t\t\t\t\t\t\t\tconst currentFlatIndex = flatIndices.get(menuOption);\n\t\t\t\t\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !menuOption.disabled;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\t\tlast={idx === groupedOption.options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\t\t\toption={menuOption}\n\t\t\t\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\t\t\t\tkey={`${i}-${idx}`}\n\t\t\t\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\t\t\t\tisDraggable={false}\n\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={\n\t\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) ref.current[i] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\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})}\n\t\t\t\t\t\t\t\t{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tconst currentFlatIndex = flatIndices.get(singleOption);\n\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !singleOption.disabled;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={i}>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\tlast={last}\n\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\toption={singleOption}\n\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\tkey={singleOption.value}\n\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\t\tonDragStart={handleDragStart(i)}\n\t\t\t\t\t\t\t\tonDragOver={handleDragOver(i)}\n\t\t\t\t\t\t\t\tonDrop={handleDrop(i)}\n\t\t\t\t\t\t\t\tonDragEnd={handleDragEnd}\n\t\t\t\t\t\t\t\tisDraggedOver={draggedOverIndex === i}\n\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current && el) {\n\t\t\t\t\t\t\t\t\t\tref.current[i] = el;\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/>\n\t\t\t\t\t\t\t{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</>\n\t\t);\n\t},\n);\n"],"names":["MenuList","forwardRef","options","isMultiSelect","showDescription","onSelect","version","onInfiniteScroll","onDropdownItemClick","useDefaultCursor","focusedIndex","isDraggable","onOptionsReorder","showCheckboxForCustomElement","ref","observer","useRef","spanRef","draggedIndex","setDraggedIndex","useState","draggedOverIndex","setDraggedOverIndex","setupObserver","useCallback","entries","useEffect","handleDragStart","index","handleDragOver","handleDrop","dropIndex","newOptions","item","handleDragEnd","flatIndices","currentIndex","option","menuOption","singleOption","jsx","Fragment","i","last","groupedOption","jsxs","StyledGroupedLabel","idx","currentFlatIndex","isFocused","MenuItem","el"],"mappings":"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"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js CHANGED Viewed

@@ -1,11 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),n=require("../../../../TypographyStyle.js"),o=require("../../../../../constants/Theme.js"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(r),a=t.default.div`
-	height: 1px;
-	background-color: ${o.COLORS.stroke.primary};
-	margin: 4px 8px;
-`,i=t.default(n.BodyCaption)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),r=require("../../../../TypographyStyle.js"),o=require("../../../../../constants/Theme.js"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=n(t),d=a.default(r.BodyCaption)`
 	padding: 8px ${e=>e.version==="2.0"?12:16}px;
 	color: ${e=>e.version==="2.0"?o.COLORS.content.placeholder:o.COLORS.content.secondary};
 	background-color: ${e=>e.version==="2.0"?o.COLORS.surface.standard:o.COLORS.background.base};
 	font-size: ${e=>e.version==="2.0"?10:12}px;
-`;exports.Divider=a;exports.StyledGroupedLabel=i;
+`;exports.StyledGroupedLabel=d;
 //# sourceMappingURL=MenuList.styled.js.map

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuList.styled.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const ~~Divider = styled.div`\n\theight: 1px;\n\tbackground-color: ${COLORS.stroke.primary};\n\tmargin: 4px 8px;\n`;\n\nexport const~~ StyledGroupedLabel = styled(BodyCaption)<{\n\tversion?: '1.0' \| '2.0' ~~\| '3.0'~~;\n}>`\n\tpadding: 8px ${(props) => (props.version === '2.0' ? 12 : 16)}px;\n\tcolor: ${(props) =>\n\t\tprops.version === '2.0'\n\t\t\t? COLORS.content.placeholder\n\t\t\t: COLORS.content.secondary};\n\tbackground-color: ${(props) =>\n\t\tprops.version === '2.0' ? COLORS.surface.standard : COLORS.background.base};\n\tfont-size: ${(props) => (props.version === '2.0' ? 10 : 12)}px;\n`;\n"],"names":["~~Divider~~","styled","~~COLORS~~","~~StyledGroupedLabel~~","~~BodyCaption~~"~~,"props"~~],"mappings":"+QAIaA,~~EAAUC~~,EAAAA,~~QAAO;AAAA;AAAA~~,~~qBAETC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAI7BC,EAAqBF,EAAAA,QAAOG,~~aAAW;AAAA,gBAGnCC,GAAWA,EAAM,UAAY,MAAQ,GAAK,EAAG;AAAA,UACnDA,GACTA,EAAM,UAAY,~~MACfH~~,SAAO,QAAQ,YACfA,SAAO,QAAQ,SAAS;AAAA,~~qBACPG~~,GACpBA,EAAM,UAAY,~~MAAQH~~,SAAO,QAAQ,SAAWA,SAAO,WAAW,IAAI;AAAA,~~cAC7DG~~,GAAWA,EAAM,UAAY,MAAQ,GAAK,EAAG;AAAA"}
1	+ {"version":3,"file":"MenuList.styled.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const StyledGroupedLabel = styled(BodyCaption)<{\n\tversion?: '1.0' \| '2.0';\n}>`\n\tpadding: 8px ${(props) => (props.version === '2.0' ? 12 : 16)}px;\n\tcolor: ${(props) =>\n\t\tprops.version === '2.0'\n\t\t\t? COLORS.content.placeholder\n\t\t\t: COLORS.content.secondary};\n\tbackground-color: ${(props) =>\n\t\tprops.version === '2.0' ? COLORS.surface.standard : COLORS.background.base};\n\tfont-size: ${(props) => (props.version === '2.0' ? 10 : 12)}px;\n`;\n"],"names":["StyledGroupedLabel","styled","BodyCaption","props","COLORS"],"mappings":"+QAIaA,EAAqBC,EAAAA,QAAOC,aAAW;AAAA,gBAGnCC,GAAWA,EAAM,UAAY,MAAQ,GAAK,EAAG;AAAA,UACnDA,GACTA,EAAM,UAAY,MACfC,SAAO,QAAQ,YACfA,SAAO,QAAQ,SAAS;AAAA,qBACPD,GACpBA,EAAM,UAAY,MAAQC,SAAO,QAAQ,SAAWA,SAAO,WAAW,IAAI;AAAA,cAC7DD,GAAWA,EAAM,UAAY,MAAQ,GAAK,EAAG;AAAA"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("react"),h=require("../../../../list-item/ListItem.js"),S=require("../../../../checkBox/CheckBox.js"),A=({options:n,onSelect:c,version:r,checkboxActiveColor:u,brandSelectedRow:f})=>{const[e,s]=d.useState("notSelected");function o(){e==="partiallySelected"&&c("notSelected"),e==="selectAll"&&c("notSelected"),e==="notSelected"&&c("selectAll")}return d.useEffect(()=>{const l=[];n.filter(t=>!t.disabled).forEach(t=>{t.options?t.options.filter(i=>!i.disabled).forEach(i=>{l.push(i.selected||!1)}):l.push(t.selected||!1)}),l.every(Boolean)?s("selectAll"):l.filter(Boolean).length>0?s("partiallySelected"):s("notSelected")},[n]),a.jsx(h.ListItem,{version:r,brandSelectedRow:f,onClick:l=>{l.preventDefault(),o()},listItem:{label:"Select All",value:"All"},leadingIcon:a.jsx("div",{style:{width:18,height:18},children:a.jsx(S.CheckBox,{size:r==="2.0"?"SMALL":"DEFAULT",isChecked:e==="selectAll"||e==="partiallySelected",isPartiallyChecked:e==="partiallySelected",onValueChange:o,activeColor:u})}),variant:"default"})};exports.SelectAllMenu=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),u=require("../../../../list-item/ListItem.js"),f=require("../../../../checkBox/CheckBox.js"),h=({options:n,onSelect:c,version:r})=>{const[e,s]=o.useState("notSelected");function d(){e==="partiallySelected"&&c("notSelected"),e==="selectAll"&&c("notSelected"),e==="notSelected"&&c("selectAll")}return o.useEffect(()=>{const l=[];n.filter(t=>!t.disabled).forEach(t=>{t.options?t.options.filter(i=>!i.disabled).forEach(i=>{l.push(i.selected||!1)}):l.push(t.selected||!1)}),l.every(Boolean)?s("selectAll"):l.filter(Boolean).length>0?s("partiallySelected"):s("notSelected")},[n]),a.jsx(u.ListItem,{version:r,onClick:l=>{l.preventDefault(),d()},listItem:{label:"Select All",value:"All"},leadingIcon:a.jsx("div",{style:{width:18,height:18},children:a.jsx(f.CheckBox,{size:r==="2.0"?"SMALL":"DEFAULT",isChecked:e==="selectAll"||e==="partiallySelected",isPartiallyChecked:e==="partiallySelected",onValueChange:d})}),variant:"default"})};exports.SelectAllMenu=h;
 //# sourceMappingURL=SelectAllMenu.js.map

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectAllMenu.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { DropdownOption, GroupedOption, SingleOption } from '../../../type';\n\nexport type SelectAllCheckboxState =\n\t\| 'notSelected'\n\t\| 'selectAll'\n\t\| 'partiallySelected';\n\nexport const SelectAllMenu: React.FC<{\n\toptions: DropdownOption[];\n\tonSelect: (newState: SelectAllCheckboxState) => void;\n\tversion?: '1.0' \| '2.0' ~~\| '3.0'~~;\n~~\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n~~}> = ({~~\n\toptions,\n\tonSelect,\n\tversion,\n\tcheckboxActiveColor,\n\tbrandSelectedRow,\n~~}) => {\n\tconst [checkStatus, setCheckStatus] =\n\t\tuseState<SelectAllCheckboxState>('notSelected');\n\n\tfunction onCheckHandler() {\n\t\tif (checkStatus === 'partiallySelected') {\n\t\t\tonSelect('notSelected');\n\t\t}\n\n\t\tif (checkStatus === 'selectAll') {\n\t\t\tonSelect('notSelected');\n\t\t}\n\n\t\tif (checkStatus === 'notSelected') {\n\t\t\tonSelect('selectAll');\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tconst allOptions: boolean[] = [];\n\n\t\toptions\n\t\t\t.filter((option) => !(option as SingleOption).disabled)\n\t\t\t.forEach((option) => {\n\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t(option as GroupedOption).options\n\t\t\t\t\t\t.filter((op) => !op.disabled)\n\t\t\t\t\t\t.forEach((nestedOption) => {\n\t\t\t\t\t\t\tallOptions.push(nestedOption.selected \|\| false);\n\t\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tallOptions.push((option as SingleOption).selected \|\| false);\n\t\t\t\t}\n\t\t\t});\n\n\t\tif (allOptions.every(Boolean)) {\n\t\t\tsetCheckStatus('selectAll');\n\t\t} else if (allOptions.filter(Boolean).length > 0) {\n\t\t\tsetCheckStatus('partiallySelected');\n\t\t} else {\n\t\t\tsetCheckStatus('notSelected');\n\t\t}\n\t}, [options]);\n\n\treturn (\n\t\t<ListItem\n\t\t\tversion={version}\n\t\t\~~tbrandSelectedRow={brandSelectedRow}\n\t\t\~~tonClick={(e) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tonCheckHandler();\n\t\t\t}}\n\t\t\tlistItem={{\n\t\t\t\tlabel: 'Select All',\n\t\t\t\tvalue: 'All',\n\t\t\t}}\n\t\t\tleadingIcon={\n\t\t\t\t<div style={{ width: 18, height: 18 }}>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\tisChecked={\n\t\t\t\t\t\t\tcheckStatus === 'selectAll' \|\| checkStatus === 'partiallySelected'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisPartiallyChecked={checkStatus === 'partiallySelected'}\n\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t~~\tactiveColor={checkboxActiveColor}\n\t\t\t\t\t~~/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\tvariant={'default'}\n\t\t/>\n\t);\n};\n"],"names":["SelectAllMenu","options","onSelect","version","~~checkboxActiveColor","brandSelectedRow","~~checkStatus","setCheckStatus","useState","onCheckHandler","useEffect","allOptions","option","op","nestedOption","jsx","ListItem","e","CheckBox"],"mappings":"qOAUaA,~~EAMR~~,CAAC,~~CACL~~,QAAAC,~~EACA~~,SAAAC,~~EACA~~,QAAAC,~~EACA~~,~~oBAAAC~~,~~EACA,iBAAAC,CACD,IAAM,CACL,~~KAAM,CAACC,EAAaC,CAAc,EACjCC,EAAAA,SAAiC,aAAa,EAE/C,SAASC,GAAiB,CACrBH,IAAgB,~~qBACnBJ~~,EAAS,aAAa,~~EAGnBI~~,IAAgB,~~aACnBJ~~,EAAS,aAAa,~~EAGnBI~~,IAAgB,~~eACnBJ~~,EAAS,WAAW,CAEtB,~~CAEAQ~~,OAAAA,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAwB,CAAA,~~EAE9BV~~,EACE,~~OAAQW~~,GAAW,CAAEA,EAAwB,QAAQ,EACrD,QAASA,GAAW,CACfA,EAAyB,QAC5BA,EAAyB,QACxB,OAAQC,GAAO,CAACA,EAAG,QAAQ,EAC3B,QAASC,GAAiB,CAC1BH,EAAW,KAAKG,EAAa,UAAY,EAAK,CAC/C,CAAC,EAEFH,EAAW,KAAMC,EAAwB,UAAY,EAAK,CAE5D,CAAC,EAEED,EAAW,MAAM,OAAO,EAC3BJ,EAAe,WAAW,EAChBI,EAAW,OAAO,OAAO,EAAE,OAAS,EAC9CJ,EAAe,mBAAmB,EAElCA,EAAe,aAAa,CAE9B,EAAG,~~CAACN~~,CAAO,CAAC,~~EAGXc~~,EAAAA,IAACC,EAAAA,SAAA,CACA,~~QAAAb~~,EACA,~~iBAAAE,EACA,~~QAAUY,GAAM,CACfA,EAAE,eAAA,EACFR,EAAA,CACD,EACA,SAAU,CACT,MAAO,aACP,MAAO,KAAA,EAER,kBACE,MAAA,CAAI,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EAChC,SAAAM,EAAAA,IAACG,EAAAA,SAAA,CACA,~~KAAMf~~,IAAY,MAAQ,QAAU,UACpC,~~UACCG~~,IAAgB,aAAeA,IAAgB,oBAEhD,mBAAoBA,IAAgB,oBACpC,cAAeG,~~EACf,YAAaL,~~CAAA,CAAA,~~EAEf~~,EAED,QAAS,SAAA,CAAA,CAGZ"}
1	+ {"version":3,"file":"SelectAllMenu.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { DropdownOption, GroupedOption, SingleOption } from '../../../type';\n\nexport type SelectAllCheckboxState =\n\t\| 'notSelected'\n\t\| 'selectAll'\n\t\| 'partiallySelected';\n\nexport const SelectAllMenu: React.FC<{\n\toptions: DropdownOption[];\n\tonSelect: (newState: SelectAllCheckboxState) => void;\n\tversion?: '1.0' \| '2.0';\n}> = ({ options, onSelect, version }) => {\n\tconst [checkStatus, setCheckStatus] =\n\t\tuseState<SelectAllCheckboxState>('notSelected');\n\n\tfunction onCheckHandler() {\n\t\tif (checkStatus === 'partiallySelected') {\n\t\t\tonSelect('notSelected');\n\t\t}\n\n\t\tif (checkStatus === 'selectAll') {\n\t\t\tonSelect('notSelected');\n\t\t}\n\n\t\tif (checkStatus === 'notSelected') {\n\t\t\tonSelect('selectAll');\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tconst allOptions: boolean[] = [];\n\n\t\toptions\n\t\t\t.filter((option) => !(option as SingleOption).disabled)\n\t\t\t.forEach((option) => {\n\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t(option as GroupedOption).options\n\t\t\t\t\t\t.filter((op) => !op.disabled)\n\t\t\t\t\t\t.forEach((nestedOption) => {\n\t\t\t\t\t\t\tallOptions.push(nestedOption.selected \|\| false);\n\t\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tallOptions.push((option as SingleOption).selected \|\| false);\n\t\t\t\t}\n\t\t\t});\n\n\t\tif (allOptions.every(Boolean)) {\n\t\t\tsetCheckStatus('selectAll');\n\t\t} else if (allOptions.filter(Boolean).length > 0) {\n\t\t\tsetCheckStatus('partiallySelected');\n\t\t} else {\n\t\t\tsetCheckStatus('notSelected');\n\t\t}\n\t}, [options]);\n\n\treturn (\n\t\t<ListItem\n\t\t\tversion={version}\n\t\t\tonClick={(e) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tonCheckHandler();\n\t\t\t}}\n\t\t\tlistItem={{\n\t\t\t\tlabel: 'Select All',\n\t\t\t\tvalue: 'All',\n\t\t\t}}\n\t\t\tleadingIcon={\n\t\t\t\t<div style={{ width: 18, height: 18 }}>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\tisChecked={\n\t\t\t\t\t\t\tcheckStatus === 'selectAll' \|\| checkStatus === 'partiallySelected'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisPartiallyChecked={checkStatus === 'partiallySelected'}\n\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\tvariant={'default'}\n\t\t/>\n\t);\n};\n"],"names":["SelectAllMenu","options","onSelect","version","checkStatus","setCheckStatus","useState","onCheckHandler","useEffect","allOptions","option","op","nestedOption","jsx","ListItem","e","CheckBox"],"mappings":"qOAUaA,EAIR,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,QAAAC,KAAc,CACxC,KAAM,CAACC,EAAaC,CAAc,EACjCC,EAAAA,SAAiC,aAAa,EAE/C,SAASC,GAAiB,CACrBH,IAAgB,qBACnBF,EAAS,aAAa,EAGnBE,IAAgB,aACnBF,EAAS,aAAa,EAGnBE,IAAgB,eACnBF,EAAS,WAAW,CAEtB,CAEAM,OAAAA,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAwB,CAAA,EAE9BR,EACE,OAAQS,GAAW,CAAEA,EAAwB,QAAQ,EACrD,QAASA,GAAW,CACfA,EAAyB,QAC5BA,EAAyB,QACxB,OAAQC,GAAO,CAACA,EAAG,QAAQ,EAC3B,QAASC,GAAiB,CAC1BH,EAAW,KAAKG,EAAa,UAAY,EAAK,CAC/C,CAAC,EAEFH,EAAW,KAAMC,EAAwB,UAAY,EAAK,CAE5D,CAAC,EAEED,EAAW,MAAM,OAAO,EAC3BJ,EAAe,WAAW,EAChBI,EAAW,OAAO,OAAO,EAAE,OAAS,EAC9CJ,EAAe,mBAAmB,EAElCA,EAAe,aAAa,CAE9B,EAAG,CAACJ,CAAO,CAAC,EAGXY,EAAAA,IAACC,EAAAA,SAAA,CACA,QAAAX,EACA,QAAUY,GAAM,CACfA,EAAE,eAAA,EACFR,EAAA,CACD,EACA,SAAU,CACT,MAAO,aACP,MAAO,KAAA,EAER,kBACE,MAAA,CAAI,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EAChC,SAAAM,EAAAA,IAACG,EAAAA,SAAA,CACA,KAAMb,IAAY,MAAQ,QAAU,UACpC,UACCC,IAAgB,aAAeA,IAAgB,oBAEhD,mBAAoBA,IAAgB,oBACpC,cAAeG,CAAA,CAAA,EAEjB,EAED,QAAS,SAAA,CAAA,CAGZ"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),i=require("../../../../input/context/InputStyleProvider.js"),r=require("../../../../../constants/Theme.js"),d=require("../../../../../assets/icons/cross.svg.js"),p=require("../../../../../assets/icons/search.svg.js"),h=require("../../../../input/Input.js"),x=require("../../../../icon-button/IconButton.js"),g=({onSearch:o,version:e})=>{const[l,c]=a.useState(""),[s,n]=a.useState(!1);return t.jsx(i.InputStyleContext.Provider,{value:{InputWrapper:{borderRadius:0,border:0,borderBottom:`${e==="2.0"||e==="3.0"?.5:1}px solid ${r.COLORS.stroke.primary}`,padding:`${e==="2.0"||e==="3.0"?"6px 8px":"14px 16px"}`},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}},children:t.jsx(h.Input,{noKeyDownChange:!0,skipFocus:!0,placeholder:"Search",variant:e==="2.0"||e==="3.0"?"small":"default",leftIcon:{icon:()=>t.jsx(p.default,{width:e==="2.0"||e==="3.0"?18:24,height:e==="2.0"||e==="3.0"?18:24,color:r.COLORS.content.placeholder})},rightIcon:{icon:()=>l?t.jsx(x.IconButton,{onClick:()=>{n(!0),o(""),c("")},Icon:d.default,width:e==="2.0"||e==="3.0"?18:24,height:e==="2.0"||e==="3.0"?18:24,iconColor:r.COLORS.content.placeholder}):t.jsx(t.Fragment,{})},reset:s,onChangeText:u=>{n(!1),c(u),o(u)}})})};exports.SearchBox=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),l=require("../../../../input/context/InputStyleProvider.js"),r=require("../../../../../constants/Theme.js"),d=require("../../../../../assets/icons/cross.svg.js"),p=require("../../../../../assets/icons/search.svg.js"),h=require("../../../../input/Input.js"),x=require("../../../../icon-button/IconButton.js"),g=({onSearch:o,version:e})=>{const[s,n]=a.useState(""),[i,c]=a.useState(!1);return t.jsx(l.InputStyleContext.Provider,{value:{InputWrapper:{borderRadius:0,border:0,borderBottom:`${e==="2.0"?.5:1}px solid ${r.COLORS.stroke.primary}`,padding:`${e==="2.0"?"6px 8px":"14px 16px"}`},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}},children:t.jsx(h.Input,{noKeyDownChange:!0,skipFocus:!0,placeholder:"Search",variant:e==="2.0"?"small":"default",leftIcon:{icon:()=>t.jsx(p.default,{width:e==="2.0"?18:24,height:e==="2.0"?18:24,color:r.COLORS.content.placeholder})},rightIcon:{icon:()=>s?t.jsx(x.IconButton,{onClick:()=>{c(!0),o(""),n("")},Icon:d.default,width:e==="2.0"?18:24,height:e==="2.0"?18:24,iconColor:r.COLORS.content.placeholder}):t.jsx(t.Fragment,{})},reset:i,onChangeText:u=>{c(!1),n(u),o(u)}})})};exports.SearchBox=g;
 //# sourceMappingURL=SearchBox.js.map

package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBox.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { IconButton } from '@src/components/icon-button';\nimport { Input } from '@src/components/input';\nimport { InputStyleContext } from '@src/components/input/context/InputStyleProvider';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../../../../assets/icons/cross.svg';\nimport SearchIcon from '../../../../../assets/icons/search.svg';\n\nexport const SearchBox: React.FC<{\n\tonSearch: (searchString: string) => void;\n\tversion?: '1.0' \| '2.0' ~~\| '3.0'~~;\n}> = ({ onSearch, version }) => {\n\tconst [val, setVal] = useState('');\n\tconst [reset, setReset] = useState(false);\n\n\treturn (\n\t\t<InputStyleContext.Provider\n\t\t\tvalue={{\n\t\t\t\tInputWrapper: {\n\t\t\t\t\tborderRadius: 0,\n\t\t\t\t\tborder: 0,\n\t\t\t\t\tborderBottom: `${~~\n\t\t\t\t\t\tversion~~ === '2.0' ~~\|\| version === '3.0'~~ ? 0.5 : 1\n\t\t\t\t\t~~}px solid ${COLORS~~.stroke.primary~~}`,\~~n\t\t\t\t\~~tpadding: `${\~~n\t\t\t\t\~~t\tversion~~ ~~=== '2.0' \|\|~~ version === '3.0' ? '6px 8px' : '14px 16px'~~\n\t\t\t\t\t~~}`,\n\t\t\t\t},\n\t\t\t\tIconHolder: {\n\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t},\n\t\t\t\tinput: {\n\t\t\t\t\tmarginLeft: 4,\n\t\t\t\t\tminHeight: '100%',\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tnoKeyDownChange\n\t\t\t\tskipFocus={true}\n\t\t\t\tplaceholder=\"Search\"\n\t\t\t\tvariant={version === '2.0' ~~\|\| version === '3.0'~~ ? 'small' : 'default'}\n\t\t\t\tleftIcon={{\n\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\t\twidth={version === '2.0' ~~\|\| version === '3.0'~~ ? 18 : 24}\n\t\t\t\t\t\t\theight={version === '2.0' ~~\|\| version === '3.0'~~ ? 18 : 24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t\trightIcon={{\n\t\t\t\t\ticon: () =>\n\t\t\t\t\t\t!val ? (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetReset(true);\n\t\t\t\t\t\t\t\t\tonSearch('');\n\t\t\t\t\t\t\t\t\tsetVal('');\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tIcon={CrossIcon}\n\t\t\t\t\t\t\t\twidth={version === '2.0' ~~\|\| version === '3.0'~~ ? 18 : 24}\n\t\t\t\t\t\t\t\theight={version === '2.0' ~~\|\| version === '3.0'~~ ? 18 : 24}\n\t\t\t\t\t\t\t\ticonColor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t\treset={reset}\n\t\t\t\tonChangeText={(text) => {\n\t\t\t\t\tsetReset(false);\n\t\t\t\t\tsetVal(text);\n\t\t\t\t\tonSearch(text);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</InputStyleContext.Provider>\n\t);\n};\n"],"names":["SearchBox","onSearch","version","val","setVal","useState","reset","setReset","jsx","InputStyleContext","COLORS","Input","SearchIcon","IconButton","CrossIcon","text"],"mappings":"4bAQaA,EAGR,CAAC,CAAE,SAAAC,EAAU,QAAAC,KAAc,CAC/B,KAAM,CAACC,EAAKC,CAAM,EAAIC,EAAAA,SAAS,EAAE,EAC3B,CAACC,EAAOC,CAAQ,EAAIF,EAAAA,SAAS,EAAK,EAExC,OACCG,EAAAA,IAACC,EAAAA,kBAAkB,SAAlB,CACA,MAAO,CACN,aAAc,CACb,aAAc,EACd,OAAQ,EACR,aAAc,~~GACbP~~,IAAY,~~OAASA,IAAY,~~MAAQ,GAAM,~~CAChD~~,~~YAAYQ~~,EAAAA,OAAO,OAAO,~~OAAO~~,~~GACjC~~,QAAS,~~GACRR~~,IAAY,~~OAASA,IAAY,~~MAAQ,UAAY,~~WACtD~~,EAAA,~~EAED~~,WAAY,CACX,WAAY,CAAA,EAEb,MAAO,CACN,WAAY,EACZ,UAAW,MAAA,CACZ,EAGD,SAAAM,EAAAA,IAACG,EAAAA,MAAA,CACA,gBAAe,GACf,UAAW,GACX,YAAY,SACZ,QAAST,IAAY,~~OAASA,IAAY,~~MAAQ,QAAU,~~UAC5D~~,SAAU,CACT,KAAM,IACLM,EAAAA,IAACI,EAAAA,QAAA,CACA,MAAOV,IAAY,~~OAASA,IAAY,~~MAAQ,GAAK,~~GACrD~~,OAAQA,IAAY,~~OAASA,IAAY,~~MAAQ,GAAK,~~GACtD~~,MAAOQ,EAAAA,OAAO,QAAQ,WAAA,CAAA,CACvB,EAGF,UAAW,CACV,KAAM,IACJP,EAGAK,EAAAA,IAACK,EAAAA,WAAA,CACA,QAAS,IAAM,CACdN,EAAS,EAAI,EACbN,EAAS,EAAE,EACXG,EAAO,EAAE,CACV,EACA,KAAMU,EAAAA,QACN,MAAOZ,IAAY,~~OAASA,IAAY,~~MAAQ,GAAK,~~GACrD~~,OAAQA,IAAY,~~OAASA,IAAY,~~MAAQ,GAAK,~~GACtD~~,UAAWQ,EAAAA,OAAO,QAAQ,WAAA,CAAA,qBAXzB,CAYF,EAGH,MAAAJ,EACA,aAAeS,GAAS,CACvBR,EAAS,EAAK,EACdH,EAAOW,CAAI,EACXd,EAASc,CAAI,CACd,CAAA,CAAA,CACD,CAAA,CAGH"}
1	+ {"version":3,"file":"SearchBox.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { IconButton } from '@src/components/icon-button';\nimport { Input } from '@src/components/input';\nimport { InputStyleContext } from '@src/components/input/context/InputStyleProvider';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../../../../assets/icons/cross.svg';\nimport SearchIcon from '../../../../../assets/icons/search.svg';\n\nexport const SearchBox: React.FC<{\n\tonSearch: (searchString: string) => void;\n\tversion?: '1.0' \| '2.0';\n}> = ({ onSearch, version }) => {\n\tconst [val, setVal] = useState('');\n\tconst [reset, setReset] = useState(false);\n\n\treturn (\n\t\t<InputStyleContext.Provider\n\t\t\tvalue={{\n\t\t\t\tInputWrapper: {\n\t\t\t\t\tborderRadius: 0,\n\t\t\t\t\tborder: 0,\n\t\t\t\t\tborderBottom: `${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\t\t\t\tCOLORS.stroke.primary\n\t\t\t\t\t}`,\n\t\t\t\t\tpadding: `${version === '2.0' ? '6px 8px' : '14px 16px'}`,\n\t\t\t\t},\n\t\t\t\tIconHolder: {\n\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t},\n\t\t\t\tinput: {\n\t\t\t\t\tmarginLeft: 4,\n\t\t\t\t\tminHeight: '100%',\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tnoKeyDownChange\n\t\t\t\tskipFocus={true}\n\t\t\t\tplaceholder=\"Search\"\n\t\t\t\tvariant={version === '2.0' ? 'small' : 'default'}\n\t\t\t\tleftIcon={{\n\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\t\twidth={version === '2.0' ? 18 : 24}\n\t\t\t\t\t\t\theight={version === '2.0' ? 18 : 24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t\trightIcon={{\n\t\t\t\t\ticon: () =>\n\t\t\t\t\t\t!val ? (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetReset(true);\n\t\t\t\t\t\t\t\t\tonSearch('');\n\t\t\t\t\t\t\t\t\tsetVal('');\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tIcon={CrossIcon}\n\t\t\t\t\t\t\t\twidth={version === '2.0' ? 18 : 24}\n\t\t\t\t\t\t\t\theight={version === '2.0' ? 18 : 24}\n\t\t\t\t\t\t\t\ticonColor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t\treset={reset}\n\t\t\t\tonChangeText={(text) => {\n\t\t\t\t\tsetReset(false);\n\t\t\t\t\tsetVal(text);\n\t\t\t\t\tonSearch(text);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</InputStyleContext.Provider>\n\t);\n};\n"],"names":["SearchBox","onSearch","version","val","setVal","useState","reset","setReset","jsx","InputStyleContext","COLORS","Input","SearchIcon","IconButton","CrossIcon","text"],"mappings":"4bAQaA,EAGR,CAAC,CAAE,SAAAC,EAAU,QAAAC,KAAc,CAC/B,KAAM,CAACC,EAAKC,CAAM,EAAIC,EAAAA,SAAS,EAAE,EAC3B,CAACC,EAAOC,CAAQ,EAAIF,EAAAA,SAAS,EAAK,EAExC,OACCG,EAAAA,IAACC,EAAAA,kBAAkB,SAAlB,CACA,MAAO,CACN,aAAc,CACb,aAAc,EACd,OAAQ,EACR,aAAc,GAAGP,IAAY,MAAQ,GAAM,CAAC,YAC3CQ,EAAAA,OAAO,OAAO,OACf,GACA,QAAS,GAAGR,IAAY,MAAQ,UAAY,WAAW,EAAA,EAExD,WAAY,CACX,WAAY,CAAA,EAEb,MAAO,CACN,WAAY,EACZ,UAAW,MAAA,CACZ,EAGD,SAAAM,EAAAA,IAACG,EAAAA,MAAA,CACA,gBAAe,GACf,UAAW,GACX,YAAY,SACZ,QAAST,IAAY,MAAQ,QAAU,UACvC,SAAU,CACT,KAAM,IACLM,EAAAA,IAACI,EAAAA,QAAA,CACA,MAAOV,IAAY,MAAQ,GAAK,GAChC,OAAQA,IAAY,MAAQ,GAAK,GACjC,MAAOQ,EAAAA,OAAO,QAAQ,WAAA,CAAA,CACvB,EAGF,UAAW,CACV,KAAM,IACJP,EAGAK,EAAAA,IAACK,EAAAA,WAAA,CACA,QAAS,IAAM,CACdN,EAAS,EAAI,EACbN,EAAS,EAAE,EACXG,EAAO,EAAE,CACV,EACA,KAAMU,EAAAA,QACN,MAAOZ,IAAY,MAAQ,GAAK,GAChC,OAAQA,IAAY,MAAQ,GAAK,GACjC,UAAWQ,EAAAA,OAAO,QAAQ,WAAA,CAAA,qBAXzB,CAYF,EAGH,MAAAJ,EACA,aAAeS,GAAS,CACvBR,EAAS,EAAK,EACdH,EAAOW,CAAI,EACXd,EAASc,CAAI,CACd,CAAA,CAAA,CACD,CAAA,CAGH"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("../../../../zeroState/ZeroState.js"),u=require("../../../../../constants/Theme.js"),d=({searchedString:i,height:o,isLoading:n,containerWidth:l,errorMessage:r,onRetry:s,version:c})=>{const e=!!r&&!n;return c==="3.0"&&!e&&!n?t.jsx("div",{style:{height:o,display:"flex",alignItems:"center",justifyContent:"center"},children:t.jsx("span",{style:{fontFamily:"Inter",fontSize:"12px",fontWeight:400,lineHeight:"16px",color:u.COLORS.content.placeholder,whiteSpace:"nowrap"},children:"No results found!"})}):t.jsx("div",{style:{height:o,display:"flex",alignItems:"center"},children:t.jsx(a.ZeroState,{isLoading:n,title:e?"Failed to load options":"No results found",subTitle:e?r:`Sorry we could not find any results for "${i??""}"`,actionButton:e?{buttonText:"Try again",buttonType:"text",onClick:s}:void 0,containerWidth:l})})};exports.SearchZeroState=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../../../zeroState/ZeroState.js"),u=({searchedString:n,height:i,isLoading:e,containerWidth:l,errorMessage:o,onRetry:s})=>{const t=!!o&&!e;return r.jsx("div",{style:{height:i,display:"flex",alignItems:"center"},children:r.jsx(a.ZeroState,{isLoading:e,title:t?"Failed to load options":"No results found",subTitle:t?o:`Sorry we could not find any results for "${n??""}"`,actionButton:t?{buttonText:"Try again",buttonType:"text",onClick:s}:void 0,containerWidth:l})})};exports.SearchZeroState=u;
 //# sourceMappingURL=SearchZeroState.js.map

package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchZeroState.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.tsx"],"sourcesContent":["import React from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\~~nimport { COLORS } from '@src/constants/Theme';\~~n\nexport const SearchZeroState: React.FC<{\n\tsearchedString: string;\n\theight: number;\n\tisLoading?: boolean;\n\tcontainerWidth?: string;\n\terrorMessage?: string;\n\tonRetry?: () => void;\n~~\tversion?: '1.0' \| '2.0' \| '3.0';\n~~}> = ({\n\tsearchedString,\n\theight,\n\tisLoading,\n\tcontainerWidth,\n\terrorMessage,\n\tonRetry,\n~~\tversion,\n~~}) => {\n\tconst isErrorState = !!errorMessage && !isLoading;\n\n\~~tif (version === '3.0' && !isErrorState && !isLoading) {\n\t\~~treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: height,\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\talignItems: 'center',\n\t\t\t~~\t\tjustifyContent: 'center',\n\t\t\t\t~~}}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\tfontWeight: 400,\n\t\t\t\t\t\tlineHeight: '16px',\n\t\t\t\t\t\tcolor: COLORS.content.placeholder,\n\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tNo results found!\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\theight: height,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t}}\n\t\t>\n\t\t\t<ZeroState\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={isErrorState ? 'Failed to load options' : 'No results found'}\n\t\t\t\tsubTitle={\n\t\t\t\t\tisErrorState\n\t\t\t\t\t\t? errorMessage\n\t\t\t\t\t\t: `Sorry we could not find any results for \"${\n\t\t\t\t\t\t\t\tsearchedString ?? ''\n\t\t\t\t\t\t }\"`\n\t\t\t\t}\n\t\t\t\tactionButton={\n\t\t\t\t\tisErrorState\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tbuttonText: 'Try again',\n\t\t\t\t\t\t\t\tbuttonType: 'text',\n\t\t\t\t\t\t\t\tonClick: onRetry,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tcontainerWidth={containerWidth}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n"],"names":["SearchZeroState","searchedString","height","isLoading","containerWidth","errorMessage","onRetry","~~version","~~isErrorState","jsx","~~COLORS","~~ZeroState"],"mappings":"~~oNAIaA~~,~~EAQR~~,CAAC,CACL,eAAAC,EACA,OAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,QAAAC,~~EACA,QAAAC,~~CACD,IAAM,CACL,MAAMC,EAAe,CAAC,~~CAACH~~,GAAgB,CAACF,EAExC,~~OAAII~~,~~IAAY,OAAS,CAACC,GAAgB,CAACL,EAEzCM,~~EAAAA,IAAC,MAAA,CACA,MAAO,CACN,~~OAAAP~~,EACA,QAAS,OACT,WAAY,~~SACZ,eAAgB,~~QAAA,EAGjB,SAAAO,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,WAAY,QACZ,SAAU,OACV,WAAY,IACZ,WAAY,OACZ,MAAOC,EAAAA,OAAO,QAAQ,YACtB,WAAY,QAAA,EAEb,SAAA,mBAAA,CAAA,CAED,CAAA,EAMFD,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,OAAAP,EACA,QAAS,OACT,WAAY,QAAA,EAGb,~~SAAAO~~,EAAAA,~~IAACE~~,EAAAA,UAAA,CACA,~~UAAAR~~,EACA,~~MAAOK~~,EAAe,yBAA2B,mBACjD,SACCA,~~EACGH~~,EACA,4CACAJ,GAAkB,EAClB,IAEJ,~~aACCO~~,EACG,CACA,WAAY,YACZ,WAAY,OACZ,~~QAASF~~,CAAA,EAET,OAEJ,eAAAF,CAAA,CAAA,CACD,CAAA,CAGH"}
1	+ {"version":3,"file":"SearchZeroState.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.tsx"],"sourcesContent":["import React from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\n\nexport const SearchZeroState: React.FC<{\n\tsearchedString: string;\n\theight: number;\n\tisLoading?: boolean;\n\tcontainerWidth?: string;\n\terrorMessage?: string;\n\tonRetry?: () => void;\n}> = ({\n\tsearchedString,\n\theight,\n\tisLoading,\n\tcontainerWidth,\n\terrorMessage,\n\tonRetry,\n}) => {\n\tconst isErrorState = !!errorMessage && !isLoading;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\theight: height,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t}}\n\t\t>\n\t\t\t<ZeroState\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={isErrorState ? 'Failed to load options' : 'No results found'}\n\t\t\t\tsubTitle={\n\t\t\t\t\tisErrorState\n\t\t\t\t\t\t? errorMessage\n\t\t\t\t\t\t: `Sorry we could not find any results for \"${\n\t\t\t\t\t\t\t\tsearchedString ?? ''\n\t\t\t\t\t\t }\"`\n\t\t\t\t}\n\t\t\t\tactionButton={\n\t\t\t\t\tisErrorState\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tbuttonText: 'Try again',\n\t\t\t\t\t\t\t\tbuttonType: 'text',\n\t\t\t\t\t\t\t\tonClick: onRetry,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tcontainerWidth={containerWidth}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n"],"names":["SearchZeroState","searchedString","height","isLoading","containerWidth","errorMessage","onRetry","isErrorState","jsx","ZeroState"],"mappings":"qKAGaA,EAOR,CAAC,CACL,eAAAC,EACA,OAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,QAAAC,CACD,IAAM,CACL,MAAMC,EAAe,CAAC,CAACF,GAAgB,CAACF,EAExC,OACCK,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,OAAAN,EACA,QAAS,OACT,WAAY,QAAA,EAGb,SAAAM,EAAAA,IAACC,EAAAA,UAAA,CACA,UAAAN,EACA,MAAOI,EAAe,yBAA2B,mBACjD,SACCA,EACGF,EACA,4CACAJ,GAAkB,EAClB,IAEJ,aACCM,EACG,CACA,WAAY,YACZ,WAAY,OACZ,QAASD,CAAA,EAET,OAEJ,eAAAF,CAAA,CAAA,CACD,CAAA,CAGH"}

package/dist/cjs/components/dropdown-button/DropdownButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../dropdown/DropdownPopover/index.js"),b=require("../button/themes.js"),i=require("./DropdownButton.style.js"),c=require("../icon-button/IconButton.js"),p=require("../tooltips/Tooltip.js"),x=require("../spinner/Spinner.js"),a=require("../button/Button.js"),y=o=>{const r=!!o.iconButtonProps,s=r?o.iconButtonProps?.disabled:o.buttonProps?.disabled;if(r){const{iconButtonProps:n,iconButtonTooltip:e}=o,d=t.jsx(c.IconButton,{...n,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px"}});return t.jsxs(i.DropdownButtonStyle,{type:void 0,disabled:s,isIconButton:!0,iconButtonType:n?.iconButtonType??"primary",iconButtonSize:n?.size??"default",children:[e?t.jsx(p.Tooltip,{body:e.body,tooltipContent:e.tooltipContent,placement:e.placement,children:d}):d,t.jsx("div",{className:"dd-button-divider"}),t.jsx("div",{style:{display:"flex",alignItems:"center"},children:t.jsx(u.DropdownPopover,{...o.dropdownProps,isChildLoading:!1,children:t.jsx(c.IconButton,{Icon:o.iconProps,iconButtonType:n?.iconButtonType??"primary",size:n?.size,disabled:s,style:{display:"flex",borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}})})})]})}const{onClick:B,LeadingIcon:P,LeadingIconStyles:R,IconComponent:g,TrailingIcon:m,...l}=o.buttonProps;return t.jsxs(i.DropdownButtonStyle,{type:o.buttonProps.buttonType,disabled:o.buttonProps.disabled,size:o.buttonProps.size,children:[o.buttonProps?.isLoading&&t.jsx(i.LoaderContainer,{type:o.buttonProps.buttonType,children:t.jsx(x.Spinner,{className:"spinner",size:"small",color:b.SpinnerColorMap(o.buttonProps.buttonType||"primary",o.buttonProps.inverse)})}),t.jsx(a.Button,{...o.buttonProps,isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px",...o.buttonProps?.size==="xs"?{border:"none",borderRadius:"0px"}:{}}}),t.jsx("div",{className:"dd-button-divider"}),t.jsx(u.DropdownPopover,{...o.dropdownProps,isChildLoading:o.buttonProps?.isLoading,children:t.jsx(a.Button,{...l,isLoading:!1,buttonText:"",TrailingIcon:o.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px",...o.buttonProps?.size==="xs"?{border:"none",borderRadius:"0px"}:{}}})})]})};exports.DropdownButton=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../dropdown/DropdownPopover/index.js"),s=require("../button/themes.js"),n=require("./DropdownButton.style.js"),d=require("../spinner/Spinner.js"),e=require("../button/Button.js"),u=o=>{const{onClick:a,...r}=o.buttonProps;return t.jsxs(n.DropdownButtonStyle,{type:o.buttonProps.buttonType,disabled:o.buttonProps.disabled,children:[o.buttonProps?.isLoading&&t.jsx(n.LoaderContainer,{children:t.jsx(d.Spinner,{className:"spinner",size:"small",color:s.SpinnerColorMap(o.buttonProps.buttonType||"primary",o.buttonProps.inverse)})}),t.jsx(e.Button,{...o.buttonProps,isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"}}),t.jsx("div",{className:"dd-button-divider"}),t.jsx(i.DropdownPopover,{...o.dropdownProps,isChildLoading:o.buttonProps?.isLoading,children:t.jsx(e.Button,{...r,isLoading:!1,buttonText:"",TrailingIcon:o.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}})})]})};exports.DropdownButton=u;
 //# sourceMappingURL=DropdownButton.js.map

package/dist/cjs/components/dropdown-button/DropdownButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownButton.js","sources":["../../../../src/components/dropdown-button/DropdownButton.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownPopover, DropdownProps } from '@src/components/dropdown';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { SpinnerColorMap } from '../button/themes';\nimport { ~~IconButton } from '../icon-button';\nimport { IconButtonProps } from '../icon-button/model';\nimport {~~ Spinner } from '../spinner';\nimport { ~~Placement, Tooltip } from '../tooltips';\nimport {~~ DropdownButtonStyle, LoaderContainer } from './DropdownButton.style';\n\nexport interface DropdownButtonProps {\n\tdropdownProps: DropdownProps;\n\ticonProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tbuttonProps?: ButtonProps;\n\ticonButtonProps?: IconButtonProps;\n\t/*\n\t Optional tooltip shown only on the main icon button (icon mode),\n\t * not on the dropdown/chevron trigger.\n\t */\n\ticonButtonTooltip?: {\n\t\tbody?: string;\n\t\ttooltipContent?: JSX.Element;\n\t\tplacement?: Placement;\n\t}~~;\n}~~\n\nexport const DropdownButton: React.FC<DropdownButtonProps> = (props) => {\n\tconst ~~isIconMode = !!props.iconButtonProps;\n\tconst disabled = isIconMode\n\t\t? props.iconButtonProps?.disabled\n\t\t: props.buttonProps?.disabled;\n\n\tif (isIconMode)~~ {~~\n\t\tconst~~ ~~{ iconButtonProps~~, ~~iconButtonTooltip } = props;\n\t\tconst iconButton = (\n\t\t\t<IconButton\n\t\t\t\t{~~...~~iconButtonProps!}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius:~~ ~~'0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t~~}~~}\n\t\t\t/>\n\t\t);\n\t\treturn~~ ~~(\n\t\t\t<DropdownButtonStyle\n\t\t\t\ttype~~=~~{undefined}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisIconButton\n\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType~~ ?? 'primary'}\n\t\t\t\ticonButtonSize={iconButtonProps?.size ?? 'default'}\n\t\t\t>\n\t\t\t\t{iconButtonTooltip ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={iconButtonTooltip.body}\n\t\t\t\t\t\ttooltipContent={iconButtonTooltip.tooltipContent}\n\t\t\t\t\t\tplacement={iconButtonTooltip.placement}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconButton}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\ticonButton\n\t\t\t\t)}\n\t\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t\t<DropdownPopover {...props.dropdownProps} isChildLoading={false}>\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={props.iconProps}\n\t\t\t\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\t\t\t\tsize={iconButtonProps?.size}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</DropdownButtonStyle>\n\t\t);\n\~~t}\~~n\~~n\tconst {\n\t\tonClick,\n\t\tLeadingIcon,\n\t\tLeadingIconStyles,\n\t\tIconComponent,\n\t\tTrailingIcon,\n\t\t...childButtonProps\n\t} = props.buttonProps!;\n\n\~~treturn (\n\t\t<DropdownButtonStyle\n\t\t\ttype={props.buttonProps!.buttonType}\n\t\t\tdisabled={props.buttonProps!.disabled}\n\t\t~~\tsize={props.buttonProps!.size}\n\t\t~~>\n\t\t\t{props.buttonProps?.isLoading && (\n\t\t\t\t<LoaderContainer ~~type={props.buttonProps.buttonType}~~>\n\t\t\t\t\t<Spinner\n\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tcolor={SpinnerColorMap(\n\t\t\t\t\t\t\tprops.buttonProps.buttonType \|\| 'primary',\n\t\t\t\t\t\t\tprops.buttonProps.inverse,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</LoaderContainer>\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\t{...props.buttonProps!}\n\t\t\t\tisLoading={false}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t\tborderRight: '0px',\n\t\t\t\t~~\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t? { border: 'none', borderRadius: '0px'~~ }~~\n\t\t\t\t\t\t: {~~}~~),\n~~\~~t\t\t\t}}\~~n\t\t\t/>\n\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t<DropdownPopover\n\t\t\t\t{...props.dropdownProps}\n\t\t\t\tisChildLoading={props.buttonProps?.isLoading}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\t{...childButtonProps}\n\t\t\t\t\tisLoading={false}\n\t\t\t\t\tbuttonText={''}\n\t\t\t\t\tTrailingIcon={props.iconProps}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t~~\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t\t? { border: 'none', borderRadius: '0px'~~ }~~\n\t\t\t\t\t\t\t: {~~}~~),\n~~\~~t\t\t\t\t}}\~~n\t\t\t\t/>\n\t\t\t</DropdownPopover>\n\t\t</DropdownButtonStyle>\n\t);\n};\n"],"names":["DropdownButton","props","~~isIconMode~~","~~disabled~~","~~iconButtonProps","iconButtonTooltip","iconButton","jsx","IconButton","~~jsxs","DropdownButtonStyle","~~Tooltip~~","~~DropdownPopover","onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon","childButtonProps","~~LoaderContainer","Spinner","SpinnerColorMap","Button"],"mappings":"~~iYA2BaA~~,EAAiDC,GAAU,CACvE,~~MAAMC,EAAa,CAAC,CAACD,EAAM,gBACrBE,EAAWD,EACdD,EAAM,iBAAiB,SACvBA,EAAM,aAAa,SAEtB,GAAIC,EAAY,CACf,~~KAAM,CAAE,~~gBAAAE~~,~~EAAiB~~,kBAAAC,CAAA,EAAsBJ,EACzCK,EACLC,EAAAA,IAACC,EAAAA,WAAA,CACC,GAAGJ,EACJ,MAAO,CACN,aAAc,MACd,oBAAqB,MACrB,uBAAwB,KAAA,CACzB,CAAA,EAGF,OACCK,EAAAA,KAACC,EAAAA,oBAAA,CACA,KAAM,OACN,SAAAP,EACA,aAAY,GACZ,eAAgBC,GAAiB,gBAAkB,UACnD,eAAgBA,GAAiB,MAAQ,UAExC,SAAA,CAAAC,EACAE,EAAAA,IAACI,EAAAA,QAAA,CACA,KAAMN,EAAkB,KACxB,eAAgBA,EAAkB,eAClC,UAAWA,EAAkB,UAE5B,SAAAC,CAAA,CAAA,EAGFA,EAEDC,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAA,CAAoB,EACnCA,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,QAAA,EAC1C,eAACK,EAAAA,gBAAA,CAAiB,GAAGX,EAAM,cAAe,eAAgB,GACzD,SAAAM,EAAAA,IAACC,EAAAA,WAAA,CACA,KAAMP,EAAM,UACZ,eAAgBG,GAAiB,gBAAkB,UACnD,KAAMA,GAAiB,KACvB,SAAAD,EACA,MAAO,CACN,QAAS,OACT,aAAc,MACd,qBAAsB,MACtB,wBAAyB,KAAA,CAC1B,CAAA,EAEF,CAAA,CACD,CAAA,CAAA,CAAA,CAGH,CAEA,KAAM,CACL,QAAAU,EACA,YAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,aAAAC,EACA,GAAGC,CAAA,~~EACAjB~~,EAAM,~~YAEV~~,~~OACCQ~~,EAAAA,KAACC,EAAAA,oBAAA,CACA,~~KAAMT~~,EAAM,~~YAAa~~,~~WACzB~~,SAAUA,EAAM,~~YAAa~~,~~SAC7B~~,~~KAAMA,EAAM,YAAa,KAExB,~~SAAA,CAAAA,EAAM,aAAa,~~WACnBM~~,EAAAA,~~IAACY~~,EAAAA,~~iBAAgB~~,~~KAAMlB~~,~~EAAM~~,~~YAAY,WACxC,SAAAM,~~EAAAA,~~IAACa~~,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,~~gBACNpB~~,EAAM,YAAY,YAAc,UAChCA,EAAM,YAAY,OAAA,CACnB,CAAA,EAEF,~~EAGDM~~,EAAAA,~~IAACe~~,EAAAA,OAAA,CACC,~~GAAGrB~~,EAAM,YACV,UAAW,GACX,MAAO,CACN,aAAc,MACd,oBAAqB,MACrB,uBAAwB,MACxB,YAAa,~~MACb~~,~~GAAIA~~,~~EAAM,aAAa,OAAS,KAC7B,CAAE,OAAQ,OAAQ,aAAc,OAChC,~~CAAA,~~CAAC~~,~~CACL,CAAA,EAEDM,~~EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAA,CAAoB,EACnCA,EAAAA,IAACK,EAAAA,gBAAA,CACC,~~GAAGX~~,EAAM,cACV,eAAgBA,EAAM,aAAa,UAEnC,~~SAAAM~~,EAAAA,~~IAACe~~,EAAAA,OAAA,CACC,~~GAAGJ~~,EACJ,UAAW,GACX,WAAY,GACZ,~~aAAcjB~~,EAAM,UACpB,MAAO,CACN,aAAc,MACd,qBAAsB,MACtB,wBAAyB,~~MACzB~~,~~GAAIA~~,~~EAAM,aAAa,OAAS,KAC7B,CAAE,OAAQ,OAAQ,aAAc,OAChC,~~CAAA,~~CAAC,CACL,CAAA,~~CACD,CAAA,CACD,CAAA,CAAA,CAGH"}
1	+ {"version":3,"file":"DropdownButton.js","sources":["../../../../src/components/dropdown-button/DropdownButton.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownPopover, DropdownProps } from '@src/components/dropdown';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { SpinnerColorMap } from '../button/themes';\nimport { Spinner } from '../spinner';\nimport { DropdownButtonStyle, LoaderContainer } from './DropdownButton.style';\n\nexport interface DropdownButtonProps {\n\tdropdownProps: DropdownProps;\n\tbuttonProps: ButtonProps;\n\ticonProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n}\n\nexport const DropdownButton: React.FC<DropdownButtonProps> = (props) => {\n\tconst { onClick, ...childButtonProps } = props.buttonProps;\n\n\treturn (\n\t\t<DropdownButtonStyle\n\t\t\ttype={props.buttonProps.buttonType}\n\t\t\tdisabled={props.buttonProps.disabled}\n\t\t>\n\t\t\t{props.buttonProps?.isLoading && (\n\t\t\t\t<LoaderContainer>\n\t\t\t\t\t<Spinner\n\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tcolor={SpinnerColorMap(\n\t\t\t\t\t\t\tprops.buttonProps.buttonType \|\| 'primary',\n\t\t\t\t\t\t\tprops.buttonProps.inverse,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</LoaderContainer>\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\t{...props.buttonProps}\n\t\t\t\tisLoading={false}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t\tborderRight: '0px',\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t<DropdownPopover\n\t\t\t\t{...props.dropdownProps}\n\t\t\t\tisChildLoading={props.buttonProps?.isLoading}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\t{...childButtonProps}\n\t\t\t\t\tisLoading={false}\n\t\t\t\t\tbuttonText={''}\n\t\t\t\t\tTrailingIcon={props.iconProps}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</DropdownPopover>\n\t\t</DropdownButtonStyle>\n\t);\n};\n"],"names":["DropdownButton","props","onClick","childButtonProps","jsxs","DropdownButtonStyle","jsx","LoaderContainer","Spinner","SpinnerColorMap","Button","DropdownPopover"],"mappings":"mTAcaA,EAAiDC,GAAU,CACvE,KAAM,CAAE,QAAAC,EAAS,GAAGC,CAAA,EAAqBF,EAAM,YAE/C,OACCG,EAAAA,KAACC,EAAAA,oBAAA,CACA,KAAMJ,EAAM,YAAY,WACxB,SAAUA,EAAM,YAAY,SAE3B,SAAA,CAAAA,EAAM,aAAa,WACnBK,EAAAA,IAACC,EAAAA,gBAAA,CACA,SAAAD,EAAAA,IAACE,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBACNR,EAAM,YAAY,YAAc,UAChCA,EAAM,YAAY,OAAA,CACnB,CAAA,EAEF,EAGDK,EAAAA,IAACI,EAAAA,OAAA,CACC,GAAGT,EAAM,YACV,UAAW,GACX,MAAO,CACN,aAAc,MACd,oBAAqB,MACrB,uBAAwB,MACxB,YAAa,KAAA,CACd,CAAA,EAEDK,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAA,CAAoB,EACnCA,EAAAA,IAACK,EAAAA,gBAAA,CACC,GAAGV,EAAM,cACV,eAAgBA,EAAM,aAAa,UAEnC,SAAAK,EAAAA,IAACI,EAAAA,OAAA,CACC,GAAGP,EACJ,UAAW,GACX,WAAY,GACZ,aAAcF,EAAM,UACpB,MAAO,CACN,aAAc,MACd,qBAAsB,MACtB,wBAAyB,KAAA,CAC1B,CAAA,CACD,CAAA,CACD,CAAA,CAAA,CAGH"}

package/dist/cjs/components/dropdown-button/DropdownButton.style.js CHANGED Viewed

@@ -1,28 +1,14 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),e=require("../../constants/Theme.js"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=o(i),a=(t,n)=>n?e.COLORS.content.inactive:t==="primary"?"#CDA2FC":e.COLORS.content.primaryInverse,d=t=>{switch(t){case"destructive":return e.COLORS.background.negative.light;case"secondaryGray":return e.COLORS.surface.subdued;default:return e.COLORS.background.brandLight}},c=(t,n)=>n?e.COLORS.background.inactive:t==="primary"?e.COLORS.background.inverseLight:"transparent",s=r.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),e=require("../../constants/Theme.js"),r=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=r(o),d=(t,i)=>i?e.COLORS.content.inactive:t==="primary"?"#CDA2FC":e.COLORS.content.primaryInverse,a=n.default.div`
 	display: flex;
 	flex-direction: row;
 	width: max-content;
 	position: relative;
 	align-items: stretch;
-	${t=>t.isIconButton&&`
-		border-radius: 4px;
-		background: ${c(t.iconButtonType??"primary",t.disabled)};
-		height: ${t.iconButtonSize==="xs"?"24px":"32px"};
-		align-items: center;
-	`}
-	${t=>(t.size==="xs"||t.iconButtonSize==="xs")&&`
-		height: 24px;
-		align-items: center;
-		border-radius: 4px;
-		${!t.isIconButton&&t.type?`border: 1px solid ${t.disabled||t.type==="secondaryGray"?e.COLORS.stroke.primary:t.type==="secondary"?e.COLORS.stroke.brand:"transparent"};`:""}
-	`}
 	.dd-button-divider {
-		width: ${t=>["primary","destructive"].includes(t.type)||t.isIconButton||t.size==="xs"?"1px":"0px"};
-		height: ${t=>t.isIconButton||t.size==="xs"?"12px":"auto"};
-		flex-shrink: 0;
-		background-color: ${t=>t.isIconButton?"rgba(255, 255, 255, 0.3)":t.size==="xs"?e.COLORS.stroke.primary:a(t.type,t?.disabled)};
+		width: ${t=>["primary","destructive"].includes(t.type)?"1px":"0px"};
+		background-color: ${t=>d(t.type,t?.disabled)};
 	}
-`,u=r.default.div`
+`,l=n.default.div`
 	position: absolute;
 	inset: 0;
 	display: flex;
@@ -31,7 +17,7 @@
 	justify-content: center;
 	width: 100%;
 	border-radius: 4px;
-	background: ${t=>d(t.type)};
+	background: ${e.BASE_COLORS.brand[50]};
 	z-index: 3;
-`;exports.DropdownButtonStyle=s;exports.LoaderContainer=u;
+`;exports.DropdownButtonStyle=a;exports.LoaderContainer=l;
 //# sourceMappingURL=DropdownButton.style.js.map