@bikdotai/bik-component-library 0.0.868-beta.10 → 0.0.868-beta.12

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

@@ -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\tsearchPlaceholder,\n\tstaticMenuHeight,\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\tcheckboxActiveColor,\n\tbrandSelectedRow,\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 && (\n\t\t\t\t\t<SearchBox\n\t\t\t\t\t\tonSearch={search}\n\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{showTopLevelZeroState ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-testid=\"dropdown-options-zero-state\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: staticMenuHeight ? menuListMaxHeight : 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\tdata-testid=\"dropdown-menu-list\"\n\t\t\t\t\t\tminHeight={staticMenuHeight ? menuListMaxHeight : undefined}\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\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\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\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\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\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\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","options","isSearchable","searchPlaceholder","staticMenuHeight","isMultiSelect","maxSelections","width","allowFreeForm","height","onClose","onSelect","onSearch","version","skipSorting","headerRef","hideSelectAll","primaryButtonText","onInfiniteScroll","onMultiSelectClearProp","onDropdownItemClick","buttonOptions","isSearchLoading","isOptionsLoading","optionsErrorState","disableSearchOptions","disableSearchedOptionExcept","useDefaultCursor","containerStyle","zeroState","isDraggable","onOptionsReorder","hideClearButton","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","sortOptionsWithSelectedOnTop","useCallback","opts","selected","unselected","option","localOptions","setLocalOptions","useState","localOptionsRef","useRef","hasReorderedRef","onOptionsReorderRef","useEffect","handleOptionsReorder","reorderedOptions","optionsToUse","dropdownOptions","search","searchedString","searchedOptions","searchError","retrySearch","onApplyHandler","selectAllHandler","onMultiSelectClear","onFreeFormSelect","onMultiSelectApply","latestDropdownOptionsRef","getSelectedOptions","getCurrentSelectionCount","useDropdown","widthState","setWidthState","descriptionInfo","setDescription","focusedIndex","setFocusedIndex","ref","childRefs","menuListRef","useOutside","optionsToSend","timer","getFlattenedOptions","flattened","nestedOption","singleOption","handleKeyDown","e","flattenedOptions","prev","newIndex","focusedElement","focusedOption","dropdownElement","heightToUse","menuListMaxHeight","showDescription","title","description","widthToUse","newWidth","exactMatchFound","optionsToShow","optionsToProcess","maxSelectionsReached","groupedOption","op","noResultForSearch","showLoadingState","showErrorState","showEmptyState","showTopLevelZeroState","emptyStateTitle","emptyStateSubTitle","errorStateTitle","errorStateSubTitle","defaultErrorActionButton","COLORS","RetryIcon","mergedErrorState","jsx","ErrorInfoIcon","zeroStateProps","jsxs","OpennedDropdownContainer","SearchBox","ZeroState","MenuListContainer","SelectAllMenu","SearchZeroState","val","FreeFormMenu","MenuList","MultiSelectDropdownBottomBar","Description"],"mappings":"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"}
+{"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\tsearchPlaceholder,\n\tstaticMenuHeight,\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\tcheckboxActiveColor,\n\tbrandSelectedRow,\n\tchildrenLayout,\n\tcollapsibleChildren,\n\thideSelectedCount,\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 && (\n\t\t\t\t\t<SearchBox\n\t\t\t\t\t\tonSearch={search}\n\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{showTopLevelZeroState ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tdata-testid=\"dropdown-options-zero-state\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: staticMenuHeight ? menuListMaxHeight : 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\tdata-testid=\"dropdown-menu-list\"\n\t\t\t\t\t\tminHeight={staticMenuHeight ? menuListMaxHeight : undefined}\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\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\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\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\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\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\tchildrenLayout={childrenLayout}\n\t\t\t\t\t\t\tcollapsibleChildren={collapsibleChildren}\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\thideSelectedCount={hideSelectedCount}\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","options","isSearchable","searchPlaceholder","staticMenuHeight","isMultiSelect","maxSelections","width","allowFreeForm","height","onClose","onSelect","onSearch","version","skipSorting","headerRef","hideSelectAll","primaryButtonText","onInfiniteScroll","onMultiSelectClearProp","onDropdownItemClick","buttonOptions","isSearchLoading","isOptionsLoading","optionsErrorState","disableSearchOptions","disableSearchedOptionExcept","useDefaultCursor","containerStyle","zeroState","isDraggable","onOptionsReorder","hideClearButton","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","childrenLayout","collapsibleChildren","hideSelectedCount","sortOptionsWithSelectedOnTop","useCallback","opts","selected","unselected","option","localOptions","setLocalOptions","useState","localOptionsRef","useRef","hasReorderedRef","onOptionsReorderRef","useEffect","handleOptionsReorder","reorderedOptions","optionsToUse","dropdownOptions","search","searchedString","searchedOptions","searchError","retrySearch","onApplyHandler","selectAllHandler","onMultiSelectClear","onFreeFormSelect","onMultiSelectApply","latestDropdownOptionsRef","getSelectedOptions","getCurrentSelectionCount","useDropdown","widthState","setWidthState","descriptionInfo","setDescription","focusedIndex","setFocusedIndex","ref","childRefs","menuListRef","useOutside","optionsToSend","timer","getFlattenedOptions","flattened","nestedOption","singleOption","handleKeyDown","e","flattenedOptions","prev","newIndex","focusedElement","focusedOption","dropdownElement","heightToUse","menuListMaxHeight","showDescription","title","description","widthToUse","newWidth","exactMatchFound","optionsToShow","optionsToProcess","maxSelectionsReached","groupedOption","op","noResultForSearch","showLoadingState","showErrorState","showEmptyState","showTopLevelZeroState","emptyStateTitle","emptyStateSubTitle","errorStateTitle","errorStateSubTitle","defaultErrorActionButton","COLORS","RetryIcon","mergedErrorState","jsx","ErrorInfoIcon","zeroStateProps","jsxs","OpennedDropdownContainer","SearchBox","ZeroState","MenuListContainer","SelectAllMenu","SearchZeroState","val","FreeFormMenu","MenuList","MultiSelectDropdownBottomBar","Description"],"mappings":"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"}

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts

@@ -19,6 +19,15 @@ interface MenuItemProps {
     showCheckboxForCustomElement?: boolean;
     checkboxActiveColor?: string;
     brandSelectedRow?: boolean;
+    childrenLayout?: 'flyout' | 'nested';
+    /** Indents the row under its parent and draws the elbow connector. */
+    isChildRow?: boolean;
+    /** Tri-state for a nested parent whose children are only partly selected. */
+    isPartiallyChecked?: boolean;
+    /** Shows the collapse chevron on a nested parent row. */
+    isCollapsible?: boolean;
+    isCollapsed?: boolean;
+    onToggleCollapse?: () => void;
 }
 export declare const MenuItem: import('react').ForwardRefExoticComponent<MenuItemProps & import('react').RefAttributes<HTMLDivElement>>;
 export {};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js

@@ -1,26 +1,32 @@
-import { jsx as r, Fragment as c, jsxs as s } from "react/jsx-runtime";
-import U from "../../../../../assets/icons/chevronRight.svg.js";
-import { forwardRef as z, useState as W } from "react";
-import t from "styled-components";
-import { BodyCaption as _ } from "../../../../TypographyStyle.js";
-import { COLORS as m, DEFAULT_THEME as F } from "../../../../../constants/Theme.js";
-import { FreeFormContainer as q } from "./FreeFormMenu.styled.js";
-import { Tooltip as G } from "../../../../tooltips/Tooltip.js";
-import { CheckBox as k } from "../../../../checkBox/CheckBox.js";
-import { ListItem as J } from "../../../../list-item/ListItem.js";
-const $ = t(J)`
+import { jsx as t, Fragment as m, jsxs as p } from "react/jsx-runtime";
+import P from "../../../../../assets/icons/chevronDownOutline.svg.js";
+import Q from "../../../../../assets/icons/chevronRight.svg.js";
+import X from "../../../../../assets/icons/chevronUpOutline.svg.js";
+import { forwardRef as Y, useState as Z } from "react";
+import n from "styled-components";
+import { BodyCaption as ee } from "../../../../TypographyStyle.js";
+import { COLORS as i, DEFAULT_THEME as D } from "../../../../../constants/Theme.js";
+import { FreeFormContainer as te } from "./FreeFormMenu.styled.js";
+import { Tooltip as re } from "../../../../tooltips/Tooltip.js";
+import { CheckBox as O } from "../../../../checkBox/CheckBox.js";
+import { ListItem as ne } from "../../../../list-item/ListItem.js";
+const v = n(ne)`
 	padding: ${(e) => e.version === "3.0" ? "8px" : e.version === "2.0" ? "8px 12px" : "14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${(e) => e.brandSelectedRow ? "0" : e.version === "2.0" ? "2px" : "0"};
-`, K = t.div`
+`, le = n(v)`
+	padding: 8px !important;
+	margin-top: 0;
+	border-radius: 0;
+`, oe = n.div`
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	border-radius: ${({ version: e }) => e === "1.0" ? "0" : "8px"};
 	padding: ${({ version: e }) => e === "1.0" ? "0" : "4px"};
 	min-width: 148px;
-	border: ${({ version: e }) => e === "1.0" ? `1px solid ${F.colorsV2.stroke.primary}` : "none"};
+	border: ${({ version: e }) => e === "1.0" ? `1px solid ${D.colorsV2.stroke.primary}` : "none"};
 	max-height: 248px;
 	overflow-y: auto;
-`, N = t.div`
+`, de = n.div`
 	display: grid;
 	grid-template-columns: repeat(2, 2.86px);
 	grid-template-rows: repeat(3, 2.86px);
@@ -32,191 +38,223 @@ const $ = t(J)`
 	align-self: center;
 	height: fit-content;
 	min-height: 18px;
-`, l = t.div`
+`, d = n.div`
 	width: 2.86px;
 	height: 2.86px;
 	border-radius: 50%;
-	background-color: ${m.content.inactive};
+	background-color: ${i.content.inactive};
 	flex-shrink: 0;
-`, w = t.div`
+`, F = n.div`
 	display: flex;
 	align-content: center;
 	justify-content: center;
 	gap: 8px;
-`, P = t.div`
+`, ie = n.span`
+	align-self: flex-start;
+	flex-shrink: 0;
+	width: 11px;
+	height: 9px;
+	margin-left: 4px;
+	border-left: 1px solid ${i.content.placeholder};
+	border-bottom: 1px solid ${i.content.placeholder};
+	border-bottom-left-radius: 4px;
+`, ae = n.span`
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+`, se = n.div`
 	margin-right: -4px;
-`, Q = t.div`
+`, ce = n.div`
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	flex: 1;
-`, g = ({ onDragStart: e, onDragEnd: i }) => /* @__PURE__ */ s(
-  N,
+`, x = ({ onDragStart: e, onDragEnd: a }) => /* @__PURE__ */ p(
+  de,
   {
     draggable: !0,
     onDragStart: e,
-    onDragEnd: i,
+    onDragEnd: a,
     children: [
-      /* @__PURE__ */ r(l, {}),
-      /* @__PURE__ */ r(l, {}),
-      /* @__PURE__ */ r(l, {}),
-      /* @__PURE__ */ r(l, {}),
-      /* @__PURE__ */ r(l, {}),
-      /* @__PURE__ */ r(l, {})
+      /* @__PURE__ */ t(d, {}),
+      /* @__PURE__ */ t(d, {}),
+      /* @__PURE__ */ t(d, {}),
+      /* @__PURE__ */ t(d, {}),
+      /* @__PURE__ */ t(d, {}),
+      /* @__PURE__ */ t(d, {})
     ]
   }
-), oe = z(
+), Le = Y(
   ({
     option: e,
-    isMultiSelect: i,
-    showDescription: x,
+    isMultiSelect: a,
+    showDescription: b,
     onSelect: H,
-    last: O,
-    version: d,
-    onDropdownItemClick: M,
-    useDefaultCursor: S,
-    isFocused: A = !1,
-    dataIndex: h = -1,
-    isDraggable: o = !1,
-    onDragStart: u,
-    onDragOver: D,
-    onDrop: B,
-    onDragEnd: p,
-    isDraggedOver: v = !1,
-    showCheckboxForCustomElement: C = !1,
-    checkboxActiveColor: b,
-    brandSelectedRow: I
-  }, V) => {
-    const [j, y] = W(
+    last: M,
+    version: l,
+    onDropdownItemClick: A,
+    useDefaultCursor: B,
+    isFocused: E = !1,
+    dataIndex: C = -1,
+    isDraggable: s = !1,
+    onDragStart: f,
+    onDragOver: R,
+    onDrop: U,
+    onDragEnd: h,
+    isDraggedOver: I = !1,
+    showCheckboxForCustomElement: y = !1,
+    checkboxActiveColor: L,
+    brandSelectedRow: w,
+    childrenLayout: V = "flyout",
+    isChildRow: j = !1,
+    isPartiallyChecked: $ = !1,
+    isCollapsible: z = !1,
+    isCollapsed: g = !1,
+    onToggleCollapse: N
+  }, W) => {
+    const [_, k] = Z(
       e.selected
-    ), L = (n, a) => {
-      if (!n.children) {
-        f(!n.selected);
-        const R = a ? { ...n, parent: a } : n;
-        M?.(R);
+    ), o = V === "nested", q = o ? le : v, G = !o && l === "2.0" ? "SMALL" : "DEFAULT", T = (r, c) => {
+      if (!r.children || o) {
+        u(!r.selected);
+        const K = c ? { ...r, parent: c } : r;
+        A?.(K);
       }
-    }, f = (n) => {
-      e.disabled || H({ ...e, selected: n });
-    }, E = () => {
-      e.description ? x(e.label, e.description) : x();
-    }, T = S ? { cursor: "default" } : {};
-    return /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
-      G,
+    }, u = (r) => {
+      e.disabled || H({ ...e, selected: r });
+    }, J = () => {
+      e.description ? b(e.label, e.description) : b();
+    }, S = B ? { cursor: "default" } : {};
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
+      re,
       {
         body: "",
-        tooltipContent: e.children ? /* @__PURE__ */ r(
+        tooltipContent: e.children && !o ? /* @__PURE__ */ t(
           "div",
           {
             style: {
-              backgroundColor: F.colorsV2.surface.standard
+              backgroundColor: D.colorsV2.surface.standard
             },
-            ref: V,
-            onMouseEnter: () => y(!0),
-            onMouseLeave: () => y(!1),
-            children: /* @__PURE__ */ r(K, { version: d ?? "2.0", children: e.children.map((n) => /* @__PURE__ */ r(
-              $,
+            ref: W,
+            onMouseEnter: () => k(!0),
+            onMouseLeave: () => k(!1),
+            children: /* @__PURE__ */ t(oe, { version: l ?? "2.0", children: e.children.map((r) => /* @__PURE__ */ t(
+              v,
               {
-                version: d,
-                brandSelectedRow: I,
-                style: d !== "1.0" && (e?.children ?? []).length - 1 ? { borderBottom: 0 } : {},
-                onClick: (a) => {
-                  a.preventDefault(), L(n, e);
+                version: l,
+                brandSelectedRow: w,
+                style: l !== "1.0" && (e?.children ?? []).length - 1 ? { borderBottom: 0 } : {},
+                onClick: (c) => {
+                  c.preventDefault(), T(r, e);
                 },
-                listItem: { value: n.value, label: n.label },
-                subText: n.subText,
-                leadingIcon: n.leadingIcon || void 0,
-                customComponent: n.customComponent,
-                trailingIcon: n.trailingIcon || void 0,
-                variant: e.disabled ? "inactive" : n.selected ? "selected" : "default"
+                listItem: { value: r.value, label: r.label },
+                subText: r.subText,
+                leadingIcon: r.leadingIcon || void 0,
+                customComponent: r.customComponent,
+                trailingIcon: r.trailingIcon || void 0,
+                variant: e.disabled ? "inactive" : r.selected ? "selected" : "default"
               },
-              n.value
+              r.value
             )) })
           }
-        ) : /* @__PURE__ */ r(c, {}),
+        ) : /* @__PURE__ */ t(m, {}),
         placement: "right-start",
         hideArrow: !0,
-        children: /* @__PURE__ */ r(
-          $,
+        children: /* @__PURE__ */ t(
+          q,
           {
-            version: d,
-            brandSelectedRow: I,
-            style: O ? {
+            version: l,
+            brandSelectedRow: w,
+            style: M ? {
               borderBottom: 0,
-              ...T,
-              ...v ? {
-                borderTop: `2px solid ${m.content.brand}`,
+              ...S,
+              ...I ? {
+                borderTop: `2px solid ${i.content.brand}`,
                 opacity: 0.5
               } : {}
             } : {
-              ...T,
-              ...v ? {
-                borderTop: `2px solid ${m.content.brand}`,
+              ...S,
+              ...I ? {
+                borderTop: `2px solid ${i.content.brand}`,
                 opacity: 0.5
               } : {}
             },
-            onClick: (n) => {
-              n.preventDefault(), L(e);
+            onClick: (r) => {
+              r.preventDefault(), T(e);
             },
-            onMouseOver: E,
+            onMouseOver: J,
             listItem: { value: e.value, label: e.label },
             subText: e.subText,
-            "data-option-index": h,
+            "data-option-index": C,
             role: "option",
-            id: `dropdown-option-${h}`,
+            id: `dropdown-option-${C}`,
             "aria-selected": !!e.selected,
-            onDragOver: o ? D : void 0,
-            onDrop: o ? B : void 0,
-            leadingIcon: i && !(C && e.customComponent) ? /* @__PURE__ */ s(w, { children: [
-              o && /* @__PURE__ */ r(
-                g,
+            onDragOver: s ? R : void 0,
+            onDrop: s ? U : void 0,
+            leadingIcon: a && !(y && e.customComponent) ? /* @__PURE__ */ p(F, { children: [
+              j && /* @__PURE__ */ t(ie, {}),
+              s && /* @__PURE__ */ t(
+                x,
                 {
-                  onDragStart: u,
-                  onDragEnd: p
+                  onDragStart: f,
+                  onDragEnd: h
                 }
               ),
-              /* @__PURE__ */ r(
-                k,
+              /* @__PURE__ */ t(
+                O,
                 {
-                  size: d === "2.0" ? "SMALL" : "DEFAULT",
+                  size: G,
                   isDisabled: e.disabled ?? !1,
-                  isChecked: !!e.selected,
-                  onValueChange: f,
-                  activeColor: b
+                  isChecked: !!e.selected || $,
+                  isPartiallyChecked: $,
+                  onValueChange: u,
+                  activeColor: L
                 }
               ),
-              /* @__PURE__ */ r(P, { children: e.leadingIcon })
-            ] }) : o ? /* @__PURE__ */ s(Q, { children: [
-              /* @__PURE__ */ r(
-                g,
+              /* @__PURE__ */ t(se, { children: e.leadingIcon })
+            ] }) : s ? /* @__PURE__ */ p(ce, { children: [
+              /* @__PURE__ */ t(
+                x,
                 {
-                  onDragStart: u,
-                  onDragEnd: p
+                  onDragStart: f,
+                  onDragEnd: h
                 }
               ),
-              e.leadingIcon && /* @__PURE__ */ r("div", { children: e.leadingIcon })
-            ] }) : e.leadingIcon ? /* @__PURE__ */ r(c, { children: e.leadingIcon }) : void 0,
-            customComponent: i && C && e.customComponent ? /* @__PURE__ */ s(w, { children: [
-              o && /* @__PURE__ */ r(
-                g,
+              e.leadingIcon && /* @__PURE__ */ t("div", { children: e.leadingIcon })
+            ] }) : e.leadingIcon ? /* @__PURE__ */ t(m, { children: e.leadingIcon }) : void 0,
+            customComponent: a && y && e.customComponent ? /* @__PURE__ */ p(F, { children: [
+              s && /* @__PURE__ */ t(
+                x,
                 {
-                  onDragStart: u,
-                  onDragEnd: p
+                  onDragStart: f,
+                  onDragEnd: h
                 }
               ),
-              /* @__PURE__ */ r(
-                k,
+              /* @__PURE__ */ t(
+                O,
                 {
-                  size: d === "2.0" ? "SMALL" : "DEFAULT",
+                  size: l === "2.0" ? "SMALL" : "DEFAULT",
                   isDisabled: e.disabled ?? !1,
                   isChecked: !!e.selected,
-                  onValueChange: f,
-                  activeColor: b
+                  onValueChange: u,
+                  activeColor: L
                 }
               ),
               e.customComponent
             ] }) : e.customComponent,
-            trailingIcon: e.isFreeForm ? /* @__PURE__ */ r(q, { children: /* @__PURE__ */ r(_, { style: { color: m.content.secondary }, children: "Freeform" }) }) : e.children ? /* @__PURE__ */ r(U, { width: 12, height: 12 }) : e.trailingIcon ? /* @__PURE__ */ r(c, { children: e.trailingIcon }) : void 0,
-            variant: e.disabled ? "inactive" : e.selected || !i && j ? "selected" : A ? "focused" : "default"
+            trailingIcon: e.isFreeForm ? /* @__PURE__ */ t(te, { children: /* @__PURE__ */ t(ee, { style: { color: i.content.secondary }, children: "Freeform" }) }) : e.children && o && z ? /* @__PURE__ */ t(
+              ae,
+              {
+                role: "button",
+                "aria-expanded": !g,
+                "aria-label": `${g ? "Expand" : "Collapse"} ${e.label}`,
+                onClick: (r) => {
+                  r.preventDefault(), r.stopPropagation(), N?.();
+                },
+                children: g ? /* @__PURE__ */ t(P, { width: 16, height: 16 }) : /* @__PURE__ */ t(X, { width: 16, height: 16 })
+              }
+            ) : e.children && !o ? /* @__PURE__ */ t(Q, { width: 12, height: 12 }) : e.trailingIcon ? /* @__PURE__ */ t(m, { children: e.trailingIcon }) : void 0,
+            variant: e.disabled ? "inactive" : e.selected || !a && _ ? "selected" : E ? "focused" : "default"
           }
         )
       }
@@ -224,6 +262,6 @@ const $ = t(J)`
   }
 );
 export {
-  oe as MenuItem
+  Le as MenuItem
 };
 //# sourceMappingURL=MenuItem.js.map