@dbcdk/react-components 0.0.12 → 0.0.14

package/dist/components/page-layout/PageLayout.module.css

@@ -1,66 +1,186 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  max-width: 100vw;
+/* Root shell */
+.root {
+  width: 100%;
+  max-width: 100%;
+  display: grid;
+  gap: 0;
+}
+
+/* Viewport handling:
+   - containScrolling => app-shell: lock to viewport and manage scroll in regions
+   - documentScrolling => let page scroll normally
+*/
+.containScrolling {
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.documentScrolling {
+  min-height: 100%;
+  overflow: visible;
 }
 
+/* Orientation layouts */
 .vertical {
-  flex-direction: row;
-  align-items: flex-start;
+  grid-template-columns: auto minmax(0, 1fr);
 }
 
-.container.containScrolling {
-  height: 100vh;
+.horizontal {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* Sidebar */
+.sidebar {
+  min-width: 0;
+  overflow: hidden;
+  border-right: var(--border-width-thin) solid var(--color-border-subtle);
+  background: var(--color-bg-surface);
+}
+
+.containScrolling .sidebar {
   overflow: auto;
-  position: relative;
+  -webkit-overflow-scrolling: touch;
 }
 
-@media screen and (max-height: 400px) {
-  .container {
-    height: unset;
-  }
+/* In horizontal orientation, sidebar becomes a top block if used */
+.horizontal .sidebar {
+  grid-column: 1 / -1;
+  border-right: none;
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
 }
 
-.headerContainer {
+/* Main column:
+   Use flex so the "rest of space" logic works reliably.
+*/
+.mainColumn {
+  min-width: 0;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  background: var(--color-bg-surface);
+}
+
+/* In containScrolling mode, mainColumn must fill the viewport height
+   so the flex "remaining space" can be computed.
+*/
+.containScrolling .mainColumn {
+  height: 100%;
+  min-height: 0; /* important: allows children to shrink */
 }
 
-.container:not(.containScrolling) .headerContainer {
+/* Regions */
+.header {
+  min-width: 0;
+  background: var(--color-bg-surface);
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
+  flex: 0 0 auto;
+}
+
+/* Sticky header only when the document is scrolling (body scroll) */
+.documentScrolling .header {
   position: sticky;
-  z-index: 1000;
   top: 0;
+  z-index: var(--z-sticky);
 }
 
-.headerContent {
+.hero {
+  min-width: 0;
+  background: var(--color-bg-surface);
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
+  flex: 0 0 auto;
+}
+
+/* Scroll wrapper: contains content + footer */
+.mainScroll {
+  min-width: 0;
+  min-height: 0; /* CRITICAL for nested flex/scroll */
+  display: flex;
+  flex-direction: column;
+
+  /* This is the "take all remaining space" bit */
+  flex: 1 1 auto;
+
+  /* default: documentScrolling uses normal page flow */
+  overflow: visible;
+}
+
+/* Contained scrolling: mainScroll scrolls (includes footer) */
+.containScrolling .mainScroll {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Content area (not a scroll container anymore) */
+.content {
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto; /* take remaining space inside mainScroll */
+  display: flex; /* lets contentInner stretch */
+  flex-direction: column;
+
+  background: var(--color-bg-surface);
+  padding: var(--spacing-md);
+  overflow: visible;
+}
+
+.footer {
+  min-width: 0;
+  background: var(--color-bg-surface);
+  border-top: var(--border-width-thin) solid var(--color-border-subtle);
+
+  /* When there is extra space (content is short), this pushes footer to the bottom.
+     When content is long, footer follows content normally and is reached by scrolling.
+  */
+  margin-top: auto;
   flex: 0 0 auto;
+}
+
+/* Header slot wrappers */
+.headerContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.headerContent {
   width: 100%;
   box-sizing: border-box;
 }
 
 .maxWidth {
   max-width: 1600px;
-  margin: auto;
+  margin-inline: auto;
   width: 100%;
   box-sizing: border-box;
 }
 
-.content {
-  flex: 1 1 auto;
-  width: 100%;
-  margin: 0 auto;
-  box-sizing: border-box;
-  gap: var(--spacing-xl);
-  padding: var(--spacing-md) var(--spacing-xl);
-  padding-top: 0;
-  min-height: 0;
+/* Content slot inner wrapper (so maxWidth works without interfering with scroll) */
+.contentInner {
   display: flex;
   flex-direction: column;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  gap: var(--spacing-xl);
+
+  box-sizing: border-box;
+  min-width: 0;
+
+  /* This is what makes your "main content" actually expand to fill */
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
-.footer {
-  flex: 0 0 auto;
+/* Optional: for small viewport heights, avoid forced viewport locking */
+@media (max-height: 400px) {
+  .containScrolling {
+    height: auto;
+    overflow: visible;
+  }
+
+  /* In this mode, avoid forcing a nested scroll region */
+  .containScrolling .mainScroll {
+    overflow: visible;
+  }
+
+  .containScrolling .mainColumn {
+    height: auto;
+  }
 }

package/dist/components/popover/Popover.d.ts

@@ -1,12 +1,26 @@
 import * as React from 'react';
-interface PopoverProps {
-    trigger: (event: (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => void, icon: React.ReactNode) => React.ReactNode;
-    children: ((close?: () => void) => React.ReactNode) | React.ReactNode;
+export interface PopoverProps {
+    trigger: (toggle: (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => void, icon: React.ReactNode, open?: boolean) => React.ReactNode;
+    children: ((close: () => void) => React.ReactNode) | React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    contentId?: string;
+    /**
+     * CSS length, recommended "NNpx" for predictability.
+     * Used as a minimum, not as a forced width unless matchTriggerWidth=true.
+     */
     minWidth?: string;
+    /**
+     * If true, force the overlay width to at least the trigger width.
+     * If false, overlay width is content-driven (calendar-friendly).
+     */
     matchTriggerWidth?: boolean;
     viewportPadding?: number;
     edgeBuffer?: number;
     dataCy?: string;
+    autoFocusContent?: boolean;
+    returnFocus?: boolean;
 }
 export interface PopoverHandle {
     close: () => void;
@@ -14,4 +28,3 @@ export interface PopoverHandle {
     isOpen: () => boolean;
 }
 export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverHandle>>;
-export {};

package/dist/components/popover/Popover.js

@@ -1,43 +1,121 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './Popover.module.css';
-export const Popover = forwardRef(function Popover({ trigger: Trigger, children, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, }, ref) {
-    const [pos, setPos] = useState({ top: 0, left: 0, width: 0, visible: false });
+function getFocusable(container) {
+    const els = container.querySelectorAll([
+        'a[href]',
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(','));
+    return Array.from(els).filter(el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+}
+function parseMinWidthPx(minWidth, elForEm) {
+    const v = minWidth.trim();
+    if (v.endsWith('px')) {
+        const n = Number.parseFloat(v);
+        return Number.isFinite(n) ? n : 0;
+    }
+    if (typeof window !== 'undefined' && v.endsWith('rem')) {
+        const n = Number.parseFloat(v);
+        if (!Number.isFinite(n))
+            return 0;
+        const rootFont = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16');
+        return n * (Number.isFinite(rootFont) ? rootFont : 16);
+    }
+    if (typeof window !== 'undefined' && v.endsWith('em')) {
+        const n = Number.parseFloat(v);
+        if (!Number.isFinite(n))
+            return 0;
+        const font = elForEm ? Number.parseFloat(getComputedStyle(elForEm).fontSize || '16') : 16;
+        return n * (Number.isFinite(font) ? font : 16);
+    }
+    return 0;
+}
+export const Popover = forwardRef(function Popover({ trigger: Trigger, children, open, defaultOpen = false, onOpenChange, contentId, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, autoFocusContent = false, returnFocus = true, }, ref) {
+    const internalId = useId();
+    const resolvedContentId = contentId !== null && contentId !== void 0 ? contentId : `popover-${internalId}`;
+    const isControlled = open !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? !!open : uncontrolledOpen;
+    const [pos, setPos] = useState({ top: 0, left: 0 });
+    const [positioned, setPositioned] = useState(false);
+    const [triggerWidth, setTriggerWidth] = useState(null);
     const containerRef = useRef(null);
     const contentRef = useRef(null);
-    // avoid SSR/hydration mismatch
+    const triggerElRef = useRef(null);
+    const lastCloseReasonRef = useRef('unknown');
     const [mounted, setMounted] = useState(false);
     useEffect(() => setMounted(true), []);
-    const computeAndSetPosition = useCallback((show) => {
-        const container = containerRef.current;
+    const setOpen = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [isControlled, onOpenChange]);
+    const openPopover = useCallback(() => {
+        setPositioned(false);
+        setOpen(true);
+    }, [setOpen]);
+    const closePopover = useCallback((reason = 'api') => {
+        lastCloseReasonRef.current = reason;
+        setOpen(false);
+    }, [setOpen]);
+    const togglePopover = useCallback((e) => {
+        triggerElRef.current = e.currentTarget;
+        if (isOpen)
+            closePopover('trigger');
+        else
+            openPopover();
+    }, [isOpen, closePopover, openPopover]);
+    useImperativeHandle(ref, () => ({
+        close: () => closePopover('api'),
+        open: openPopover,
+        isOpen: () => isOpen,
+    }), [closePopover, openPopover, isOpen]);
+    const computeAndSetPosition = useCallback(() => {
+        var _a;
         const content = contentRef.current;
-        if (!container || !content)
+        if (!content)
+            return;
+        const triggerEl = (_a = triggerElRef.current) !== null && _a !== void 0 ? _a : containerRef.current;
+        if (!triggerEl)
             return;
-        const triggerRect = container.getBoundingClientRect();
-        // Temporarily measure content size by forcing it into the layout.
+        const triggerRect = triggerEl.getBoundingClientRect();
+        // Only compute a forced width when requested.
+        let forcedWidthPx = null;
+        if (matchTriggerWidth) {
+            const minWidthPx = parseMinWidthPx(minWidth, triggerEl);
+            forcedWidthPx = Math.max(triggerRect.width, minWidthPx || 0);
+            setTriggerWidth(forcedWidthPx);
+        }
+        else {
+            setTriggerWidth(null);
+        }
+        // Measure height/width for collision using a temporary sizing that reflects our final sizing:
+        const prevHidden = content.hidden;
         const prevVis = content.style.visibility;
         const prevDisp = content.style.display;
         const prevMinWidth = content.style.minWidth;
         const prevWidth = content.style.width;
         const prevTop = content.style.top;
         const prevLeft = content.style.left;
+        content.hidden = false;
         content.style.visibility = 'hidden';
         content.style.display = 'block';
         content.style.top = '0px';
         content.style.left = '0px';
+        // Apply minWidth always; apply width only if matchTriggerWidth.
         content.style.minWidth = minWidth;
-        content.style.width = 'auto';
-        const minWidthPx = content.offsetWidth;
-        const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
-        // Apply desired width and re-measure final size (height may depend on width).
-        content.style.minWidth = `${desiredWidthPx}px`;
-        content.style.width = `${desiredWidthPx}px`;
+        content.style.width = forcedWidthPx != null ? `${forcedWidthPx}px` : 'auto';
         const contentWidth = content.offsetWidth;
         const contentHeight = content.offsetHeight;
-        // Restore previous inline styles
+        // Restore
+        content.hidden = prevHidden;
         content.style.visibility = prevVis;
         content.style.display = prevDisp;
         content.style.minWidth = prevMinWidth;
@@ -58,80 +136,84 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         const placeRightOfLeftEdge = spaceRight >= contentWidth + edgeBuffer;
         const placeLeftOfRightEdge = spaceLeft >= contentWidth + edgeBuffer;
         let rawLeft;
-        if (placeRightOfLeftEdge) {
-            rawLeft = triggerRect.left; // align left edges
-        }
-        else if (placeLeftOfRightEdge) {
-            rawLeft = triggerRect.right - contentWidth; // align right edges
-        }
-        else {
+        if (placeRightOfLeftEdge)
+            rawLeft = triggerRect.left;
+        else if (placeLeftOfRightEdge)
+            rawLeft = triggerRect.right - contentWidth;
+        else
             rawLeft = triggerRect.left + (triggerRect.width - contentWidth) / 2;
-        }
         const clampedLeft = Math.max(viewportPadding, Math.min(rawLeft, vw - contentWidth - viewportPadding));
         const clampedTop = Math.max(viewportPadding, Math.min(rawTop, vh - contentHeight - viewportPadding));
-        setPos({ top: clampedTop, left: clampedLeft, width: desiredWidthPx, visible: show });
+        setPos({ top: clampedTop, left: clampedLeft });
+        setPositioned(true);
     }, [edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
-    const openPopover = useCallback((e) => {
-        if (pos.visible) {
-            setPos(p => ({ ...p, visible: false }));
-            return;
-        }
-        computeAndSetPosition(true);
-        e === null || e === void 0 ? void 0 : e.stopPropagation();
-    }, [pos.visible, computeAndSetPosition]);
-    const closePopover = useCallback(() => {
-        setPos(p => ({ ...p, visible: false }));
-    }, []);
-    useImperativeHandle(ref, () => ({
-        close: closePopover,
-        open: () => computeAndSetPosition(true),
-        isOpen: () => !!pos.visible,
-    }), [closePopover, computeAndSetPosition, pos.visible]);
-    // Recompute position after open to account for content becoming visible / measured.
     useLayoutEffect(() => {
-        if (pos.visible)
-            computeAndSetPosition(true);
+        if (!isOpen)
+            return;
+        computeAndSetPosition();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pos.visible]);
+    }, [isOpen]);
     useEffect(() => {
-        if (!pos.visible)
+        var _a;
+        if (!isOpen)
+            return;
+        const content = contentRef.current;
+        if (!content)
             return;
-        const handleClickOutside = (e) => {
-            if (containerRef.current &&
-                contentRef.current &&
-                !containerRef.current.contains(e.target) &&
-                !contentRef.current.contains(e.target)) {
-                closePopover();
+        if (autoFocusContent) {
+            const focusables = getFocusable(content);
+            (_a = focusables[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        const handlePointerDownCapture = (e) => {
+            const container = containerRef.current;
+            const contentEl = contentRef.current;
+            if (!container || !contentEl)
+                return;
+            const target = e.target;
+            if (!container.contains(target) && !contentEl.contains(target)) {
+                closePopover('outside');
             }
         };
         const handleEscape = (e) => {
             if (e.key === 'Escape')
-                closePopover();
+                closePopover('escape');
         };
-        const handleReposition = () => computeAndSetPosition(true);
-        document.addEventListener('click', handleClickOutside);
+        const handleReposition = () => computeAndSetPosition();
+        document.addEventListener('pointerdown', handlePointerDownCapture, true);
         document.addEventListener('keydown', handleEscape, true);
         window.addEventListener('resize', handleReposition);
         window.addEventListener('scroll', handleReposition, true);
         return () => {
-            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('pointerdown', handlePointerDownCapture, true);
             document.removeEventListener('keydown', handleEscape, true);
             window.removeEventListener('resize', handleReposition);
             window.removeEventListener('scroll', handleReposition, true);
         };
-    }, [pos.visible, closePopover, computeAndSetPosition]);
-    return (_jsxs("div", { className: styles.container, ref: containerRef, children: [Trigger(openPopover, pos.visible ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 })), mounted &&
-                createPortal(_jsx("div", { ref: contentRef, className: styles.content, style: {
+    }, [isOpen, closePopover, computeAndSetPosition, autoFocusContent]);
+    useEffect(() => {
+        var _a, _b;
+        if (isOpen)
+            return;
+        if (!returnFocus)
+            return;
+        if (lastCloseReasonRef.current === 'outside')
+            return;
+        (_b = (_a = triggerElRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, [isOpen, returnFocus]);
+    const icon = isOpen ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 });
+    return (_jsxs("div", { className: styles.container, ref: containerRef, children: [Trigger(togglePopover, icon, isOpen), mounted &&
+                isOpen &&
+                createPortal(_jsx("div", { id: resolvedContentId, ref: contentRef, className: styles.content, style: {
                         top: pos.top,
                         left: pos.left,
-                        visibility: pos.visible ? 'visible' : 'hidden',
-                        minWidth: pos.width ? `${pos.width}px` : minWidth,
-                        width: pos.width ? `${pos.width}px` : undefined,
+                        // Content-driven sizing by default.
+                        minWidth,
+                        width: triggerWidth != null ? `${triggerWidth}px` : undefined,
                         maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
                         maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), 400px)`,
-                        overflow: 'auto',
-                    }, role: "dialog", "aria-hidden": !pos.visible, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
-                        ? children(closePopover)
+                        visibility: positioned ? undefined : 'hidden',
+                    }, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
+                        ? children(() => closePopover('api'))
                         : children }), document.body)] }));
 });
 Popover.displayName = 'Popover';

package/dist/components/popover/Popover.module.css

@@ -1,5 +1,6 @@
 .container {
   position: relative;
+  display: inline-block;
 }
 
 .content {
@@ -13,6 +14,10 @@
   box-shadow: var(--shadow-md);
 }
 
+.content[hidden] {
+  display: none;
+}
+
 .content svg {
   height: 20px;
   width: 20px;

package/dist/components/split-pane/SplitPane.d.ts

@@ -1,34 +1,20 @@
-import React from 'react';
-import { SplitDirection } from './provider/SplitPaneContext';
-interface SplitPaneProps {
-    children: React.ReactNode;
+import type { JSX, ReactNode } from 'react';
+import type { SplitDirection } from './provider/SplitPaneContext';
+export interface SplitPaneProps {
+    children: ReactNode;
     initialPrimarySize?: number;
     minPrimarySize?: number;
     minSecondarySize?: number;
     direction?: SplitDirection;
     showDivider?: 'hover' | 'always' | 'never';
-    /**
-     * Gutter size (px). This is the space between panes and contains the resizer hit area.
-     * Example: 8 => 4px breathing room on each side if the divider line is centered.
-     */
     gutterSize?: number;
-    /**
-     * If provided, primary size is persisted per key in localStorage.
-     * Only SplitPanes sharing the same key will share size.
-     */
     storageKey?: string;
 }
-export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, }: SplitPaneProps): React.ReactNode;
-/**
- * IMPORTANT:
- * This component now renders ONLY the primary content (scrollable).
- * The resizer lives in a dedicated <SplitPaneGutter /> so it never overlaps scrollbars.
- */
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, }: SplitPaneProps): JSX.Element;
 export declare function SplitPanePrimary({ children }: {
-    children: React.ReactNode;
-}): React.ReactNode;
-export declare function SplitPaneGutter(): React.ReactNode;
+    children: ReactNode;
+}): JSX.Element;
 export declare function SplitPaneSecondary({ children }: {
-    children: React.ReactNode;
-}): React.ReactNode;
-export {};
+    children: ReactNode;
+}): JSX.Element;
+export declare function SplitPaneGutter(): JSX.Element;