diff --git a/packages/app/src/components/ui/combobox.tsx b/packages/app/src/components/ui/combobox.tsx index be6b84472..46d89a95b 100644 --- a/packages/app/src/components/ui/combobox.tsx +++ b/packages/app/src/components/ui/combobox.tsx @@ -106,19 +106,19 @@ function toNumericStyleValue(value: unknown): number | null { function ComboboxSheetBackground({ style }: BottomSheetBackgroundProps) { const { theme } = useUnistyles(); - return ( - + const combinedStyle = useMemo( + () => [ + style, + { + backgroundColor: theme.colors.surface0, + borderTopLeftRadius: theme.borderRadius["2xl"], + borderTopRightRadius: theme.borderRadius["2xl"], + }, + ], + [style, theme.colors.surface0, theme.borderRadius], ); + + return ; } export interface SearchInputProps { @@ -157,7 +157,7 @@ export function SearchInput({ [styles.comboboxItemContent, description && styles.comboboxItemContentInline], + [description], + ); + return ( {leadingContent} - + {label} @@ -722,6 +727,48 @@ export function Combobox({ const content = children ?? defaultContent; + const handleIndicatorStyle = useMemo( + () => ({ backgroundColor: theme.colors.palette.zinc[600] }), + [theme.colors.palette.zinc], + ); + + const comboboxTitleStyle = useMemo( + () => [styles.comboboxTitle, { color: titleColor }], + [titleColor], + ); + + const desktopContainerStyle = useMemo( + () => [ + styles.desktopContainer, + { + position: "absolute" as const, + minWidth: desktopMinWidth ?? referenceWidth ?? 200, + maxWidth: Math.max(400, desktopMinWidth ?? 0), + }, + desktopFixedHeight != null + ? { minHeight: desktopFixedHeight, maxHeight: desktopFixedHeight } + : null, + desktopPositionStyle, + shouldHideDesktopContent ? { opacity: 0 } : null, + typeof availableSize?.height === "number" + ? { maxHeight: Math.min(availableSize.height, desktopFixedHeight ?? 400) } + : null, + ], + [ + desktopMinWidth, + referenceWidth, + desktopFixedHeight, + desktopPositionStyle, + shouldHideDesktopContent, + availableSize?.height, + ], + ); + + const desktopAboveSearchContentContainerStyle = useMemo( + () => [styles.desktopScrollContent, styles.desktopScrollContentAboveSearch], + [], + ); + if (isMobile) { return ( - + {title} @@ -765,22 +812,7 @@ export function Combobox({ testID="combobox-desktop-container" entering={shouldUseDesktopFade ? FadeIn.duration(100) : undefined} exiting={shouldUseDesktopFade ? FadeOut.duration(100) : undefined} - style={[ - styles.desktopContainer, - { - position: "absolute", - minWidth: desktopMinWidth ?? referenceWidth ?? 200, - maxWidth: Math.max(400, desktopMinWidth ?? 0), - }, - desktopFixedHeight != null - ? { minHeight: desktopFixedHeight, maxHeight: desktopFixedHeight } - : null, - desktopPositionStyle, - shouldHideDesktopContent ? { opacity: 0 } : null, - typeof availableSize?.height === "number" - ? { maxHeight: Math.min(availableSize.height, desktopFixedHeight ?? 400) } - : null, - ]} + style={desktopContainerStyle} ref={refs.setFloating} collapsable={false} onLayout={handleDesktopContentLayout} @@ -804,10 +836,7 @@ export function Combobox({ {effectiveOptionsPosition === "above-search" ? ( ({ justifyContent: "flex-end", }, })); + +const SEARCH_INPUT_STYLE = [styles.searchInput, IS_WEB && { outlineStyle: "none" }];