@bikdotai/bik-component-library 0.0.821-2 → 0.0.821-beta.0

package/dist/esm/components/country-code-picker/CountryCodePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountryCodePicker.js","sources":["../../../../src/components/country-code-picker/CountryCodePicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useEffect, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryPickerOption,\n\tStyledCountryPickerWrapper,\n} from '@src/components/country-code-picker/CountryCodePicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CountryCodePicker: React.FC<{\n\tversion: '1.0' | '2.0' | '3.0';\n\tonCountrySelect: (country: CountryCode) => void;\n\tselectedCountry: CountryCode;\n\tpopoverWidth?: string;\n\theight?: string;\n\tplacement?: Placement;\n\tplacementStrategy?: PositioningStrategy;\n\tdisabled?: boolean;\n\thideFlagImage?: boolean;\n\tcontainerStyles?: React.CSSProperties;\n\tcodeColor?: string;\n\tdialColor?: string;\n\tcountryTextStyle?: React.CSSProperties;\n\tonDropdownClick?: () => void;\n}> = (props) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<{\n\t\tname: string;\n\t\tdial: string;\n\t\tcode: string;\n\t}>(\n\t\tprops.selectedCountry ?? {\n\t\t\tname: 'India',\n\t\t\tdial: '+91',\n\t\t\tcode: 'IN',\n\t\t},\n\t);\n\tconst selectedFlag = `https://flagcdn.com/${selectedCountry.code?.toLowerCase()}.svg`;\n\n\tuseEffect(() => {\n\t\tif (props.selectedCountry) {\n\t\t\tsetSelectedCountry(props.selectedCountry);\n\t\t}\n\t}, [props.selectedCountry?.code]);\n\n\tconst getCountryOptions = (): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.dial,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryPickerOption>\n\t\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={flag}\n\t\t\t\t\t\t\t\tclassName=\"country-flag__option\"\n\t\t\t\t\t\t\t\talt={country.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.codeColor ?? COLORS.text.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.code}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{'  '}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.dialColor ?? COLORS.text.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.dial}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</StyledCountryPickerOption>\n\t\t\t\t),\n\t\t\t\tselected: selectedCountry.code === country.code,\n\t\t\t};\n\t\t});\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={props.version}\n\t\t\tisSearchable\n\t\t\twidth={props.popoverWidth ?? '200px'}\n\t\t\tplacement={props.placement ?? 'bottom-start'}\n\t\t\tstrategy={props.placementStrategy ?? 'absolute'}\n\t\t\toptions={getCountryOptions()}\n\t\t\tdisabled={props.disabled}\n\t\t\tonSelect={(option) => {\n\t\t\t\tconst matchingOption = CountriesData.filter(\n\t\t\t\t\t(country) => country.code === (option as SingleOption).value,\n\t\t\t\t);\n\t\t\t\tsetSelectedCountry(matchingOption[0]);\n\t\t\t\tprops.onCountrySelect(matchingOption[0]);\n\t\t\t}}\n\t\t>\n\t\t\t<StyledCountryPickerWrapper\n\t\t\t\theight={props.height}\n\t\t\t\tstyle={props.containerStyles}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconsole.log('hello');\n\t\t\t\t\tprops.onDropdownClick?.();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\tclassName=\"country-flag__selected-option\"\n\t\t\t\t\t\t\talt={selectedCountry.name}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t{selectedCountry.dial}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t<DownIcon width={24} height={24} color={COLORS.content.primary} />\n\t\t\t</StyledCountryPickerWrapper>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryCodePicker","props","selectedCountry","setSelectedCountry","useState","selectedFlag","useEffect","getCountryOptions","CountriesData","country","flag","StyledCountryPickerOption","jsx","BodySecondary","COLORS","DropdownPopover","option","matchingOption","jsxs","StyledCountryPickerWrapper","DownIcon"],"mappings":";;;;;;;;AAgBO,MAAMA,IAeR,CAACC,MAAU;AACf,QAAM,CAACC,GAAiBC,CAAkB,IAAIC;AAAA,IAK7CH,EAAM,mBAAmB;AAAA,MACxB,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACP,GAEKI,IAAe,uBAAuBH,EAAgB,MAAM,aAAa;AAE/E,EAAAI,EAAU,MAAM;AACf,IAAIL,EAAM,mBACTE,EAAmBF,EAAM,eAAe;AAAA,EAE1C,GAAG,CAACA,EAAM,iBAAiB,IAAI,CAAC;AAEhC,QAAMM,IAAoB,MAClBC,EAAc,IAAI,CAACC,MAAY;AACrC,UAAMC,IAAO,uBAAuBD,EAAQ,MAAM,aAAa;AAC/D,WAAO;AAAA,MACN,OAAOA,EAAQ;AAAA,MACf,OAAOA,EAAQ;AAAA,MACf,WAAWA,EAAQ;AAAA,MACnB,mCACEE,GAAA,EACC,UAAA;AAAA,QAAA,CAACV,EAAM,iBACP,gBAAAW;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,KAAKF;AAAA,YACL,WAAU;AAAA,YACV,KAAKD,EAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,0BAIdI,GAAA,EAAc,OAAOZ,EAAM,oBAAoB,CAAA,GAC/C,UAAA;AAAA,UAAA,gBAAAW;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOX,EAAM,aAAaa,EAAO,KAAK;AAAA,cAAA;AAAA,cAGtC,UAAAL,EAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,UAET;AAAA,UACD,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOX,EAAM,aAAaa,EAAO,KAAK;AAAA,cAAA;AAAA,cAGtC,UAAAL,EAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV,EAAA,CACD;AAAA,MAAA,GACD;AAAA,MAED,UAAUP,EAAgB,SAASO,EAAQ;AAAA,IAAA;AAAA,EAE7C,CAAC;AAGF,SACC,gBAAAG;AAAA,IAACG;AAAA,IAAA;AAAA,MACA,SAASd,EAAM;AAAA,MACf,cAAY;AAAA,MACZ,OAAOA,EAAM,gBAAgB;AAAA,MAC7B,WAAWA,EAAM,aAAa;AAAA,MAC9B,UAAUA,EAAM,qBAAqB;AAAA,MACrC,SAASM,EAAA;AAAA,MACT,UAAUN,EAAM;AAAA,MAChB,UAAU,CAACe,MAAW;AACrB,cAAMC,IAAiBT,EAAc;AAAA,UACpC,CAACC,MAAYA,EAAQ,SAAUO,EAAwB;AAAA,QAAA;AAExD,QAAAb,EAAmBc,EAAe,CAAC,CAAC,GACpChB,EAAM,gBAAgBgB,EAAe,CAAC,CAAC;AAAA,MACxC;AAAA,MAEA,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,QAAQlB,EAAM;AAAA,UACd,OAAOA,EAAM;AAAA,UACb,SAAS,MAAM;AACd,oBAAQ,IAAI,OAAO,GACnBA,EAAM,kBAAA;AAAA,UACP;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAiB,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,cAAA,CAACjB,EAAM,iBACP,gBAAAW;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACA,KAAKP;AAAA,kBACL,WAAU;AAAA,kBACV,KAAKH,EAAgB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGvB,gBAAAU,EAACC,KAAc,OAAOZ,EAAM,oBAAoB,IAC9C,YAAgB,KAAA,CAClB;AAAA,YAAA,GACD;AAAA,YACA,gBAAAW,EAACQ,KAAS,OAAO,IAAI,QAAQ,IAAI,OAAON,EAAO,QAAQ,QAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjE;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"CountryCodePicker.js","sources":["../../../../src/components/country-code-picker/CountryCodePicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useEffect, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryPickerOption,\n\tStyledCountryPickerWrapper,\n} from '@src/components/country-code-picker/CountryCodePicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CountryCodePicker: React.FC<{\n\tversion: '1.0' | '2.0';\n\tonCountrySelect: (country: CountryCode) => void;\n\tselectedCountry: CountryCode;\n\tpopoverWidth?: string;\n\theight?: string;\n\tplacement?: Placement;\n\tplacementStrategy?: PositioningStrategy;\n\tdisabled?: boolean;\n\thideFlagImage?: boolean;\n\tcontainerStyles?: React.CSSProperties;\n\tcodeColor?: string;\n\tdialColor?: string;\n\tcountryTextStyle?: React.CSSProperties;\n\tonDropdownClick?: () => void;\n}> = (props) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<{\n\t\tname: string;\n\t\tdial: string;\n\t\tcode: string;\n\t}>(\n\t\tprops.selectedCountry ?? {\n\t\t\tname: 'India',\n\t\t\tdial: '+91',\n\t\t\tcode: 'IN',\n\t\t},\n\t);\n\tconst selectedFlag = `https://flagcdn.com/${selectedCountry.code?.toLowerCase()}.svg`;\n\n\tuseEffect(() => {\n\t\tif (props.selectedCountry) {\n\t\t\tsetSelectedCountry(props.selectedCountry);\n\t\t}\n\t}, [props.selectedCountry?.code]);\n\n\tconst getCountryOptions = (): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.dial,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryPickerOption>\n\t\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={flag}\n\t\t\t\t\t\t\t\tclassName=\"country-flag__option\"\n\t\t\t\t\t\t\t\talt={country.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.codeColor ?? COLORS.text.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.code}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{'  '}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.dialColor ?? COLORS.text.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.dial}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</StyledCountryPickerOption>\n\t\t\t\t),\n\t\t\t\tselected: selectedCountry.code === country.code,\n\t\t\t};\n\t\t});\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={props.version}\n\t\t\tisSearchable\n\t\t\twidth={props.popoverWidth ?? '200px'}\n\t\t\tplacement={props.placement ?? 'bottom-start'}\n\t\t\tstrategy={props.placementStrategy ?? 'absolute'}\n\t\t\toptions={getCountryOptions()}\n\t\t\tdisabled={props.disabled}\n\t\t\tonSelect={(option) => {\n\t\t\t\tconst matchingOption = CountriesData.filter(\n\t\t\t\t\t(country) => country.code === (option as SingleOption).value,\n\t\t\t\t);\n\t\t\t\tsetSelectedCountry(matchingOption[0]);\n\t\t\t\tprops.onCountrySelect(matchingOption[0]);\n\t\t\t}}\n\t\t>\n\t\t\t<StyledCountryPickerWrapper\n\t\t\t\theight={props.height}\n\t\t\t\tstyle={props.containerStyles}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconsole.log('hello');\n\t\t\t\t\tprops.onDropdownClick?.();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\tclassName=\"country-flag__selected-option\"\n\t\t\t\t\t\t\talt={selectedCountry.name}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t{selectedCountry.dial}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t<DownIcon width={24} height={24} color={COLORS.content.primary} />\n\t\t\t</StyledCountryPickerWrapper>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryCodePicker","props","selectedCountry","setSelectedCountry","useState","selectedFlag","useEffect","getCountryOptions","CountriesData","country","flag","StyledCountryPickerOption","jsx","BodySecondary","COLORS","DropdownPopover","option","matchingOption","jsxs","StyledCountryPickerWrapper","DownIcon"],"mappings":"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"}

package/dist/esm/components/country-code-picker/CountryPicker.d.ts

@@ -8,7 +8,7 @@ export interface CountryPickerProps {
     /**
      * Version of the dropdown popover to use
      */
-    version: '1.0' | '2.0' | '3.0';
+    version: '1.0' | '2.0';
     /**
      * Callback function when a country is selected
      */

package/dist/esm/components/country-code-picker/CountryPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountryPicker.js","sources":["../../../../src/components/country-code-picker/CountryPicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useMemo, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryOption,\n\tStyledCountryPickerContainer,\n} from '@src/components/country-code-picker/CountryPicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\n/**\n * Props for the CountryPicker component\n */\nexport interface CountryPickerProps {\n\t/**\n\t * Version of the dropdown popover to use\n\t */\n\tversion: '1.0' | '2.0' | '3.0';\n\t/**\n\t * Callback function when a country is selected\n\t */\n\tonCountrySelect: (country: CountryCode) => void;\n\t/**\n\t * Currently selected country\n\t */\n\tselectedCountry?: CountryCode;\n\t/**\n\t * Width of the popover dropdown\n\t * @default \"300px\"\n\t */\n\tpopoverWidth?: string;\n\t/**\n\t * Height of the picker container\n\t */\n\theight?: string;\n\t/**\n\t * Placement of the dropdown relative to the trigger\n\t * @default \"bottom-start\"\n\t */\n\tplacement?: Placement;\n\t/**\n\t * Positioning strategy for the dropdown\n\t * @default \"absolute\"\n\t */\n\tplacementStrategy?: PositioningStrategy;\n\t/**\n\t * Whether the picker is disabled\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Whether to hide the flag image\n\t * @default false\n\t */\n\thideFlagImage?: boolean;\n\t/**\n\t * Custom styles for the container\n\t */\n\tcontainerStyles?: React.CSSProperties;\n\t/**\n\t * Placeholder text when no country is selected\n\t * @default \"Select a country\"\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Whether to show country code alongside name\n\t * @default true\n\t */\n\tshowCountryCode?: boolean;\n\t/**\n\t * Custom text style for the country name\n\t */\n\tcountryTextStyle?: React.CSSProperties;\n\t/**\n\t * Callback when dropdown is clicked\n\t */\n\tonDropdownClick?: () => void;\n}\n\nexport const CountryPicker: React.FC<CountryPickerProps> = ({\n\tversion,\n\tonCountrySelect,\n\tselectedCountry,\n\tpopoverWidth = '300px',\n\theight,\n\tplacement = 'bottom-start',\n\tplacementStrategy = 'absolute',\n\tdisabled = false,\n\thideFlagImage = false,\n\tcontainerStyles,\n\tplaceholder = 'Select a country',\n\tshowCountryCode = true,\n\tcountryTextStyle,\n\tonDropdownClick,\n}) => {\n\tconst [internalSelectedCountry, setInternalSelectedCountry] = useState<\n\t\tCountryCode | undefined\n\t>(selectedCountry);\n\n\t// Derive the current selected country (controlled vs uncontrolled)\n\tconst currentCountry = selectedCountry ?? internalSelectedCountry;\n\n\tconst selectedFlag = currentCountry\n\t\t? `https://flagcdn.com/${currentCountry.code?.toLowerCase()}.svg`\n\t\t: undefined;\n\n\tconst getCountryOptions = useMemo((): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.name,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryOption>\n\t\t\t\t\t\t{!hideFlagImage && (\n\t\t\t\t\t\t\t<img src={flag} className=\"country-flag\" alt={country.name} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"country-info\">\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.text.primary,\n\t\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t{showCountryCode && (\n\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\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\t{country.code}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</StyledCountryOption>\n\t\t\t\t),\n\t\t\t\tselected: currentCountry?.code === country.code,\n\t\t\t};\n\t\t});\n\t}, [currentCountry?.code, hideFlagImage, showCountryCode, countryTextStyle]);\n\n\tconst handleCountrySelect = (option: SingleOption) => {\n\t\tconst matchingCountry = CountriesData.find(\n\t\t\t(country) => country.code === option.value,\n\t\t);\n\t\tif (matchingCountry) {\n\t\t\t// Only update internal state if in uncontrolled mode\n\t\t\tif (selectedCountry === undefined) {\n\t\t\t\tsetInternalSelectedCountry(matchingCountry);\n\t\t\t}\n\t\t\tonCountrySelect(matchingCountry);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={version}\n\t\t\tisSearchable\n\t\t\twidth={popoverWidth}\n\t\t\tplacement={placement}\n\t\t\tstrategy={placementStrategy}\n\t\t\toptions={getCountryOptions}\n\t\t\tdisabled={disabled}\n\t\t\tonSelect={(option) => handleCountrySelect(option as SingleOption)}\n\t\t>\n\t\t\t<StyledCountryPickerContainer\n\t\t\t\theight={height}\n\t\t\t\tstyle={containerStyles}\n\t\t\t\tonClick={onDropdownClick}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{currentCountry ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!hideFlagImage && selectedFlag && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\t\t\tclassName=\"country-flag\"\n\t\t\t\t\t\t\t\t\talt={currentCountry.name}\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<BodySecondary style={countryTextStyle}>\n\t\t\t\t\t\t\t\t{currentCountry.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.text.disabled,\n\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<DownIcon\n\t\t\t\t\twidth={24}\n\t\t\t\t\theight={24}\n\t\t\t\t\tcolor={disabled ? COLORS.text.disabled : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</StyledCountryPickerContainer>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryPicker","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","getCountryOptions","useMemo","CountriesData","country","flag","StyledCountryOption","jsxs","jsx","BodySecondary","COLORS","handleCountrySelect","option","matchingCountry","DropdownPopover","StyledCountryPickerContainer","Fragment","DownIcon"],"mappings":"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"}
+{"version":3,"file":"CountryPicker.js","sources":["../../../../src/components/country-code-picker/CountryPicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useMemo, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryOption,\n\tStyledCountryPickerContainer,\n} from '@src/components/country-code-picker/CountryPicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\n/**\n * Props for the CountryPicker component\n */\nexport interface CountryPickerProps {\n\t/**\n\t * Version of the dropdown popover to use\n\t */\n\tversion: '1.0' | '2.0';\n\t/**\n\t * Callback function when a country is selected\n\t */\n\tonCountrySelect: (country: CountryCode) => void;\n\t/**\n\t * Currently selected country\n\t */\n\tselectedCountry?: CountryCode;\n\t/**\n\t * Width of the popover dropdown\n\t * @default \"300px\"\n\t */\n\tpopoverWidth?: string;\n\t/**\n\t * Height of the picker container\n\t */\n\theight?: string;\n\t/**\n\t * Placement of the dropdown relative to the trigger\n\t * @default \"bottom-start\"\n\t */\n\tplacement?: Placement;\n\t/**\n\t * Positioning strategy for the dropdown\n\t * @default \"absolute\"\n\t */\n\tplacementStrategy?: PositioningStrategy;\n\t/**\n\t * Whether the picker is disabled\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Whether to hide the flag image\n\t * @default false\n\t */\n\thideFlagImage?: boolean;\n\t/**\n\t * Custom styles for the container\n\t */\n\tcontainerStyles?: React.CSSProperties;\n\t/**\n\t * Placeholder text when no country is selected\n\t * @default \"Select a country\"\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Whether to show country code alongside name\n\t * @default true\n\t */\n\tshowCountryCode?: boolean;\n\t/**\n\t * Custom text style for the country name\n\t */\n\tcountryTextStyle?: React.CSSProperties;\n\t/**\n\t * Callback when dropdown is clicked\n\t */\n\tonDropdownClick?: () => void;\n}\n\nexport const CountryPicker: React.FC<CountryPickerProps> = ({\n\tversion,\n\tonCountrySelect,\n\tselectedCountry,\n\tpopoverWidth = '300px',\n\theight,\n\tplacement = 'bottom-start',\n\tplacementStrategy = 'absolute',\n\tdisabled = false,\n\thideFlagImage = false,\n\tcontainerStyles,\n\tplaceholder = 'Select a country',\n\tshowCountryCode = true,\n\tcountryTextStyle,\n\tonDropdownClick,\n}) => {\n\tconst [internalSelectedCountry, setInternalSelectedCountry] = useState<\n\t\tCountryCode | undefined\n\t>(selectedCountry);\n\n\t// Derive the current selected country (controlled vs uncontrolled)\n\tconst currentCountry = selectedCountry ?? internalSelectedCountry;\n\n\tconst selectedFlag = currentCountry\n\t\t? `https://flagcdn.com/${currentCountry.code?.toLowerCase()}.svg`\n\t\t: undefined;\n\n\tconst getCountryOptions = useMemo((): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.name,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryOption>\n\t\t\t\t\t\t{!hideFlagImage && (\n\t\t\t\t\t\t\t<img src={flag} className=\"country-flag\" alt={country.name} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"country-info\">\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.text.primary,\n\t\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{country.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t{showCountryCode && (\n\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\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\t{country.code}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</StyledCountryOption>\n\t\t\t\t),\n\t\t\t\tselected: currentCountry?.code === country.code,\n\t\t\t};\n\t\t});\n\t}, [currentCountry?.code, hideFlagImage, showCountryCode, countryTextStyle]);\n\n\tconst handleCountrySelect = (option: SingleOption) => {\n\t\tconst matchingCountry = CountriesData.find(\n\t\t\t(country) => country.code === option.value,\n\t\t);\n\t\tif (matchingCountry) {\n\t\t\t// Only update internal state if in uncontrolled mode\n\t\t\tif (selectedCountry === undefined) {\n\t\t\t\tsetInternalSelectedCountry(matchingCountry);\n\t\t\t}\n\t\t\tonCountrySelect(matchingCountry);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={version}\n\t\t\tisSearchable\n\t\t\twidth={popoverWidth}\n\t\t\tplacement={placement}\n\t\t\tstrategy={placementStrategy}\n\t\t\toptions={getCountryOptions}\n\t\t\tdisabled={disabled}\n\t\t\tonSelect={(option) => handleCountrySelect(option as SingleOption)}\n\t\t>\n\t\t\t<StyledCountryPickerContainer\n\t\t\t\theight={height}\n\t\t\t\tstyle={containerStyles}\n\t\t\t\tonClick={onDropdownClick}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{currentCountry ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!hideFlagImage && selectedFlag && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\t\t\tclassName=\"country-flag\"\n\t\t\t\t\t\t\t\t\talt={currentCountry.name}\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<BodySecondary style={countryTextStyle}>\n\t\t\t\t\t\t\t\t{currentCountry.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.text.disabled,\n\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<DownIcon\n\t\t\t\t\twidth={24}\n\t\t\t\t\theight={24}\n\t\t\t\t\tcolor={disabled ? COLORS.text.disabled : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</StyledCountryPickerContainer>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryPicker","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","getCountryOptions","useMemo","CountriesData","country","flag","StyledCountryOption","jsxs","jsx","BodySecondary","COLORS","handleCountrySelect","option","matchingCountry","DropdownPopover","StyledCountryPickerContainer","Fragment","DownIcon"],"mappings":"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"}

package/dist/esm/components/dropdown/Dropdown.js

@@ -1,144 +1,144 @@
-import { jsx as n, Fragment as b, jsxs as p } from "react/jsx-runtime";
-import { useState as g, useRef as q, useEffect as W } from "react";
-import { COLORS as r, BASE_COLORS as G } from "../../constants/Theme.js";
+import { jsx as n, Fragment as S, jsxs as C } from "react/jsx-runtime";
+import { useState as g, useRef as G, useEffect as b } from "react";
+import { COLORS as d } from "../../constants/Theme.js";
 import J from "../../assets/icons/chevronDown.svg.js";
 import { InputStyleContext as K } from "../input/context/InputStyleProvider.js";
 import Q from "./ChipInput.js";
 import { DropdownPopover as X } from "./DropdownPopover/index.js";
 import { getSelectedOptionsAsText as Y } from "./OpenedDropdown/utils/iterationOnOptions.js";
 import { Input as Z } from "../input/Input.js";
-function O() {
+function W() {
 }
-const $ = ({
-  placeHolder: a,
+const _ = ({
+  placeHolder: r,
   size: E,
-  onSelect: M,
-  defaultOptions: o,
-  disabled: v,
-  noErrorHint: k,
+  onSelect: w,
+  defaultOptions: s,
+  disabled: u,
+  noErrorHint: M,
   placeHolderHeight: x,
-  showPlaceholderWhenSelected: w = !1,
-  inputStyle: A = {},
-  inputType: S = "default",
-  onDeleteChip: R,
-  truncatedText: T,
-  showLeadingIconInPlaceholder: L = !1,
+  showPlaceholderWhenSelected: O = !1,
+  inputStyle: k = {},
+  inputType: v = "default",
+  onDeleteChip: T,
+  truncatedText: A,
+  showLeadingIconInPlaceholder: R = !1,
   showTrailingIconPlaceholder: V = !1,
   showLabelsOnMoreHover: j = !1,
   value: l,
-  showSelected: h = !1,
+  showSelected: f = !1,
   ...t
 }) => {
-  const [f, z] = g(!1), [y, I] = g(!1), i = E ?? "default", F = q(), [s, c] = g(
-    o ?? []
+  const [y, z] = g(!1), [F, p] = g(!1), i = E ?? "default", L = G(), [o, a] = g(
+    s ?? []
   );
-  function B(e) {
-    Array.isArray(e) ? c([...e]) : c([e]), M?.(e);
+  function N(e) {
+    Array.isArray(e) ? a([...e]) : a([e]), w?.(e);
   }
-  W(() => {
+  b(() => {
     const e = [];
-    t?.options?.forEach((d) => {
-      d.options ? d.options.forEach((u) => {
-        u.selected && e.push({
-          ...u,
-          label: u.label
+    t?.options?.forEach((c) => {
+      c.options ? c.options.forEach((m) => {
+        m.selected && e.push({
+          ...m,
+          label: m.label
         });
-      }) : d.selected && e.push(d);
-    }), c([...e]);
-  }, [t.options]), W(() => {
-    o && c([...o]);
-  }, [o]);
-  const N = Y(s), U = w ? a : N ?? a ?? "Select an option", m = t.buttonWidth, C = m ?? t.width ?? "100%", _ = t.dropdownWidth ?? C;
-  return /* @__PURE__ */ n(b, { children: /* @__PURE__ */ n(
+      }) : c.selected && e.push(c);
+    }), a([...e]);
+  }, [t.options]), b(() => {
+    s && a([...s]);
+  }, [s]);
+  const U = Y(o), q = O ? r : U ?? r ?? "Select an option", h = t.buttonWidth, I = h ?? t.width ?? "100%", B = t.dropdownWidth ?? I;
+  return /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(
     K.Provider,
     {
       value: {
         InputWrapper: {
           height: x || (i === "x-small" ? 24 : i === "small" ? 32 : 48),
-          width: C,
-          ...m ? { maxWidth: m } : {},
+          width: I,
+          ...h ? { maxWidth: h } : {},
           zIndex: 1,
           cursor: "pointer",
           padding: i === "x-small" ? "4px 8px" : "6px 8px",
-          backgroundColor: t.version === "3.0" ? f || y ? r.surface.hovered : r.surface.standard : h && l !== void 0 ? G.positive[100] : y ? r.background.inactive : r.surface.standard,
+          backgroundColor: f && l !== void 0 ? d.background.positive.light : F ? "#E0E0E0" : "#ffffff",
           transition: "background-color 0.3s ease",
-          ...A
+          ...k
         },
         input: {
           minHeight: "100%",
           maxWidth: "100%",
-          color: h && l !== void 0 ? r.content.positive : "inherit"
+          color: f && l !== void 0 ? d.content.positive : "inherit"
         }
       },
       children: /* @__PURE__ */ n(
         "div",
         {
-          onMouseEnter: () => I(!0),
-          onMouseLeave: () => I(!1),
+          onMouseEnter: () => p(!0),
+          onMouseLeave: () => p(!1),
           style: t.width ? { width: t.width } : void 0,
-          children: /* @__PURE__ */ p(
+          children: /* @__PURE__ */ C(
             X,
             {
               "data-test": t["data-test"],
-              ref: F,
-              onSelect: B,
-              disabled: v,
+              ref: L,
+              onSelect: N,
+              disabled: u,
               onDropdownVisbilityChange: (e) => z(e),
               ...t,
-              width: _,
+              width: B,
               children: [
-                S == "default" && /* @__PURE__ */ n(
+                v == "default" && /* @__PURE__ */ n(
                   Z,
                   {
                     version: t.version,
-                    noErrorHint: k,
-                    state: v ? "disabled" : "none",
-                    value: l === void 0 ? U : l,
+                    noErrorHint: M,
+                    state: u ? "disabled" : "none",
+                    value: l === void 0 ? q : l,
                     errorMessage: t.error,
                     variant: i,
-                    placeholder: a ?? "Select an option",
-                    onChangeText: O,
-                    leftIcon: L && s[0]?.leadingIcon ? {
-                      icon: () => /* @__PURE__ */ n(b, { children: s[0]?.leadingIcon })
+                    placeholder: r ?? "Select an option",
+                    onChangeText: W,
+                    leftIcon: R && o[0]?.leadingIcon ? {
+                      icon: () => /* @__PURE__ */ n(S, { children: o[0]?.leadingIcon })
                     } : void 0,
                     rightIcon: {
-                      icon: () => /* @__PURE__ */ p(
+                      icon: () => /* @__PURE__ */ C(
                         "div",
                         {
                           style: {
                             display: "flex"
                           },
                           children: [
-                            V && s[0]?.trailingIcon,
+                            V && o[0]?.trailingIcon,
                             /* @__PURE__ */ n(
                               J,
                               {
                                 style: {
-                                  transform: f ? "rotate(180deg)" : "rotate(0deg)"
+                                  transform: y ? "rotate(180deg)" : "rotate(0deg)"
                                 },
-                                onClick: O,
+                                onClick: W,
                                 width: i === "x-small" ? 16 : i === "small" ? 20 : 24,
                                 height: i === "x-small" ? 16 : i === "small" ? 20 : 24,
-                                color: h ? r.content.positive : r.content.primary
+                                color: f ? d.content.positive : d.content.primary
                               }
                             )
                           ]
                         }
                       )
                     },
-                    truncateText: T ?? !0
+                    truncateText: A ?? !0
                   }
                 ),
-                S == "chip" && /* @__PURE__ */ n(
+                v == "chip" && /* @__PURE__ */ n(
                   Q,
                   {
-                    placeholder: a ?? "Select options",
-                    chips: s,
+                    placeholder: r ?? "Select options",
+                    chips: o,
                     onDeleteChip: (e) => {
-                      R?.(e);
+                      T?.(e);
                     },
                     errorMessage: t.error,
-                    isDropdownOpened: f,
+                    isDropdownOpened: y,
                     sizeToUse: i,
                     containerStyle: {
                       width: t.width ?? "100%",
@@ -155,8 +155,8 @@ const $ = ({
     }
   ) });
 };
-$.displayName = "Dropdown";
+_.displayName = "Dropdown";
 export {
-  $ as Dropdown
+  _ as Dropdown
 };
 //# sourceMappingURL=Dropdown.js.map

package/dist/esm/components/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' | 'small' | 'x-small';\n\tdisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' | 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n};\n\nfunction noop() {\n\t/** empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption | DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\topenDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened || isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => setDropdownOpenFlag(isOpen)}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\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\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\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\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\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\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\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\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\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</div>\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\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\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</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsx","Fragment","InputStyleContext","COLORS","BASE_COLORS","jsxs","DropdownPopover","isOpen","Input","DownIcon","ChipInput","chip"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' | 'small' | 'x-small';\n\tdisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' | 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n};\n\nfunction noop() {\n\t/** empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption | DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? '#E0E0E0'\n\t\t\t\t\t\t\t\t: '#ffffff',\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => setDropdownOpenFlag(isOpen)}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\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\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\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\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\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\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\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\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\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</div>\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\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\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</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsx","Fragment","InputStyleContext","COLORS","jsxs","DropdownPopover","isOpen","Input","DownIcon","ChipInput","chip"],"mappings":"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"}

package/dist/esm/components/dropdown/DropdownPopover/index.js

@@ -1,102 +1,89 @@
-import { jsx as a, Fragment as b, jsxs as v } from "react/jsx-runtime";
-import j, { useState as s, useRef as A, useImperativeHandle as _, useEffect as g } from "react";
-import { usePopper as F } from "react-popper";
-import { COLORS as h } from "../../../constants/Theme.js";
-import { OverLapAbs as N, OpenDropdownContainer as T } from "../Common.styled.js";
-import { Tooltip as V } from "../../tooltips/Tooltip.js";
-import { DropShadow as Z } from "../../dropShadow/DropShadow.js";
-import { OpenedDropdown as q } from "../OpenedDropdown/components/OpennedDropdown.js";
-const w = j.forwardRef(
+import { jsx as l, Fragment as o, jsxs as v } from "react/jsx-runtime";
+import A, { useState as n, useRef as H, useImperativeHandle as M, useEffect as b } from "react";
+import { usePopper as _ } from "react-popper";
+import { OverLapAbs as k, OpenDropdownContainer as F } from "../Common.styled.js";
+import { Tooltip as L } from "../../tooltips/Tooltip.js";
+import { DropShadow as N } from "../../dropShadow/DropShadow.js";
+import { OpenedDropdown as T } from "../OpenedDropdown/components/OpennedDropdown.js";
+const V = A.forwardRef(
   ({
-    children: d,
-    onDropdownVisbilityChange: S,
-    version: l = "1.0",
-    tooltipContent: c,
-    tooltipDirection: E,
-    showTooltipArrow: R,
-    isChildLoading: y,
-    forceOpen: f,
+    children: c,
+    onDropdownVisbilityChange: h,
+    version: r = "1.0",
+    tooltipContent: f,
+    tooltipDirection: y,
+    showTooltipArrow: E,
+    isChildLoading: S,
+    forceOpen: d,
     ...e
-  }, x) => {
-    const n = x, [t, i] = s(!1), [C, o] = s(!1), [O, z] = s(null), [H, I] = s(null), u = A(null), { styles: M, attributes: k } = F(O, H, {
+  }, R) => {
+    const s = R, [t, a] = n(!1), [g, x] = n(null), [C, O] = n(null), m = H(null), { styles: z, attributes: I } = _(g, C, {
       placement: e.placement,
       strategy: e.strategy
-    }), L = (r) => {
-      l === "2.0" && e.isMultiSelect && r && e.onSelect?.([...r]), i(!1), e?.onClose?.();
+    }), j = (i) => {
+      r === "2.0" && e.isMultiSelect && i && e.onSelect?.([...i]), a(!1), e?.onClose?.();
     };
-    _(
-      n,
+    M(
+      s,
       () => ({
         openDropdown: t
       }),
       []
-    ), g(() => {
-      n?.current && (n.current.openDropdown = t);
-    }, [t]), g(() => {
-      S?.(t);
+    ), b(() => {
+      s?.current && (s.current.openDropdown = t);
+    }, [t]), b(() => {
+      h?.(t);
     }, [t]);
-    const m = () => /* @__PURE__ */ v(b, { children: [
+    const u = () => /* @__PURE__ */ v(o, { children: [
       /* @__PURE__ */ v(
         "div",
         {
-          style: {
-            position: "relative",
-            ...l === "3.0" && {
-              backgroundColor: t || C ? h.surface.hovered : h.surface.standard,
-              transition: "background-color 0.3s ease",
-              borderRadius: 4
-            }
-          },
-          ref: z,
-          onMouseEnter: l === "3.0" ? () => o(!0) : void 0,
-          onMouseLeave: l === "3.0" ? () => o(!1) : void 0,
+          style: { position: "relative" },
+          ref: x,
           children: [
-            /* @__PURE__ */ a(
-              N,
+            /* @__PURE__ */ l(
+              k,
               {
-                ref: u,
+                ref: m,
                 allowEvents: e.allowEvents,
                 disabled: e.disabled,
-                onClick: (r) => {
-                  e.onDropdownOpen?.(), t ? (i(!1), r.preventDefault()) : e.disabled || i(!0);
+                onClick: (i) => {
+                  e.onDropdownOpen?.(), t ? (a(!1), i.preventDefault()) : e.disabled || a(!0);
                 },
-                isChildLoading: y,
-                children: e.allowEvents ? d : null
+                isChildLoading: S,
+                children: e.allowEvents ? c : null
               }
             ),
-            e.allowEvents ? null : d
+            e.allowEvents ? null : c
           ]
         }
       ),
-      (t || f) && /* @__PURE__ */ a(
-        T,
+      (t || d) && /* @__PURE__ */ l(
+        F,
         {
-          ref: I,
+          ref: O,
           style: {
-            ...M.popper,
+            ...z.popper,
             zIndex: e.dropdownZIndex ?? 3
           },
-          ...k.popper,
+          ...I.popper,
           "data-test": e["data-test"],
-          children: /* @__PURE__ */ a(
-            Z,
+          children: /* @__PURE__ */ l(
+            N,
             {
               level: "z2",
               position: "down",
-              style: {
-                borderRadius: l === "3.0" ? 4 : 8,
-                boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)"
-              },
-              children: /* @__PURE__ */ a(
-                q,
+              style: { borderRadius: 8 },
+              children: /* @__PURE__ */ l(
+                T,
                 {
                   ...e,
-                  onSelect: (r) => {
-                    l === "2.0" && e.isMultiSelect || (e.onSelect?.(r), i(!1));
+                  onSelect: (i) => {
+                    r === "2.0" && e.isMultiSelect || (e.onSelect?.(i), a(!1));
                   },
-                  onClose: L,
-                  version: l,
-                  headerRef: u,
+                  onClose: j,
+                  version: r,
+                  headerRef: m,
                   zeroState: e?.zeroState,
                   isDraggable: e.isDraggable,
                   onOptionsReorder: e.onOptionsReorder
@@ -107,19 +94,19 @@ const w = j.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ a(b, { children: !t && !f && c !== void 0 ? /* @__PURE__ */ a(
-      V,
+    return /* @__PURE__ */ l(o, { children: !t && !d && f !== void 0 ? /* @__PURE__ */ l(
+      L,
       {
-        body: c,
-        placement: E,
-        hideArrow: !R,
-        children: /* @__PURE__ */ a("div", { "data-test": e["data-test"], children: m() })
+        body: f,
+        placement: y,
+        hideArrow: !E,
+        children: /* @__PURE__ */ l("div", { "data-test": e["data-test"], children: u() })
       }
-    ) : m() });
+    ) : u() });
   }
 );
-w.displayName = "DropdownPopover";
+V.displayName = "DropdownPopover";
 export {
-  w as DropdownPopover
+  V as DropdownPopover
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/dropdown/DropdownPopover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/DropdownPopover/index.tsx"],"sourcesContent":["import React, {\n\tLegacyRef,\n\tRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement, Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport { OpenDropdownContainer, OverLapAbs } from '../Common.styled';\nimport { OpenedDropdown } from '../OpenedDropdown';\nimport { OpenDropdownProps } from '../type';\n\ntype DropdownProps = OpenDropdownProps & {\n\tisLoading?: boolean;\n\tchildren?: React.ReactNode;\n\tdisabled?: boolean;\n\tonDropdownOpen?: () => void;\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n\ttooltipContent?: string;\n\ttooltipDirection?: Placement;\n\tshowTooltipArrow?: boolean;\n\tallowEvents?: boolean;\n\t'data-test'?: string;\n\tisChildLoading?: boolean;\n\t/**\n\t * If true, forces the dropdown to remain open regardless of user interaction or internal state.\n\t * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.\n\t * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.\n\t */\n\tforceOpen?: boolean;\n};\n\nexport const DropdownPopover = React.forwardRef<\n\t{\n\t\topenDropdown: boolean;\n\t},\n\tDropdownProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tonDropdownVisbilityChange,\n\t\t\tversion = '1.0',\n\t\t\ttooltipContent,\n\t\t\ttooltipDirection,\n\t\t\tshowTooltipArrow,\n\t\t\tisChildLoading,\n\t\t\tforceOpen,\n\t\t\t...openDropdownProps\n\t\t},\n\t\tunTypedRef,\n\t) => {\n\t\tconst ref = unTypedRef as React.RefObject<{ openDropdown: boolean }>;\n\t\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\t\tconst [isHovering, setIsHovering] = useState(false);\n\t\tconst [referenceElement, setReferenceElement] = useState(null);\n\t\tconst [popperElement, setPopperElement] = useState(null);\n\t\tconst headerRef = useRef(null);\n\n\t\tconst { styles, attributes } = usePopper(referenceElement, popperElement, {\n\t\t\tplacement: openDropdownProps.placement,\n\t\t\tstrategy: openDropdownProps.strategy,\n\t\t});\n\n\t\tconst onCloseHandle = (data) => {\n\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect && data) {\n\t\t\t\topenDropdownProps.onSelect?.([...data]);\n\t\t\t}\n\t\t\tsetDropdownVisibility(false);\n\t\t\topenDropdownProps?.onClose?.();\n\t\t};\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\treturn {\n\t\t\t\t\topenDropdown: openDropdown,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (ref?.current) ref.current.openDropdown = openDropdown;\n\t\t}, [openDropdown]);\n\n\t\tuseEffect(() => {\n\t\t\tonDropdownVisbilityChange?.(openDropdown);\n\t\t}, [openDropdown]);\n\n\t\tconst dropDownComponent = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t...(version === '3.0' && {\n\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\topenDropdown || isHovering\n\t\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t/** This assigment is mentioned as per react-popper's docs, so typecasting  */\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(true) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(false) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OverLapAbs\n\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\tallowEvents={openDropdownProps.allowEvents}\n\t\t\t\t\t\t\tdisabled={openDropdownProps.disabled}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\topenDropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\tif (!openDropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tisChildLoading={isChildLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{openDropdownProps.allowEvents ? children : null}\n\t\t\t\t\t\t</OverLapAbs>\n\t\t\t\t\t\t{openDropdownProps.allowEvents ? null : children}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(openDropdown || forceOpen) && (\n\t\t\t\t\t\t<OpenDropdownContainer\n\t\t\t\t\t\t\t/** This assigment is mentioned as per react-popper's docs, so typecasting  */\n\t\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...styles['popper'],\n\t\t\t\t\t\t\t\tzIndex: openDropdownProps.dropdownZIndex ?? 3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tborderRadius: version === '3.0' ? 4 : 8,\n\t\t\t\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<OpenedDropdown\n\t\t\t\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\topenDropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\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\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\t\tzeroState={openDropdownProps?.zeroState}\n\t\t\t\t\t\t\t\t\tisDraggable={openDropdownProps.isDraggable}\n\t\t\t\t\t\t\t\t\tonOptionsReorder={openDropdownProps.onOptionsReorder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t\t</OpenDropdownContainer>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{!openDropdown && !forceOpen && tooltipContent !== undefined ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={tooltipContent}\n\t\t\t\t\t\tplacement={tooltipDirection}\n\t\t\t\t\t\thideArrow={!showTooltipArrow}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div data-test={openDropdownProps['data-test']}>\n\t\t\t\t\t\t\t{dropDownComponent()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\tdropDownComponent()\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\n\nDropdownPopover.displayName = 'DropdownPopover';\n"],"names":["DropdownPopover","React","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","unTypedRef","ref","openDropdown","setDropdownVisibility","useState","isHovering","setIsHovering","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","onCloseHandle","data","useImperativeHandle","useEffect","dropDownComponent","jsxs","Fragment","COLORS","jsx","OverLapAbs","e","OpenDropdownContainer","DropShadow","OpenedDropdown","options","Tooltip"],"mappings":";;;;;;;;AAoCO,MAAMA,IAAkBC,EAAM;AAAA,EAMpC,CACC;AAAA,IACC,UAAAC;AAAA,IACA,2BAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IAAMD,GACN,CAACE,GAAcC,CAAqB,IAAIC,EAAS,EAAK,GACtD,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5C,CAACG,GAAkBC,CAAmB,IAAIJ,EAAS,IAAI,GACvD,CAACK,GAAeC,CAAgB,IAAIN,EAAS,IAAI,GACjDO,IAAYC,EAAO,IAAI,GAEvB,EAAE,QAAAC,GAAQ,YAAAC,EAAA,IAAeC,EAAUR,GAAkBE,GAAe;AAAA,MACzE,WAAWV,EAAkB;AAAA,MAC7B,UAAUA,EAAkB;AAAA,IAAA,CAC5B,GAEKiB,IAAgB,CAACC,MAAS;AAC/B,MAAIxB,MAAY,SAASM,EAAkB,iBAAiBkB,KAC3DlB,EAAkB,WAAW,CAAC,GAAGkB,CAAI,CAAC,GAEvCd,EAAsB,EAAK,GAC3BJ,GAAmB,UAAA;AAAA,IACpB;AAEA,IAAAmB;AAAA,MACCjB;AAAA,MACA,OACQ;AAAA,QACN,cAAAC;AAAA,MAAA;AAAA,MAGF,CAAA;AAAA,IAAC,GAGFiB,EAAU,MAAM;AACf,MAAIlB,GAAK,YAASA,EAAI,QAAQ,eAAeC;AAAA,IAC9C,GAAG,CAACA,CAAY,CAAC,GAEjBiB,EAAU,MAAM;AACf,MAAA3B,IAA4BU,CAAY;AAAA,IACzC,GAAG,CAACA,CAAY,CAAC;AAEjB,UAAMkB,IAAoB,MAExB,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,UAAU;AAAA,YACV,GAAI5B,MAAY,SAAS;AAAA,cACxB,iBACCS,KAAgBG,IACbkB,EAAO,QAAQ,UACfA,EAAO,QAAQ;AAAA,cACnB,YAAY;AAAA,cACZ,cAAc;AAAA,YAAA;AAAA,UACf;AAAA,UAGD,KAAKf;AAAA,UACL,cACCf,MAAY,QAAQ,MAAMa,EAAc,EAAI,IAAI;AAAA,UAEjD,cACCb,MAAY,QAAQ,MAAMa,EAAc,EAAK,IAAI;AAAA,UAGlD,UAAA;AAAA,YAAA,gBAAAkB;AAAA,cAACC;AAAA,cAAA;AAAA,gBACA,KAAKd;AAAA,gBACL,aAAaZ,EAAkB;AAAA,gBAC/B,UAAUA,EAAkB;AAAA,gBAC5B,SAAS,CAAC2B,MAAM;AACf,kBAAA3B,EAAkB,iBAAA,GACbG,KAGJC,EAAsB,EAAK,GAC3BuB,EAAE,eAAA,KAHG3B,EAAkB,YAAUI,EAAsB,EAAI;AAAA,gBAK7D;AAAA,gBACA,gBAAAN;AAAA,gBAEC,UAAAE,EAAkB,cAAcR,IAAW;AAAA,cAAA;AAAA,YAAA;AAAA,YAE5CQ,EAAkB,cAAc,OAAOR;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,OAEvCW,KAAgBJ,MACjB,gBAAA0B;AAAA,QAACG;AAAA,QAAA;AAAA,UAEA,KAAKjB;AAAA,UACL,OAAO;AAAA,YACN,GAAGG,EAAO;AAAA,YACV,QAAQd,EAAkB,kBAAkB;AAAA,UAAA;AAAA,UAE5C,GAAGe,EAAW;AAAA,UACf,aAAWf,EAAkB,WAAW;AAAA,UAExC,UAAA,gBAAAyB;AAAA,YAACI;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,cACP,UAAU;AAAA,cACV,OAAO;AAAA,gBACN,cAAcnC,MAAY,QAAQ,IAAI;AAAA,gBACtC,WAAW;AAAA,cAAA;AAAA,cAGZ,UAAA,gBAAA+B;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,GAAG9B;AAAA,kBACJ,UAAU,CAAC+B,MAAY;AACtB,oBAAIrC,MAAY,SAASM,EAAkB,kBAG1CA,EAAkB,WAAW+B,CAAO,GACpC3B,EAAsB,EAAK;AAAA,kBAE7B;AAAA,kBACA,SAASa;AAAA,kBACT,SAAAvB;AAAA,kBACA,WAAAkB;AAAA,kBACA,WAAWZ,GAAmB;AAAA,kBAC9B,aAAaA,EAAkB;AAAA,kBAC/B,kBAAkBA,EAAkB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACrC;AAAA,UAAA;AAAA,QACD;AAAA,MAAA;AAAA,IACD,GAEF;AAIF,kCAEG,UAAA,CAACG,KAAgB,CAACJ,KAAaJ,MAAmB,SAClD,gBAAA8B;AAAA,MAACO;AAAA,MAAA;AAAA,QACA,MAAMrC;AAAA,QACN,WAAWC;AAAA,QACX,WAAW,CAACC;AAAA,QAEZ,4BAAC,OAAA,EAAI,aAAWG,EAAkB,WAAW,GAC3C,cAAkB,CACpB;AAAA,MAAA;AAAA,IAAA,IAGDqB,IAAkB,CAEpB;AAAA,EAEF;AACD;AAEA/B,EAAgB,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/DropdownPopover/index.tsx"],"sourcesContent":["import React, {\n\tLegacyRef,\n\tRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement, Tooltip } from '@src/components/tooltips';\nimport { OpenDropdownContainer, OverLapAbs } from '../Common.styled';\nimport { OpenedDropdown } from '../OpenedDropdown';\nimport { OpenDropdownProps } from '../type';\n\ntype DropdownProps = OpenDropdownProps & {\n\tisLoading?: boolean;\n\tchildren?: React.ReactNode;\n\tdisabled?: boolean;\n\tonDropdownOpen?: () => void;\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n\ttooltipContent?: string;\n\ttooltipDirection?: Placement;\n\tshowTooltipArrow?: boolean;\n\tallowEvents?: boolean;\n\t'data-test'?: string;\n\tisChildLoading?: boolean;\n\t/**\n\t * If true, forces the dropdown to remain open regardless of user interaction or internal state.\n\t * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.\n\t * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.\n\t */\n\tforceOpen?: boolean;\n};\n\nexport const DropdownPopover = React.forwardRef<\n\t{\n\t\topenDropdown: boolean;\n\t},\n\tDropdownProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tonDropdownVisbilityChange,\n\t\t\tversion = '1.0',\n\t\t\ttooltipContent,\n\t\t\ttooltipDirection,\n\t\t\tshowTooltipArrow,\n\t\t\tisChildLoading,\n\t\t\tforceOpen,\n\t\t\t...openDropdownProps\n\t\t},\n\t\tunTypedRef,\n\t) => {\n\t\tconst ref = unTypedRef as React.RefObject<{ openDropdown: boolean }>;\n\t\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\t\tconst [referenceElement, setReferenceElement] = useState(null);\n\t\tconst [popperElement, setPopperElement] = useState(null);\n\t\tconst headerRef = useRef(null);\n\n\t\tconst { styles, attributes } = usePopper(referenceElement, popperElement, {\n\t\t\tplacement: openDropdownProps.placement,\n\t\t\tstrategy: openDropdownProps.strategy,\n\t\t});\n\n\t\tconst onCloseHandle = (data) => {\n\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect && data) {\n\t\t\t\topenDropdownProps.onSelect?.([...data]);\n\t\t\t}\n\t\t\tsetDropdownVisibility(false);\n\t\t\topenDropdownProps?.onClose?.();\n\t\t};\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\treturn {\n\t\t\t\t\topenDropdown: openDropdown,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (ref?.current) ref.current.openDropdown = openDropdown;\n\t\t}, [openDropdown]);\n\n\t\tuseEffect(() => {\n\t\t\tonDropdownVisbilityChange?.(openDropdown);\n\t\t}, [openDropdown]);\n\n\t\tconst dropDownComponent = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{ position: 'relative' }}\n\t\t\t\t\t\t/** This assigment is mentioned as per react-popper's docs, so typecasting  */\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OverLapAbs\n\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\tallowEvents={openDropdownProps.allowEvents}\n\t\t\t\t\t\t\tdisabled={openDropdownProps.disabled}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\topenDropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\tif (!openDropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tisChildLoading={isChildLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{openDropdownProps.allowEvents ? children : null}\n\t\t\t\t\t\t</OverLapAbs>\n\t\t\t\t\t\t{openDropdownProps.allowEvents ? null : children}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(openDropdown || forceOpen) && (\n\t\t\t\t\t\t<OpenDropdownContainer\n\t\t\t\t\t\t\t/** This assigment is mentioned as per react-popper's docs, so typecasting  */\n\t\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...styles['popper'],\n\t\t\t\t\t\t\t\tzIndex: openDropdownProps.dropdownZIndex ?? 3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<OpenedDropdown\n\t\t\t\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\topenDropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\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\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\t\tzeroState={openDropdownProps?.zeroState}\n\t\t\t\t\t\t\t\t\tisDraggable={openDropdownProps.isDraggable}\n\t\t\t\t\t\t\t\t\tonOptionsReorder={openDropdownProps.onOptionsReorder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t\t</OpenDropdownContainer>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{!openDropdown && !forceOpen && tooltipContent !== undefined ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={tooltipContent}\n\t\t\t\t\t\tplacement={tooltipDirection}\n\t\t\t\t\t\thideArrow={!showTooltipArrow}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div data-test={openDropdownProps['data-test']}>\n\t\t\t\t\t\t\t{dropDownComponent()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\tdropDownComponent()\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\n\nDropdownPopover.displayName = 'DropdownPopover';\n"],"names":["DropdownPopover","React","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","unTypedRef","ref","openDropdown","setDropdownVisibility","useState","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","onCloseHandle","data","useImperativeHandle","useEffect","dropDownComponent","jsxs","Fragment","jsx","OverLapAbs","e","OpenDropdownContainer","DropShadow","OpenedDropdown","options","Tooltip"],"mappings":"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"}