npm - @bikdotai/bik-component-library - Versions diffs - 0.0.805-beta.4 → 0.0.805-beta.5 - Mend

@bikdotai/bik-component-library 0.0.805-beta.4 → 0.0.805-beta.5

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

package/dist/esm/components/button/themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' \| '2.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/*\n Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n \n @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n \n @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n /\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/*\n Generates a new color by adjusting the brightness of the given color by a specified percentage.\n \n @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n \n @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n \n @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n /\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' \|\|\n\t\ttype === 'tertiary' \|\|\n\t\ttype === 'tertiaryGray' \|\|\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' \|\| type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","surface","hovered","subdued","background","warning","vibrant","inverseLight","negative","getColor","content","inactive","brand","primary","secondary","primaryInverse","ai","stroke","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","ButtonRegularAI","ButtonLargeAI","getBorderColor","error","standard","placeholder","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","parseInt","replace","amt","Math","round","R","G","B","max","toString","slice","getLoadingButtonBackgroundCustom","min","getHoverButtonBackground","aiLight","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","lightAlt","generateDisabledStyling","getDashedBorderStyling","borderColor","arguments","length","undefined","getClickEffect","brandLight","brandLightAlt","startsWith","getLoadingBackground","base","light","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}
1	+ {"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\tconst hasBorder =\n\t\t\ttype === 'secondary' \|\| type === 'special' \|\| type === 'secondaryGray';\n\t\treturn hasBorder ? '3px 6px' : '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' \|\| size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' \| '2.0' \| '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/*\n Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n \n @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n \n @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n /\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/*\n Generates a new color by adjusting the brightness of the given color by a specified percentage.\n \n @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n \n @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n \n @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n /\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' \|\| type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' \|\|\n\t\ttype === 'tertiary' \|\|\n\t\ttype === 'tertiaryGray' \|\|\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' \|\| type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","background","brandVeryLight","surface","hovered","subdued","warning","vibrant","inverseLight","negative","getColor","content","secondary","inactive","brand","primary","primaryInverse","ai","stroke","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","ButtonRegularAI","ButtonLargeAI","getBorderColor","error","standard","placeholder","getBorder","version","brandLightAlt","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","parseInt","replace","amt","Math","round","R","G","B","max","toString","slice","getLoadingButtonBackgroundCustom","min","getHoverButtonBackground","aiLight","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","lightAlt","generateDisabledStyling","base","getDashedBorderStyling","borderColor","arguments","length","undefined","getClickEffect","brandLight","startsWith","getLoadingBackground","light","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"qMAWaA,MAAAA,EAAqBA,CACjCC,EACAC,EACAC,EACAC,EACAC,KAEA,GAAa,YAATJ,EAAoB,OAAOK,EAAOC,WAAWC,eACjD,GAAa,kBAATP,EAA0B,MAAO,cAErC,GAAa,SAATC,EACH,MAAa,SAATD,EACI,cAEDG,EAAWE,EAAOG,QAAQC,QAAUJ,EAAOG,QAAQE,QAE3D,OAAQV,GACP,IAAK,UACJ,OAAOI,IAEJF,EACAG,EAAOC,WAAWK,QAAQC,QAC1BP,EAAOC,WAAWO,cACtB,IAAK,cACJ,OAAOR,EAAOC,WAAWQ,SAASF,QAGnC,QACC,MAAO,cACR,EAGWG,EAAWA,CACvBf,EACAC,EACAC,EACAC,KAEA,GAAa,YAATH,EAAoB,OAAOK,EAAOC,WAAWO,aACjD,GAAa,kBAATb,EAA0B,OAAOK,EAAOW,QAAQC,UAEpD,GAAa,SAAThB,EACH,MAAa,SAATD,EACIE,EAAUG,EAAOW,QAAQE,SAAWb,EAAOW,QAAQG,MAEpDhB,EAAWE,EAAOW,QAAQI,QAAUf,EAAOW,QAAQC,UAE3D,OAAQjB,GACP,IAAK,UACJ,OAAOE,EAAUG,EAAOW,QAAQI,QAAUf,EAAOW,QAAQK,eAC1D,IAAK,eAIL,IAAK,WAEL,IAAK,cACJ,OAAOhB,EAAOW,QAAQC,UALvB,IAAK,cACJ,OAAOZ,EAAOW,QAAQK,eAKvB,IAAK,KACJ,OAAOhB,EAAOW,QAAQM,GACvB,QACC,OAAOpB,EAAUG,EAAOW,QAAQK,eAAiBhB,EAAOkB,OAAOJ,MAChE,EAGWK,EAAwBtB,GAChCA,EACI,2BAEDG,EAAOW,QAAQE,SAGVO,EAAaA,CAACzB,EAAYC,KACtC,GAAa,SAATD,EACH,MAAO,MACD,GAAa,OAATC,EAAe,CAGzB,MADU,cAATD,GAAiC,YAATA,GAA+B,kBAATA,EAC5B,UAAY,SAC/B,CAAM,GAAa,SAATC,EACV,MAAO,UACD,GAAa,UAATA,EACV,OAAQD,GACP,IAAK,WAEL,IAAK,eACJ,MAAO,UACR,QACC,MAAO,gBAEH,GAAa,WAATC,EACV,OAAQD,GACP,IAAK,WAEL,IAAK,eACJ,MAAO,WACR,QACC,MAAO,iBAEH,GAAa,UAATC,EACV,OAAQD,GACP,IAAK,WAEL,IAAK,eACJ,MAAO,WACR,QACC,MAAO,YAET,EAEW0B,EAAyBA,CACrCzB,EACAD,EACA2B,IAEKA,GAAqB,OAAT3B,EAQJ,gBAATA,EACI4B,EAEK,SAAT3B,GAA4B,OAATA,EACf4B,EACY,UAAT5B,EACH6B,EAEDC,EAfO,UAAT9B,EACI+B,EAEAC,EAeGC,EAAiBA,CAC7BlC,EACAE,EACAiC,IAEIA,EACI9B,EAAOkB,OAAOT,SAASF,QAG3BV,EACIG,EAAOG,QAAQ4B,SAEX,aAARpC,EACIK,EAAOkB,OAAOJ,MAEfd,EAAOW,QAAQqB,YAGVC,EAAYA,CACxBC,EACAvC,EACAC,EACAC,EACAiC,IAEY,QAARnC,EACI,gBAEK,YAATA,uBACyBK,EAAOkB,OAAOiB,iBAE9B,kBAATxC,uBACyBK,EAAOkB,OAAOH,WAE9B,SAATnB,aAC2B,QAAZsC,EAAoB,GAAM,aAC3ClC,EAAOkB,OAAOH,WAGZlB,EACU,cAATF,EACI,WAAuB,QAAZuC,EAAoB,GAAM,aAAaL,EACxDlC,EACAE,EACAiC,MAGK,gBAGK,cAATnC,EACI,WAAuB,QAAZuC,EAAoB,GAAM,aAAaL,EACxDlC,GACA,EACAmC,MAGK,gBAGKM,EAA0BxC,GACzB,WAATA,EACI,mDAID,mDAmBKyC,EAAiCA,CAC7CC,EACAC,KAEA,MAAMC,EAAMC,SAASH,EAAMI,QAAQ,IAAK,IAAK,IAC5CC,EAAMC,KAAKC,MAAM,KAAON,GACxBO,GAAKN,GAAO,IAAMG,EAClBI,GAAMP,GAAO,EAAK,KAAUG,EAC5BK,GAAW,IAANR,GAAkBG,EAExB,MAAO,KACN,UACCC,KAAKK,IAAIH,EAAG,IAAM,KAClBF,KAAKK,IAAIF,EAAG,IAAM,GACnBH,KAAKK,IAAID,EAAG,IAEXE,SAAS,IACTC,MAAM,IAAI,EAkBAC,EAAmCA,CAC/Cd,EACAC,KAEA,MAAMC,EAAMC,SAASH,EAAMI,QAAQ,IAAK,IAAK,IAC5CC,EAAMC,KAAKC,MAAM,KAAON,GACxBO,GAAKN,GAAO,IAAMG,EAClBI,GAAMP,GAAO,EAAK,KAAUG,EAC5BK,GAAW,IAANR,GAAkBG,EAExB,MAAO,KACN,UACCC,KAAKS,IAAIP,EAAG,MAAQ,KACpBF,KAAKS,IAAIN,EAAG,MAAQ,GACrBH,KAAKS,IAAIL,EAAG,MAEXE,SAAS,IACTC,MAAM,IAAI,EAGAG,EAA2BA,CAAC3D,EAAYE,IACvC,OAATF,iBACmBK,EAAOG,QAAQoD,WAGzB,SAAT5D,kCAGS,YAATA,GAA+B,kBAATA,GAGrBE,GAAoB,YAATF,EAFR,GAGA,qDAOI6D,EAAoCA,CAChD7D,EACA2B,IAEIA,EACI,GAED,kEACoBtB,EAAOW,QAAQG,SAG9B2C,EAAiCA,CAC7C9D,EACA2B,IAEIA,EACI,GAEK,YAAT3B,EACI,qBAAqBK,EAAOkB,OAAOZ,QAAQoD,yDAKvCC,EAA0BA,CACtChE,EACAC,EACAC,IAEa,YAATF,EACyB,qBAAAK,EAAOC,WAAW2D,2BAA2B5D,EAAOkB,OAAOH,WAE3E,kBAATpB,uBACyBK,EAAOkB,OAAOH,WAE9B,SAATnB,mCAGS,YAATD,GAA+B,gBAATA,EAClBE,EACJ,gEACqBG,EAAOC,WAAWY,YACvB,cAATlB,EACHE,EACyC,mEACxBG,EAAOkB,OAAOH,WAEhC,GAGK8C,EAAyB,SACrClE,EACAC,GAEG,IADHkE,EAAAC,UAAAC,eAAAC,IAAAF,UAAA,GAAAA,UAAsBlC,GAAAA,EAAelC,GAAM,GAE3C,MAAO,+KASHmE,aACAA,cACC1B,EAAuBxC,kMAWxBkE,aACAA,cACC1B,EAAuBxC,oMAWxBkE,aACAA,cACC1B,EAAuBxC,gMAWxBkE,aACAA,cACC1B,EAAuBxC,qBAI7B,EAEasE,EAAiBA,CAACvE,EAAYC,EAAYC,IACzC,SAATF,EACyB,qBAAAK,EAAOC,WAAWkE,qFAEpBnE,EAAOW,QAAQG,SAE7B,YAATnB,EACyB,qBAAAK,EAAOC,WAAWkE,iCAAiCnE,EAAOkB,OAAOiB,iBAEjF,kBAATxC,EACyB,qBAAAK,EAAOG,QAAQC,8BAA8BJ,EAAOkB,OAAOH,WAE3E,SAATnB,EACyB,qBAAAI,EAAOkB,OAAOiB,yCACtBnC,EAAOC,WAAWkE,cAE1B,YAATxE,GAA+B,gBAATA,EACrBE,uBACyBG,EAAOC,WAAWK,QAAQC,yFAIhD,sDAEE,cAATZ,GACS,aAATA,GACS,iBAATA,GACAA,EAAKyE,WAAW,QAETvE,EACiB,qBAAAG,EAAOC,WAAWO,iDAClBR,EAAOC,WAAWkE,mBARpC,EAWKE,EAAuBA,CACnC1E,EACAC,EACAC,EACAE,IAEa,YAATJ,uBACyBK,EAAOC,WAAWC,kBAElC,kBAATP,uBACyBK,EAAOG,QAAQE,WAE/B,SAATT,uBACyBI,EAAOC,WAAW2D,QAElC,YAATjE,EACCI,EACI,qBAAqBqD,EAC3BrD,EACA,OAGK,qBACNF,EAAUG,EAAOC,WAAWK,QAAQC,QAAUP,EAAOC,WAAWkE,cAGrD,gBAATxE,EACI,qBAAqBK,EAAOC,WAAWQ,SAAS6D,SAEjD,iCAGKC,EAAmBA,CAAC5E,EAAYC,EAAYC,IAC3C,YAATF,uBACyBK,EAAOkB,OAAOiB,iBAE9B,kBAATxC,uBACyBK,EAAOkB,OAAOH,WAE9B,SAATnB,kBAGS,cAATD,EACIE,EACiB,qBAAAG,EAAOW,QAAQC,kCACfZ,EAAOkB,OAAOiB,iBAEhC,GAGKqC,EAAkBA,CAAC7E,EAAYE,IAC9B,kBAATF,EAAiCK,EAAOW,QAAQC,UAChDf,EACU,YAATF,EACIK,EAAOW,QAAQI,QAEhBf,EAAOW,QAAQK,eAEV,gBAATrB,EACIK,EAAOW,QAAQF,SAEhBT,EAAOW,QAAQG,MAGV2D,EAAqBA,CACjC7E,EACAD,EACAE,EACAyB,EACAoD,EACA5E,IAEa,SAATF,EACC0B,EACItB,EAAOW,QAAQE,SACZf,EACHE,EAAOW,QAAQI,QAEhBf,EAAOW,QAAQC,UAEnB8D,EACI,cAEK,YAAT/E,EACI2B,EAAWtB,EAAOW,QAAQE,SAAWb,EAAOC,WAAWO,aAElD,kBAATb,EACI2B,EAAWtB,EAAOW,QAAQE,SAAWb,EAAOW,QAAQC,UAE/C,YAATjB,GAA+B,gBAATA,EACrBE,EACCyB,EACI,2BAEDtB,EAAOW,QAAQI,QAEnBO,EACItB,EAAOW,QAAQE,SAEhBb,EAAOW,QAAQK,eACH,cAATrB,GAWS,aAATA,EAVNE,EACCyB,EACI,2BAEDtB,EAAOW,QAAQK,eAEnBM,EACItB,EAAOW,QAAQE,SAEhBb,EAAOW,QAAQG,MAYH,iBAATnB,GAA2BA,EAAKyE,WAAW,QACjD9C,EACItB,EAAOW,QAAQE,SAEhBb,EAAOW,QAAQC,eAJhB"}

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

	@@ -1 +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';\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","_a","name","dial","code","selectedFlag","_b","toLowerCase","useEffect","_c","_jsx","DropdownPopover","Object","assign","version","isSearchable","width","_d","popoverWidth","placement","_e","strategy","_f","placementStrategy","options","CountriesData","map","country","flag","value","label","searchKey","customComponent","_jsxs","StyledCountryPickerOption","children","hideFlagImage","src","className","alt","BodySecondary","style","countryTextStyle","color","codeColor","COLORS","text","primary","dialColor","selected","disabled","onSelect","option","matchingOption","filter","onCountrySelect","StyledCountryPickerWrapper","height","containerStyles","onClick","console","log","onDropdownClick","call","_g","DownIcon","content"],"mappings":"gyCAgBaA,MAAAA,EAePC,sBACL,MAAOC,EAAiBC,GAAsBC,EAKpB,QAAzBC,EAAAJ,EAAMC,uBAAmB,IAAAG,EAAAA,EAAA,CACxBC,KAAM,QACNC,KAAM,MACNC,KAAM,OAGFC,EAAe,uBAA6C,QAAtBC,EAAAR,EAAgBM,YAAM,IAAAE,OAAA,EAAAA,EAAAC,oBAElEC,GAAU,KACLX,EAAMC,iBACTC,EAAmBF,EAAMC,gBACzB,GACC,CAAwB,QAAvBW,EAAAZ,EAAMC,uBAAiB,IAAAW,OAAA,EAAAA,EAAAL,OA2C3B,OACCM,EAACC,EACAC,OAAAC,OAAA,CAAAC,QAASjB,EAAMiB,QACfC,cAAY,EACZC,MAAyB,QAAlBC,EAAApB,EAAMqB,oBAAY,IAAAD,EAAAA,EAAI,QAC7BE,kBAAWC,EAAAvB,EAAMsB,yBAAa,eAC9BE,SAAqC,QAA3BC,EAAAzB,EAAM0B,yBAAqB,IAAAD,EAAAA,EAAA,WACrCE,QA/CMC,EAAcC,KAAKC,gBACzB,MAAMC,EAAO,uBAAqC,QAAd3B,EAAA0B,EAAQvB,YAAM,IAAAH,OAAA,EAAAA,EAAAM,oBAClD,MAAO,CACNsB,MAAOF,EAAQvB,KACf0B,MAAOH,EAAQxB,KACf4B,UAAWJ,EAAQzB,KACnB8B,gBACCC,EAACC,EACC,CAAAC,SAAA,EAACtC,EAAMuC,eACP1B,EAAA,MAAA,CACC2B,IAAKT,EACLU,UAAU,uBACVC,IAAKZ,EAAQzB,OAIf+B,EAACO,EAAc5B,OAAAC,OAAA,CAAA4B,MAA6B,QAAtBnC,EAAAT,EAAM6C,wBAAgB,IAAApC,EAAAA,EAAI,IAC/C,CAAA6B,SAAA,CAAAzB,EAAA,OAAAE,OAAAC,OAAA,CACC4B,MAAO,CACNE,cAAOlC,EAAAZ,EAAM+C,yBAAaC,EAAOC,KAAKC,UAGtC,CAAAZ,SAAAR,EAAQvB,QAET,KACDM,EACC,OAAAE,OAAAC,OAAA,CAAA4B,MAAO,CACNE,cAAO1B,EAAApB,EAAMmD,yBAAaH,EAAOC,KAAKC,UACtC,CAAAZ,SAEAR,EAAQxB,eAKb8C,SAAUnD,EAAgBM,OAASuB,EAAQvB,KAC3C,IAYD8C,SAAUrD,EAAMqD,SAChBC,SAAWC,IACV,MAAMC,EAAiB5B,EAAc6B,QACnC3B,GAAYA,EAAQvB,OAAUgD,EAAwBvB,QAExD9B,EAAmBsD,EAAe,IAClCxD,EAAM0D,gBAAgBF,EAAe,GAAG,aAGzCpB,EAACuB,iBACAC,OAAQ5D,EAAM4D,OACdhB,MAAO5C,EAAM6D,gBACbC,QAASA,WACRC,QAAQC,IAAI,SACS,QAArB5D,EAAAJ,EAAMiE,uBAAe,IAAA7D,GAAAA,EAAA8D,KAAAlE,EAAI,GAG1B,CAAAsC,SAAA,CAAAF,EAAA,MAAArB,OAAAC,OAAA,CAAKyB,UAAU,oBACb,CAAAH,SAAA,EAACtC,EAAMuC,eACP1B,EAAA,MAAA,CACC2B,IAAKhC,EACLiC,UAAU,gCACVC,IAAKzC,EAAgBI,OAGvBQ,EAAC8B,iBAAcC,MAAiC,QAA1BuB,EAAAnE,EAAM6C,wBAAoB,IAAAsB,EAAAA,EAAA,CAAA,aAC9ClE,EAAgBK,YAGnBO,EAACuD,GAASjD,MAAO,GAAIyC,OAAQ,GAAId,MAAOE,EAAOqB,QAAQnB,gBAEvC"}
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","_a","name","dial","code","selectedFlag","_b","toLowerCase","useEffect","_c","_jsx","DropdownPopover","Object","assign","version","isSearchable","width","_d","popoverWidth","placement","_e","strategy","_f","placementStrategy","options","CountriesData","map","country","flag","value","label","searchKey","customComponent","_jsxs","StyledCountryPickerOption","children","hideFlagImage","src","className","alt","BodySecondary","style","countryTextStyle","color","codeColor","COLORS","text","primary","dialColor","selected","disabled","onSelect","option","matchingOption","filter","onCountrySelect","StyledCountryPickerWrapper","height","containerStyles","onClick","console","log","onDropdownClick","call","_g","DownIcon","content"],"mappings":"gyCAgBaA,MAAAA,EAePC,sBACL,MAAOC,EAAiBC,GAAsBC,EAKpB,QAAzBC,EAAAJ,EAAMC,uBAAmB,IAAAG,EAAAA,EAAA,CACxBC,KAAM,QACNC,KAAM,MACNC,KAAM,OAGFC,EAAe,uBAA6C,QAAtBC,EAAAR,EAAgBM,YAAM,IAAAE,OAAA,EAAAA,EAAAC,oBAElEC,GAAU,KACLX,EAAMC,iBACTC,EAAmBF,EAAMC,gBACzB,GACC,CAAwB,QAAvBW,EAAAZ,EAAMC,uBAAiB,IAAAW,OAAA,EAAAA,EAAAL,OA2C3B,OACCM,EAACC,EACAC,OAAAC,OAAA,CAAAC,QAASjB,EAAMiB,QACfC,cAAY,EACZC,MAAyB,QAAlBC,EAAApB,EAAMqB,oBAAY,IAAAD,EAAAA,EAAI,QAC7BE,kBAAWC,EAAAvB,EAAMsB,yBAAa,eAC9BE,SAAqC,QAA3BC,EAAAzB,EAAM0B,yBAAqB,IAAAD,EAAAA,EAAA,WACrCE,QA/CMC,EAAcC,KAAKC,gBACzB,MAAMC,EAAO,uBAAqC,QAAd3B,EAAA0B,EAAQvB,YAAM,IAAAH,OAAA,EAAAA,EAAAM,oBAClD,MAAO,CACNsB,MAAOF,EAAQvB,KACf0B,MAAOH,EAAQxB,KACf4B,UAAWJ,EAAQzB,KACnB8B,gBACCC,EAACC,EACC,CAAAC,SAAA,EAACtC,EAAMuC,eACP1B,EAAA,MAAA,CACC2B,IAAKT,EACLU,UAAU,uBACVC,IAAKZ,EAAQzB,OAIf+B,EAACO,EAAc5B,OAAAC,OAAA,CAAA4B,MAA6B,QAAtBnC,EAAAT,EAAM6C,wBAAgB,IAAApC,EAAAA,EAAI,IAC/C,CAAA6B,SAAA,CAAAzB,EAAA,OAAAE,OAAAC,OAAA,CACC4B,MAAO,CACNE,cAAOlC,EAAAZ,EAAM+C,yBAAaC,EAAOC,KAAKC,UAGtC,CAAAZ,SAAAR,EAAQvB,QAET,KACDM,EACC,OAAAE,OAAAC,OAAA,CAAA4B,MAAO,CACNE,cAAO1B,EAAApB,EAAMmD,yBAAaH,EAAOC,KAAKC,UACtC,CAAAZ,SAEAR,EAAQxB,eAKb8C,SAAUnD,EAAgBM,OAASuB,EAAQvB,KAC3C,IAYD8C,SAAUrD,EAAMqD,SAChBC,SAAWC,IACV,MAAMC,EAAiB5B,EAAc6B,QACnC3B,GAAYA,EAAQvB,OAAUgD,EAAwBvB,QAExD9B,EAAmBsD,EAAe,IAClCxD,EAAM0D,gBAAgBF,EAAe,GAAG,aAGzCpB,EAACuB,iBACAC,OAAQ5D,EAAM4D,OACdhB,MAAO5C,EAAM6D,gBACbC,QAASA,WACRC,QAAQC,IAAI,SACS,QAArB5D,EAAAJ,EAAMiE,uBAAe,IAAA7D,GAAAA,EAAA8D,KAAAlE,EAAI,GAG1B,CAAAsC,SAAA,CAAAF,EAAA,MAAArB,OAAAC,OAAA,CAAKyB,UAAU,oBACb,CAAAH,SAAA,EAACtC,EAAMuC,eACP1B,EAAA,MAAA,CACC2B,IAAKhC,EACLiC,UAAU,gCACVC,IAAKzC,EAAgBI,OAGvBQ,EAAC8B,iBAAcC,MAAiC,QAA1BuB,EAAAnE,EAAM6C,wBAAoB,IAAAsB,EAAAA,EAAA,CAAA,aAC9ClE,EAAgBK,YAGnBO,EAACuD,GAASjD,MAAO,GAAIyC,OAAQ,GAAId,MAAOE,EAAOqB,QAAQnB,gBAEvC"}

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

	@@ -1 +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';\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","_ref","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","_a","code","toLowerCase","undefined","getCountryOptions","useMemo","CountriesData","map","country","flag","value","label","name","searchKey","customComponent","_jsxs","StyledCountryOption","children","_jsx","src","className","alt","Object","assign","BodySecondary","style","color","COLORS","text","primary","secondary","fontSize","selected","DropdownPopover","isSearchable","width","strategy","options","onSelect","option","matchingCountry","find","handleCountrySelect","StyledCountryPickerContainer","onClick","_Fragment","DownIcon","content"],"mappings":"oyCAqFaA,MAAAA,EAA8CC,IAetD,IAfuDC,QAC3DA,EAAOC,gBACPA,EAAeC,gBACfA,EAAeC,aACfA,EAAe,QAAOC,OACtBA,EAAMC,UACNA,EAAY,eAAcC,kBAC1BA,EAAoB,WAAUC,SAC9BA,GAAW,EAAKC,cAChBA,GAAgB,EAAKC,gBACrBA,EAAeC,YACfA,EAAc,mBAAkBC,gBAChCA,GAAkB,EAAIC,iBACtBA,EAAgBC,gBAChBA,GACAd,QACA,MAAOe,EAAyBC,GAA8BC,EAE5Dd,GAGIe,EAAiBf,QAAAA,EAAmBY,EAEpCI,EAAeD,yBACwB,QAAnBE,EAAAF,EAAeG,YAAI,IAAAD,OAAA,EAAAA,EAAEE,yBAC5CC,EAEGC,EAAoBC,GAAQ,IAC1BC,EAAcC,KAAKC,UACzB,MAAMC,EAAO,uBAAqC,QAAdT,EAAAQ,EAAQP,YAAM,IAAAD,OAAA,EAAAA,EAAAE,oBAClD,MAAO,CACNQ,MAAOF,EAAQP,KACfU,MAAOH,EAAQI,KACfC,UAAWL,EAAQI,KACnBE,gBACCC,EAACC,EAAmB,CAAAC,SAAA,EACjB5B,GACD6B,EAAK,MAAA,CAAAC,IAAKV,EAAMW,UAAU,eAAeC,IAAKb,EAAQI,OAEvDG,EAAA,MAAAO,OAAAC,OAAA,CAAKH,UAAU,gBACd,CAAAH,SAAA,CAAAC,EAACM,EAAaF,OAAAC,OAAA,CACbE,MAAKH,OAAAC,OAAA,CACJG,MAAOC,EAAOC,KAAKC,SAChBpC,IAAgB,CAAAwB,SAGnBT,EAAQI,QAETpB,GACA0B,EAACM,EACAF,OAAAC,OAAA,CAAAE,MAAO,CACNC,MAAOC,EAAOC,KAAKE,UACnBC,SAAU,SACV,CAAAd,SAEAT,EAAQP,eAMd+B,UAAUlC,aAAc,EAAdA,EAAgBG,QAASO,EAAQP,KAC3C,KAEA,CAACH,eAAAA,EAAgBG,KAAMZ,EAAeG,EAAiBC,IAe1D,OACCyB,EAACe,EACAX,OAAAC,OAAA,CAAA1C,QAASA,EACTqD,cAAY,EACZC,MAAOnD,EACPE,UAAWA,EACXkD,SAAUjD,EACVkD,QAASjC,EACThB,SAAUA,EACVkD,SAAWC,GAtBgBA,KAC5B,MAAMC,EAAkBlC,EAAcmC,MACpCjC,GAAYA,EAAQP,OAASsC,EAAO7B,QAElC8B,SAEqBrC,IAApBpB,GACHa,EAA2B4C,GAE5B1D,EAAgB0D,GAChB,EAYsBE,CAAoBH,IAAuB,CAAAtB,SAEjEF,EAAC4B,EAA4BrB,OAAAC,OAAA,CAC5BtC,OAAQA,EACRwC,MAAOnC,EACPsD,QAASlD,EACTN,SAAUA,GAAQ,CAAA6B,SAAA,CAElBC,EAAK,MAAAI,OAAAC,OAAA,CAAAH,UAAU,oBAAkB,CAAAH,SAC/BnB,EACAiB,EAAA8B,EAAA,CAAA5B,SAAA,EACG5B,GAAiBU,GAClBmB,EACC,MAAA,CAAAC,IAAKpB,EACLqB,UAAU,eACVC,IAAKvB,EAAec,OAGtBM,EAACM,EAAaF,OAAAC,OAAA,CAACE,MAAOhC,aACpBK,EAAec,WAIlBM,EAACM,EACAF,OAAAC,OAAA,CAAAE,qBACCC,MAAOC,EAAOC,KAAKxC,UAChBK,IAAgB,CAAAwB,SAGnB1B,QAIJ2B,EAAC4B,EAAQ,CACRX,MAAO,GACPlD,OAAQ,GACRyC,MAAOtC,EAAWuC,EAAOC,KAAKxC,SAAWuC,EAAOoB,QAAQlB,gBAGzC"}
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","_ref","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","_a","code","toLowerCase","undefined","getCountryOptions","useMemo","CountriesData","map","country","flag","value","label","name","searchKey","customComponent","_jsxs","StyledCountryOption","children","_jsx","src","className","alt","Object","assign","BodySecondary","style","color","COLORS","text","primary","secondary","fontSize","selected","DropdownPopover","isSearchable","width","strategy","options","onSelect","option","matchingCountry","find","handleCountrySelect","StyledCountryPickerContainer","onClick","_Fragment","DownIcon","content"],"mappings":"oyCAqFaA,MAAAA,EAA8CC,IAetD,IAfuDC,QAC3DA,EAAOC,gBACPA,EAAeC,gBACfA,EAAeC,aACfA,EAAe,QAAOC,OACtBA,EAAMC,UACNA,EAAY,eAAcC,kBAC1BA,EAAoB,WAAUC,SAC9BA,GAAW,EAAKC,cAChBA,GAAgB,EAAKC,gBACrBA,EAAeC,YACfA,EAAc,mBAAkBC,gBAChCA,GAAkB,EAAIC,iBACtBA,EAAgBC,gBAChBA,GACAd,QACA,MAAOe,EAAyBC,GAA8BC,EAE5Dd,GAGIe,EAAiBf,QAAAA,EAAmBY,EAEpCI,EAAeD,yBACwB,QAAnBE,EAAAF,EAAeG,YAAI,IAAAD,OAAA,EAAAA,EAAEE,yBAC5CC,EAEGC,EAAoBC,GAAQ,IAC1BC,EAAcC,KAAKC,UACzB,MAAMC,EAAO,uBAAqC,QAAdT,EAAAQ,EAAQP,YAAM,IAAAD,OAAA,EAAAA,EAAAE,oBAClD,MAAO,CACNQ,MAAOF,EAAQP,KACfU,MAAOH,EAAQI,KACfC,UAAWL,EAAQI,KACnBE,gBACCC,EAACC,EAAmB,CAAAC,SAAA,EACjB5B,GACD6B,EAAK,MAAA,CAAAC,IAAKV,EAAMW,UAAU,eAAeC,IAAKb,EAAQI,OAEvDG,EAAA,MAAAO,OAAAC,OAAA,CAAKH,UAAU,gBACd,CAAAH,SAAA,CAAAC,EAACM,EAAaF,OAAAC,OAAA,CACbE,MAAKH,OAAAC,OAAA,CACJG,MAAOC,EAAOC,KAAKC,SAChBpC,IAAgB,CAAAwB,SAGnBT,EAAQI,QAETpB,GACA0B,EAACM,EACAF,OAAAC,OAAA,CAAAE,MAAO,CACNC,MAAOC,EAAOC,KAAKE,UACnBC,SAAU,SACV,CAAAd,SAEAT,EAAQP,eAMd+B,UAAUlC,aAAc,EAAdA,EAAgBG,QAASO,EAAQP,KAC3C,KAEA,CAACH,eAAAA,EAAgBG,KAAMZ,EAAeG,EAAiBC,IAe1D,OACCyB,EAACe,EACAX,OAAAC,OAAA,CAAA1C,QAASA,EACTqD,cAAY,EACZC,MAAOnD,EACPE,UAAWA,EACXkD,SAAUjD,EACVkD,QAASjC,EACThB,SAAUA,EACVkD,SAAWC,GAtBgBA,KAC5B,MAAMC,EAAkBlC,EAAcmC,MACpCjC,GAAYA,EAAQP,OAASsC,EAAO7B,QAElC8B,SAEqBrC,IAApBpB,GACHa,EAA2B4C,GAE5B1D,EAAgB0D,GAChB,EAYsBE,CAAoBH,IAAuB,CAAAtB,SAEjEF,EAAC4B,EAA4BrB,OAAAC,OAAA,CAC5BtC,OAAQA,EACRwC,MAAOnC,EACPsD,QAASlD,EACTN,SAAUA,GAAQ,CAAA6B,SAAA,CAElBC,EAAK,MAAAI,OAAAC,OAAA,CAAAH,UAAU,oBAAkB,CAAAH,SAC/BnB,EACAiB,EAAA8B,EAAA,CAAA5B,SAAA,EACG5B,GAAiBU,GAClBmB,EACC,MAAA,CAAAC,IAAKpB,EACLqB,UAAU,eACVC,IAAKvB,EAAec,OAGtBM,EAACM,EAAaF,OAAAC,OAAA,CAACE,MAAOhC,aACpBK,EAAec,WAIlBM,EAACM,EACAF,OAAAC,OAAA,CAAAE,qBACCC,MAAOC,EAAOC,KAAKxC,UAChBK,IAAgB,CAAAwB,SAGnB1B,QAIJ2B,EAAC4B,EAAQ,CACRX,MAAO,GACPlD,OAAQ,GACRyC,MAAOtC,EAAWuC,EAAOC,KAAKxC,SAAWuC,EAAOoB,QAAQlB,gBAGzC"}

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

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

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

	@@ -1 +1 @@
1	- {"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","_a","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","openDropdownProps","__rest","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","useEffect","flatSelectedOption","options","forEach","option","op","selected","push","Object","assign","label","textVal","getSelectedOptionsAsText","displayText","_b","configuredMaxWidth","buttonWidth","inputWidth","_c","width","dropdownWidth","_d","_jsx","InputStyleContext","Provider","InputWrapper","height","maxWidth","zIndex","cursor","padding","backgroundColor","undefined","COLORS","background","positive","light","transition","input","minHeight","color","content","children","onMouseEnter","onMouseLeave","style","_jsxs","DropdownPopover","ref","Array","isArray","onDropdownVisbilityChange","isOpen","Input","version","state","errorMessage","error","variant","placeholder","onChangeText","leftIcon","_e","leadingIcon","icon","_Fragment","rightIcon","display","trailingIcon","DownIcon","transform","onClick","primary","truncateText","ChipInput","chips","chip","containerStyle","_f","displayName"],"mappings":"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"}
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","_a","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","openDropdownProps","__rest","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","useEffect","flatSelectedOption","options","forEach","option","op","selected","push","Object","assign","label","textVal","getSelectedOptionsAsText","displayText","_b","configuredMaxWidth","buttonWidth","inputWidth","_c","width","dropdownWidth","_d","_jsx","InputStyleContext","Provider","InputWrapper","height","maxWidth","zIndex","cursor","padding","backgroundColor","version","COLORS","surface","hovered","standard","undefined","BASE_COLORS","positive","background","inactive","transition","input","minHeight","color","content","children","onMouseEnter","onMouseLeave","style","_jsxs","DropdownPopover","ref","Array","isArray","onDropdownVisbilityChange","isOpen","Input","state","errorMessage","error","variant","placeholder","onChangeText","leftIcon","_e","leadingIcon","icon","_Fragment","rightIcon","display","trailingIcon","DownIcon","transform","onClick","primary","truncateText","ChipInput","chips","chip","containerStyle","_f","displayName"],"mappings":"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"}

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

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

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

	@@ -1 +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 { 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","forwardRef","_a","unTypedRef","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","__rest","ref","openDropdown","setDropdownVisibility","useState","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","placement","strategy","onCloseHandle","data","isMultiSelect","onSelect","call","_b","onClose","useImperativeHandle","useEffect","current","dropDownComponent","_jsxs","Object","assign","style","position","_jsx","OverLapAbs","allowEvents","disabled","onClick","e","onDropdownOpen","preventDefault","OpenDropdownContainer","zIndex","dropdownZIndex","DropShadow","level","borderRadius","OpenedDropdown","options","zeroState","isDraggable","onOptionsReorder","undefined","Tooltip","body","hideArrow","displayName"],"mappings":"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"}
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","forwardRef","_a","unTypedRef","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","__rest","ref","openDropdown","setDropdownVisibility","useState","isHovering","setIsHovering","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","placement","strategy","onCloseHandle","data","isMultiSelect","onSelect","call","_b","onClose","useImperativeHandle","useEffect","current","dropDownComponent","_jsxs","_Fragment","Object","assign","style","position","backgroundColor","COLORS","surface","hovered","standard","transition","borderRadius","onMouseEnter","undefined","onMouseLeave","_jsx","OverLapAbs","allowEvents","disabled","onClick","e","onDropdownOpen","preventDefault","OpenDropdownContainer","zIndex","dropdownZIndex","DropShadow","level","boxShadow","OpenedDropdown","options","zeroState","isDraggable","onOptionsReorder","Tooltip","body","hideArrow","displayName"],"mappings":"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"}

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../../assets/icons/errorInfo.svg.js";import n from"../../../../assets/icons/refresh-purple.svg.js";import{useCallback as r,useState as i,useRef as s,useEffect as l}from"react";import{ZeroState as c}from"../../../zeroState/ZeroState.js";import{useOutside as a}from"../../../../hooks/useOutside.js";import{COLORS as u}from"../../../../constants/Theme.js";import{useDropdown as d}from"../../hooks/useDropdown.js";import{Description as p}from"./description/Description.js";import{FreeFormMenu as h}from"./menu/FreeFormMenu.js";import{MenuList as g}from"./menu/MenuList.js";import{SelectAllMenu as m}from"./menu/SelectAllMenu.js";import f from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as b,MenuListContainer as v}from"./OpennedDropdown.styled.js";import{SearchBox as S}from"./searchbox/SearchBox.js";import{SearchZeroState as j}from"./searchbox/SearchZeroState.js";const w=304,O=290,y=y=>{let{options:x,isSearchable:C,isMultiSelect:k,maxSelections:D,width:L,allowFreeForm:I,height:T,onClose:E,onSelect:M,onSearch:F,version:A,skipSorting:B,headerRef:H,hideSelectAll:R,primaryButtonText:q,onInfiniteScroll:z,onMultiSelectClear:P,onDropdownItemClick:V,buttonOptions:W,isSearchLoading:Z,isOptionsLoading:$,optionsErrorState:K,disableSearchOptions:N,disableSearchedOptionExcept:U,useDefaultCursor:G,containerStyle:J={},zeroState:Q,isDraggable:X=!1,onOptionsReorder:Y,hideClearButton:_=!1,showCheckboxForCustomElement:ee=!1}=y;var te;const oe=r((e=>{if(!X||!k)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[X,k]),[ne,re]=i((()=>oe(x))),ie=s(ne),se=s(!1),le=s(Y);l((()=>{re(oe(x))}),[x,oe]),l((()=>{ie.current=ne}),[ne]),l((()=>{le.current=Y}),[Y]),l((()=>()=>{se.current&&le.current&&le.current(ie.current)}),[]);const ce=r((e=>{re(e),"2.0"===A?null==Y||Y(e):se.current=!0}),[Y,A]),ae=X?ne:x,{dropdownOptions:ue,search:de,searchedString:pe,searchedOptions:he,searchError:ge,retrySearch:me,onApplyHandler:fe,selectAllHandler:be,onMultiSelectClear:ve,onFreeFormSelect:Se,onMultiSelectApply:je,latestDropdownOptionsRef:we,getSelectedOptions:Oe,getCurrentSelectionCount:ye}=d(A,ae,M,B||X,k,F,N,U,D),[xe,Ce]=i(null!=L?L:O),[ke,De]=i(null),[Le,Ie]=i(-1),Te=s(null),Ee=s([]),Me=s(null);a(Te,(()=>{if(De(null),k&&"2.0"===A){const e=Oe(we.current);null==E||E(e)}else null==E||E(ue)}),[H,Ee]),l((()=>{const e=setTimeout((()=>{Te.current&&Te.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);l((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(pe&&F?he:ue);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),Ie((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),Ie((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&Le>=0){e.preventDefault();const o=t[Le];o&&(fe(Object.assign(Object.assign({},o),{selected:!o.selected})),V&&V(o))}},t=Te.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[Le,pe,he,ue,F,fe,V]);const Fe=null!=T?T:w,Ae="number"==typeof Fe?C&&k?Fe-96:C&&!k||!C&&k?Fe-48:Fe:Fe;l((()=>{const e=null!=L?L:O;if(null===ke)Ce(e);else if("number"==typeof e)Ce(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));Ce(t)}}),[ke]);const Be=[],He=(e=>{if(!k||!D&&0!==D)return e;const t=ye(ue)>=D;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((pe&&F?he:ue).map((e=>{var t,o;if(pe&&!F){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))&&(Be.push(!pe||e.label===pe),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(pe.toLowerCase()))?(Be.push(!pe||e.label===pe),e):null}return e})).filter((e=>null!==e))),Re=!!C&&pe&&0===He.length,qe=!pe&&!!$,ze=!pe&&!!K&&!qe,Pe=!(pe||He.length||qe||ze),Ve=qe||ze||Pe,We=(null==Q?void 0:Q.title)||"No results found",Ze=(null==Q?void 0:Q.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",$e=(null==K?void 0:K.title)||"Failed to load options",Ke=(null==K?void 0:K.subTitle)||"Something went wrong while fetching the list. Please try again",Ne={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:u.background.inverseLight,customIconColor:u.background.inverseLight,LeadingIcon:n},Ue=Object.assign({IconHolderStyle:{background:u.background.negative.light},Icon:e(o,{color:u.content.negative,width:24,height:24})},K);Ue.actionButton=Object.assign(Object.assign({},Ne),null!==(te=null==K?void 0:K.actionButton)&&void 0!==te?te:{});const Ge=qe?void 0:ze?Ue:Q;return t(b,Object.assign({version:A,ref:Te,tabIndex:-1,style:Object.assign(Object.assign({width:xe},J),{outline:"none"})},{children:[t("div",Object.assign({style:{width:ke?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!C&&e(S,{onSearch:de,version:A}),Ve?e("div",Object.assign({style:{height:Fe,display:"flex",background:u.background.base}},{children:e(c,Object.assign({},null!=Ge?Ge:{},{isLoading:qe,title:ze?$e:We,subTitle:ze?Ke:Ze}))})):t(v,Object.assign({minHeight:Fe,maxHeight:Ae,ref:Me},{children:[!!k&&!Re&&!R&&e(m,{version:A,options:pe&&F?he:ue,onSelect:be}),!I&&Re&&e(j,{isLoading:Z,errorMessage:ge,onRetry:me,height:Ae,searchedString:pe,containerWidth:L}),I&&(Re||!!Be.length&&Be.every((e=>!1===e)))&&e(h,{version:A,isMultiSelect:k,onSelect:Se,searchedString:pe}),e(g,{onInfiniteScroll:z,onDropdownItemClick:V,version:A,onSelect:fe,showDescription:function(e,t){De(e&&t?{title:e,description:t}:null)},isMultiSelect:k,options:He,useDefaultCursor:G,ref:Ee,focusedIndex:Le,isDraggable:X,onOptionsReorder:ce,showCheckboxForCustomElement:ee})]})),!!k&&!Ve&&"2.0"!==A&&e(f,{onClear:()=>{ve(),null==P||P()},onApply:je,list:pe&&F?he:ue,buttonText:q,buttonOptions:W,hideClearButton:_})]})),!!ke&&e(p,{title:ke.title,description:ke.description,version:A})]}))};export{y as OpenedDropdown};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../../assets/icons/errorInfo.svg.js";import n from"../../../../assets/icons/refresh-purple.svg.js";import{useCallback as r,useState as i,useRef as s,useEffect as l}from"react";import{ZeroState as c}from"../../../zeroState/ZeroState.js";import{useOutside as a}from"../../../../hooks/useOutside.js";import{COLORS as u}from"../../../../constants/Theme.js";import{useDropdown as d}from"../../hooks/useDropdown.js";import{Description as p}from"./description/Description.js";import{FreeFormMenu as h}from"./menu/FreeFormMenu.js";import{MenuList as g}from"./menu/MenuList.js";import{SelectAllMenu as m}from"./menu/SelectAllMenu.js";import f from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as b,MenuListContainer as v}from"./OpennedDropdown.styled.js";import{SearchBox as S}from"./searchbox/SearchBox.js";import{SearchZeroState as j}from"./searchbox/SearchZeroState.js";const w=304,O=290,y=y=>{let{options:x,isSearchable:C,isMultiSelect:k,maxSelections:D,width:L,allowFreeForm:I,height:T,onClose:E,onSelect:M,onSearch:F,version:A,skipSorting:B,headerRef:H,hideSelectAll:R,primaryButtonText:q,onInfiniteScroll:z,onMultiSelectClear:P,onDropdownItemClick:V,buttonOptions:W,isSearchLoading:Z,isOptionsLoading:$,optionsErrorState:K,disableSearchOptions:N,disableSearchedOptionExcept:U,useDefaultCursor:G,containerStyle:J={},zeroState:Q,isDraggable:X=!1,onOptionsReorder:Y,hideClearButton:_=!1,showCheckboxForCustomElement:ee=!1}=y;var te;const oe=r((e=>{if(!X||!k)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[X,k]),[ne,re]=i((()=>oe(x))),ie=s(ne),se=s(!1),le=s(Y);l((()=>{re(oe(x))}),[x,oe]),l((()=>{ie.current=ne}),[ne]),l((()=>{le.current=Y}),[Y]),l((()=>()=>{se.current&&le.current&&le.current(ie.current)}),[]);const ce=r((e=>{re(e),"2.0"===A?null==Y||Y(e):se.current=!0}),[Y,A]),ae=X?ne:x,{dropdownOptions:ue,search:de,searchedString:pe,searchedOptions:he,searchError:ge,retrySearch:me,onApplyHandler:fe,selectAllHandler:be,onMultiSelectClear:ve,onFreeFormSelect:Se,onMultiSelectApply:je,latestDropdownOptionsRef:we,getSelectedOptions:Oe,getCurrentSelectionCount:ye}=d(A,ae,M,B||X,k,F,N,U,D),[xe,Ce]=i(null!=L?L:O),[ke,De]=i(null),[Le,Ie]=i(-1),Te=s(null),Ee=s([]),Me=s(null);a(Te,(()=>{if(De(null),k&&"2.0"===A){const e=Oe(we.current);null==E||E(e)}else null==E||E(ue)}),[H,Ee]),l((()=>{const e=setTimeout((()=>{Te.current&&Te.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);l((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(pe&&F?he:ue);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),Ie((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),Ie((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&Le>=0){e.preventDefault();const o=t[Le];o&&(fe(Object.assign(Object.assign({},o),{selected:!o.selected})),V&&V(o))}},t=Te.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[Le,pe,he,ue,F,fe,V]);const Fe=null!=T?T:w,Ae="number"==typeof Fe?C&&k?Fe-96:C&&!k||!C&&k?Fe-48:Fe:Fe;l((()=>{const e=null!=L?L:O;if(null===ke)Ce(e);else if("number"==typeof e)Ce(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));Ce(t)}}),[ke]);const Be=[],He=(e=>{if(!k||!D&&0!==D)return e;const t=ye(ue)>=D;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((pe&&F?he:ue).map((e=>{var t,o;if(pe&&!F){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))&&(Be.push(!pe||e.label===pe),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(pe.toLowerCase()))?(Be.push(!pe||e.label===pe),e):null}return e})).filter((e=>null!==e))),Re=!!C&&pe&&0===He.length,qe=!pe&&!!$,ze=!pe&&!!K&&!qe,Pe=!(pe||He.length||qe||ze),Ve=qe||ze||Pe,We=(null==Q?void 0:Q.title)||"No results found",Ze=(null==Q?void 0:Q.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",$e=(null==K?void 0:K.title)||"Failed to load options",Ke=(null==K?void 0:K.subTitle)||"Something went wrong while fetching the list. Please try again",Ne={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:u.background.inverseLight,customIconColor:u.background.inverseLight,LeadingIcon:n},Ue=Object.assign({IconHolderStyle:{background:u.background.negative.light},Icon:e(o,{color:u.content.negative,width:24,height:24})},K);Ue.actionButton=Object.assign(Object.assign({},Ne),null!==(te=null==K?void 0:K.actionButton)&&void 0!==te?te:{});const Ge=qe?void 0:ze?Ue:Q;return t(b,Object.assign({version:A,ref:Te,tabIndex:-1,style:Object.assign(Object.assign({width:xe},J),{outline:"none"})},{children:[t("div",Object.assign({style:{width:ke?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!C&&e(S,{onSearch:de,version:A}),Ve?e("div",Object.assign({style:{height:Fe,display:"flex",background:u.background.base}},{children:e(c,Object.assign({},null!=Ge?Ge:{},{isLoading:qe,title:ze?$e:We,subTitle:ze?Ke:Ze}))})):t(v,Object.assign({minHeight:Fe,maxHeight:Ae,ref:Me},{children:[!!k&&!Re&&!R&&e(m,{version:A,options:pe&&F?he:ue,onSelect:be}),!I&&Re&&e(j,{isLoading:Z,errorMessage:ge,onRetry:me,height:Ae,searchedString:pe,containerWidth:L,version:A}),I&&(Re||!!Be.length&&Be.every((e=>!1===e)))&&e(h,{version:A,isMultiSelect:k,onSelect:Se,searchedString:pe}),e(g,{onInfiniteScroll:z,onDropdownItemClick:V,version:A,onSelect:fe,showDescription:function(e,t){De(e&&t?{title:e,description:t}:null)},isMultiSelect:k,options:He,useDefaultCursor:G,ref:Ee,focusedIndex:Le,isDraggable:X,onOptionsReorder:ce,showCheckboxForCustomElement:ee})]})),!!k&&!Ve&&"2.0"!==A&&e(f,{onClear:()=>{ve(),null==P||P()},onApply:je,list:pe&&F?he:ue,buttonText:q,buttonOptions:W,hideClearButton:_})]})),!!ke&&e(p,{title:ke.title,description:ke.description,version:A})]}))};export{y as OpenedDropdown};
 //# sourceMappingURL=OpennedDropdown.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OpennedDropdown.js","sources":["../../../../../../src/components/dropdown/OpenedDropdown/components/OpennedDropdown.tsx"],"sourcesContent":["import ErrorInfoIcon from '@src/assets/icons/errorInfo.svg';\nimport RetryIcon from '@src/assets/icons/refresh-purple.svg';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport { useDropdown } from '../../hooks/useDropdown';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tMultiSelectOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from '../../type';\nimport { Description } from './description/Description';\nimport { FreeFormMenu } from './menu/FreeFormMenu';\nimport { MenuList } from './menu/MenuList';\nimport { SelectAllMenu } from './menu/SelectAllMenu';\nimport MultiSelectDropdownBottomBar from './multiSelect/MultiSelectDropdownBottomBar';\nimport {\n\tMenuListContainer,\n\tOpennedDropdownContainer,\n} from './OpennedDropdown.styled';\nimport { SearchBox } from './searchbox/SearchBox';\nimport { SearchZeroState } from './searchbox/SearchZeroState';\n\n/** CONSTANTS /\nconst defaults = {\n\theight: 304,\n\twidth: 290,\n};\n\nexport const OpenedDropdown: React.FC<OpenDropdownProps> = ({\n\toptions,\n\tisSearchable,\n\tisMultiSelect,\n\tmaxSelections,\n\twidth,\n\tallowFreeForm,\n\theight,\n\tonClose,\n\tonSelect,\n\tonSearch,\n\tversion,\n\tskipSorting,\n\theaderRef,\n\thideSelectAll,\n\tprimaryButtonText,\n\tonInfiniteScroll,\n\tonMultiSelectClear: onMultiSelectClearProp,\n\tonDropdownItemClick,\n\tbuttonOptions,\n\tisSearchLoading,\n\tisOptionsLoading,\n\toptionsErrorState,\n\tdisableSearchOptions,\n\tdisableSearchedOptionExcept,\n\tuseDefaultCursor,\n\tcontainerStyle = {},\n\tzeroState = undefined,\n\tisDraggable = false,\n\tonOptionsReorder,\n\thideClearButton = false,\n\tshowCheckboxForCustomElement = false,\n}) => {\n\t// Sort options with selected at top, unselected at bottom, maintaining order within groups\n\tconst sortOptionsWithSelectedOnTop = useCallback(\n\t\t(opts: DropdownOption[]): DropdownOption[] => {\n\t\t\tif (!isDraggable \|\| !isMultiSelect) return opts;\n\n\t\t\tconst selected: DropdownOption[] = [];\n\t\t\tconst unselected: DropdownOption[] = [];\n\n\t\t\topts.forEach((option) => {\n\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t// Handle grouped options - maintain grouping\n\t\t\t\t\tunselected.push(option);\n\t\t\t\t} else {\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tif (singleOption.selected) {\n\t\t\t\t\t\tselected.push(option);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tunselected.push(option);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn [...selected, ...unselected];\n\t\t},\n\t\t[isDraggable, isMultiSelect],\n\t);\n\n\tconst [localOptions, setLocalOptions] = useState<DropdownOption[]>(() =>\n\t\tsortOptionsWithSelectedOnTop(options),\n\t);\n\tconst localOptionsRef = useRef<DropdownOption[]>(localOptions);\n\tconst hasReorderedRef = useRef(false);\n\tconst onOptionsReorderRef = useRef(onOptionsReorder);\n\n\tuseEffect(() => {\n\t\tsetLocalOptions(sortOptionsWithSelectedOnTop(options));\n\t}, [options, sortOptionsWithSelectedOnTop]);\n\n\tuseEffect(() => {\n\t\tlocalOptionsRef.current = localOptions;\n\t}, [localOptions]);\n\n\tuseEffect(() => {\n\t\tonOptionsReorderRef.current = onOptionsReorder;\n\t}, [onOptionsReorder]);\n\n\t// Fire onOptionsReorder on unmount (dropdown close from Apply or click-outside)\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (hasReorderedRef.current && onOptionsReorderRef.current) {\n\t\t\t\tonOptionsReorderRef.current(localOptionsRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst handleOptionsReorder = useCallback(\n\t\t(reorderedOptions: DropdownOption[]) => {\n\t\t\tsetLocalOptions(reorderedOptions);\n\t\t\t// For version 2.0 (no Apply button), apply reorder immediately\n\t\t\tif (version === '2.0') {\n\t\t\t\tonOptionsReorder?.(reorderedOptions);\n\t\t\t} else {\n\t\t\t\t// For version 1.0, defer until Apply/close (handled by unmount cleanup)\n\t\t\t\thasReorderedRef.current = true;\n\t\t\t}\n\t\t},\n\t\t[onOptionsReorder, version],\n\t);\n\n\tconst optionsToUse = isDraggable ? localOptions : options;\n\tconst {\n\t\tdropdownOptions,\n\t\tsearch,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tsearchError,\n\t\tretrySearch,\n\t\tonApplyHandler,\n\t\tselectAllHandler,\n\t\tonMultiSelectClear,\n\t\tonFreeFormSelect,\n\t\tonMultiSelectApply,\n\t\tlatestDropdownOptionsRef,\n\t\tgetSelectedOptions,\n\t\tgetCurrentSelectionCount,\n\t} = useDropdown(\n\t\tversion,\n\t\toptionsToUse,\n\t\tonSelect,\n\t\tskipSorting \|\| isDraggable,\n\t\tisMultiSelect,\n\t\tonSearch,\n\t\tdisableSearchOptions,\n\t\tdisableSearchedOptionExcept,\n\t\tmaxSelections,\n\t);\n\tconst [widthState, setWidthState] = useState(width ?? defaults.width);\n\tconst [descriptionInfo, setDescription] = useState<{\n\t\ttitle: string;\n\t\tdescription: string;\n\t} \| null>(null);\n\tconst [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst childRefs = useRef([]);\n\tconst menuListRef = useRef<HTMLDivElement>(null);\n\tuseOutside(\n\t\tref,\n\t\t() => {\n\t\t\tsetDescription(null);\n\t\t\tif (isMultiSelect && version === '2.0') {\n\t\t\t\tconst optionsToSend = getSelectedOptions(\n\t\t\t\t\tlatestDropdownOptionsRef.current,\n\t\t\t\t);\n\t\t\t\tonClose?.(optionsToSend);\n\t\t\t} else {\n\t\t\t\tonClose?.(dropdownOptions);\n\t\t\t}\n\t\t},\n\t\t[headerRef, childRefs],\n\t);\n\n\t// Auto-focus dropdown when it opens for keyboard navigation while preventing scroll to maintain popper positioning\n\tuseEffect(() => {\n\t\tconst timer = setTimeout(() => {\n\t\t\tif (ref.current) {\n\t\t\t\tref.current.focus({ preventScroll: true });\n\t\t\t}\n\t\t}, 0);\n\t\treturn () => clearTimeout(timer);\n\t}, []);\n\n\t// Get flattened selectable options\n\tconst getFlattenedOptions = (opts: DropdownOption[]): SingleOption[] => {\n\t\tconst flattened: SingleOption[] = [];\n\t\topts.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\tconst groupedOption = option as GroupedOption;\n\t\t\t\tgroupedOption.options.forEach((nestedOption) => {\n\t\t\t\t\tif (!nestedOption.disabled) {\n\t\t\t\t\t\tflattened.push(nestedOption);\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\tflattened.push(singleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn flattened;\n\t};\n\n\t/* Keyboard navigation handler /\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tconst currentOptions =\n\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions;\n\t\t\tconst flattenedOptions = getFlattenedOptions(currentOptions);\n\n\t\t\tif (flattenedOptions.length === 0) return;\n\n\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev < flattenedOptions.length - 1 ? prev + 1 : 0;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev > 0 ? prev - 1 : flattenedOptions.length - 1;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'Enter' && focusedIndex >= 0) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst focusedOption = flattenedOptions[focusedIndex];\n\t\t\t\tif (focusedOption) {\n\t\t\t\t\t// onApplyHandler handles the selection state and calls onSelect internally\n\t\t\t\t\tonApplyHandler({\n\t\t\t\t\t\t...focusedOption,\n\t\t\t\t\t\tselected: !focusedOption.selected,\n\t\t\t\t\t});\n\t\t\t\t\t// Also trigger onDropdownItemClick if provided\n\t\t\t\t\tif (onDropdownItemClick) {\n\t\t\t\t\t\tonDropdownItemClick(focusedOption);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst dropdownElement = ref.current;\n\t\tif (dropdownElement) {\n\t\t\tdropdownElement.addEventListener('keydown', handleKeyDown);\n\t\t\treturn () => {\n\t\t\t\tdropdownElement.removeEventListener('keydown', handleKeyDown);\n\t\t\t};\n\t\t}\n\t}, [\n\t\tfocusedIndex,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tdropdownOptions,\n\t\tonSearch,\n\t\tonApplyHandler,\n\t\tonDropdownItemClick,\n\t]);\n\n\t// LOCAL CONSTANTS\n\tconst heightToUse = height ?? defaults.height;\n\tconst menuListMaxHeight =\n\t\ttypeof heightToUse === 'number'\n\t\t\t? isSearchable && isMultiSelect\n\t\t\t\t? heightToUse - 96\n\t\t\t\t: (isSearchable && !isMultiSelect) \|\| (!isSearchable && isMultiSelect)\n\t\t\t\t? heightToUse - 48\n\t\t\t\t: heightToUse\n\t\t\t: heightToUse;\n\n\tfunction showDescription(title?: string, description?: string) {\n\t\tif (title && description) {\n\t\t\tsetDescription({\n\t\t\t\ttitle,\n\t\t\t\tdescription,\n\t\t\t});\n\t\t} else {\n\t\t\tsetDescription(null);\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tconst widthToUse = width ?? defaults.width;\n\t\tif (descriptionInfo === null) {\n\t\t\tsetWidthState(widthToUse);\n\t\t} else if (typeof widthToUse === 'number') {\n\t\t\tsetWidthState(widthToUse 2);\n\t\t} else if (typeof widthToUse === 'string') {\n\t\t\tif (widthToUse.endsWith('px')) {\n\t\t\t\tconst newWidth = parseInt(widthToUse.replace('px', '')) * 2;\n\t\t\t\tsetWidthState(newWidth);\n\t\t\t}\n\t\t}\n\t}, [descriptionInfo]);\n\n\t/*\n\t This is to show the search result in a stateless way\n\t */\n\n\tconst exactMatchFound: boolean[] = [];\n\n\tconst processOptionsWithMaxSelections = (\n\t\toptionsToProcess: DropdownOption[],\n\t) => {\n\t\tif (!isMultiSelect \|\| (!maxSelections && maxSelections !== 0)) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Count from the full options list (not the filtered subset) so selections\n\t\t// hidden by a search query are still included in the limit check.\n\t\tconst currentSelectionCount = getCurrentSelectionCount(dropdownOptions);\n\t\tconst maxSelectionsReached = currentSelectionCount >= maxSelections;\n\n\t\tif (!maxSelectionsReached) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Disable unselected options when max selections is reached\n\t\treturn optionsToProcess.map((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\toptions: (option as GroupedOption).options.map((nestedOption) => ({\n\t\t\t\t\t\t...nestedOption,\n\t\t\t\t\t\tdisabled:\n\t\t\t\t\t\t\tnestedOption.disabled \|\|\n\t\t\t\t\t\t\t(!nestedOption.selected && maxSelectionsReached),\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\treturn {\n\t\t\t\t\t...singleOption,\n\t\t\t\t\tdisabled:\n\t\t\t\t\t\tsingleOption.disabled \|\|\n\t\t\t\t\t\t(!singleOption.selected && maxSelectionsReached),\n\t\t\t\t};\n\t\t\t}\n\t\t});\n\t};\n\n\tconst optionsToShow = processOptionsWithMaxSelections(\n\t\t(searchedString && onSearch ? searchedOptions : dropdownOptions)\n\t\t\t.map((option) => {\n\t\t\t\tif (searchedString && !onSearch) {\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = { ...option } as GroupedOption;\n\t\t\t\t\t\tgroupedOption.options = groupedOption.options.filter((op) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\top.label?.toLowerCase().includes(searchedString.toLowerCase())\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t\t!searchedString \|\| op.label === searchedString,\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn groupedOption.options.length > 0 ? groupedOption : null;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\toption.label\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase()) \|\|\n\t\t\t\t\t\t\t(option as SingleOption \| MultiSelectOption).searchKey\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase())\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t!searchedString \|\| option.label === searchedString,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn option;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn option;\n\t\t\t})\n\t\t\t.filter((option) => option !== null) as DropdownOption[],\n\t);\n\n\tconst noResultForSearch =\n\t\t!!isSearchable && searchedString && optionsToShow.length === 0;\n\tconst showLoadingState = !searchedString && !!isOptionsLoading;\n\tconst showErrorState =\n\t\t!searchedString && !!optionsErrorState && !showLoadingState;\n\tconst showEmptyState =\n\t\t!searchedString &&\n\t\t!optionsToShow.length &&\n\t\t!showLoadingState &&\n\t\t!showErrorState;\n\tconst showTopLevelZeroState =\n\t\tshowLoadingState \|\| showErrorState \|\| showEmptyState;\n\n\tconst emptyStateTitle = zeroState?.title \|\| 'No results found';\n\tconst emptyStateSubTitle =\n\t\tzeroState?.subTitle \|\|\n\t\t`Please try again later or contact us at support@bik.ai if you require further assistance.`;\n\tconst errorStateTitle = optionsErrorState?.title \|\| 'Failed to load options';\n\tconst errorStateSubTitle =\n\t\toptionsErrorState?.subTitle \|\|\n\t\t'Something went wrong while fetching the list. Please try again';\n\tconst defaultErrorActionButton = {\n\t\tbuttonText: 'Try again',\n\t\tbuttonType: 'text' as const,\n\t\tsize: 'small' as const,\n\t\tbuttonTextColor: COLORS.background.inverseLight,\n\t\tcustomIconColor: COLORS.background.inverseLight,\n\t\tLeadingIcon: RetryIcon,\n\t};\n\n\tconst mergedErrorState = {\n\t\tIconHolderStyle: {\n\t\t\tbackground: COLORS.background.negative.light,\n\t\t},\n\t\tIcon: (\n\t\t\t<ErrorInfoIcon color={COLORS.content.negative} width={24} height={24} />\n\t\t),\n\t\t...optionsErrorState,\n\t};\n\tmergedErrorState.actionButton = {\n\t\t...defaultErrorActionButton,\n\t\t...(optionsErrorState?.actionButton ?? {}),\n\t};\n\tconst zeroStateProps = showLoadingState\n\t\t? undefined\n\t\t: showErrorState\n\t\t? mergedErrorState\n\t\t: zeroState;\n\n\treturn (\n\t\t<OpennedDropdownContainer\n\t\t\tversion={version}\n\t\t\tref={ref}\n\t\t\ttabIndex={-1}\n\t\t\tstyle={{\n\t\t\t\t// maxWidth: descriptionInfo ? 800 : 400,\n\t\t\t\twidth: widthState,\n\t\t\t\t...containerStyle,\n\t\t\t\toutline: 'none',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: descriptionInfo ? '50%' : '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tbackground: 'white',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!isSearchable && <SearchBox onSearch={search} version={version} />}\n\n\t\t\t\t{showTopLevelZeroState ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: heightToUse,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tbackground: COLORS.background.base,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t{...(zeroStateProps ?? {})}\n\t\t\t\t\t\t\tisLoading={showLoadingState}\n\t\t\t\t\t\t\ttitle={showErrorState ? errorStateTitle : emptyStateTitle}\n\t\t\t\t\t\t\tsubTitle={\n\t\t\t\t\t\t\t\tshowErrorState ? errorStateSubTitle : emptyStateSubTitle\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<MenuListContainer\n\t\t\t\t\t\tminHeight={heightToUse}\n\t\t\t\t\t\tmaxHeight={menuListMaxHeight}\n\t\t\t\t\t\tref={menuListRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!isMultiSelect && !noResultForSearch && !hideSelectAll && (\n\t\t\t\t\t\t\t<SelectAllMenu\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\toptions={\n\t\t\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonSelect={selectAllHandler}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!allowFreeForm && noResultForSearch && (\n\t\t\t\t\t\t\t<SearchZeroState\n\t\t\t\t\t\t\t\tisLoading={isSearchLoading}\n\t\t\t\t\t\t\t\terrorMessage={searchError}\n\t\t\t\t\t\t\t\tonRetry={retrySearch}\n\t\t\t\t\t\t\t\theight={menuListMaxHeight as number}\n\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\tcontainerWidth={width}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{allowFreeForm &&\n\t\t\t\t\t\t\t(noResultForSearch \|\|\n\t\t\t\t\t\t\t\t(!!exactMatchFound.length &&\n\t\t\t\t\t\t\t\t\texactMatchFound.every((val) => val === false))) && (\n\t\t\t\t\t\t\t\t<FreeFormMenu\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\tonSelect={onFreeFormSelect}\n\t\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\tonInfiniteScroll={onInfiniteScroll}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\tonSelect={onApplyHandler}\n\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\toptions={optionsToShow}\n\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\tref={childRefs}\n\t\t\t\t\t\t\tfocusedIndex={focusedIndex}\n\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\tonOptionsReorder={handleOptionsReorder}\n\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MenuListContainer>\n\t\t\t\t)}\n\t\t\t\t{!!isMultiSelect && !showTopLevelZeroState && version !== '2.0' && (\n\t\t\t\t\t<MultiSelectDropdownBottomBar\n\t\t\t\t\t\tonClear={() => {\n\t\t\t\t\t\t\tonMultiSelectClear();\n\t\t\t\t\t\t\tonMultiSelectClearProp?.();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonApply={onMultiSelectApply}\n\t\t\t\t\t\tlist={\n\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbuttonText={primaryButtonText}\n\t\t\t\t\t\tbuttonOptions={buttonOptions}\n\t\t\t\t\t\thideClearButton={hideClearButton}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{!!descriptionInfo && (\n\t\t\t\t<Description\n\t\t\t\t\ttitle={descriptionInfo.title}\n\t\t\t\t\tdescription={descriptionInfo.description}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</OpennedDropdownContainer>\n\t);\n};\n"],"names":["defaults","OpenedDropdown","_ref","options","isSearchable","isMultiSelect","maxSelections","width","allowFreeForm","height","onClose","onSelect","onSearch","version","skipSorting","headerRef","hideSelectAll","primaryButtonText","onInfiniteScroll","onMultiSelectClear","onMultiSelectClearProp","onDropdownItemClick","buttonOptions","isSearchLoading","isOptionsLoading","optionsErrorState","disableSearchOptions","disableSearchedOptionExcept","useDefaultCursor","containerStyle","zeroState","isDraggable","onOptionsReorder","hideClearButton","showCheckboxForCustomElement","sortOptionsWithSelectedOnTop","useCallback","opts","selected","unselected","forEach","option","push","localOptions","setLocalOptions","useState","localOptionsRef","useRef","hasReorderedRef","onOptionsReorderRef","useEffect","current","handleOptionsReorder","reorderedOptions","optionsToUse","dropdownOptions","search","searchedString","searchedOptions","searchError","retrySearch","onApplyHandler","selectAllHandler","onFreeFormSelect","onMultiSelectApply","latestDropdownOptionsRef","getSelectedOptions","getCurrentSelectionCount","useDropdown","widthState","setWidthState","descriptionInfo","setDescription","focusedIndex","setFocusedIndex","ref","childRefs","menuListRef","useOutside","optionsToSend","timer","setTimeout","focus","preventScroll","clearTimeout","handleKeyDown","e","flattenedOptions","flattened","nestedOption","disabled","singleOption","getFlattenedOptions","length","key","preventDefault","prev","newIndex","focusedElement","_a","querySelector","scrollIntoView","block","behavior","focusedOption","Object","assign","dropdownElement","addEventListener","removeEventListener","heightToUse","menuListMaxHeight","widthToUse","endsWith","newWidth","parseInt","replace","exactMatchFound","optionsToShow","optionsToProcess","maxSelectionsReached","map","processOptionsWithMaxSelections","groupedOption","filter","op","label","toLowerCase","includes","_b","searchKey","noResultForSearch","showLoadingState","showErrorState","showEmptyState","showTopLevelZeroState","emptyStateTitle","title","emptyStateSubTitle","subTitle","errorStateTitle","errorStateSubTitle","defaultErrorActionButton","buttonText","buttonType","size","buttonTextColor","COLORS","background","inverseLight","customIconColor","LeadingIcon","RetryIcon","mergedErrorState","IconHolderStyle","negative","light","Icon","_jsx","ErrorInfoIcon","color","content","actionButton","zeroStateProps","undefined","_jsxs","OpennedDropdownContainer","tabIndex","style","outline","children","display","flexDirection","SearchBox","base","ZeroState","isLoading","MenuListContainer","minHeight","maxHeight","SelectAllMenu","SearchZeroState","errorMessage","onRetry","containerWidth","every","val","FreeFormMenu","MenuList","showDescription","description","MultiSelectDropdownBottomBar","onClear","onApply","list","Description"],"mappings":"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"}
1	+ {"version":3,"file":"OpennedDropdown.js","sources":["../../../../../../src/components/dropdown/OpenedDropdown/components/OpennedDropdown.tsx"],"sourcesContent":["import ErrorInfoIcon from '@src/assets/icons/errorInfo.svg';\nimport RetryIcon from '@src/assets/icons/refresh-purple.svg';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport { useDropdown } from '../../hooks/useDropdown';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tMultiSelectOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from '../../type';\nimport { Description } from './description/Description';\nimport { FreeFormMenu } from './menu/FreeFormMenu';\nimport { MenuList } from './menu/MenuList';\nimport { SelectAllMenu } from './menu/SelectAllMenu';\nimport MultiSelectDropdownBottomBar from './multiSelect/MultiSelectDropdownBottomBar';\nimport {\n\tMenuListContainer,\n\tOpennedDropdownContainer,\n} from './OpennedDropdown.styled';\nimport { SearchBox } from './searchbox/SearchBox';\nimport { SearchZeroState } from './searchbox/SearchZeroState';\n\n/** CONSTANTS /\nconst defaults = {\n\theight: 304,\n\twidth: 290,\n};\n\nexport const OpenedDropdown: React.FC<OpenDropdownProps> = ({\n\toptions,\n\tisSearchable,\n\tisMultiSelect,\n\tmaxSelections,\n\twidth,\n\tallowFreeForm,\n\theight,\n\tonClose,\n\tonSelect,\n\tonSearch,\n\tversion,\n\tskipSorting,\n\theaderRef,\n\thideSelectAll,\n\tprimaryButtonText,\n\tonInfiniteScroll,\n\tonMultiSelectClear: onMultiSelectClearProp,\n\tonDropdownItemClick,\n\tbuttonOptions,\n\tisSearchLoading,\n\tisOptionsLoading,\n\toptionsErrorState,\n\tdisableSearchOptions,\n\tdisableSearchedOptionExcept,\n\tuseDefaultCursor,\n\tcontainerStyle = {},\n\tzeroState = undefined,\n\tisDraggable = false,\n\tonOptionsReorder,\n\thideClearButton = false,\n\tshowCheckboxForCustomElement = false,\n}) => {\n\t// Sort options with selected at top, unselected at bottom, maintaining order within groups\n\tconst sortOptionsWithSelectedOnTop = useCallback(\n\t\t(opts: DropdownOption[]): DropdownOption[] => {\n\t\t\tif (!isDraggable \|\| !isMultiSelect) return opts;\n\n\t\t\tconst selected: DropdownOption[] = [];\n\t\t\tconst unselected: DropdownOption[] = [];\n\n\t\t\topts.forEach((option) => {\n\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t// Handle grouped options - maintain grouping\n\t\t\t\t\tunselected.push(option);\n\t\t\t\t} else {\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tif (singleOption.selected) {\n\t\t\t\t\t\tselected.push(option);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tunselected.push(option);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn [...selected, ...unselected];\n\t\t},\n\t\t[isDraggable, isMultiSelect],\n\t);\n\n\tconst [localOptions, setLocalOptions] = useState<DropdownOption[]>(() =>\n\t\tsortOptionsWithSelectedOnTop(options),\n\t);\n\tconst localOptionsRef = useRef<DropdownOption[]>(localOptions);\n\tconst hasReorderedRef = useRef(false);\n\tconst onOptionsReorderRef = useRef(onOptionsReorder);\n\n\tuseEffect(() => {\n\t\tsetLocalOptions(sortOptionsWithSelectedOnTop(options));\n\t}, [options, sortOptionsWithSelectedOnTop]);\n\n\tuseEffect(() => {\n\t\tlocalOptionsRef.current = localOptions;\n\t}, [localOptions]);\n\n\tuseEffect(() => {\n\t\tonOptionsReorderRef.current = onOptionsReorder;\n\t}, [onOptionsReorder]);\n\n\t// Fire onOptionsReorder on unmount (dropdown close from Apply or click-outside)\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (hasReorderedRef.current && onOptionsReorderRef.current) {\n\t\t\t\tonOptionsReorderRef.current(localOptionsRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst handleOptionsReorder = useCallback(\n\t\t(reorderedOptions: DropdownOption[]) => {\n\t\t\tsetLocalOptions(reorderedOptions);\n\t\t\t// For version 2.0 (no Apply button), apply reorder immediately\n\t\t\tif (version === '2.0') {\n\t\t\t\tonOptionsReorder?.(reorderedOptions);\n\t\t\t} else {\n\t\t\t\t// For version 1.0, defer until Apply/close (handled by unmount cleanup)\n\t\t\t\thasReorderedRef.current = true;\n\t\t\t}\n\t\t},\n\t\t[onOptionsReorder, version],\n\t);\n\n\tconst optionsToUse = isDraggable ? localOptions : options;\n\tconst {\n\t\tdropdownOptions,\n\t\tsearch,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tsearchError,\n\t\tretrySearch,\n\t\tonApplyHandler,\n\t\tselectAllHandler,\n\t\tonMultiSelectClear,\n\t\tonFreeFormSelect,\n\t\tonMultiSelectApply,\n\t\tlatestDropdownOptionsRef,\n\t\tgetSelectedOptions,\n\t\tgetCurrentSelectionCount,\n\t} = useDropdown(\n\t\tversion,\n\t\toptionsToUse,\n\t\tonSelect,\n\t\tskipSorting \|\| isDraggable,\n\t\tisMultiSelect,\n\t\tonSearch,\n\t\tdisableSearchOptions,\n\t\tdisableSearchedOptionExcept,\n\t\tmaxSelections,\n\t);\n\tconst [widthState, setWidthState] = useState(width ?? defaults.width);\n\tconst [descriptionInfo, setDescription] = useState<{\n\t\ttitle: string;\n\t\tdescription: string;\n\t} \| null>(null);\n\tconst [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst childRefs = useRef([]);\n\tconst menuListRef = useRef<HTMLDivElement>(null);\n\tuseOutside(\n\t\tref,\n\t\t() => {\n\t\t\tsetDescription(null);\n\t\t\tif (isMultiSelect && version === '2.0') {\n\t\t\t\tconst optionsToSend = getSelectedOptions(\n\t\t\t\t\tlatestDropdownOptionsRef.current,\n\t\t\t\t);\n\t\t\t\tonClose?.(optionsToSend);\n\t\t\t} else {\n\t\t\t\tonClose?.(dropdownOptions);\n\t\t\t}\n\t\t},\n\t\t[headerRef, childRefs],\n\t);\n\n\t// Auto-focus dropdown when it opens for keyboard navigation while preventing scroll to maintain popper positioning\n\tuseEffect(() => {\n\t\tconst timer = setTimeout(() => {\n\t\t\tif (ref.current) {\n\t\t\t\tref.current.focus({ preventScroll: true });\n\t\t\t}\n\t\t}, 0);\n\t\treturn () => clearTimeout(timer);\n\t}, []);\n\n\t// Get flattened selectable options\n\tconst getFlattenedOptions = (opts: DropdownOption[]): SingleOption[] => {\n\t\tconst flattened: SingleOption[] = [];\n\t\topts.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\tconst groupedOption = option as GroupedOption;\n\t\t\t\tgroupedOption.options.forEach((nestedOption) => {\n\t\t\t\t\tif (!nestedOption.disabled) {\n\t\t\t\t\t\tflattened.push(nestedOption);\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\tflattened.push(singleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn flattened;\n\t};\n\n\t/* Keyboard navigation handler /\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tconst currentOptions =\n\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions;\n\t\t\tconst flattenedOptions = getFlattenedOptions(currentOptions);\n\n\t\t\tif (flattenedOptions.length === 0) return;\n\n\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev < flattenedOptions.length - 1 ? prev + 1 : 0;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev > 0 ? prev - 1 : flattenedOptions.length - 1;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'Enter' && focusedIndex >= 0) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst focusedOption = flattenedOptions[focusedIndex];\n\t\t\t\tif (focusedOption) {\n\t\t\t\t\t// onApplyHandler handles the selection state and calls onSelect internally\n\t\t\t\t\tonApplyHandler({\n\t\t\t\t\t\t...focusedOption,\n\t\t\t\t\t\tselected: !focusedOption.selected,\n\t\t\t\t\t});\n\t\t\t\t\t// Also trigger onDropdownItemClick if provided\n\t\t\t\t\tif (onDropdownItemClick) {\n\t\t\t\t\t\tonDropdownItemClick(focusedOption);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst dropdownElement = ref.current;\n\t\tif (dropdownElement) {\n\t\t\tdropdownElement.addEventListener('keydown', handleKeyDown);\n\t\t\treturn () => {\n\t\t\t\tdropdownElement.removeEventListener('keydown', handleKeyDown);\n\t\t\t};\n\t\t}\n\t}, [\n\t\tfocusedIndex,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tdropdownOptions,\n\t\tonSearch,\n\t\tonApplyHandler,\n\t\tonDropdownItemClick,\n\t]);\n\n\t// LOCAL CONSTANTS\n\tconst heightToUse = height ?? defaults.height;\n\tconst menuListMaxHeight =\n\t\ttypeof heightToUse === 'number'\n\t\t\t? isSearchable && isMultiSelect\n\t\t\t\t? heightToUse - 96\n\t\t\t\t: (isSearchable && !isMultiSelect) \|\| (!isSearchable && isMultiSelect)\n\t\t\t\t? heightToUse - 48\n\t\t\t\t: heightToUse\n\t\t\t: heightToUse;\n\n\tfunction showDescription(title?: string, description?: string) {\n\t\tif (title && description) {\n\t\t\tsetDescription({\n\t\t\t\ttitle,\n\t\t\t\tdescription,\n\t\t\t});\n\t\t} else {\n\t\t\tsetDescription(null);\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tconst widthToUse = width ?? defaults.width;\n\t\tif (descriptionInfo === null) {\n\t\t\tsetWidthState(widthToUse);\n\t\t} else if (typeof widthToUse === 'number') {\n\t\t\tsetWidthState(widthToUse 2);\n\t\t} else if (typeof widthToUse === 'string') {\n\t\t\tif (widthToUse.endsWith('px')) {\n\t\t\t\tconst newWidth = parseInt(widthToUse.replace('px', '')) * 2;\n\t\t\t\tsetWidthState(newWidth);\n\t\t\t}\n\t\t}\n\t}, [descriptionInfo]);\n\n\t/*\n\t This is to show the search result in a stateless way\n\t */\n\n\tconst exactMatchFound: boolean[] = [];\n\n\tconst processOptionsWithMaxSelections = (\n\t\toptionsToProcess: DropdownOption[],\n\t) => {\n\t\tif (!isMultiSelect \|\| (!maxSelections && maxSelections !== 0)) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Count from the full options list (not the filtered subset) so selections\n\t\t// hidden by a search query are still included in the limit check.\n\t\tconst currentSelectionCount = getCurrentSelectionCount(dropdownOptions);\n\t\tconst maxSelectionsReached = currentSelectionCount >= maxSelections;\n\n\t\tif (!maxSelectionsReached) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Disable unselected options when max selections is reached\n\t\treturn optionsToProcess.map((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\toptions: (option as GroupedOption).options.map((nestedOption) => ({\n\t\t\t\t\t\t...nestedOption,\n\t\t\t\t\t\tdisabled:\n\t\t\t\t\t\t\tnestedOption.disabled \|\|\n\t\t\t\t\t\t\t(!nestedOption.selected && maxSelectionsReached),\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\treturn {\n\t\t\t\t\t...singleOption,\n\t\t\t\t\tdisabled:\n\t\t\t\t\t\tsingleOption.disabled \|\|\n\t\t\t\t\t\t(!singleOption.selected && maxSelectionsReached),\n\t\t\t\t};\n\t\t\t}\n\t\t});\n\t};\n\n\tconst optionsToShow = processOptionsWithMaxSelections(\n\t\t(searchedString && onSearch ? searchedOptions : dropdownOptions)\n\t\t\t.map((option) => {\n\t\t\t\tif (searchedString && !onSearch) {\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = { ...option } as GroupedOption;\n\t\t\t\t\t\tgroupedOption.options = groupedOption.options.filter((op) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\top.label?.toLowerCase().includes(searchedString.toLowerCase())\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t\t!searchedString \|\| op.label === searchedString,\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn groupedOption.options.length > 0 ? groupedOption : null;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\toption.label\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase()) \|\|\n\t\t\t\t\t\t\t(option as SingleOption \| MultiSelectOption).searchKey\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase())\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t!searchedString \|\| option.label === searchedString,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn option;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn option;\n\t\t\t})\n\t\t\t.filter((option) => option !== null) as DropdownOption[],\n\t);\n\n\tconst noResultForSearch =\n\t\t!!isSearchable && searchedString && optionsToShow.length === 0;\n\tconst showLoadingState = !searchedString && !!isOptionsLoading;\n\tconst showErrorState =\n\t\t!searchedString && !!optionsErrorState && !showLoadingState;\n\tconst showEmptyState =\n\t\t!searchedString &&\n\t\t!optionsToShow.length &&\n\t\t!showLoadingState &&\n\t\t!showErrorState;\n\tconst showTopLevelZeroState =\n\t\tshowLoadingState \|\| showErrorState \|\| showEmptyState;\n\n\tconst emptyStateTitle = zeroState?.title \|\| 'No results found';\n\tconst emptyStateSubTitle =\n\t\tzeroState?.subTitle \|\|\n\t\t`Please try again later or contact us at support@bik.ai if you require further assistance.`;\n\tconst errorStateTitle = optionsErrorState?.title \|\| 'Failed to load options';\n\tconst errorStateSubTitle =\n\t\toptionsErrorState?.subTitle \|\|\n\t\t'Something went wrong while fetching the list. Please try again';\n\tconst defaultErrorActionButton = {\n\t\tbuttonText: 'Try again',\n\t\tbuttonType: 'text' as const,\n\t\tsize: 'small' as const,\n\t\tbuttonTextColor: COLORS.background.inverseLight,\n\t\tcustomIconColor: COLORS.background.inverseLight,\n\t\tLeadingIcon: RetryIcon,\n\t};\n\n\tconst mergedErrorState = {\n\t\tIconHolderStyle: {\n\t\t\tbackground: COLORS.background.negative.light,\n\t\t},\n\t\tIcon: (\n\t\t\t<ErrorInfoIcon color={COLORS.content.negative} width={24} height={24} />\n\t\t),\n\t\t...optionsErrorState,\n\t};\n\tmergedErrorState.actionButton = {\n\t\t...defaultErrorActionButton,\n\t\t...(optionsErrorState?.actionButton ?? {}),\n\t};\n\tconst zeroStateProps = showLoadingState\n\t\t? undefined\n\t\t: showErrorState\n\t\t? mergedErrorState\n\t\t: zeroState;\n\n\treturn (\n\t\t<OpennedDropdownContainer\n\t\t\tversion={version}\n\t\t\tref={ref}\n\t\t\ttabIndex={-1}\n\t\t\tstyle={{\n\t\t\t\t// maxWidth: descriptionInfo ? 800 : 400,\n\t\t\t\twidth: widthState,\n\t\t\t\t...containerStyle,\n\t\t\t\toutline: 'none',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: descriptionInfo ? '50%' : '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tbackground: 'white',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!isSearchable && <SearchBox onSearch={search} version={version} />}\n\n\t\t\t\t{showTopLevelZeroState ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: heightToUse,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tbackground: COLORS.background.base,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t{...(zeroStateProps ?? {})}\n\t\t\t\t\t\t\tisLoading={showLoadingState}\n\t\t\t\t\t\t\ttitle={showErrorState ? errorStateTitle : emptyStateTitle}\n\t\t\t\t\t\t\tsubTitle={\n\t\t\t\t\t\t\t\tshowErrorState ? errorStateSubTitle : emptyStateSubTitle\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<MenuListContainer\n\t\t\t\t\t\tminHeight={heightToUse}\n\t\t\t\t\t\tmaxHeight={menuListMaxHeight}\n\t\t\t\t\t\tref={menuListRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!isMultiSelect && !noResultForSearch && !hideSelectAll && (\n\t\t\t\t\t\t\t<SelectAllMenu\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\toptions={\n\t\t\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonSelect={selectAllHandler}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!allowFreeForm && noResultForSearch && (\n\t\t\t\t\t\t\t<SearchZeroState\n\t\t\t\t\t\t\t\tisLoading={isSearchLoading}\n\t\t\t\t\t\t\t\terrorMessage={searchError}\n\t\t\t\t\t\t\t\tonRetry={retrySearch}\n\t\t\t\t\t\t\t\theight={menuListMaxHeight as number}\n\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\tcontainerWidth={width}\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{allowFreeForm &&\n\t\t\t\t\t\t\t(noResultForSearch \|\|\n\t\t\t\t\t\t\t\t(!!exactMatchFound.length &&\n\t\t\t\t\t\t\t\t\texactMatchFound.every((val) => val === false))) && (\n\t\t\t\t\t\t\t\t<FreeFormMenu\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\tonSelect={onFreeFormSelect}\n\t\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\tonInfiniteScroll={onInfiniteScroll}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\tonSelect={onApplyHandler}\n\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\toptions={optionsToShow}\n\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\tref={childRefs}\n\t\t\t\t\t\t\tfocusedIndex={focusedIndex}\n\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\tonOptionsReorder={handleOptionsReorder}\n\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MenuListContainer>\n\t\t\t\t)}\n\t\t\t\t{!!isMultiSelect && !showTopLevelZeroState && version !== '2.0' && (\n\t\t\t\t\t<MultiSelectDropdownBottomBar\n\t\t\t\t\t\tonClear={() => {\n\t\t\t\t\t\t\tonMultiSelectClear();\n\t\t\t\t\t\t\tonMultiSelectClearProp?.();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonApply={onMultiSelectApply}\n\t\t\t\t\t\tlist={\n\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbuttonText={primaryButtonText}\n\t\t\t\t\t\tbuttonOptions={buttonOptions}\n\t\t\t\t\t\thideClearButton={hideClearButton}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{!!descriptionInfo && (\n\t\t\t\t<Description\n\t\t\t\t\ttitle={descriptionInfo.title}\n\t\t\t\t\tdescription={descriptionInfo.description}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</OpennedDropdownContainer>\n\t);\n};\n"],"names":["defaults","OpenedDropdown","_ref","options","isSearchable","isMultiSelect","maxSelections","width","allowFreeForm","height","onClose","onSelect","onSearch","version","skipSorting","headerRef","hideSelectAll","primaryButtonText","onInfiniteScroll","onMultiSelectClear","onMultiSelectClearProp","onDropdownItemClick","buttonOptions","isSearchLoading","isOptionsLoading","optionsErrorState","disableSearchOptions","disableSearchedOptionExcept","useDefaultCursor","containerStyle","zeroState","isDraggable","onOptionsReorder","hideClearButton","showCheckboxForCustomElement","sortOptionsWithSelectedOnTop","useCallback","opts","selected","unselected","forEach","option","push","localOptions","setLocalOptions","useState","localOptionsRef","useRef","hasReorderedRef","onOptionsReorderRef","useEffect","current","handleOptionsReorder","reorderedOptions","optionsToUse","dropdownOptions","search","searchedString","searchedOptions","searchError","retrySearch","onApplyHandler","selectAllHandler","onFreeFormSelect","onMultiSelectApply","latestDropdownOptionsRef","getSelectedOptions","getCurrentSelectionCount","useDropdown","widthState","setWidthState","descriptionInfo","setDescription","focusedIndex","setFocusedIndex","ref","childRefs","menuListRef","useOutside","optionsToSend","timer","setTimeout","focus","preventScroll","clearTimeout","handleKeyDown","e","flattenedOptions","flattened","nestedOption","disabled","singleOption","getFlattenedOptions","length","key","preventDefault","prev","newIndex","focusedElement","_a","querySelector","scrollIntoView","block","behavior","focusedOption","Object","assign","dropdownElement","addEventListener","removeEventListener","heightToUse","menuListMaxHeight","widthToUse","endsWith","newWidth","parseInt","replace","exactMatchFound","optionsToShow","optionsToProcess","maxSelectionsReached","map","processOptionsWithMaxSelections","groupedOption","filter","op","label","toLowerCase","includes","_b","searchKey","noResultForSearch","showLoadingState","showErrorState","showEmptyState","showTopLevelZeroState","emptyStateTitle","title","emptyStateSubTitle","subTitle","errorStateTitle","errorStateSubTitle","defaultErrorActionButton","buttonText","buttonType","size","buttonTextColor","COLORS","background","inverseLight","customIconColor","LeadingIcon","RetryIcon","mergedErrorState","IconHolderStyle","negative","light","Icon","_jsx","ErrorInfoIcon","color","content","actionButton","zeroStateProps","undefined","_jsxs","OpennedDropdownContainer","tabIndex","style","outline","children","display","flexDirection","SearchBox","base","ZeroState","isLoading","MenuListContainer","minHeight","maxHeight","SelectAllMenu","SearchZeroState","errorMessage","onRetry","containerWidth","every","val","FreeFormMenu","MenuList","showDescription","description","MultiSelectDropdownBottomBar","onClear","onApply","list","Description"],"mappings":"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"}