yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI/select: make z-index adjustable

Browse Source
This commit is contained in:
Johannes Kirschbauer
2025-08-08 20:59:55 +02:00
parent 6cbe221f44
commit c13741602c
2 changed files with 76 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pkgs/clan-app/ui/src/components/Select/Select.module.css
View File

@@ -4,11 +4,11 @@
&[data-expanded] { &[data-expanded] {
@apply outline-def-2 outline-1 outline; @apply outline-def-2 outline-1 outline;
z-index: 40; z-index: var(--z-index + 5);
} }
&[data-highlighted] { &[data-highlighted] {
@apply outline outline-1 outline-inv-2 @apply outline outline-1 outline-inv-2;
} }
&[data-loading] { &[data-loading] {
@@ -48,6 +48,8 @@
} }
.options_content { .options_content {
z-index: var(--z-index);
@apply bg-def-1 px-1 py-3 rounded-[4px] -mt-8 pt-10 -mx-1; @apply bg-def-1 px-1 py-3 rounded-[4px] -mt-8 pt-10 -mx-1;
@apply outline-def-2 outline-1 outline; @apply outline-def-2 outline-1 outline;
@@ -58,11 +60,11 @@
/* Option elements (typically <li>) */ /* Option elements (typically <li>) */
& [role="option"] { & [role="option"] {
@apply px-1 py-2 rounded-sm flex items-center gap-1 flex-shrink-0 ; @apply px-2 py-4 rounded-sm flex items-center gap-1 flex-shrink-0;
&[data-highlighted], &[data-highlighted],
&:focus-visible { &:focus-visible {
@apply outline outline-1 outline-inv-2 @apply outline outline-1 outline-inv-2;
} }
&:hover { &:hover {
@@ -72,7 +74,6 @@
&:active { &:active {
@apply bg-def-4; @apply bg-def-4;
} }
} }
& [role="listbox"] { & [role="listbox"] {
@@ -82,7 +83,6 @@
} }
} }
@keyframes overlayShow { @keyframes overlayShow {
from { from {
opacity: 0; opacity: 0;

14
pkgs/clan-app/ui/src/components/Select/Select.tsx
View File

@@ -1,4 +1,4 @@
import { Select as KSelect } from "@kobalte/core/select"; import { Select as KSelect, SelectPortalProps } from "@kobalte/core/select";
import Icon from "../Icon/Icon"; import Icon from "../Icon/Icon";
import { Orienter } from "../Form/Orienter"; import { Orienter } from "../Form/Orienter";
import { Label, LabelProps } from "../Form/Label"; import { Label, LabelProps } from "../Form/Label";
@@ -28,6 +28,8 @@ export type SelectProps = {
// Custom props // Custom props
orientation?: "horizontal" | "vertical"; orientation?: "horizontal" | "vertical";
label?: Omit<LabelProps, "labelComponent" | "descriptionComponent">; label?: Omit<LabelProps, "labelComponent" | "descriptionComponent">;
portalProps?: Partial<SelectPortalProps>;
zIndex?: number;
} & ( } & (
| { | {
// Sync options // Sync options
@@ -48,6 +50,8 @@ export const Select = (props: SelectProps) => {
["placeholder", "ref", "onInput", "onChange", "onBlur"], ["placeholder", "ref", "onInput", "onChange", "onBlur"],
); );
const zIndex = () => props.zIndex ?? 40;
const [getValue, setValue] = createSignal<Option>(); const [getValue, setValue] = createSignal<Option>();
const [resolvedOptions, setResolvedOptions] = createSignal<Option[]>([]); const [resolvedOptions, setResolvedOptions] = createSignal<Option[]>([]);
@@ -78,6 +82,7 @@ export const Select = (props: SelectProps) => {
return ( return (
<KSelect <KSelect
{...root} {...root}
fitViewport={true}
options={options()} options={options()}
sameWidth={true} sameWidth={true}
gutter={0} gutter={0}
@@ -164,8 +169,11 @@ export const Select = (props: SelectProps) => {
</KSelect.Icon> </KSelect.Icon>
</KSelect.Trigger> </KSelect.Trigger>
</Orienter> </Orienter>
<KSelect.Portal> <KSelect.Portal {...props.portalProps}>
<KSelect.Content class={styles.options_content}> <KSelect.Content
class={styles.options_content}
style={{ "--z-index": zIndex() }}
>
<KSelect.Listbox /> <KSelect.Listbox />
</KSelect.Content> </KSelect.Content>
</KSelect.Portal> </KSelect.Portal>