@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/MultiSelect/MultiSelectMenu.tsx

@@ -0,0 +1,903 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import * as RadixMenu from '@radix-ui/react-dropdown-menu'
+import styled from 'styled-components'
+import Block from '../Primitives/Block/Block'
+import { FOUNDATION_THEME } from '../../tokens'
+import {
+    MultiSelectMenuAlignment,
+    type MultiSelectMenuGroupType,
+    type MultiSelectMenuItemType,
+    type MultiSelectMenuProps,
+    MultiSelectMenuSide,
+    MultiSelectMenuSize,
+    MultiSelectVariant,
+} from './types'
+import PrimitiveText from '../Primitives/PrimitiveText/PrimitiveText'
+import Text from '../Text/Text'
+import MultiSelectMenuItem from './MultiSelectMenuItem'
+import { type MultiSelectTokensType } from './multiSelect.tokens'
+import { SearchInput } from '../Inputs'
+import { filterMenuGroups, getAllAvailableValues } from './utils'
+import {
+    hasExactMatch as checkExactMatch,
+    getFilteredItemsWithCustomValue,
+} from '../Select/selectUtils'
+import SelectAllItem from './SelectAllItem'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import {
+    usePreventParentScroll,
+    useScrollLock,
+    useShadowRoot,
+} from '../../hooks'
+import Button from '../Button/Button'
+import { ButtonType, ButtonSize } from '../Button/types'
+import VirtualList from '../VirtualList/VirtualList'
+import type { VirtualListItem } from '../VirtualList/types'
+import { dropdownContentAnimations } from './multiSelect.animations'
+import MultiSelectSkeleton from './MultiSelectSkeleton'
+
+const Content = styled(RadixMenu.Content)`
+    position: relative;
+    background-color: ${FOUNDATION_THEME.colors.gray[0]};
+    border-radius: ${FOUNDATION_THEME.border.radius[8]};
+    box-shadow: ${FOUNDATION_THEME.shadows.sm};
+    z-index: 101;
+    border: ${FOUNDATION_THEME.border.width[1]} solid
+        ${FOUNDATION_THEME.colors.gray[200]};
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    &[data-state='closed'] {
+        pointer-events: none;
+    }
+
+    ${dropdownContentAnimations}
+`
+
+const StickyHeader = styled(Block)(() => ({
+    position: 'sticky',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 50,
+    backgroundColor: FOUNDATION_THEME.colors.gray[0],
+}))
+
+const ScrollableContent = styled(Block)(() => ({
+    overflowY: 'auto',
+    scrollbarWidth: 'none',
+    msOverflowStyle: 'none',
+    flex: '1 1 auto',
+    minHeight: 0,
+    '&::-webkit-scrollbar': {
+        display: 'none',
+    },
+}))
+
+const FixedActionButtons = styled(Block)(() => ({
+    borderTop: `${FOUNDATION_THEME.border.width[1]} solid ${FOUNDATION_THEME.colors.gray[200]}`,
+    padding: FOUNDATION_THEME.unit[16],
+    display: 'flex',
+    gap: FOUNDATION_THEME.unit[8],
+    justifyContent: 'flex-end',
+    margin: '0',
+    backgroundColor: FOUNDATION_THEME.colors.gray[0],
+    flexShrink: 0,
+}))
+
+type FlattenedMultiSelectItem = VirtualListItem & {
+    type: 'item' | 'label' | 'separator'
+    item?: MultiSelectMenuItemType
+    label?: string
+    groupId?: number
+}
+
+const flattenMultiSelectGroups = (
+    groups: MultiSelectMenuGroupType[]
+): FlattenedMultiSelectItem[] => {
+    const flattened: FlattenedMultiSelectItem[] = []
+    let idCounter = 0
+
+    groups.forEach((group, groupId) => {
+        if (group.groupLabel) {
+            flattened.push({
+                id: `label-${groupId}`,
+                type: 'label',
+                label: group.groupLabel,
+                groupId,
+            })
+        }
+
+        group.items.forEach((item) => {
+            flattened.push({
+                id: `item-${idCounter++}`,
+                type: 'item',
+                item,
+                groupId,
+            })
+        })
+
+        if (groupId !== groups.length - 1 && group.showSeparator) {
+            flattened.push({
+                id: `separator-${groupId}`,
+                type: 'separator',
+                groupId,
+            })
+        }
+    })
+
+    return flattened
+}
+
+const MultiSelectMenu = ({
+    items,
+    selected,
+    onSelect,
+    trigger,
+    minMenuWidth,
+    maxMenuWidth,
+    maxMenuHeight,
+    disabled = false,
+    enableSearch = true,
+    searchPlaceholder = 'Search options...',
+    enableSelectAll = false,
+    selectAllText = 'Select All',
+    maxSelections,
+    onSelectAll,
+    alignment = MultiSelectMenuAlignment.START,
+    side = MultiSelectMenuSide.BOTTOM,
+    sideOffset = 8,
+    alignOffset = 0,
+    collisionBoundary,
+    open,
+    onOpenChange,
+    showActionButtons = true,
+    primaryAction,
+    secondaryAction,
+    enableVirtualization = false,
+    virtualListItemHeight = 48,
+    virtualListOverscan = 5,
+    onEndReached,
+    endReachedThreshold,
+    hasMore,
+    skeleton = {
+        count: 3,
+        show: false,
+        variant: 'pulse',
+    },
+    size = MultiSelectMenuSize.MEDIUM,
+    variant = MultiSelectVariant.CONTAINER,
+    allowCustomValue = false,
+    customValueLabel = 'Specify',
+    menuId,
+}: MultiSelectMenuProps) => {
+    const multiSelectTokens =
+        useResponsiveTokens<MultiSelectTokensType>('MULTI_SELECT')
+    const { target: portalContainer } = useShadowRoot()
+
+    const [searchText, setSearchText] = useState('')
+    const searchInputRef = useRef<HTMLInputElement>(null)
+    const contentRef = useRef<HTMLDivElement>(null)
+    const justOpenedRef = useRef(false)
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+    const hasMatch = React.useMemo(
+        () => checkExactMatch(searchText, items),
+        [searchText, items]
+    )
+
+    const selectors = [
+        '[data-dropdown="dropdown"]',
+        '[role="listbox"]',
+        '[role="menu"]',
+        '[data-radix-popper-content-wrapper]',
+        '[data-radix-dropdown-menu-content]',
+    ]
+    usePreventParentScroll(open, contentRef, selectors)
+    useScrollLock(open)
+
+    const filteredItems = React.useMemo(() => {
+        const baseFilteredItems = filterMenuGroups(items, searchText)
+
+        return getFilteredItemsWithCustomValue(
+            baseFilteredItems,
+            searchText,
+            hasMatch,
+            allowCustomValue,
+            enableSearch || false,
+            customValueLabel
+        )
+    }, [
+        items,
+        searchText,
+        allowCustomValue,
+        hasMatch,
+        enableSearch,
+        customValueLabel,
+    ])
+    const availableValues = React.useMemo(
+        () => getAllAvailableValues(filteredItems),
+        [filteredItems]
+    )
+
+    const flattenedItems = useMemo(
+        () => flattenMultiSelectGroups(filteredItems),
+        [filteredItems]
+    )
+
+    useEffect(() => {
+        if (open && enableSearch && searchInputRef.current) {
+            const timer = setTimeout(() => {
+                searchInputRef.current?.focus()
+            }, 50)
+            return () => clearTimeout(timer)
+        }
+    }, [open, enableSearch])
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent) => {
+            if (
+                enableSearch &&
+                searchInputRef.current &&
+                e.target !== searchInputRef.current
+            ) {
+                if (
+                    e.key.length === 1 &&
+                    !e.ctrlKey &&
+                    !e.metaKey &&
+                    !e.altKey
+                ) {
+                    e.preventDefault()
+                    searchInputRef.current.focus()
+                    const newValue = searchText + e.key
+                    setSearchText(newValue)
+                    setTimeout(() => {
+                        if (searchInputRef.current) {
+                            searchInputRef.current.setSelectionRange(
+                                newValue.length,
+                                newValue.length
+                            )
+                        }
+                    }, 0)
+                    return
+                }
+
+                if (e.key === 'Backspace' && searchText.length > 0) {
+                    e.preventDefault()
+                    searchInputRef.current.focus()
+                    const newValue = searchText.slice(0, -1)
+                    setSearchText(newValue)
+                    setTimeout(() => {
+                        if (searchInputRef.current) {
+                            searchInputRef.current.setSelectionRange(
+                                newValue.length,
+                                newValue.length
+                            )
+                        }
+                    }, 0)
+                    return
+                }
+            }
+        },
+        [enableSearch, searchText]
+    )
+
+    const handleOpenChange = useCallback(
+        (newOpen: boolean) => {
+            if (disabled) return
+
+            if (newOpen) {
+                if (enableSearch) setSearchText('')
+                justOpenedRef.current = true
+                if (timeoutRef.current) clearTimeout(timeoutRef.current)
+                timeoutRef.current = setTimeout(() => {
+                    justOpenedRef.current = false
+                    timeoutRef.current = null
+                }, 150)
+            } else {
+                if (timeoutRef.current) {
+                    clearTimeout(timeoutRef.current)
+                    timeoutRef.current = null
+                }
+                justOpenedRef.current = false
+            }
+
+            onOpenChange(newOpen)
+        },
+        [disabled, enableSearch, onOpenChange]
+    )
+
+    const handleSearchChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            setSearchText(e.target.value)
+        },
+        []
+    )
+
+    const handleOutsideInteraction = useCallback((e: Event) => {
+        if (justOpenedRef.current) {
+            e.preventDefault()
+            return
+        }
+
+        const target = e.target as HTMLElement
+        const trigger = target?.closest('[data-radix-dropdown-menu-trigger]')
+        if (trigger) {
+            e.preventDefault()
+        }
+    }, [])
+
+    // RCA: When customTrigger is a Tooltip wrapping a Button, nested asChild props conflict
+    // Solution: Detect Tooltip wrapper and restructure to: Tooltip > MenuTrigger > Button
+    // This ensures tooltip shows on hover AND dropdown opens on click
+    const isTooltipWrapper =
+        React.isValidElement(trigger) &&
+        trigger.props !== null &&
+        typeof trigger.props === 'object' &&
+        'content' in trigger.props &&
+        'children' in trigger.props
+
+    const maxScrollHeight = maxMenuHeight ? maxMenuHeight - 80 : 320
+    const scrollAreaHeight =
+        enableVirtualization && flattenedItems.length > 0
+            ? Math.min(
+                  flattenedItems.length * virtualListItemHeight,
+                  maxScrollHeight
+              )
+            : null
+
+    return (
+        <RadixMenu.Root
+            modal={false}
+            open={open && !disabled}
+            onOpenChange={handleOpenChange}
+        >
+            {isTooltipWrapper ? (
+                React.cloneElement(
+                    trigger as React.ReactElement<Record<string, unknown>>,
+                    {
+                        children: (
+                            <RadixMenu.Trigger asChild disabled={disabled}>
+                                {
+                                    (
+                                        trigger as React.ReactElement<
+                                            Record<string, unknown> & {
+                                                children: React.ReactNode
+                                            }
+                                        >
+                                    ).props.children
+                                }
+                            </RadixMenu.Trigger>
+                        ),
+                    }
+                )
+            ) : (
+                <RadixMenu.Trigger asChild disabled={disabled}>
+                    {trigger}
+                </RadixMenu.Trigger>
+            )}
+            <RadixMenu.Portal container={portalContainer ?? undefined}>
+                <Content
+                    id={menuId}
+                    data-dropdown="dropdown"
+                    ref={contentRef}
+                    align={alignment}
+                    sideOffset={sideOffset}
+                    alignOffset={alignOffset}
+                    side={side}
+                    avoidCollisions
+                    collisionBoundary={collisionBoundary}
+                    onKeyDown={handleKeyDown}
+                    onInteractOutside={handleOutsideInteraction}
+                    onPointerDownOutside={handleOutsideInteraction}
+                    role="listbox"
+                    aria-multiselectable="true"
+                    style={{
+                        minWidth: minMenuWidth || 250,
+                        width: 'max(var(--radix-dropdown-menu-trigger-width))',
+                        maxWidth:
+                            maxMenuWidth ||
+                            'var(--radix-dropdown-menu-trigger-width)',
+                        maxHeight:
+                            maxMenuHeight ||
+                            'var(--radix-popper-available-height)',
+                        height: 'fit-content',
+                    }}
+                >
+                    {skeleton.show ? (
+                        <MultiSelectSkeleton
+                            multiSelectTokens={multiSelectTokens}
+                            skeleton={skeleton}
+                        />
+                    ) : (
+                        <>
+                            <StickyHeader>
+                                {enableSearch && items.length > 0 && (
+                                    <Block>
+                                        <SearchInput
+                                            ref={searchInputRef}
+                                            placeholder={searchPlaceholder}
+                                            value={searchText}
+                                            onChange={handleSearchChange}
+                                            autoFocus
+                                            aria-label={
+                                                searchPlaceholder ||
+                                                'Search options'
+                                            }
+                                            onKeyDown={(e) => {
+                                                if (
+                                                    e.key === 'ArrowDown' ||
+                                                    e.key === 'ArrowUp'
+                                                ) {
+                                                    e.preventDefault()
+                                                    e.stopPropagation()
+                                                    const menuContent =
+                                                        e.currentTarget.closest(
+                                                            '[data-dropdown="dropdown"]'
+                                                        )
+                                                    if (menuContent) {
+                                                        const firstMenuItem =
+                                                            menuContent.querySelector<HTMLElement>(
+                                                                '[role="option"]:not([data-disabled])'
+                                                            )
+                                                        if (firstMenuItem) {
+                                                            firstMenuItem.focus()
+                                                        }
+                                                    }
+                                                }
+                                            }}
+                                        />
+                                    </Block>
+                                )}
+                                {enableSelectAll &&
+                                    onSelectAll &&
+                                    availableValues.length > 0 && (
+                                        <Block
+                                            borderBottom={`1px solid ${FOUNDATION_THEME.colors.gray[200]}`}
+                                            padding={`0 ${multiSelectTokens.menu.item.gap}`}
+                                        >
+                                            <SelectAllItem
+                                                selected={selected}
+                                                availableValues={
+                                                    availableValues
+                                                }
+                                                onSelectAll={(selectAll) =>
+                                                    onSelectAll(
+                                                        selectAll,
+                                                        filteredItems
+                                                    )
+                                                }
+                                                selectAllText={selectAllText}
+                                                disabled={disabled}
+                                            />
+                                        </Block>
+                                    )}
+                            </StickyHeader>
+                            <ScrollableContent
+                                style={{
+                                    maxHeight: `${maxScrollHeight}px`,
+                                    ...(scrollAreaHeight !== null && {
+                                        height: `${scrollAreaHeight}px`,
+                                    }),
+                                }}
+                            >
+                                {items.length === 0 ||
+                                (filteredItems.length === 0 &&
+                                    searchText.length > 0) ? (
+                                    <Block
+                                        display="flex"
+                                        justifyContent="center"
+                                        alignItems="center"
+                                        padding={
+                                            multiSelectTokens.menu.item.padding
+                                        }
+                                    >
+                                        <Text
+                                            variant="body.md"
+                                            color={
+                                                multiSelectTokens.menu.item
+                                                    .optionsLabel.color.default
+                                            }
+                                            textAlign="center"
+                                        >
+                                            {items.length === 0
+                                                ? 'No items available'
+                                                : 'No results found'}
+                                        </Text>
+                                    </Block>
+                                ) : enableVirtualization &&
+                                  flattenedItems.length > 0 ? (
+                                    <Block
+                                        padding={FOUNDATION_THEME.unit[6]}
+                                        style={{
+                                            paddingTop: enableSearch
+                                                ? 0
+                                                : FOUNDATION_THEME.unit[6],
+                                        }}
+                                    >
+                                        <VirtualList
+                                            items={flattenedItems}
+                                            height={
+                                                scrollAreaHeight ??
+                                                maxScrollHeight
+                                            }
+                                            itemHeight={virtualListItemHeight}
+                                            overscan={virtualListOverscan}
+                                            onEndReached={onEndReached}
+                                            endReachedThreshold={
+                                                endReachedThreshold
+                                            }
+                                            hasMore={hasMore}
+                                            renderItem={({
+                                                item: flatItem,
+                                            }) => {
+                                                const typed =
+                                                    flatItem as FlattenedMultiSelectItem
+
+                                                const VirtualItemWrapper = ({
+                                                    children,
+                                                }: {
+                                                    children: React.ReactNode
+                                                }) => (
+                                                    <Block
+                                                        style={{
+                                                            height: virtualListItemHeight,
+                                                            minHeight:
+                                                                virtualListItemHeight,
+                                                            maxHeight:
+                                                                virtualListItemHeight,
+                                                            display: 'flex',
+                                                            alignItems:
+                                                                'center',
+                                                            overflow: 'hidden',
+                                                        }}
+                                                    >
+                                                        {children}
+                                                    </Block>
+                                                )
+
+                                                if (typed.type === 'label') {
+                                                    return (
+                                                        <VirtualItemWrapper>
+                                                            <RadixMenu.Label
+                                                                asChild
+                                                            >
+                                                                <PrimitiveText
+                                                                    fontSize={
+                                                                        multiSelectTokens
+                                                                            .menu
+                                                                            .item
+                                                                            .optionsLabel
+                                                                            .fontSize
+                                                                    }
+                                                                    fontWeight={
+                                                                        multiSelectTokens
+                                                                            .menu
+                                                                            .item
+                                                                            .optionsLabel
+                                                                            .fontWeight
+                                                                    }
+                                                                    padding={`${FOUNDATION_THEME.unit[6]} ${FOUNDATION_THEME.unit[8]}`}
+                                                                    userSelect="none"
+                                                                    textTransform="uppercase"
+                                                                    color={
+                                                                        multiSelectTokens
+                                                                            .menu
+                                                                            .item
+                                                                            .optionsLabel
+                                                                            .color
+                                                                            .default
+                                                                    }
+                                                                    style={{
+                                                                        margin: 0,
+                                                                        width: '100%',
+                                                                    }}
+                                                                >
+                                                                    {
+                                                                        typed.label
+                                                                    }
+                                                                </PrimitiveText>
+                                                            </RadixMenu.Label>
+                                                        </VirtualItemWrapper>
+                                                    )
+                                                }
+
+                                                if (
+                                                    typed.type === 'separator'
+                                                ) {
+                                                    return (
+                                                        <VirtualItemWrapper>
+                                                            <RadixMenu.Separator
+                                                                asChild
+                                                            >
+                                                                <Block
+                                                                    height={
+                                                                        multiSelectTokens
+                                                                            .menu
+                                                                            .item
+                                                                            .seperator
+                                                                            .height
+                                                                    }
+                                                                    backgroundColor={
+                                                                        multiSelectTokens
+                                                                            .menu
+                                                                            .item
+                                                                            .seperator
+                                                                            .color
+                                                                    }
+                                                                    width="100%"
+                                                                />
+                                                            </RadixMenu.Separator>
+                                                        </VirtualItemWrapper>
+                                                    )
+                                                }
+
+                                                if (
+                                                    typed.type === 'item' &&
+                                                    typed.item
+                                                ) {
+                                                    const itemIndex = (() => {
+                                                        let idx = 0
+                                                        for (const item of flattenedItems) {
+                                                            if (
+                                                                item.id ===
+                                                                flatItem.id
+                                                            ) {
+                                                                break
+                                                            }
+                                                            if (
+                                                                (
+                                                                    item as FlattenedMultiSelectItem
+                                                                ).type ===
+                                                                'item'
+                                                            ) {
+                                                                idx++
+                                                            }
+                                                        }
+                                                        return idx
+                                                    })()
+                                                    return (
+                                                        <VirtualItemWrapper>
+                                                            <Block
+                                                                width="100%"
+                                                                style={{
+                                                                    minWidth: 0,
+                                                                }}
+                                                            >
+                                                                <MultiSelectMenuItem
+                                                                    selected={
+                                                                        selected
+                                                                    }
+                                                                    item={
+                                                                        typed.item
+                                                                    }
+                                                                    onSelect={
+                                                                        onSelect
+                                                                    }
+                                                                    maxSelections={
+                                                                        maxSelections
+                                                                    }
+                                                                    allItems={filteredItems.flatMap(
+                                                                        (g) =>
+                                                                            g.items
+                                                                    )}
+                                                                    index={
+                                                                        itemIndex
+                                                                    }
+                                                                />
+                                                            </Block>
+                                                        </VirtualItemWrapper>
+                                                    )
+                                                }
+
+                                                return null
+                                            }}
+                                        />
+                                    </Block>
+                                ) : (
+                                    <Block
+                                        paddingX={
+                                            multiSelectTokens.menu.padding[
+                                                size
+                                            ][variant].x
+                                        }
+                                        paddingY={
+                                            multiSelectTokens.menu.padding[
+                                                size
+                                            ][variant].y
+                                        }
+                                    >
+                                        {filteredItems.map((group, groupId) => {
+                                            const groupStartIndex =
+                                                filteredItems
+                                                    .slice(0, groupId)
+                                                    .reduce(
+                                                        (acc, g) =>
+                                                            acc +
+                                                            g.items.length,
+                                                        0
+                                                    )
+
+                                            return (
+                                                <React.Fragment key={groupId}>
+                                                    {group.groupLabel && (
+                                                        <RadixMenu.Label
+                                                            asChild
+                                                        >
+                                                            <PrimitiveText
+                                                                fontSize={
+                                                                    multiSelectTokens
+                                                                        .menu
+                                                                        .item
+                                                                        .optionsLabel
+                                                                        .fontSize
+                                                                }
+                                                                fontWeight={
+                                                                    multiSelectTokens
+                                                                        .menu
+                                                                        .item
+                                                                        .optionsLabel
+                                                                        .fontWeight
+                                                                }
+                                                                padding={`${FOUNDATION_THEME.unit[6]} ${FOUNDATION_THEME.unit[8]}`}
+                                                                userSelect="none"
+                                                                textTransform="uppercase"
+                                                                color={
+                                                                    multiSelectTokens
+                                                                        .menu
+                                                                        .item
+                                                                        .optionsLabel
+                                                                        .color
+                                                                        .default
+                                                                }
+                                                            >
+                                                                {
+                                                                    group.groupLabel
+                                                                }
+                                                            </PrimitiveText>
+                                                        </RadixMenu.Label>
+                                                    )}
+                                                    {group.items.map(
+                                                        (item, itemIndex) => (
+                                                            <MultiSelectMenuItem
+                                                                key={`${groupId}-${itemIndex}`}
+                                                                selected={
+                                                                    selected
+                                                                }
+                                                                item={item}
+                                                                onSelect={
+                                                                    onSelect
+                                                                }
+                                                                maxSelections={
+                                                                    maxSelections
+                                                                }
+                                                                allItems={filteredItems.flatMap(
+                                                                    (g) =>
+                                                                        g.items
+                                                                )}
+                                                                index={
+                                                                    groupStartIndex +
+                                                                    itemIndex
+                                                                }
+                                                            />
+                                                        )
+                                                    )}
+                                                    {groupId !==
+                                                        filteredItems.length -
+                                                            1 &&
+                                                        group.showSeparator && (
+                                                            <RadixMenu.Separator
+                                                                asChild
+                                                            >
+                                                                <Block
+                                                                    height={
+                                                                        multiSelectTokens
+                                                                            .menu
+                                                                            .item
+                                                                            .seperator
+                                                                            .height
+                                                                    }
+                                                                    backgroundColor={
+                                                                        multiSelectTokens
+                                                                            .menu
+                                                                            .item
+                                                                            .seperator
+                                                                            .color
+                                                                    }
+                                                                    margin={
+                                                                        multiSelectTokens
+                                                                            .menu
+                                                                            .item
+                                                                            .seperator
+                                                                            .margin
+                                                                    }
+                                                                />
+                                                            </RadixMenu.Separator>
+                                                        )}
+                                                </React.Fragment>
+                                            )
+                                        })}
+                                    </Block>
+                                )}
+                            </ScrollableContent>
+                            {showActionButtons &&
+                                (primaryAction || secondaryAction) &&
+                                items.length > 0 &&
+                                !(
+                                    filteredItems.length === 0 &&
+                                    searchText.length > 0
+                                ) && (
+                                    <FixedActionButtons>
+                                        {secondaryAction && (
+                                            <Button
+                                                data-button-for={
+                                                    secondaryAction.text
+                                                }
+                                                data-dynamic-button={
+                                                    secondaryAction.text
+                                                }
+                                                data-batch-value={
+                                                    secondaryAction.text
+                                                }
+                                                buttonType={
+                                                    ButtonType.SECONDARY
+                                                }
+                                                size={ButtonSize.SMALL}
+                                                text={secondaryAction.text}
+                                                onClick={() => {
+                                                    secondaryAction.onClick()
+                                                    requestAnimationFrame(
+                                                        () => {
+                                                            onOpenChange(false)
+                                                        }
+                                                    )
+                                                }}
+                                                disabled={
+                                                    secondaryAction.disabled
+                                                }
+                                                loading={
+                                                    secondaryAction.loading
+                                                }
+                                            />
+                                        )}
+                                        {primaryAction && (
+                                            <Button
+                                                data-button-for={
+                                                    primaryAction.text
+                                                }
+                                                data-dynamic-button={
+                                                    primaryAction.text
+                                                }
+                                                data-batch-value={
+                                                    primaryAction.text
+                                                }
+                                                buttonType={ButtonType.PRIMARY}
+                                                size={ButtonSize.SMALL}
+                                                text={primaryAction.text}
+                                                onClick={() => {
+                                                    primaryAction.onClick(
+                                                        selected
+                                                    )
+                                                    requestAnimationFrame(
+                                                        () => {
+                                                            onOpenChange(false)
+                                                        }
+                                                    )
+                                                }}
+                                                disabled={
+                                                    primaryAction.disabled
+                                                }
+                                                loading={primaryAction.loading}
+                                            />
+                                        )}
+                                    </FixedActionButtons>
+                                )}
+                        </>
+                    )}
+                </Content>
+            </RadixMenu.Portal>
+        </RadixMenu.Root>
+    )
+}
+
+export default MultiSelectMenu