@bytebrand/fe-ui-core-autobahn 1.0.163 → 1.0.165

package/locales/de/autobahn.json

@@ -797,7 +797,8 @@
     "serviceHistory": "Scheckheft",
     "warranty": "Garantie",
     "yes": "Ja",
-    "no": "Nein"
+    "no": "Nein",
+    "notSpecified": "keine Angabe"
   },
   "common": {
     "needsData": "Daten folgt"

package/locales/en/autobahn.json

@@ -797,7 +797,8 @@
     "serviceHistory": "Full service history",
     "warranty": "Warranty",
     "yes": "Yes",
-    "no": "No"
+    "no": "No",
+    "notSpecified": "not specified"
   },
   "common": {
     "needsData": "Data coming soon"

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.163",
-  "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
-  "main": "index.ts",
-  "license": "UNLICENSED",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "dependencies": {
-    "@bytebrand/car-schema-selectors": "^2.0.7",
-    "@bytebrand/fe-financing": "^5.14.20",
-    "classnames": "2.2.6",
-    "clsx": "^2.1.1",
-    "d3-format": "1.4.5",
-    "js-cookie": "^2.2.0",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.288.0",
-    "mobx-react": "^7.6.0",
-    "moment": "^2.29.1",
-    "qs": "^6.6.0",
-    "react-device-detect": "^2.1.2",
-    "react-grid-system": "^5.0.2",
-    "react-lazyload": "^3.2.0",
-    "react-scroll": "^1.9.3",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "1.8.1"
-  }
-}
+{
+  "name": "@bytebrand/fe-ui-core-autobahn",
+  "version": "1.0.165",
+  "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
+  "main": "index.ts",
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@bytebrand/car-schema-selectors": "^2.0.7",
+    "@bytebrand/fe-financing": "^5.14.20",
+    "classnames": "2.2.6",
+    "clsx": "^2.1.1",
+    "d3-format": "1.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.288.0",
+    "mobx-react": "^7.6.0",
+    "moment": "^2.29.1",
+    "qs": "^6.6.0",
+    "react-device-detect": "^2.1.2",
+    "react-grid-system": "^5.0.2",
+    "react-lazyload": "^3.2.0",
+    "react-scroll": "^1.9.3",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "1.8.1"
+  }
+}

package/ui/Dropdown.tsx

@@ -22,6 +22,7 @@ import * as ReactDOM from 'react-dom';
 
 import Icon from './Icon';
 import { usePortalMenuPosition } from './usePortalMenuPosition';
+import { scrollFieldIntoView } from './scrollFieldIntoView';
 
 export interface DropdownOption {
   value: string;
@@ -189,15 +190,22 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
     if (allowCustomValue) setQuery(value || '');
   }, [disabled, selectedIndex, allowCustomValue, value]);
 
-  // when opened searchable, focus the search input instead of leaving focus on the trigger.
-  // scrollIntoView first: on mobile the keyboard is about to eat ~40% of the viewport, so the
-  // trigger (and the popover below it) needs to already be scrolled above the fold before focus
-  // fires, or the popover can end up hidden behind the keyboard with no way to see it open.
+  // Scroll the trigger (searchable or not) to the top of the page on open, THEN — searchable
+  // only — focus the search input instead of leaving focus on the trigger. Every Dropdown shares
+  // this, not just searchable ones: on mobile a trigger sitting mid-page can open a menu that
+  // runs off the bottom of the viewport with no way to see the rest of it, same underlying
+  // problem a searchable trigger has with the keyboard eating the space below it. A plain
+  // `scrollIntoView({block:'center'})` used to run here (searchable-only) — "center" only moves
+  // the trigger when it's already near a viewport edge, so on a trigger that's roughly mid-page
+  // already (the common case) it was a near no-op, leaving a few hundred px of dead space above
+  // the trigger that the keyboard (searchable) or the menu's own bottom edge (any dropdown) then
+  // ran into.
   React.useEffect(() => {
-    if (!open || !searchable) return;
-    if (rootRef.current && rootRef.current.scrollIntoView) {
-      rootRef.current.scrollIntoView({ block: 'center', behavior: 'smooth' });
-    }
+    if (!open) return;
+    if (rootRef.current) scrollFieldIntoView(rootRef.current);
+    // searchRef is only ever attached in the searchable+open (editing) render branch, so this
+    // naturally no-ops for a non-searchable dropdown — nothing else to focus there, the trigger
+    // <button> already has focus from the click/keypress that opened it.
     if (searchRef.current) {
       searchRef.current.focus();
       // pre-filled custom value (see openMenu) starts selected, so typing immediately

package/ui/index.ts

@@ -39,6 +39,8 @@ export type { FormFieldProps } from './FormField';
 export { default as Dropdown } from './Dropdown';
 export type { DropdownProps, DropdownOption } from './Dropdown';
 
+export { scrollFieldIntoView } from './scrollFieldIntoView';
+
 export { default as Spec } from './Spec';
 export type { SpecProps } from './Spec';
 

package/ui/scrollFieldIntoView.ts

@@ -0,0 +1,41 @@
+// Autobahn (auto.de redesign) — shared "scroll a just-opened/just-focused field to the top of the
+// page" behaviour, used by Dropdown.tsx and by fe-main's DualRange/RateSlider (FilterContent.tsx)
+// text fields on /search/detailed. On mobile, opening a dropdown's menu or focusing a text field
+// brings the on-screen keyboard up and/or needs room for a popover below the field — if the field
+// is sitting mid-page, there may not be enough space left below it once the keyboard/menu takes
+// its share. Scrolling the field to the very top of the page first maximizes what's available.
+//
+// Extracted out of Dropdown.tsx so it can be shared verbatim with fe-main's non-Dropdown form
+// fields (DualRange/RateSlider's text inputs) — same problem, same fix, one place to keep them
+// from drifting apart. See Dropdown.tsx's own call site for the original reasoning this was
+// pulled from.
+export function scrollFieldIntoView(field: HTMLElement): void {
+  if (typeof window === 'undefined') return;
+  // Mobile-only: the on-screen-keyboard/popover space problem this fixes doesn't exist on
+  // desktop, where there's no keyboard pushing the viewport around. Same breakpoint + matchMedia
+  // pattern as Modal.tsx/CardCarousel.tsx elsewhere in this lib.
+  if (window.matchMedia('(min-width: 601px)').matches) return;
+  // Anchor on whichever is higher up: the field itself, or a short field label/caption sitting
+  // directly above it (own previous sibling, or — the common "label above a row of controls"
+  // shape, e.g. "Marke & Modell" above the Make/Model row on /search/detailed — the wrapping
+  // row's previous sibling). Checked by height, not by class name, so this works for ANY
+  // caller's label without this needing to know that call site's specific markup.
+  const MAX_LABEL_HEIGHT = 30;
+  const asLabel = (el: Element | null): HTMLElement | null => {
+    if (!(el instanceof HTMLElement)) return null;
+    const h = el.getBoundingClientRect().height;
+    return h > 0 && h <= MAX_LABEL_HEIGHT ? el : null;
+  };
+  const anchor =
+    asLabel(field.previousElementSibling) ||
+    asLabel(field.parentElement && field.parentElement.previousElementSibling) ||
+    field;
+  // No sticky-header reservation here: every current caller (NewMainPage '/', FilterContent on
+  // '/search*') sits on a page where TopBar's own autoHideOnScroll is on (App.tsx: isHomePage ||
+  // isSearchPage) — the header slides itself out of the way the instant this scroll starts,
+  // independently of this call, so reserving space for it here would double-count.
+  const GAP = 8;
+  const rect = anchor.getBoundingClientRect();
+  const targetY = window.scrollY + rect.top - GAP;
+  window.scrollTo({ top: Math.max(0, targetY), behavior: 'smooth' });
+}

package/ui/usePortalMenuPosition.ts

@@ -79,6 +79,20 @@ const ESTIMATED_MENU_HEIGHT = 300;
 // a scroll within this window of opening REPOSITIONS instead of closing — see the effect below.
 const SELF_SCROLL_GRACE_MS = 500;
 
+// Module-level (not hook-local) so Dropdown.tsx's own searchable-open scroll effect can reuse the
+// exact same measurement — the sticky app header (.topbar, position:sticky/top:0) sits over the
+// top of the viewport on every page that uses it (TopBar's autoHideOnScroll is opt-in, off by
+// default — most pages keep it permanently docked), so anything that scrolls/positions content
+// near the top of the viewport needs to stop at its live bottom edge, not y=0. Reading the
+// header's live bottom edge (0 when absent, e.g. inside a modal, or when autoHideOnScroll has slid
+// it away) gives a correct boundary without hardcoding a pixel height that could drift from the
+// header's own CSS.
+export const getSafeTop = (): number => {
+  if (typeof document === 'undefined') return 0;
+  const header = document.querySelector('.topbar');
+  return header ? Math.max(0, header.getBoundingClientRect().bottom) : 0;
+};
+
 export function usePortalMenuPosition<TMenuEl extends HTMLElement = HTMLDivElement>({
   enabled,
   open,
@@ -121,18 +135,6 @@ export function usePortalMenuPosition<TMenuEl extends HTMLElement = HTMLDivEleme
     };
   }, [enabled, open, portalRoot]);
 
-  // the portal menu's z-index (1400, .mselect-menu--portal) is intentionally higher than every
-  // other fixed overlay it must paint over (checkout sheets/modals) — which also means it would
-  // paint over the sticky app header (.topbar, position:sticky/top:0/z-index:50) if left
-  // unconstrained. Reading the header's live bottom edge (0 when absent, e.g. inside a modal, or
-  // when TopBar's autoHideOnScroll has slid it away) gives a correct top boundary without
-  // hardcoding a pixel height that could drift from the header's own CSS.
-  const getSafeTop = (): number => {
-    if (typeof document === 'undefined') return 0;
-    const header = document.querySelector('.topbar');
-    return header ? Math.max(0, header.getBoundingClientRect().bottom) : 0;
-  };
-
   const [menuPos, setMenuPos] = React.useState<PortalMenuPos | null>(null);
 
   const positionMenu = React.useCallback(() => {

package/utils/index.ts

@@ -83,3 +83,5 @@ export type { IValues, IFilters, IQuery } from './query';
 // Decorated car props (renders React UI; lives in vehiclesProps/ with its
 // IconContainer + Co2Widget dependencies under compat/).
 export { default as getDecoratedProps } from '../vehiclesProps/decoratedProps';
+export { setStrictConditionOwners, isStrictConditionOwner, strictAccidentStatus } from '../vehiclesProps/accidentDisclosure';
+export type { AccidentStatus } from '../vehiclesProps/accidentDisclosure';

package/vdp/VdpModules.tsx

@@ -92,7 +92,7 @@ export const VdpHeaderSummary: React.FunctionComponent<VdpHeaderCardProps> = ({
     ['zap', extractPS(vehicle.power)],
     ['fuel', stripParen(vehicle.fuel)],
     ['cog', vehicle.gear],
-    ['user', t('autobahn:header.owners', { owners: vehicle.owners, count: vehicle.owners })],
+    ...(vehicle.owners == null ? [] : ([['user', t('autobahn:header.owners', { owners: vehicle.owners, count: vehicle.owners })]] as const)),
   ];
   return (
     <>
@@ -142,7 +142,7 @@ export const VdpFactsGrid: React.FunctionComponent<VdpHeaderCardProps> = ({ vehi
     ['calendar', vehicle.reg],
     ['cog', vehicle.gear],
     ['fuel', stripParen(vehicle.fuel)],
-    ['user', t('autobahn:header.owners', { owners: vehicle.owners, count: vehicle.owners })],
+    ...(vehicle.owners == null ? [] : ([['user', t('autobahn:header.owners', { owners: vehicle.owners, count: vehicle.owners })]] as const)),
     ...(vehicle.body ? ([['car-front', vehicle.body]] as const) : []),
   ];
   return (
@@ -216,7 +216,7 @@ export const VdpHeaderCondition: React.FunctionComponent<VdpHeaderCardProps> = (
   // only the Garantie tile has one, linking out to auto.de's warranty policy page.
   const tiles: ReadonlyArray<readonly [string, string, string, string?]> = [
     ['wrench', t('autobahn:header.huLabel'), condition.hu === 'Neu' ? t('autobahn:header.huNew') : t('autobahn:header.huUntil', { date: condition.hu })],
-    ['shield-check', t('autobahn:header.accidentFree'), condition.unfallfrei ? t('autobahn:header.yes') : t('autobahn:header.no')],
+    ['shield-check', t('autobahn:header.accidentFree'), condition.unfallfrei == null ? t('autobahn:header.notSpecified') : condition.unfallfrei ? t('autobahn:header.yes') : t('autobahn:header.no')],
     ['clipboard-check', t('autobahn:header.serviceHistory'), condition.scheckheft ? t('autobahn:header.yes') : t('autobahn:header.no')],
     ['award', t('autobahn:header.warranty'), condition.garantie, 'https://www.auto.de/garantie/'],
   ];

package/vdp/types.ts

@@ -111,8 +111,8 @@ export interface Co2CostsSummary {
 export interface VehicleCondition {
   /** TÜV/HU validity, e.g. '03/2027' — or 'Neu' for a new HU. */
   hu: string;
-  /** accident-free flag (Unfallfrei). */
-  unfallfrei: boolean;
+  /** accident-free flag (Unfallfrei); null = not specified by the source ("keine Angabe"). */
+  unfallfrei: boolean | null;
   /** full service history (Scheckheftgepflegt). */
   scheckheft: boolean;
   /** warranty label, e.g. '12 Monate inkl.'. */
@@ -191,8 +191,8 @@ export interface VehicleDetail {
   fuel: string;
   /** gearbox label, e.g. 'Automatik' / 'Schaltgetriebe'. */
   gear: string;
-  /** number of previous owners (rendered as 'N. Hand'). */
-  owners: number;
+  /** number of previous owners (rendered as 'N. Hand'); null = not known, the fact is not shown. */
+  owners: number | null;
   /** number of seats. */
   seats: number;
   /** number of doors. */
@@ -302,7 +302,7 @@ export function defaultVdpSpecs(v: VehicleDetail): VdpSpec[] {
     [['cog', 'Getriebe', v.gear], true],
     [['users', 'Sitze', `${v.seats} Sitze`], false],
     [['door-open', 'Türen', `${v.doors} Türen`], false],
-    [['user', 'Halter', `${v.owners}. Hand`], true], // 0 Vorbesitzer is valid
+    ...(v.owners == null ? [] : [[['user', 'Halter', `${v.owners}. Hand`], true] as const]), // 0 Vorbesitzer is valid
     [['palette', 'Außenfarbe', v.color], true],
     [['car-front', 'Karosserie', v.body], true],
     [['droplet', 'Verbrauch komb.', v.cons], true], // Pkw-EnVKV — exempt from this rule

package/vehiclesProps/accidentDisclosure.ts

@@ -0,0 +1,25 @@
+// FINN handover v0.6 (Daniel, 15.10.2026): for the owners set here, accident and owner facts follow
+// only what the source states — mainData.accidentDamaged false → accident-free, true → accident,
+// empty → not specified; an empty owner count is not shown as "0. Hand". Every other dealer keeps
+// the old display (accident-free unless `damaged`). The app sets the owners once at start.
+let strictOwners: ReadonlyArray<string> = [];
+
+export function setStrictConditionOwners(ownerIds: ReadonlyArray<string>): void {
+  strictOwners = (ownerIds || []).filter(Boolean);
+}
+
+export function isStrictConditionOwner(car: any): boolean {
+  const ownerId = car?.metaData?.ownerId;
+  return !!ownerId && strictOwners.includes(ownerId);
+}
+
+export type AccidentStatus = 'accidentFree' | 'accident' | 'notSpecified';
+
+// The strict status, or undefined when the car's owner keeps the old display.
+export function strictAccidentStatus(car: any): AccidentStatus | undefined {
+  if (!isStrictConditionOwner(car)) return undefined;
+  const value = car?.mainData?.accidentDamaged;
+  if (value === true) return 'accident';
+  if (value === false) return 'accidentFree';
+  return 'notSpecified';
+}

package/vehiclesProps/decoratedLightProps.tsx

@@ -6,6 +6,7 @@ import { formatTimestamp } from '../utils/DateUtils';
 import { DELIVERY_PERIODS_EXTRA } from '../constants/core';
 import moment from 'moment';
 import { IDecoratedProp } from '../types/types';
+import { strictAccidentStatus } from './accidentDisclosure';
 
 interface IDecoratedProps {
   [key: string]: IDecoratedProp;
@@ -519,6 +520,9 @@ const getDecoratedLightProps = (
       title: t('cbd:mainData_accidentDamaged'),
       icon: 'wrench',
       get value() {
+        const strict = strictAccidentStatus(car);
+        if (strict === 'notSpecified') return t('vehicleProps:value.na');
+        if (strict) return strict === 'accident' ? t('vehicleProps:value.damaged') : t('vehicleProps:value.accidentFree');
         return damaged ? t('vehicleProps:value.damaged') : t('vehicleProps:value.accidentFree');
       }
     },

package/vehiclesProps/decoratedProps.tsx

@@ -9,6 +9,7 @@ import { EMISSION_STICKERS_ICONS, WP_EMISSION_STICKERS_ICONS } from '../constant
 import { DELIVERY_PERIODS_EXTRA } from '../constants';
 import { IDecoratedProp, ICar, IFinancingUtils } from '../types/types';
 import { getFormattedPrice } from '../utils/CommonUtils';
+import { strictAccidentStatus } from './accidentDisclosure';
 
 const formatDeliveryPeriod = (t: (key: string, options?: object) => string, deliveryPeriod: string) => {
   const count: number = +DELIVERY_PERIODS_EXTRA.find((period: any) => period.value === deliveryPeriod).label;
@@ -195,6 +196,9 @@ const getDecoratedProps = (
       title: t('cbd:mainData_accidentDamaged'),
       icon: 'wrench',
       get value() {
+        const strict = strictAccidentStatus(car);
+        if (strict === 'notSpecified') return t('vehicleProps:value.na');
+        if (strict) return strict === 'accident' ? t('vehicleProps:value.damaged') : t('vehicleProps:value.accidentFree');
         return damaged ? t('vehicleProps:value.damaged') : t('vehicleProps:value.accidentFree');
       }
     },