| ... | ... | @@ -352,27 +352,37 @@ function ComboboxChips({ |
| 352 | 352 | } |
| 353 | 353 | |
| 354 | 354 | function ComboboxChip({ children, ...props }: ComboboxPrimitive.Chip.Props) { |
| 355 | const labelId = React.useId(); |
| 356 | |
| 355 | 357 | return ( |
| 356 | 358 | <ComboboxPrimitive.Chip |
| 357 | 359 | className="flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5" |
| 358 | 360 | data-slot="combobox-chip" |
| 359 | 361 | {...props} |
| 360 | 362 | > |
| 361 | | {children} |
| 362 | | <ComboboxChipRemove /> |
| 363 | <span id={labelId}>{children}</span> |
| 364 | <ComboboxChipRemove labelId={labelId} /> |
| 363 | 365 | </ComboboxPrimitive.Chip> |
| 364 | 366 | ); |
| 365 | 367 | } |
| 366 | 368 | |
| 367 | | function ComboboxChipRemove(props: ComboboxPrimitive.ChipRemove.Props) { |
| 369 | function ComboboxChipRemove({ |
| 370 | labelId, |
| 371 | ...props |
| 372 | }: ComboboxPrimitive.ChipRemove.Props & { labelId: string }) { |
| 373 | const removeLabelId = `${labelId}-remove`; |
| 374 | |
| 368 | 375 | return ( |
| 369 | 376 | <ComboboxPrimitive.ChipRemove |
| 370 | | aria-label="Remove" |
| 377 | aria-labelledby={`${removeLabelId} ${labelId}`} |
| 371 | 378 | className="h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5" |
| 372 | 379 | data-slot="combobox-chip-remove" |
| 373 | 380 | {...props} |
| 374 | 381 | > |
| 375 | | <XIcon /> |
| 382 | <span id={removeLabelId} className="sr-only"> |
| 383 | Remove |
| 384 | </span> |
| 385 | <XIcon aria-hidden="true" /> |
| 376 | 386 | </ComboboxPrimitive.ChipRemove> |
| 377 | 387 | ); |
| 378 | 388 | } |
Alex Southwell <saphid@gmail.com> 2026-09-06 17:22:21+10:00
GitHub <noreply@github.com> 2026-09-06 00:22:21-07:00