@bytebrand/fe-ui-core-autobahn 1.0.151 → 1.0.152

package/ui/Dropdown.tsx

@@ -59,8 +59,16 @@ export interface DropdownProps {
   ariaDescribedBy?: string;
   /** extra class on the wrapper (e.g. 'srp-sort' for width rules). */
   className?: string;
+  /** extra class on the popover menu itself (`.mselect-menu`) — separate from `className` since
+   *  with `menuPortal` the menu renders at document.body, outside the trigger wrapper's subtree,
+   *  so a caller that needs to style its OWN options (`.mselect-opt`) needs this to scope there. */
+  menuClassName?: string;
   /** align the popover to the right edge of the trigger (default left). */
   menuAlign?: 'left' | 'right';
+  /** with `menuPortal`: 'auto' (default) flips the popover above the trigger when there's no
+   *  room below; 'down' always opens below, never flips — for a trigger where an upward flip
+   *  would overlap unrelated content above it. */
+  menuOpenDirection?: 'auto' | 'down';
   /** show a text input at the top of the popover that filters `options` by label (substring, case-insensitive). */
   searchable?: boolean;
   /** placeholder for the search input (only used when `searchable`). */
@@ -97,7 +105,9 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
   ariaInvalid,
   ariaDescribedBy,
   className,
+  menuClassName,
   menuAlign = 'left',
+  menuOpenDirection = 'auto',
   searchable = false,
   searchPlaceholder,
   numeric = false,
@@ -221,6 +231,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
     open,
     rootRef,
     menuAlign,
+    openDirection: menuOpenDirection,
     onCloseAway,
   });
 
@@ -400,7 +411,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
         ? ReactDOM.createPortal(
             <div
               ref={menuElRef}
-              className={'mselect-menu mselect-menu--portal' + (searchable ? ' mselect-menu--searchable' : '')}
+              className={'mselect-menu mselect-menu--portal' + (searchable ? ' mselect-menu--searchable' : '') + (menuClassName ? ` ${menuClassName}` : '')}
               // menuPos is null for one frame on open, before the position effect has measured
               // the trigger — stay invisible (not just visually, via `visibility`) rather than
               // flash at (0,0)/full-width. `position: fixed` is set UNCONDITIONALLY, in both
@@ -453,7 +464,7 @@ const Dropdown: React.FunctionComponent<DropdownProps> = ({
         : (
           <div
             ref={menuElRef}
-            className={'mselect-menu' + (menuAlign === 'right' ? ' mselect-menu--right' : '') + (searchable ? ' mselect-menu--searchable' : '')}
+            className={'mselect-menu' + (menuAlign === 'right' ? ' mselect-menu--right' : '') + (searchable ? ' mselect-menu--searchable' : '') + (menuClassName ? ` ${menuClassName}` : '')}
           >
             {renderMenuList()}
           </div>

package/ui/FormCheckbox.tsx

@@ -42,6 +42,13 @@ const FormCheckbox: React.FunctionComponent<FormCheckboxProps> = observer(
   ({ field, t, label, children, disabled, id }) => {
     const isChecked = !!field.checked;
     const isDisabled = disabled != null ? disabled : !!field.disabled;
+    // field.hasError alone is a LIVE check (mobx-react-form's Field#hasError getter re-evaluates
+    // the rule against the current value on every read) — true for an unchecked required field
+    // from initial render, before the user ever interacts. field.error is what's actually gated
+    // behind the field's showError flag (Field#error getter), which only flips true once
+    // showErrors()/an explicit validate({showErrors:true}) runs — the real "has this been
+    // submitted/touched" signal. Keep requiring both, or every required checkbox on the site
+    // renders red on page load.
     const hasError = !!field.hasError && !!field.error;
 
     // children (rich) > explicit label > translated field.label (legacy CheckboxMaterial behaviour).

package/ui/FormField.tsx

@@ -12,6 +12,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 
 import Icon from './Icon';
+import MfieldCheckIcon from './MfieldCheckIcon';
 
 export interface FormFieldProps {
   /** mobx-react-form field (LoginForm.$('email') etc.). Typed any — the lib ships no TS types. */
@@ -82,7 +83,7 @@ const FormField: React.FunctionComponent<FormFieldProps> = observer(
               <Icon name={reveal ? 'eye-off' : 'eye'} size={18} />
             </button>
           ) : null}
-          {isValid ? <span className="mfield-ok"><Icon name="check" size={18} /></span> : null}
+          {isValid ? <span className="mfield-ok"><MfieldCheckIcon /></span> : null}
         </div>
         {hasError ? <span className="mfield-error-text">{field.error}</span> : null}
       </div>

package/ui/Icon.tsx

@@ -51,6 +51,7 @@ import {
   DoorOpen,
   Droplet,
   Euro,
+  ExternalLink,
   Eye,
   EyeOff,
   Facebook,
@@ -249,6 +250,7 @@ const REGISTRY: Record<string, React.ComponentType<LucideProps>> = {
   DoorOpen,
   Droplet,
   Euro,
+  ExternalLink,
   Eye,
   EyeOff,
   Facebook,

package/ui/MfieldCheckIcon.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+// Figma-exact valid-field checkmark (.mfield-ok, FormField/MdField's showValid) — a distinct
+// path/stroke from the generic lucide Check that Icon name="check" renders elsewhere, so it's
+// its own tiny component rather than a REGISTRY entry in Icon.tsx (which would change every
+// other "check" usage in the app too).
+const MfieldCheckIcon: React.FunctionComponent = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.3334 4L6.00002 11.3333L2.66669 8" stroke="#168A45" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export default MfieldCheckIcon;

package/ui/Modal.tsx

@@ -15,6 +15,8 @@
 //   - scrim ~50% black; body scroll-locked while open; basic focus trap (Tab/Shift+Tab
 //     cycle within the surface, focus moves into the dialog on open and is restored to the
 //     previously-focused element on close).
+//   - mobile bottom sheet (≤560px): swipe down on the head row to dismiss (mirrors fe-main's
+//     BaseModal.tsx sheet), when dismissOnScrim is true.
 //   - a11y: role=dialog, aria-modal, aria-labelledby wired to the title when present.
 //
 // Pure/presentational — no store/API access beyond document/body (all SSR-guarded). The
@@ -44,6 +46,11 @@ export interface ModalProps {
   dismissOnScrim?: boolean;
   /** extra class(es) appended on the surface (layout hooks). */
   className?: string;
+  /** custom close-button content, replacing the default IconButton(name="x"). When set, it
+   *  renders as a plain button.mmodal-close instead (own CSS handles sizing/position — see
+   *  md3.css), so callers with a specific close-icon spec (exact asset, absolute position
+   *  independent of title height) aren't stuck fighting the default's flex layout. */
+  closeIcon?: React.ReactNode;
 }
 
 // focusable descendants used by the basic focus trap.
@@ -59,10 +66,47 @@ const Modal: React.FunctionComponent<ModalProps> = ({
   size = 'md',
   dismissOnScrim = true,
   className,
+  closeIcon,
 }) => {
   const surfaceRef = React.useRef<HTMLDivElement | null>(null);
   // the element focused before the dialog opened, so focus can be restored on close.
   const prevFocusRef = React.useRef<HTMLElement | null>(null);
+  // swipe-down-to-dismiss on the mobile bottom sheet (≤560px, matching the .mmodal-scrim/
+  // .mmodal breakpoint in md3.css) — same imperative-transform pattern as fe-main's
+  // BaseModal.tsx (checkout's own bottom sheet): follows the finger directly via
+  // style.transform while dragging (no re-renders), released past 90px slides out and closes,
+  // otherwise springs back. No-ops above the breakpoint and when dismissOnScrim is false (a
+  // modal that can't be scrim-dismissed shouldn't be swipe-dismissable either).
+  const dragStartY = React.useRef<number | null>(null);
+
+  const onGrabStart = (event: React.TouchEvent) => {
+    if (!dismissOnScrim) return;
+    if (typeof window !== 'undefined' && window.matchMedia('(min-width: 561px)').matches) return;
+    dragStartY.current = event.touches[0].clientY;
+    if (surfaceRef.current) surfaceRef.current.style.transition = 'none';
+  };
+
+  const onGrabMove = (event: React.TouchEvent) => {
+    if (dragStartY.current == null || !surfaceRef.current) return;
+    const dy = event.touches[0].clientY - dragStartY.current;
+    // only follow downward drags — the sheet is already flush with the bottom of the
+    // viewport, so upward has nowhere to go.
+    surfaceRef.current.style.transform = dy > 0 ? `translateY(${dy}px)` : '';
+  };
+
+  const onGrabEnd = (event: React.TouchEvent) => {
+    if (dragStartY.current == null || !surfaceRef.current) return;
+    const dy = event.changedTouches[0].clientY - dragStartY.current;
+    dragStartY.current = null;
+    const el = surfaceRef.current;
+    el.style.transition = 'transform 0.2s ease-out';
+    if (dy > 90) {
+      el.style.transform = 'translateY(100%)';
+      window.setTimeout(onClose, 200);
+    } else {
+      el.style.transform = '';
+    }
+  };
   // stable id for aria-labelledby (avoids Math.random/Date.now, unavailable in this env).
   const titleId = React.useMemo(
     () => (title ? `mmodal-title-${Math.round((surfaceRef.current ? 1 : 0))}-${size}` : undefined),
@@ -90,10 +134,20 @@ const Modal: React.FunctionComponent<ModalProps> = ({
     document.body.style.overflow = 'hidden';
 
     // move focus into the dialog (first focusable, else the surface itself).
+    // { preventScroll: true }: this runs at the very first animation frame of the mobile
+    // sheet's own mmodal-sheet-up entrance (md3.css) — at that instant the surface's actual
+    // computed transform is still the keyframe's `from` state (translateY(100%), pushed
+    // off-screen below the viewport), not its settled position yet. A plain .focus() on an
+    // element the browser currently considers off-screen makes it auto-scroll the nearest
+    // scrollable ancestor (.mmodal-scrim, itself overflow-y:auto) to bring it into view —
+    // fighting the CSS slide-in transform animating at the same time, which is exactly what
+    // produces a double-motion "jumps up, then settles back down" glitch on open. preventScroll
+    // skips that native auto-scroll entirely, so the CSS animation alone moves the sheet
+    // (same fix as fe-main's BaseModal.tsx, which hit this same glitch first).
     const surface = surfaceRef.current;
     if (surface) {
       const first = surface.querySelector<HTMLElement>(FOCUSABLE);
-      (first || surface).focus();
+      (first || surface).focus({ preventScroll: true });
     }
 
     return () => {
@@ -165,8 +219,17 @@ const Modal: React.FunctionComponent<ModalProps> = ({
         tabIndex={-1}
         onMouseDown={(e) => e.stopPropagation()}
       >
-        {/* head row always renders so the close button is always present. */}
-        <div className="mmodal-head">
+        {/* head row always renders so the close button is always present. onTouch*: swipe-
+            down-to-dismiss grab zone (see onGrabStart/Move/End above) — a tap (near-zero dy)
+            never crosses the 90px threshold and nothing here calls preventDefault, so the
+            close button's own onClick still fires normally after touchend. */}
+        <div
+          className="mmodal-head"
+          onTouchStart={onGrabStart}
+          onTouchMove={onGrabMove}
+          onTouchEnd={onGrabEnd}
+          style={{ touchAction: 'none' }}
+        >
           {title ? (
             <h2 id={titleId} className="mmodal-title md-headline-sm">
               {title}
@@ -174,7 +237,13 @@ const Modal: React.FunctionComponent<ModalProps> = ({
           ) : (
             <span className="mmodal-title" aria-hidden="true" />
           )}
-          <IconButton name="x" label="Schließen" onClick={onClose} />
+          {closeIcon ? (
+            <button type="button" className="mmodal-close" aria-label="Schließen" onClick={onClose}>
+              {closeIcon}
+            </button>
+          ) : (
+            <IconButton name="x" label="Schließen" onClick={onClose} />
+          )}
         </div>
         <div className="mmodal-body">{children}</div>
         {footer ? <div className="mmodal-foot">{footer}</div> : null}

package/ui/usePortalMenuPosition.ts

@@ -45,6 +45,11 @@ export interface UsePortalMenuPositionArgs {
   /** the trigger's wrapping element — always rendered (regardless of `open`), measured for position. */
   rootRef: React.RefObject<HTMLElement>;
   menuAlign?: 'left' | 'right';
+  /** 'auto' (default): flips ABOVE the trigger when there isn't room below (see ESTIMATED_MENU_HEIGHT
+   *  below). 'down': always opens below, never flips — for a trigger where the caller knows the
+   *  page has room below and an upward flip would overlap unrelated content above it (e.g. a
+   *  trigger sitting right under a sticky/close heading). */
+  openDirection?: 'auto' | 'down';
   /** called when the trigger scrolls out of view entirely, or a real user scroll happens after
    *  the post-open grace window — the menu has nothing sensible left to anchor to or chase. */
   onCloseAway: () => void;
@@ -79,6 +84,7 @@ export function usePortalMenuPosition<TMenuEl extends HTMLElement = HTMLDivEleme
   open,
   rootRef,
   menuAlign = 'left',
+  openDirection = 'auto',
   onCloseAway,
 }: UsePortalMenuPositionArgs): UsePortalMenuPositionResult<TMenuEl> {
   const menuElRef = React.useRef<TMenuEl | null>(null);
@@ -144,7 +150,7 @@ export function usePortalMenuPosition<TMenuEl extends HTMLElement = HTMLDivEleme
     }
     const spaceBelow = window.innerHeight - rect.bottom - GAP;
     const spaceAbove = rect.top - safeTop - GAP;
-    const openAbove = spaceBelow < ESTIMATED_MENU_HEIGHT && spaceAbove > spaceBelow;
+    const openAbove = openDirection === 'down' ? false : (spaceBelow < ESTIMATED_MENU_HEIGHT && spaceAbove > spaceBelow);
     // cap the menu to the space it ACTUALLY has in whichever direction it opens, instead of
     // trusting a static CSS max-height on its own — near the header or viewport edge that static
     // cap can still be taller than what's really available, which is what let the menu paint over
@@ -159,7 +165,7 @@ export function usePortalMenuPosition<TMenuEl extends HTMLElement = HTMLDivEleme
       bottom: openAbove ? window.innerHeight - rect.top + GAP : 'auto',
       maxHeight: available,
     });
-  }, [enabled, menuAlign, onCloseAway, rootRef]);
+  }, [enabled, menuAlign, openDirection, onCloseAway, rootRef]);
 
   // Synchronous (pre-paint) position computation. useLayoutEffect — not useEffect — matters here:
   // it runs right after the DOM mutation that mounted the portal but BEFORE the browser paints, so

package/vdp/FinanceCalculator.tsx

@@ -13,7 +13,7 @@
 //
 // Renders correctly only inside a `<div className="md3">` subtree.
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { TranslationFunction } from '../types';
 
 import { Button, Icon, Switch } from '../ui';
@@ -52,8 +52,18 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   bubble,
   bubblePaddingBottom = 34,
 }) => {
+  // Local mirror of `value`, updated INSTANTLY on every native input event. Callers commonly
+  // debounce their own onChange (e.g. CheckoutFinancePanelNext's 50ms setCommonUserConfig,
+  // which also triggers a MobX-driven re-render of a much bigger subtree) — without this, the
+  // thumb still drags natively/smoothly (the browser owns that), but the gradient fill and any
+  // bubble label are driven by the `value` PROP, which only catches up once the debounced commit
+  // finally lands, so the fill visibly lags/stutters behind the thumb during a fast drag. Synced
+  // back to the prop via useEffect for externally-driven changes (e.g. a reset button).
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => { setLocalValue(value); }, [value]);
+
   const span = max - min;
-  const pct = span > 0 ? ((value - min) / span) * 100 : 0;
+  const pct = span > 0 ? ((localValue - min) / span) * 100 : 0;
   return (
     <div>
       <div style={{ position: 'relative', paddingTop: bubble ? 44 : 0, paddingBottom: bubble ? bubblePaddingBottom : 0 }}>
@@ -61,7 +71,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
           // thumb is 22px wide: interpolate the bubble anchor between half-thumb insets so it
           // tracks the thumb center (a plain pct% drifts at the rail ends)
           <span className="slider-bubble num" style={{ left: `calc(11px + (100% - 22px) * ${pct / 100})` }}>
-            {fmt(value)}
+            {fmt(localValue)}
           </span>
         )}
         <input
@@ -70,8 +80,12 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
           min={min}
           max={max}
           step={step}
-          value={value}
-          onChange={(e) => onChange(Number(e.target.value))}
+          value={localValue}
+          onChange={(e) => {
+            const v = Number(e.target.value);
+            setLocalValue(v);
+            onChange(v);
+          }}
           style={{ background: `linear-gradient(90deg, var(--md-primary) ${pct}%, var(--md-sc-highest) ${pct}%)` }}
         />
       </div>