@djangocfg/ui-core 2.1.555 → 2.1.557

package/src/components/select/combobox.tsx

@@ -12,6 +12,8 @@ import {
   Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
 } from '../navigation/command';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
+import { SELECT_TRIGGER_CLASS } from './trigger';
+import { useHighlight } from './use-highlight';
 
 export interface ComboboxOption {
   value: string
@@ -109,7 +111,6 @@ export function Combobox({
   const t = useAppT()
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
-  const scrollRef = React.useRef<HTMLDivElement>(null)
 
   const storageOptions: UseStoredValueOptions | undefined =
     storageKey ? { storage: storageType ?? 'local', ttl: storageTtl } : undefined;
@@ -129,6 +130,8 @@ export function Combobox({
   // The effective selected value: prefer controlled, fall back to internal
   const value = controlledValue !== undefined ? controlledValue : internalValue;
 
+  const highlight = useHighlight(open, value)
+
   // autoSelectFromOptions: when options become available, validate stored value.
   // Runs whenever options change (async loads, filters, etc.)
   // Only acts when: storageKey is set, autoSelectFromOptions=true, options non-empty.
@@ -177,22 +180,6 @@ export function Combobox({
   const resolvedSearchPlaceholder = searchPlaceholder ?? t('ui.select.search')
   const resolvedEmptyText = emptyText ?? t('ui.select.noResults')
 
-  React.useEffect(() => {
-    if (scrollRef.current && open) {
-      const el = scrollRef.current
-      // No min-height here — list should hug its content when there
-      // are only a few options, otherwise an empty strip appears below
-      // the last item (reproducible with 2–3 options).
-      el.style.cssText = `
-        max-height: 300px !important;
-        overflow-y: auto !important;
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch !important;
-        overscroll-behavior: contain !important;
-      `
-    }
-  }, [open])
-
   const selectedOption = React.useMemo(
     () => options.find((option) => option.value === value),
     [options, value]
@@ -270,7 +257,7 @@ export function Combobox({
             role="combobox"
             aria-expanded={open}
             className={cn(
-              "w-full justify-between",
+              SELECT_TRIGGER_CLASS,
               !value && "text-muted-foreground",
               className
             )}
@@ -290,29 +277,33 @@ export function Combobox({
         style={contentStyle}
         align="start"
       >
-        <Command shouldFilter={false} className="flex flex-col">
+        {/* The highlight is controlled so it STARTS on the current selection —
+            cmdk otherwise highlights the first item, and its open-time
+            `scrollIntoView` then parks an 80-entry list at the top with the
+            selected row far below the fold.
+            `onValueChange` is mandatory here, not decorative: for a controlled
+            `value` cmdk delegates every move to it and stores nothing itself,
+            so without it the arrow keys would not move the highlight at all. */}
+        <Command
+          shouldFilter={false}
+          value={highlight.value}
+          onValueChange={highlight.setValue}
+          className="flex flex-col"
+        >
           <CommandInput
             placeholder={resolvedSearchPlaceholder}
             className="shrink-0"
             value={search}
             onValueChange={setSearch}
           />
-          <div
-            ref={scrollRef}
-            tabIndex={-1}
-            className="overflow-y-auto overflow-x-hidden"
-            style={{
-              maxHeight: '300px',
-            }}
-            onWheel={(e) => {
-              e.stopPropagation()
-            }}
-          >
-            <CommandList className="!max-h-none !overflow-visible" style={{ pointerEvents: 'auto' }}>
+          {/* CommandList is the scroller — see its own note. It caps itself to
+              the popover's available height, so no wrapper is needed here and
+              none may be added: one would take the scrolling away from cmdk. */}
+          <CommandList ref={highlight.listRef}>
               {filteredOptions.length === 0 ? (
                 <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
               ) : (
-                <CommandGroup className="!overflow-visible" style={{ pointerEvents: 'auto' }}>
+                <CommandGroup>
                   {filteredOptions.map((option) => (
                   <CommandItem
                     key={option.value}
@@ -324,19 +315,16 @@ export function Combobox({
                     }}
                     disabled={option.disabled}
                   >
-                    <Check
-                      className={cn(
-                        "mr-2 h-4 w-4 shrink-0",
-                        value === option.value ? "opacity-100" : "opacity-0"
-                      )}
-                    />
                     {option.icon && <option.icon className="mr-2 h-4 w-4 shrink-0" />}
                     {renderOption ? (
                       renderOption(option)
                     ) : (
                       <div className="flex flex-col flex-1 min-w-0">
                         <div className="flex items-center gap-2 truncate">
-                          <span className="truncate">{option.label}</span>
+                          {/* `title` rather than wrapping: a row is a label to
+                              scan, and a two-line one breaks both the vertical
+                              rhythm and the constant step of the arrow keys. */}
+                          <span className="truncate" title={option.label}>{option.label}</span>
                           {option.badge && (
                             <Badge variant="outline" className="text-xs shrink-0">
                               {option.badge}
@@ -350,12 +338,20 @@ export function Combobox({
                         )}
                       </div>
                     )}
+                    {/* Trailing, and rendered ONLY when selected — an
+                        always-present `opacity-0` placeholder indents every row
+                        by 24px to reserve space for a mark at most one of them
+                        ever shows. Absent, the label gets the full width;
+                        present, `shrink-0` makes the label's truncation stop
+                        exactly at the mark. */}
+                    {value === option.value && (
+                      <Check className="ml-2 h-4 w-4 shrink-0" />
+                    )}
                   </CommandItem>
                   ))}
                 </CommandGroup>
               )}
             </CommandList>
-          </div>
         </Command>
       </PopoverContent>
     </Popover>

package/src/components/select/country-select.tsx

@@ -15,6 +15,8 @@ import { Input } from '../forms/input';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 import { ScrollArea } from '../layout/scroll-area';
 import { Flag } from '../specialized/flag';
+import { SELECT_TRIGGER_MULTI_CLASS } from './trigger';
+import { useHighlight } from './use-highlight';
 
 export interface CountryOption {
   code: TCountryCode;
@@ -132,6 +134,7 @@ export function CountrySelect({
   moreItemsLabel = (count: number) => `+${count} more`,
 }: CountrySelectProps) {
   const [open, setOpen] = React.useState(false)
+  const highlight = useHighlight(open, value[0])
   const [search, setSearch] = React.useState("")
 
   // Resolve defaults
@@ -343,7 +346,7 @@ export function CountrySelect({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "w-full justify-between min-h-10 h-auto py-2",
+            SELECT_TRIGGER_MULTI_CLASS,
             className
           )}
           disabled={disabled}
@@ -355,14 +358,22 @@ export function CountrySelect({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
-        <Command shouldFilter={false} className="flex flex-col">
+        {/* Controlled highlight. `onValueChange` is mandatory alongside it:
+            with a controlled `value` cmdk stores nothing itself and delegates
+            every move, so without it the arrow keys would not move the row. */}
+        <Command
+          shouldFilter={false}
+          value={highlight.value}
+          onValueChange={highlight.setValue}
+          className="flex flex-col"
+        >
           <CommandInput
             placeholder={resolvedSearchPlaceholder}
             className="shrink-0"
             value={search}
             onValueChange={setSearch}
           />
-          <CommandList className="max-h-[300px]">
+          <CommandList ref={highlight.listRef} className="max-h-[300px]">
             {filteredCountries.length === 0 ? (
               <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
             ) : (
@@ -375,12 +386,6 @@ export function CountrySelect({
                       value={country.code}
                       onSelect={() => handleSelect(country.code)}
                     >
-                      <Check
-                        className={cn(
-                          "mr-2 h-4 w-4 shrink-0",
-                          isSelected ? "opacity-100" : "opacity-0"
-                        )}
-                      />
                       <Flag countryCode={country.code} rounded className="mr-2 h-4 w-6 shrink-0" />
                       <div className="flex flex-col flex-1 min-w-0">
                         <span className="truncate">{country.name}</span>
@@ -390,6 +395,13 @@ export function CountrySelect({
                           </span>
                         )}
                       </div>
+                    
+                      {/* Trailing and only when selected: an always-rendered
+                          `opacity-0` mark indents every row to hold space one
+                          row at most ever uses. Absent it, the label gets the
+                          full width; present, `shrink-0` stops the label's
+                          truncation exactly at the mark. */}
+                      {isSelected && <Check className="ml-2 h-4 w-4 shrink-0" />}
                     </CommandItem>
                   )
                 })}

package/src/components/select/language-select.tsx

@@ -16,6 +16,8 @@ import {
 import { Input } from '../forms/input';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 import { ScrollArea } from '../layout/scroll-area';
+import { SELECT_TRIGGER_CLASS } from './trigger';
+import { useHighlight } from './use-highlight';
 
 export interface LanguageOption {
   code: TLanguageCode;
@@ -146,6 +148,7 @@ export function LanguageSelect({
   moreItemsLabel = (count: number) => `+${count} more`,
 }: LanguageSelectProps) {
   const [open, setOpen] = React.useState(false)
+  const highlight = useHighlight(open, value[0])
   const [search, setSearch] = React.useState("")
 
   // Resolve defaults
@@ -377,7 +380,7 @@ export function LanguageSelect({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "w-full justify-between",
+            SELECT_TRIGGER_CLASS,
             // Single-select: a fixed-height pill (the Button size sets height).
             // Multiple: allow growth so wrapped badges aren't clipped — keep the
             // auto-height min behaviour, scaled to the chosen size.
@@ -401,7 +404,15 @@ export function LanguageSelect({
         className="w-auto min-w-[var(--radix-popover-trigger-width)] p-0 [--lang-min:11rem] [min-width:max(var(--radix-popover-trigger-width),var(--lang-min))]"
         align="start"
       >
-        <Command shouldFilter={false} className="flex flex-col">
+        {/* Controlled highlight. `onValueChange` is mandatory alongside it:
+            with a controlled `value` cmdk stores nothing itself and delegates
+            every move, so without it the arrow keys would not move the row. */}
+        <Command
+          shouldFilter={false}
+          value={highlight.value}
+          onValueChange={highlight.setValue}
+          className="flex flex-col"
+        >
           {showSearch && (
             <CommandInput
               placeholder={resolvedSearchPlaceholder}
@@ -410,7 +421,7 @@ export function LanguageSelect({
               onValueChange={setSearch}
             />
           )}
-          <CommandList className="max-h-[300px] overflow-y-auto">
+          <CommandList ref={highlight.listRef} className="max-h-[300px] overflow-y-auto">
             {filteredLanguages.length === 0 ? (
               <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
             ) : (
@@ -423,12 +434,6 @@ export function LanguageSelect({
                       value={language.code}
                       onSelect={() => handleSelect(language.code)}
                     >
-                      <Check
-                        className={cn(
-                          "mr-2 h-4 w-4 shrink-0",
-                          isSelected ? "opacity-100" : "opacity-0"
-                        )}
-                      />
                       {showFlag && (
                         <LanguageFlag code={language.code} className="mr-2 h-3.5 w-5" rounded />
                       )}
@@ -445,6 +450,13 @@ export function LanguageSelect({
                           {language.code}
                         </span>
                       )}
+                    
+                      {/* Trailing and only when selected: an always-rendered
+                          `opacity-0` mark indents every row to hold space one
+                          row at most ever uses. Absent it, the label gets the
+                          full width; present, `shrink-0` stops the label's
+                          truncation exactly at the mark. */}
+                      {isSelected && <Check className="ml-2 h-4 w-4 shrink-0" />}
                     </CommandItem>
                   )
                 })}

package/src/components/select/multi-select-pro-async.tsx

@@ -24,6 +24,7 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 import { Separator } from '../layout/separator';
 import { cn } from '../../lib';
+import { SELECT_TRIGGER_MULTI_CLASS } from './trigger';
 
 // ==================== TYPES ====================
 
@@ -105,11 +106,11 @@ export interface MultiSelectProAsyncProps {
 // ==================== VARIANTS ====================
 
 const multiSelectVariants = cva(
-  "w-full justify-between min-h-10 h-auto py-2",
+  SELECT_TRIGGER_MULTI_CLASS,
   {
     variants: {
       variant: {
-        default: "border-input bg-background hover:bg-accent/50",
+        default: "border-border bg-background hover:bg-accent/50",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         inverted: "bg-primary text-primary-foreground hover:bg-primary/90",

package/src/components/select/multi-select-pro.tsx

@@ -11,6 +11,7 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 import { Separator } from '../layout/separator';
 import { cn } from '../../lib';
+import { SELECT_TRIGGER_MULTI_CLASS } from './trigger';
 
 // ==================== TYPES ====================
 
@@ -57,11 +58,11 @@ export interface MultiSelectProRef {
 // ==================== VARIANTS ====================
 
 const multiSelectVariants = cva(
-  "w-full justify-between min-h-10 h-auto py-2",
+  SELECT_TRIGGER_MULTI_CLASS,
   {
     variants: {
       variant: {
-        default: "border-input bg-background hover:bg-accent/50",
+        default: "border-border bg-background hover:bg-accent/50",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         inverted: "bg-primary text-primary-foreground hover:bg-primary/90",

package/src/components/select/multi-select.tsx

@@ -12,6 +12,7 @@ import {
     Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
 } from '../navigation/command';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
+import { SELECT_TRIGGER_MULTI_CLASS } from './trigger';
 
 export interface MultiSelectOption {
   value: string
@@ -78,7 +79,6 @@ export function MultiSelect({
   const t = useAppT()
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
-  const scrollRef = React.useRef<HTMLDivElement>(null)
 
   const storageOptions: UseStoredValueOptions | undefined =
     storageKey ? { storage: storageType ?? 'local', ttl: storageTtl } : undefined;
@@ -137,19 +137,6 @@ export function MultiSelect({
     autoSelectApplied.current = false;
   }, [storageKey]);
 
-  React.useEffect(() => {
-    if (scrollRef.current && open) {
-      const el = scrollRef.current
-      el.style.cssText = `
-        max-height: 300px !important;
-        overflow-y: scroll !important;
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch !important;
-        overscroll-behavior: contain !important;
-      `
-    }
-  }, [open])
-
   const selectedOptions = React.useMemo(
     () => options.filter((option) => value.includes(option.value)),
     [options, value]
@@ -235,7 +222,7 @@ export function MultiSelect({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "w-full justify-between min-h-10 h-auto py-2",
+            SELECT_TRIGGER_MULTI_CLASS,
             className
           )}
           disabled={disabled}
@@ -254,23 +241,16 @@ export function MultiSelect({
             value={search}
             onValueChange={setSearch}
           />
-          <div
-            ref={scrollRef}
-            tabIndex={-1}
-            className="overflow-y-scroll overflow-x-hidden"
-            style={{
-              maxHeight: '300px',
-              minHeight: '100px',
-            }}
-            onWheel={(e) => {
-              e.stopPropagation()
-            }}
-          >
-            <CommandList className="!max-h-none !overflow-visible" style={{ pointerEvents: 'auto' }}>
+          {/* CommandList is the scroller (it caps itself to the popover's
+              available height) — never wrap it in a scrolling div, which hands
+              the scrolling to a container cmdk cannot see.
+              The min-height keeps the panel from collapsing to a sliver while a
+              narrow search still matches one row. */}
+          <CommandList className="min-h-[100px]">
               {filteredOptions.length === 0 ? (
                 <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
               ) : (
-                <CommandGroup className="!overflow-visible" style={{ pointerEvents: 'auto' }}>
+                <CommandGroup>
                   {filteredOptions.map((option) => {
                     const isSelected = value.includes(option.value)
                     return (
@@ -304,7 +284,6 @@ export function MultiSelect({
                 </CommandGroup>
               )}
             </CommandList>
-          </div>
         </Command>
       </PopoverContent>
     </Popover>

package/src/components/select/select.tsx

@@ -66,7 +66,7 @@ const SelectTrigger = React.forwardRef<
     className={cn(
       "flex items-center justify-between whitespace-nowrap text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
       variant === "default" &&
-        "h-10 w-full rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 shadow-sm focus:ring-1 focus:ring-ring",
+        "h-10 w-full rounded-[var(--radius)] border border-border bg-transparent px-3 py-2 shadow-sm focus:ring-1 focus:ring-ring",
       variant === "ghost" &&
         "rounded-md px-2 py-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground",
       className

package/src/components/select/trigger.ts

@@ -0,0 +1,23 @@
+/**
+ * The shared class list for a select-like trigger.
+ *
+ * Every picker in this folder renders its closed state as a `Button` — that is
+ * what gives it the focus ring, the border and the disabled handling for free.
+ * But a button is an ACTION, and `Button` styles it accordingly with
+ * `font-semibold`; a picker's closed state is a FIELD showing a value, and a
+ * value has no business being heavier than the label above it. Left alone the
+ * trigger rendered "Volkswagen" bolder than its own "Make" label, and the
+ * placeholder came out bold too.
+ *
+ * `font-normal` restores the weight `Input` uses — the control it actually
+ * belongs next to in a form. It sits here rather than in seven component files
+ * so the next picker inherits the decision instead of re-deciding it.
+ */
+export const SELECT_TRIGGER_CLASS = "w-full justify-between font-normal";
+
+/**
+ * The same, for pickers whose trigger grows with its content (chips, tags,
+ * multiple rows) instead of keeping a fixed control height.
+ */
+export const SELECT_TRIGGER_MULTI_CLASS =
+  "w-full justify-between font-normal min-h-10 h-auto py-2";

package/src/components/select/use-highlight.ts

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from 'react'
+
+/**
+ * The active-row state for a cmdk list inside a popover, and the scroll that
+ * has to accompany it.
+ *
+ * Two things are going on, and neither works alone:
+ *
+ * 1. **The highlight is controlled.** cmdk otherwise activates the FIRST row,
+ *    so a picker with a selection opens showing the top of the list rather than
+ *    the value it holds. `onValueChange` is mandatory with a controlled value —
+ *    cmdk then stores nothing itself and delegates every move to the caller, so
+ *    omitting it freezes the arrow keys.
+ *
+ * 2. **Opening has to scroll.** cmdk schedules its own `scrollIntoView` when
+ *    the value changes, but the popover keeps its list MOUNTED between opens
+ *    (`sameNodeAcrossOpens: true`), so on the second open nothing re-mounts and
+ *    nothing re-scrolls; on the first, the value is set before 252 rows have
+ *    finished registering and there is nothing to scroll to yet. Measured both
+ *    ways: selection at index 84, `scrollTop` 0. So the scroll is driven from
+ *    the OPEN transition, after a paint, rather than left to the library.
+ *
+ * Ongoing arrow-key movement stays cmdk's own job; this only handles the jump
+ * that opening owes the user.
+ *
+ * ```tsx
+ * const highlight = useHighlight(open, value)
+ * <Command value={highlight.value} onValueChange={highlight.setValue}>
+ *   <CommandList ref={highlight.listRef}>…</CommandList>
+ * </Command>
+ * ```
+ */
+export function useHighlight(open: boolean, selected: string | null | undefined) {
+  const [value, setValue] = React.useState("")
+  const listRef = React.useRef<HTMLDivElement | null>(null)
+
+  // `selected` is read through a ref so that changing the selection does not
+  // re-run the open effect — only the open transition itself should scroll.
+  const selectedRef = React.useRef(selected)
+  selectedRef.current = selected
+
+  React.useEffect(() => {
+    if (!open) return
+    setValue(selectedRef.current ?? "")
+  }, [open])
+
+  // Deliberately NOT `requestAnimationFrame`: a background tab never runs one,
+  // so a popover opened in an inactive window would stay parked at the top
+  // (this is how the bug first showed up — `document.hidden` and no scroll).
+  // A layout effect keyed on the resolved highlight runs as soon as React has
+  // committed the rows, in any tab, and before the browser paints.
+  React.useLayoutEffect(() => {
+    if (!open || !value) return
+    const list = listRef.current
+    if (!list) return
+
+    // The row is found by VALUE rather than by `aria-selected`, which cmdk sets
+    // in its own scheduled pass — by then this effect has already run.
+    const row = list.querySelector(
+      `[cmdk-item][data-value="${CSS.escape(value)}"]`
+    )
+    row?.scrollIntoView({ block: 'nearest' })
+  }, [open, value])
+
+  return { value, setValue, listRef }
+}

package/src/styles/css/utilities/filter-bar.css

@@ -0,0 +1,61 @@
+/**
+ * A row of filter controls, and the pills in it.
+ *
+ * The row owns the height. Every control in it — a pill, a select, a sort menu —
+ * reads `--filter-control-h`, which is what stops a caller restyling somebody
+ * else's component to make one row line up. Both product frontends were doing
+ * exactly that: one overrode `SelectTrigger`, the other `Button size="sm"`.
+ */
+.filter-bar {
+  /* Named so a host can set the row's density once, here, rather than per
+     control. 38px is the height both frontends independently arrived at. */
+  --filter-control-h: 2.375rem;
+
+  container-type: inline-size;
+  container-name: filter-bar;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Horizontal scroll instead of wrapping, for a row that must stay one line. */
+.filter-bar[data-overflow="scroll"] {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.filter-bar[data-overflow="scroll"]::-webkit-scrollbar {
+  display: none;
+}
+
+.filter-bar[data-overflow="scroll"] > * {
+  flex: none;
+}
+
+/**
+ * The label inside a pill, and the rule that hides it.
+ *
+ * It collapses when the ROW runs out of room, not when the window does: a
+ * toolbar in a narrow column on a wide monitor has the same problem as a phone,
+ * and a viewport media query answers neither. Hiding it is `display: none`
+ * rather than the `clip-path: inset(50%)` both projects used — that trick keeps
+ * the text in the accessibility tree while removing it from sight, which reads
+ * fine and measures wrong. The button carries an `aria-label` instead, so the
+ * name survives the collapse by design rather than by accident.
+ *
+ * A pill showing a CHOSEN value keeps its label: "SUV" is the answer, and an
+ * icon alone cannot say which question it answered.
+ */
+@container filter-bar (max-width: 32rem) {
+  .filter-pill:not([data-answered="true"]) .filter-pill-label {
+    display: none;
+  }
+
+  .filter-pill:not([data-answered="true"]) {
+    padding-inline: 0.625rem;
+  }
+}