@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.2

package/ui/IconButton.tsx

@@ -1,44 +1,44 @@
-import React from 'react';
-
-import Icon from './Icon';
-
-export interface IconButtonProps {
-  /** kebab-case lucide icon name. */
-  name: string;
-  filled?: boolean;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  /** accessible label (aria-label). */
-  label?: string;
-  color?: string;
-  /** when active, tints + fills the icon with the primary color. */
-  active?: boolean;
-  size?: number;
-  style?: React.CSSProperties;
-}
-
-const IconButton: React.FunctionComponent<IconButtonProps> = ({
-  name,
-  filled,
-  onClick,
-  label,
-  color,
-  active,
-  size = 20,
-  style,
-}) => (
-  <button
-    className={'icon-btn' + (filled ? ' icon-btn--filled' : '')}
-    onClick={onClick}
-    aria-label={label}
-    style={style}
-  >
-    <Icon
-      name={name}
-      size={size}
-      color={active ? 'var(--md-primary)' : color}
-      style={{ fill: active ? 'var(--md-primary)' : 'none' }}
-    />
-  </button>
-);
-
-export default IconButton;
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface IconButtonProps {
+  /** kebab-case lucide icon name. */
+  name: string;
+  filled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** accessible label (aria-label). */
+  label?: string;
+  color?: string;
+  /** when active, tints + fills the icon with the primary color. */
+  active?: boolean;
+  size?: number;
+  style?: React.CSSProperties;
+}
+
+const IconButton: React.FunctionComponent<IconButtonProps> = ({
+  name,
+  filled,
+  onClick,
+  label,
+  color,
+  active,
+  size = 20,
+  style,
+}) => (
+  <button
+    className={'icon-btn' + (filled ? ' icon-btn--filled' : '')}
+    onClick={onClick}
+    aria-label={label}
+    style={style}
+  >
+    <Icon
+      name={name}
+      size={size}
+      color={active ? 'var(--md-primary)' : color}
+      style={{ fill: active ? 'var(--md-primary)' : 'none' }}
+    />
+  </button>
+);
+
+export default IconButton;

package/ui/Modal.tsx

@@ -1,187 +1,187 @@
-// Autobahn (auto.de redesign) — md3 dialog (modal).
-//
-// A real MD3 dialog used by the new Autobahn pages in place of the legacy fe-ui-core
-// modals (which the page shows via appStore.showModal('SOME_ID', props) and a global
-// modal host renders into document.body — OUTSIDE the page's `.md3` subtree, so the
-// scoped md3 theme is lost there).
-//
-// To keep the md3 tokens, this component does NOT render inline: it ReactDOM.createPortal's
-// into a freshly-appended `<div className="md3">` on document.body, so `--md-*` tokens and
-// every `.md3 .xxx` rule resolve correctly even though the DOM node sits at body level.
-//
-// Behaviour parity with a typical dialog:
-//   - controlled via `open`; `onClose` fires on scrim click (when dismissOnScrim),
-//     the close IconButton, and Esc.
-//   - 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).
-//   - 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
-// portal root carries `className="md3"` so the surface renders correctly even at body level.
-
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import IconButton from './IconButton';
-
-export type ModalSize = 'sm' | 'md' | 'lg';
-
-export interface ModalProps {
-  /** whether the dialog is mounted/visible. */
-  open: boolean;
-  /** fired on scrim click (if dismissOnScrim), the close button, or Esc. */
-  onClose: () => void;
-  /** dialog heading; when set, wires aria-labelledby and renders the title row label. */
-  title?: React.ReactNode;
-  /** dialog body content (scrolls when taller than the viewport). */
-  children?: React.ReactNode;
-  /** optional actions row pinned to the bottom of the surface. */
-  footer?: React.ReactNode;
-  /** surface max-width preset (default 'md'). */
-  size?: ModalSize;
-  /** close when the scrim (backdrop) is clicked (default true). */
-  dismissOnScrim?: boolean;
-  /** extra class(es) appended on the surface (layout hooks). */
-  className?: string;
-}
-
-// focusable descendants used by the basic focus trap.
-const FOCUSABLE =
-  'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
-
-const Modal: React.FunctionComponent<ModalProps> = ({
-  open,
-  onClose,
-  title,
-  children,
-  footer,
-  size = 'md',
-  dismissOnScrim = true,
-  className,
-}) => {
-  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);
-  // 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),
-    [title, size],
-  );
-
-  // The portal root: a div.md3 appended to body so the scoped theme applies at body level.
-  // Created lazily and only in the browser (SSR-guarded), reused for the component's life.
-  const portalRoot = React.useMemo<HTMLDivElement | null>(() => {
-    if (typeof document === 'undefined') return null;
-    const el = document.createElement('div');
-    el.className = 'md3';
-    return el;
-  }, []);
-
-  // mount/unmount the portal root on body while open; restore body scroll + focus on close.
-  React.useEffect(() => {
-    if (!open || !portalRoot || typeof document === 'undefined') return undefined;
-
-    prevFocusRef.current = (document.activeElement as HTMLElement) || null;
-    document.body.appendChild(portalRoot);
-
-    // body scroll lock (preserve and restore the prior inline overflow).
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-
-    // move focus into the dialog (first focusable, else the surface itself).
-    const surface = surfaceRef.current;
-    if (surface) {
-      const first = surface.querySelector<HTMLElement>(FOCUSABLE);
-      (first || surface).focus();
-    }
-
-    return () => {
-      document.body.style.overflow = prevOverflow;
-      if (portalRoot.parentNode) portalRoot.parentNode.removeChild(portalRoot);
-      // restore focus to whatever was focused before opening.
-      if (prevFocusRef.current && prevFocusRef.current.focus) prevFocusRef.current.focus();
-    };
-  }, [open, portalRoot]);
-
-  // Esc to close + basic Tab focus trap, bound at the document level while open.
-  React.useEffect(() => {
-    if (!open || typeof document === 'undefined') return undefined;
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose();
-        return;
-      }
-      if (e.key !== 'Tab') return;
-      const surface = surfaceRef.current;
-      if (!surface) return;
-      const nodes = Array.prototype.slice.call(
-        surface.querySelectorAll<HTMLElement>(FOCUSABLE),
-      ) as HTMLElement[];
-      if (!nodes.length) {
-        // nothing focusable inside — keep focus on the surface.
-        e.preventDefault();
-        surface.focus();
-        return;
-      }
-      const first = nodes[0];
-      const last = nodes[nodes.length - 1];
-      const active = document.activeElement as HTMLElement | null;
-      // wrap at the edges; also pull focus back in if it has escaped the surface.
-      if (e.shiftKey) {
-        if (active === first || !surface.contains(active)) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else if (active === last || !surface.contains(active)) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    document.addEventListener('keydown', onKeyDown, true);
-    return () => document.removeEventListener('keydown', onKeyDown, true);
-  }, [open, onClose]);
-
-  if (!open || !portalRoot) return null;
-
-  const surfaceCls = ['mmodal', `mmodal--${size}`, className].filter(Boolean).join(' ');
-
-  return ReactDOM.createPortal(
-    <div
-      className="mmodal-scrim"
-      onMouseDown={(e) => {
-        // only a click that starts AND lands on the scrim itself dismisses (not a drag
-        // that ends on the backdrop after starting inside the surface).
-        if (dismissOnScrim && e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={surfaceRef}
-        className={surfaceCls}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? titleId : undefined}
-        tabIndex={-1}
-        onMouseDown={(e) => e.stopPropagation()}
-      >
-        {/* head row always renders so the close button is always present. */}
-        <div className="mmodal-head">
-          {title ? (
-            <h2 id={titleId} className="mmodal-title md-headline-sm">
-              {title}
-            </h2>
-          ) : (
-            <span className="mmodal-title" aria-hidden="true" />
-          )}
-          <IconButton name="x" label="Schließen" onClick={onClose} />
-        </div>
-        <div className="mmodal-body">{children}</div>
-        {footer ? <div className="mmodal-foot">{footer}</div> : null}
-      </div>
-    </div>,
-    portalRoot,
-  );
-};
-
-export default Modal;
+// Autobahn (auto.de redesign) — md3 dialog (modal).
+//
+// A real MD3 dialog used by the new Autobahn pages in place of the legacy fe-ui-core
+// modals (which the page shows via appStore.showModal('SOME_ID', props) and a global
+// modal host renders into document.body — OUTSIDE the page's `.md3` subtree, so the
+// scoped md3 theme is lost there).
+//
+// To keep the md3 tokens, this component does NOT render inline: it ReactDOM.createPortal's
+// into a freshly-appended `<div className="md3">` on document.body, so `--md-*` tokens and
+// every `.md3 .xxx` rule resolve correctly even though the DOM node sits at body level.
+//
+// Behaviour parity with a typical dialog:
+//   - controlled via `open`; `onClose` fires on scrim click (when dismissOnScrim),
+//     the close IconButton, and Esc.
+//   - 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).
+//   - 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
+// portal root carries `className="md3"` so the surface renders correctly even at body level.
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import IconButton from './IconButton';
+
+export type ModalSize = 'sm' | 'md' | 'lg';
+
+export interface ModalProps {
+  /** whether the dialog is mounted/visible. */
+  open: boolean;
+  /** fired on scrim click (if dismissOnScrim), the close button, or Esc. */
+  onClose: () => void;
+  /** dialog heading; when set, wires aria-labelledby and renders the title row label. */
+  title?: React.ReactNode;
+  /** dialog body content (scrolls when taller than the viewport). */
+  children?: React.ReactNode;
+  /** optional actions row pinned to the bottom of the surface. */
+  footer?: React.ReactNode;
+  /** surface max-width preset (default 'md'). */
+  size?: ModalSize;
+  /** close when the scrim (backdrop) is clicked (default true). */
+  dismissOnScrim?: boolean;
+  /** extra class(es) appended on the surface (layout hooks). */
+  className?: string;
+}
+
+// focusable descendants used by the basic focus trap.
+const FOCUSABLE =
+  'a[href],area[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
+const Modal: React.FunctionComponent<ModalProps> = ({
+  open,
+  onClose,
+  title,
+  children,
+  footer,
+  size = 'md',
+  dismissOnScrim = true,
+  className,
+}) => {
+  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);
+  // 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),
+    [title, size],
+  );
+
+  // The portal root: a div.md3 appended to body so the scoped theme applies at body level.
+  // Created lazily and only in the browser (SSR-guarded), reused for the component's life.
+  const portalRoot = React.useMemo<HTMLDivElement | null>(() => {
+    if (typeof document === 'undefined') return null;
+    const el = document.createElement('div');
+    el.className = 'md3';
+    return el;
+  }, []);
+
+  // mount/unmount the portal root on body while open; restore body scroll + focus on close.
+  React.useEffect(() => {
+    if (!open || !portalRoot || typeof document === 'undefined') return undefined;
+
+    prevFocusRef.current = (document.activeElement as HTMLElement) || null;
+    document.body.appendChild(portalRoot);
+
+    // body scroll lock (preserve and restore the prior inline overflow).
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    // move focus into the dialog (first focusable, else the surface itself).
+    const surface = surfaceRef.current;
+    if (surface) {
+      const first = surface.querySelector<HTMLElement>(FOCUSABLE);
+      (first || surface).focus();
+    }
+
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      if (portalRoot.parentNode) portalRoot.parentNode.removeChild(portalRoot);
+      // restore focus to whatever was focused before opening.
+      if (prevFocusRef.current && prevFocusRef.current.focus) prevFocusRef.current.focus();
+    };
+  }, [open, portalRoot]);
+
+  // Esc to close + basic Tab focus trap, bound at the document level while open.
+  React.useEffect(() => {
+    if (!open || typeof document === 'undefined') return undefined;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+      const surface = surfaceRef.current;
+      if (!surface) return;
+      const nodes = Array.prototype.slice.call(
+        surface.querySelectorAll<HTMLElement>(FOCUSABLE),
+      ) as HTMLElement[];
+      if (!nodes.length) {
+        // nothing focusable inside — keep focus on the surface.
+        e.preventDefault();
+        surface.focus();
+        return;
+      }
+      const first = nodes[0];
+      const last = nodes[nodes.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+      // wrap at the edges; also pull focus back in if it has escaped the surface.
+      if (e.shiftKey) {
+        if (active === first || !surface.contains(active)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (active === last || !surface.contains(active)) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [open, onClose]);
+
+  if (!open || !portalRoot) return null;
+
+  const surfaceCls = ['mmodal', `mmodal--${size}`, className].filter(Boolean).join(' ');
+
+  return ReactDOM.createPortal(
+    <div
+      className="mmodal-scrim"
+      onMouseDown={(e) => {
+        // only a click that starts AND lands on the scrim itself dismisses (not a drag
+        // that ends on the backdrop after starting inside the surface).
+        if (dismissOnScrim && e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={surfaceRef}
+        className={surfaceCls}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        tabIndex={-1}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        {/* head row always renders so the close button is always present. */}
+        <div className="mmodal-head">
+          {title ? (
+            <h2 id={titleId} className="mmodal-title md-headline-sm">
+              {title}
+            </h2>
+          ) : (
+            <span className="mmodal-title" aria-hidden="true" />
+          )}
+          <IconButton name="x" label="Schließen" onClick={onClose} />
+        </div>
+        <div className="mmodal-body">{children}</div>
+        {footer ? <div className="mmodal-foot">{footer}</div> : null}
+      </div>
+    </div>,
+    portalRoot,
+  );
+};
+
+export default Modal;