@dsn-starter-kit/components-react 1.0.0

package/dist/Popover/Popover.css

@@ -0,0 +1,233 @@
+/* ===== Popover ===== */
+
+/*
+ * dsn-popover — Contextgebonden overlay verankerd aan een triggerelement
+ *
+ * Gebruik de HTML Popover API (popover="auto") voor light-dismiss en top-layer gedrag.
+ * Positionering vereist JavaScript (getBoundingClientRect) of CSS Anchor Positioning.
+ *
+ * Toegankelijkheid:
+ * - role="dialog" aria-modal="false" — niet-modaal: achtergrond blijft interactief
+ * - aria-labelledby → .dsn-popover-heading id (via PopoverHeading + context)
+ * - aria-label → via `label` prop (popovers zonder heading)
+ * - aria-expanded op het triggerelement — synchroon met open-staat
+ *
+ * HTML-structuur (volledig — met header en footer):
+ *
+ * <div class="dsn-popover-wrapper">
+ *   <button
+ *     type="button"
+ *     class="dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only"
+ *     popovertarget="popover-id"
+ *     aria-expanded="false"
+ *   >
+ *     <svg class="dsn-icon" aria-hidden="true"><!-- dots-vertical --></svg>
+ *     <span class="dsn-button__label">Acties</span>
+ *   </button>
+ *
+ *   <div
+ *     id="popover-id"
+ *     popover="auto"
+ *     class="dsn-popover dsn-popover--placement-bottom"
+ *     role="dialog"
+ *     aria-modal="false"
+ *     aria-labelledby="popover-heading-id"
+ *   >
+ *     <div class="dsn-popover__header">
+ *       <h2 class="dsn-popover-heading" id="popover-heading-id">Titel</h2>
+ *       <button type="button" class="dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only">
+ *         <svg class="dsn-icon" aria-hidden="true"><!-- x --></svg>
+ *         <span class="dsn-button__label">Sluiten</span>
+ *       </button>
+ *     </div>
+ *     <div class="dsn-popover__body">
+ *       <!-- slot content -->
+ *     </div>
+ *     <div class="dsn-popover__footer">
+ *       <!-- acties -->
+ *     </div>
+ *   </div>
+ * </div>
+ *
+ * HTML-structuur (minimaal — alleen body, bijv. voor Menu):
+ *
+ * <div class="dsn-popover-wrapper">
+ *   <button popovertarget="popover-id" ...>...</button>
+ *   <div id="popover-id" popover="auto" class="dsn-popover dsn-popover--placement-bottom"
+ *        role="dialog" aria-modal="false" aria-label="Acties">
+ *     <div class="dsn-popover__body">
+ *       <!-- Menu component -->
+ *     </div>
+ *   </div>
+ * </div>
+ */
+
+/* ===== Wrapper ===== */
+
+/*
+ * Relatief gepositioneerde container voor CSS-only gebruik.
+ * In de React-implementatie wordt positionering via JS afgehandeld.
+ */
+.dsn-popover-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* ===== Popover panel ===== */
+
+.dsn-popover {
+  /* Reset UA popover-stijlen */
+  margin: 0;
+  padding: 0;
+  color: inherit;
+
+  /* Visuele stijlen */
+  background: var(--dsn-popover-background-color);
+  border: var(--dsn-popover-border-width) solid var(--dsn-popover-border-color);
+  border-radius: var(--dsn-popover-border-radius);
+  box-shadow: var(--dsn-popover-box-shadow);
+
+  /* Grootte */
+  min-inline-size: var(--dsn-popover-min-width);
+  max-inline-size: min(var(--dsn-popover-max-width), calc(100vw - 1rem));
+  inline-size: max-content;
+
+  /*
+   * flex-direction altijd op de base class — ook tijdens de sluitanimatie.
+   * allow-discrete houdt display:flex vast, maar flex-direction valt anders
+   * terug naar de default 'row', wat het zichtbare verspringen veroorzaakt.
+   */
+  flex-direction: column;
+
+  /* Animatietransitie (ook voor sluitanimatie via allow-discrete) */
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  transition:
+    opacity var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    transform var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    display var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete,
+    overlay var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete;
+}
+
+/*
+ * Layout en positionering uitsluitend op :popover-open.
+ *
+ * - display: flex — UA-stylesheet's display:none geldt wanneer de selector wegvalt.
+ *   De `display allow-discrete` transitie houdt display:flex tijdens de sluitanimatie,
+ *   zodat de layout niet instort vóór opacity/transform klaar zijn.
+ * - position: fixed — géén position in de base class. De `overlay allow-discrete`
+ *   transitie houdt het element in de top-layer (en daarmee position:fixed) tijdens
+ *   de sluitanimatie. Zo verspringt de positie niet halverwege de animatie.
+ * - z-index — geëxpliciteerd zodat gestapelde popovers correct geordend zijn.
+ */
+.dsn-popover:popover-open {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  z-index: var(--dsn-popover-z-index);
+}
+
+/* Openingsanimatie: startwaarden voor de :popover-open staat */
+@starting-style {
+  .dsn-popover:popover-open {
+    opacity: 0;
+    transform: scale(0.97) translateY(-0.25rem);
+  }
+}
+
+/* Animatie uitschakelen bij prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  .dsn-popover {
+    transition: none;
+  }
+}
+
+/* ===== Placement modifiers (CSS-only / wrapper-based positionering) ===== */
+
+/*
+ * Voor CSS-only gebruik: de .dsn-popover-wrapper is relatief gepositioneerd en
+ * de popover gebruikt position: absolute (niet de Popover API top-layer).
+ * De React-implementatie gebruikt JS-positionering via inline styles (top/left).
+ *
+ * Let op: deze modifiers werken alleen zonder de Popover API (bijv. pure HTML demo).
+ * Met popover="auto" staat het element in de top-layer (position: fixed via JS).
+ */
+.dsn-popover-wrapper .dsn-popover--placement-bottom {
+  position: absolute;
+  inset-block-start: calc(100% + 0.25rem);
+  inset-inline-start: 0;
+}
+
+.dsn-popover-wrapper .dsn-popover--placement-top {
+  position: absolute;
+  inset-block-end: calc(100% + 0.25rem);
+  inset-inline-start: 0;
+}
+
+.dsn-popover-wrapper .dsn-popover--placement-end {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(100% + 0.25rem);
+}
+
+.dsn-popover-wrapper .dsn-popover--placement-start {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: calc(100% + 0.25rem);
+}
+
+/* ===== Header ===== */
+
+.dsn-popover__header {
+  display: flex;
+  align-items: center;
+  gap: var(--dsn-space-inline-xl);
+  flex-shrink: 0;
+
+  padding-block-start: var(--dsn-popover-header-padding-block-start);
+  padding-block-end: var(--dsn-popover-header-padding-block-end);
+  padding-inline: var(--dsn-popover-header-padding-inline);
+
+  /* Scheidingslijn onder de header */
+  border-block-end: var(--dsn-popover-border-width) solid
+    var(--dsn-popover-border-color);
+}
+
+/* ===== Heading ===== */
+
+.dsn-popover-heading {
+  flex: 1;
+  margin: 0;
+
+  font-family: var(--dsn-popover-heading-font-family);
+  font-weight: var(--dsn-popover-heading-font-weight);
+  font-size: var(--dsn-popover-heading-font-size);
+  line-height: var(--dsn-popover-heading-line-height);
+  color: var(--dsn-popover-heading-color);
+}
+
+/* ===== Body ===== */
+
+.dsn-popover__body {
+  padding-block: var(--dsn-popover-body-padding-block);
+  padding-inline: var(--dsn-popover-body-padding-inline);
+}
+
+/* ===== Footer ===== */
+
+.dsn-popover__footer {
+  flex-shrink: 0;
+
+  padding-block-start: var(--dsn-popover-footer-padding-block-start);
+  padding-block-end: var(--dsn-popover-footer-padding-block-end);
+  padding-inline: var(--dsn-popover-footer-padding-inline);
+
+  /* Scheidingslijn boven de footer */
+  border-block-start: var(--dsn-popover-border-width) solid
+    var(--dsn-popover-border-color);
+}
+

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import './Popover.css';
+declare module 'react' {
+    interface HTMLAttributes<T> {
+        popover?: 'auto' | 'manual' | '' | undefined;
+        popoverTarget?: string | undefined;
+        popoverTargetAction?: 'hide' | 'show' | 'toggle' | undefined;
+    }
+}
+declare global {
+    interface HTMLElement {
+        showPopover(): void;
+        hidePopover(): void;
+    }
+}
+type Placement = 'top' | 'bottom' | 'start' | 'end';
+export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Bepaalt of de popover getoond wordt.
+     */
+    isOpen: boolean;
+    /**
+     * Callback bij sluiten (Escape, klik buiten, sluitknop in header).
+     */
+    onClose?: () => void;
+    /**
+     * Referentie naar het triggerelement voor positionering en focus-herstel.
+     */
+    triggerRef: React.RefObject<HTMLElement>;
+    /**
+     * Gewenste plaatsing relatief aan het triggerelement.
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /**
+     * Toegankelijke naam voor popovers zonder `PopoverHeader`/`PopoverHeading`.
+     * Gebruik `aria-labelledby` via context wanneer er wél een heading is.
+     */
+    label?: string;
+    /**
+     * Subcomponenten: `PopoverHeader`, `PopoverBody`, `PopoverFooter`
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Popover component
+ * Lichtgewicht, contextgebonden overlay verankerd aan een triggerelement.
+ *
+ * Gebaseerd op de HTML Popover API (`popover="auto"`) voor ingebakken
+ * light-dismiss en top-layer gedrag. Positionering via JavaScript.
+ *
+ * @example
+ * ```tsx
+ * const triggerRef = useRef<HTMLButtonElement>(null);
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button ref={triggerRef} onClick={() => setIsOpen(true)}>Opties</Button>
+ * <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef} label="Opties">
+ *   <PopoverBody>
+ *     <Menu>...</Menu>
+ *   </PopoverBody>
+ * </Popover>
+ * ```
+ */
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Inhoud van de header — doorgaans een `PopoverHeading`.
+     * De sluitknop wordt automatisch geïnjecteerd.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * PopoverHeader
+ * De headerstrook van de popover met heading en sluitknop.
+ */
+export declare const PopoverHeader: React.ForwardRefExoticComponent<PopoverHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Semantisch heading-niveau. Kies op basis van documenthiërarchie.
+     * @default 2
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * De zichtbare heading-tekst.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * PopoverHeading
+ * De heading van de popover. ID wordt automatisch gegenereerd voor aria-labelledby.
+ */
+export declare const PopoverHeading: React.ForwardRefExoticComponent<PopoverHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * De hoofdinhoud van de popover — willekeurige slot-content.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * PopoverBody
+ * De inhoudssectie van de popover.
+ */
+export declare const PopoverBody: React.ForwardRefExoticComponent<PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Actieknoppen of slotzin van de popover.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * PopoverFooter
+ * De voettekst van de popover met actieknoppen.
+ */
+export declare const PopoverFooter: React.ForwardRefExoticComponent<PopoverFooterProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Popover.d.ts.map

package/dist/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,eAAe,CAAC;AAMvB,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAU,cAAc,CAAC,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,EAAE,GAAG,SAAS,CAAC;QAC7C,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;KAC9D;CACF;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,WAAW;QACnB,WAAW,IAAI,IAAI,CAAC;QACpB,WAAW,IAAI,IAAI,CAAC;KACrB;CACF;AAMD,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAwGpD,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,qFA2HnB,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,2FAwBxB,CAAC;AAQH,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IACnF;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,gGAiBzB,CAAC;AAQH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yFAYvB,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,2FAaxB,CAAC"}

package/dist/Popover/Popover.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import './Popover.css';
+// =============================================================================
+// Positioneringshelper
+// =============================================================================
+const GAP = 4; // px afstand tussen trigger en popover
+function positionPopover(popover, trigger, placement) {
+    const triggerRect = trigger.getBoundingClientRect();
+    // offsetWidth/offsetHeight — onaangepast door CSS transforms (zoals @starting-style scale).
+    // getBoundingClientRect geeft de getransformeerde afmetingen, wat leidt tot onjuiste clamping.
+    const popoverWidth = popover.offsetWidth;
+    const popoverHeight = popover.offsetHeight;
+    const popoverRect = { width: popoverWidth, height: popoverHeight };
+    const isRTL = document.documentElement.dir === 'rtl' ||
+        getComputedStyle(trigger).direction === 'rtl';
+    let top;
+    let left;
+    switch (placement) {
+        case 'bottom':
+            top = triggerRect.bottom + GAP;
+            left = isRTL ? triggerRect.right - popoverRect.width : triggerRect.left;
+            break;
+        case 'top':
+            top = triggerRect.top - popoverRect.height - GAP;
+            left = isRTL ? triggerRect.right - popoverRect.width : triggerRect.left;
+            break;
+        case 'end':
+            top = triggerRect.top;
+            left = isRTL
+                ? triggerRect.left - popoverRect.width - GAP
+                : triggerRect.right + GAP;
+            break;
+        case 'start':
+            top = triggerRect.top;
+            left = isRTL
+                ? triggerRect.right + GAP
+                : triggerRect.left - popoverRect.width - GAP;
+            break;
+        default:
+            top = triggerRect.bottom + GAP;
+            left = triggerRect.left;
+    }
+    // Klamp binnen het viewport (8px marge)
+    const margin = 8;
+    left = Math.max(margin, Math.min(left, window.innerWidth - popoverRect.width - margin));
+    top = Math.max(margin, Math.min(top, window.innerHeight - popoverRect.height - margin));
+    popover.style.top = `${top}px`;
+    popover.style.left = `${left}px`;
+    popover.style.right = 'auto';
+    popover.style.bottom = 'auto';
+}
+// Zet focus op het eerste interactieve element in de popover
+function focusFirstInteractive(container) {
+    const selector = [
+        'button:not(:disabled)',
+        'a[href]',
+        'input:not(:disabled)',
+        'select:not(:disabled)',
+        'textarea:not(:disabled)',
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(', ');
+    const first = container.querySelector(selector);
+    if (first) {
+        first.focus();
+    }
+    else {
+        container.focus();
+    }
+}
+const PopoverContext = React.createContext({
+    headingId: '',
+});
+/**
+ * Popover component
+ * Lichtgewicht, contextgebonden overlay verankerd aan een triggerelement.
+ *
+ * Gebaseerd op de HTML Popover API (`popover="auto"`) voor ingebakken
+ * light-dismiss en top-layer gedrag. Positionering via JavaScript.
+ *
+ * @example
+ * ```tsx
+ * const triggerRef = useRef<HTMLButtonElement>(null);
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button ref={triggerRef} onClick={() => setIsOpen(true)}>Opties</Button>
+ * <Popover isOpen={isOpen} onClose={() => setIsOpen(false)} triggerRef={triggerRef} label="Opties">
+ *   <PopoverBody>
+ *     <Menu>...</Menu>
+ *   </PopoverBody>
+ * </Popover>
+ * ```
+ */
+export const Popover = React.forwardRef(({ className, isOpen, onClose, triggerRef, placement = 'bottom', label, children, ...props }, ref) => {
+    const internalRef = React.useRef(null);
+    const popoverRef = ref ?? internalRef;
+    const headingId = React.useId();
+    // Toon/verberg popover via de Popover API
+    React.useEffect(() => {
+        const el = popoverRef.current;
+        if (!el)
+            return;
+        if (isOpen) {
+            el.showPopover();
+            const trigger = triggerRef.current;
+            if (trigger) {
+                positionPopover(el, trigger, placement);
+            }
+            focusFirstInteractive(el);
+        }
+        else {
+            // hidePopover gooit een fout als de popover al gesloten is
+            try {
+                el.hidePopover();
+            }
+            catch {
+                // popover was al gesloten — geen actie nodig
+            }
+        }
+    }, [isOpen, placement, triggerRef, popoverRef]);
+    // Synchroniseer aria-expanded op het triggerelement
+    React.useEffect(() => {
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return;
+        trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+        return () => {
+            trigger.setAttribute('aria-expanded', 'false');
+        };
+    }, [isOpen, triggerRef]);
+    // Verwerk het toggle-event van de Popover API (Escape / klik buiten binnen hetzelfde document)
+    // onToggle is niet beschikbaar als JSX-prop op div in React 18 — gebruik addEventListener.
+    // Gebruik een ref voor onClose zodat de listener stabiel blijft en nooit stale is.
+    const onCloseRef = React.useRef(onClose);
+    onCloseRef.current = onClose;
+    React.useEffect(() => {
+        const el = popoverRef.current;
+        if (!el)
+            return;
+        const handleToggle = (event) => {
+            const toggleEvent = event;
+            if (toggleEvent.newState === 'closed') {
+                onCloseRef.current?.();
+                triggerRef.current?.focus();
+            }
+        };
+        el.addEventListener('toggle', handleToggle);
+        return () => {
+            el.removeEventListener('toggle', handleToggle);
+        };
+    }, [triggerRef, popoverRef]);
+    // Fallback light-dismiss via pointerdown — vangt klikken buiten het popover op
+    // in contexten waar de Popover API's native light-dismiss niet bereikbaar is
+    // (bijv. iframe-grenzen, of oudere browsers zonder Popover API).
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const el = popoverRef.current;
+        if (!el)
+            return;
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            // Sluit niet als er op de popover zelf of het triggerelement geklikt wordt
+            if (el.contains(target) || triggerRef.current?.contains(target))
+                return;
+            onCloseRef.current?.();
+            triggerRef.current?.focus();
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+        };
+    }, [isOpen, triggerRef, popoverRef]);
+    const classes = classNames('dsn-popover', `dsn-popover--placement-${placement}`, className);
+    const ariaProps = label
+        ? { 'aria-label': label }
+        : { 'aria-labelledby': headingId };
+    return (_jsx(PopoverContext.Provider, { value: { headingId, onClose }, children: _jsx("div", { ref: popoverRef, popover: "auto", className: classes, role: "dialog", "aria-modal": "false", tabIndex: -1, ...ariaProps, ...props, children: children }) }));
+});
+Popover.displayName = 'Popover';
+/**
+ * PopoverHeader
+ * De headerstrook van de popover met heading en sluitknop.
+ */
+export const PopoverHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { onClose } = React.useContext(PopoverContext);
+    return (_jsxs("div", { ref: ref, className: classNames('dsn-popover__header', className), ...props, children: [children, _jsx(Button, { variant: "subtle", size: "small", iconOnly: true, onClick: onClose, iconStart: _jsx(Icon, { name: "x", "aria-hidden": true }), children: "Sluiten" })] }));
+});
+PopoverHeader.displayName = 'PopoverHeader';
+/**
+ * PopoverHeading
+ * De heading van de popover. ID wordt automatisch gegenereerd voor aria-labelledby.
+ */
+export const PopoverHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
+    const { headingId } = React.useContext(PopoverContext);
+    const Tag = `h${level}`;
+    return (_jsx(Tag, { ref: ref, id: headingId, className: classNames('dsn-popover-heading', className), ...props, children: children }));
+});
+PopoverHeading.displayName = 'PopoverHeading';
+/**
+ * PopoverBody
+ * De inhoudssectie van de popover.
+ */
+export const PopoverBody = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: classNames('dsn-popover__body', className), ...props, children: children }));
+});
+PopoverBody.displayName = 'PopoverBody';
+/**
+ * PopoverFooter
+ * De voettekst van de popover met actieknoppen.
+ */
+export const PopoverFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: classNames('dsn-popover__footer', className), ...props, children: children }));
+});
+PopoverFooter.displayName = 'PopoverFooter';
+//# sourceMappingURL=Popover.js.map

package/dist/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"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"}

package/dist/Popover/index.d.ts

@@ -0,0 +1,3 @@
+export { Popover, PopoverHeader, PopoverHeading, PopoverBody, PopoverFooter, } from './Popover';
+export type { PopoverProps, PopoverHeaderProps, PopoverHeadingProps, PopoverBodyProps, PopoverFooterProps, } from './Popover';
+//# sourceMappingURL=index.d.ts.map

package/dist/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,aAAa,EACb,cAAc,EACd,WAAW,EACX,aAAa,GACd,MAAM,WAAW,CAAC;AACnB,YAAY,EACV,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,WAAW,CAAC"}

package/dist/Popover/index.js

@@ -0,0 +1,2 @@
+export { Popover, PopoverHeader, PopoverHeading, PopoverBody, PopoverFooter, } from './Popover';
+//# sourceMappingURL=index.js.map

package/dist/Popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,aAAa,EACb,cAAc,EACd,WAAW,EACX,aAAa,GACd,MAAM,WAAW,CAAC"}