@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+export type PageChangeEvent = {
+    page: number;
+    take: number;
+    skip: number;
+    totalPages: number;
+    pageSizeOptions?: number[];
+};
+interface PaginationProps {
+    itemsCount?: number;
+    take?: number;
+    skip?: number;
+    onPageChange?: (e: PageChangeEvent) => void;
+    lazy?: boolean;
+    pageSizeOptions?: number[];
+    showFirstLast?: boolean;
+    showGoToPage?: boolean;
+    showPageSize?: boolean;
+}
+export declare function Pagination({ itemsCount, skip, take, onPageChange, pageSizeOptions, showFirstLast, showGoToPage, showPageSize, }: PaginationProps): ReactNode;
+export {};

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,155 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronsLeft, ArrowLeft, ArrowRight, ChevronsRight, ChevronDown } from 'lucide-react';
+import { useRef, useCallback, useMemo } from 'react';
+import styles from './Pagination.module.css';
+import { Button } from '../button/Button';
+import { Menu } from '../menu/Menu';
+import { Popover } from '../popover/Popover';
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
+const NUMBER_LOCALE = "da-DK";
+function Pagination({
+  itemsCount = 0,
+  skip = 0,
+  take = DEFAULT_PAGE_SIZE_OPTIONS[1],
+  onPageChange,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  showFirstLast = true,
+  showGoToPage = true,
+  showPageSize = true
+}) {
+  const popoverRef = useRef(null);
+  const pageSizeRef = useRef(null);
+  const formatNumber = useCallback((value) => value.toLocaleString(NUMBER_LOCALE), []);
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))),
+    [itemsCount, take]
+  );
+  const currentPage = useMemo(() => {
+    const p = Math.floor(skip / Math.max(1, take)) + 1;
+    return Math.min(Math.max(1, p), totalPages);
+  }, [skip, take, totalPages]);
+  const emit = useCallback(
+    (page, nextTake = take) => {
+      const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
+      const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
+      const nextSkip = (clampedPage - 1) * nextTake;
+      onPageChange == null ? void 0 : onPageChange({
+        page: clampedPage,
+        take: nextTake,
+        skip: nextSkip,
+        totalPages: nextTotalPages
+      });
+    },
+    [onPageChange, take, itemsCount]
+  );
+  const firstPage = useCallback(() => emit(1), [emit]);
+  const lastPage = useCallback(() => emit(totalPages), [emit, totalPages]);
+  const prevPage = useCallback(() => emit(currentPage - 1), [emit, currentPage]);
+  const nextPage = useCallback(() => emit(currentPage + 1), [emit, currentPage]);
+  const goToPage = useCallback((page) => emit(page), [emit]);
+  const canPrev = currentPage > 1;
+  const canNext = currentPage < totalPages;
+  const rangeLabel = useMemo(() => {
+    if (itemsCount <= 0) return "0 af 0";
+    const first = skip + 1;
+    const last = Math.min(skip + take, itemsCount);
+    return `${formatNumber(first)}\u2013${formatNumber(last)} af ${formatNumber(itemsCount)}`;
+  }, [formatNumber, itemsCount, skip, take]);
+  const pages = useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
+  const handlePageSizeChange = useCallback((size) => emit(1, size), [emit]);
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    showFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ChevronsLeft, {}),
+        disabled: !canPrev,
+        onClick: firstPage,
+        "aria-label": "First page"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+        disabled: !canPrev,
+        onClick: prevPage,
+        "aria-label": "Previous page"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ArrowRight, {}),
+        disabled: !canNext,
+        onClick: nextPage,
+        "aria-label": "Next page"
+      }
+    ),
+    showFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ChevronsRight, {}),
+        disabled: !canNext,
+        onClick: lastPage,
+        "aria-label": "Last page"
+      }
+    ),
+    showGoToPage && /* @__PURE__ */ jsx(
+      Popover,
+      {
+        ref: popoverRef,
+        trigger: (open) => /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
+          "Side ",
+          formatNumber(currentPage),
+          "/",
+          formatNumber(totalPages),
+          " ",
+          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+        ] }),
+        children: /* @__PURE__ */ jsx(Menu, { children: pages == null ? void 0 : pages.map((page) => /* @__PURE__ */ jsx(Menu.Item, { active: page === currentPage, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              var _a;
+              goToPage(page);
+              (_a = popoverRef.current) == null ? void 0 : _a.close();
+            },
+            children: formatNumber(page)
+          }
+        ) }, page)) })
+      }
+    ),
+    showPageSize && /* @__PURE__ */ jsx(
+      Popover,
+      {
+        ref: pageSizeRef,
+        trigger: (open) => /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
+          "Vis ",
+          formatNumber(take),
+          " ",
+          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+        ] }),
+        children: /* @__PURE__ */ jsx(Menu, { children: pageSizeOptions == null ? void 0 : pageSizeOptions.map((size) => /* @__PURE__ */ jsx(Menu.Item, { active: size === take, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              var _a;
+              handlePageSizeChange(size);
+              (_a = pageSizeRef.current) == null ? void 0 : _a.close();
+            },
+            children: formatNumber(size)
+          }
+        ) }, size)) })
+      }
+    )
+  ] });
+}
+
+export { Pagination };

package/dist/components/pagination/Pagination.module.css

@@ -0,0 +1,25 @@
+.container {
+  display: flex;
+  gap: var(--spacing-xxs);
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.ellipsisButton {
+  display: none;
+}
+
+@media (min-width: 480px) {
+  .ellipsisButton {
+    display: contents;
+  }
+}
+.range {
+  min-width: 110px;
+  text-align: center;
+  font-size: var(--font-size-xs);
+  padding: 0 var(--spacing-xxs);
+}

package/dist/components/panel/Panel.cjs

@@ -0,0 +1,38 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Panel.module.css');
+var Headline = require('../headline/Headline');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Panel({
+  header,
+  subheader,
+  headerIcon,
+  headerAddition,
+  children,
+  severity,
+  size
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `${styles__default.default.container} ${size ? styles__default.default[size] : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Headline.Headline,
+      {
+        disableMargin: true,
+        size: size === "sm" ? 4 : 3,
+        icon: headerIcon,
+        addition: headerAddition,
+        subheader,
+        severity,
+        children: header
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.content, children })
+  ] });
+}
+
+exports.Panel = Panel;

package/dist/components/panel/Panel.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode, JSX } from 'react';
+interface PanelProps {
+    header: ReactNode;
+    subheader?: ReactNode;
+    headerIcon?: ReactNode;
+    headerAddition?: ReactNode;
+    severity?: Severity;
+    children: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+}
+import { Severity } from '../../constants/severity.types';
+export declare function Panel({ header, subheader, headerIcon, headerAddition, children, severity, size, }: PanelProps): JSX.Element;
+export {};

package/dist/components/panel/Panel.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Panel.module.css';
+import { Headline } from '../headline/Headline';
+
+function Panel({
+  header,
+  subheader,
+  headerIcon,
+  headerAddition,
+  children,
+  severity,
+  size
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: `${styles.container} ${size ? styles[size] : ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsx(
+      Headline,
+      {
+        disableMargin: true,
+        size: size === "sm" ? 4 : 3,
+        icon: headerIcon,
+        addition: headerAddition,
+        subheader,
+        severity,
+        children: header
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: styles.content, children })
+  ] });
+}
+
+export { Panel };

package/dist/components/panel/Panel.module.css

@@ -0,0 +1,30 @@
+.container {
+  border: var(--border-width-thin) solid var(--color-border-subtle);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-bg-surface);
+  box-shadow: var(--shadow-md);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
+}
+
+.content {
+  padding: var(--spacing-md);
+}
+
+.header {
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--table-header-bg);
+}
+
+.container.sm {
+  .header,
+  .content {
+    padding: var(--spacing-xs) var(--spacing-md);
+  }
+}

package/dist/components/popover/Popover.cjs

@@ -0,0 +1,331 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var reactDom = require('react-dom');
+var styles = require('./Popover.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function assignRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+const LANDMARK_SELECTOR = "main, nav, header, footer, aside";
+function getNearestLandmark(el) {
+  var _a;
+  return (_a = el.closest(LANDMARK_SELECTOR)) != null ? _a : document.body;
+}
+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;
+}
+const Popover = React.forwardRef(function Popover2({
+  trigger: Trigger,
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  contentId,
+  minWidth = "200px",
+  matchTriggerWidth = true,
+  viewportPadding = 8,
+  contentMaxHeightPx = 400,
+  edgeBuffer = 100,
+  dataCy,
+  fullWidth = false,
+  fillTrigger = false,
+  autoFocusContent = false,
+  returnFocus = true,
+  anchorRef,
+  overlayRef
+}, ref) {
+  const internalId = React.useId();
+  const resolvedContentId = contentId != null ? contentId : `popover-${internalId}`;
+  const isControlled = open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const isOpen = isControlled ? !!open : uncontrolledOpen;
+  const [pos, setPos] = React.useState({ top: 0, left: 0 });
+  const [positioned, setPositioned] = React.useState(false);
+  const [triggerWidth, setTriggerWidth] = React.useState(null);
+  const containerRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const triggerElRef = React.useRef(null);
+  const lastCloseReasonRef = React.useRef("unknown");
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
+  const [portalTarget, setPortalTarget] = React.useState(null);
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const openPopover = React.useCallback(() => {
+    setPositioned(false);
+    setPortalTarget(containerRef.current ? getNearestLandmark(containerRef.current) : document.body);
+    setOpen(true);
+  }, [setOpen]);
+  const closePopover = React.useCallback(
+    (reason = "api") => {
+      lastCloseReasonRef.current = reason;
+      setOpen(false);
+    },
+    [setOpen]
+  );
+  const togglePopover = React.useCallback(
+    (e) => {
+      var _a, _b;
+      triggerElRef.current = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : e.currentTarget) != null ? _b : containerRef.current;
+      if (isOpen) closePopover("trigger");
+      else openPopover();
+    },
+    [isOpen, closePopover, openPopover, anchorRef]
+  );
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      close: () => closePopover("api"),
+      open: openPopover,
+      isOpen: () => isOpen
+    }),
+    [closePopover, openPopover, isOpen]
+  );
+  const computeAndSetPosition = React.useCallback(() => {
+    var _a, _b;
+    const content = contentRef.current;
+    if (!content) return;
+    const triggerEl = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : triggerElRef.current) != null ? _b : containerRef.current;
+    if (!triggerEl) return;
+    const triggerRect = triggerEl.getBoundingClientRect();
+    const overlayWidthBuffer = 8;
+    let forcedWidthPx = null;
+    if (matchTriggerWidth) {
+      const minWidthPx = parseMinWidthPx(minWidth, triggerEl);
+      forcedWidthPx = Math.max(triggerRect.width + overlayWidthBuffer, minWidthPx || 0);
+      setTriggerWidth(forcedWidthPx);
+    } else {
+      setTriggerWidth(null);
+    }
+    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";
+    content.style.minWidth = minWidth;
+    content.style.width = forcedWidthPx != null ? `${forcedWidthPx}px` : "auto";
+    const contentWidth = content.offsetWidth;
+    const contentHeight = content.offsetHeight;
+    content.hidden = prevHidden;
+    content.style.visibility = prevVis;
+    content.style.display = prevDisp;
+    content.style.minWidth = prevMinWidth;
+    content.style.width = prevWidth;
+    content.style.top = prevTop;
+    content.style.left = prevLeft;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const spaceAbove = Math.max(0, triggerRect.top);
+    const spaceBelow = Math.max(0, vh - triggerRect.bottom);
+    const spaceLeft = Math.max(0, triggerRect.left);
+    const spaceRight = Math.max(0, vw - triggerRect.right);
+    const preferBelow = spaceBelow >= contentHeight + edgeBuffer || spaceBelow >= spaceAbove;
+    const spacing = viewportPadding;
+    const rawTop = preferBelow ? triggerRect.bottom + spacing : triggerRect.top - contentHeight - spacing;
+    const placeRightOfLeftEdge = spaceRight + triggerRect.width >= contentWidth + edgeBuffer;
+    const placeLeftOfRightEdge = spaceLeft + triggerRect.width >= contentWidth + edgeBuffer;
+    let rawLeft;
+    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 });
+    setPositioned(true);
+  }, [anchorRef, edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
+  React.useLayoutEffect(() => {
+    if (!isOpen) return;
+    computeAndSetPosition();
+  }, [isOpen, computeAndSetPosition]);
+  React.useEffect(() => {
+    var _a, _b, _c;
+    if (!isOpen) return;
+    const content = contentRef.current;
+    if (!content) return;
+    const triggerEl = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : triggerElRef.current) != null ? _b : containerRef.current;
+    if (autoFocusContent) {
+      const focusables = getFocusable(content);
+      (_c = focusables[0]) == null ? void 0 : _c.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("escape");
+    };
+    const handleReposition = () => computeAndSetPosition();
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      handleReposition();
+    }) : null;
+    document.addEventListener("pointerdown", handlePointerDownCapture, true);
+    document.addEventListener("keydown", handleEscape, true);
+    window.addEventListener("resize", handleReposition);
+    window.addEventListener("scroll", handleReposition, true);
+    resizeObserver == null ? void 0 : resizeObserver.observe(content);
+    if (triggerEl) resizeObserver == null ? void 0 : resizeObserver.observe(triggerEl);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDownCapture, true);
+      document.removeEventListener("keydown", handleEscape, true);
+      window.removeEventListener("resize", handleReposition);
+      window.removeEventListener("scroll", handleReposition, true);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    };
+  }, [isOpen, closePopover, computeAndSetPosition, autoFocusContent, anchorRef]);
+  React.useEffect(() => {
+    var _a, _b;
+    if (isOpen) return;
+    if (!returnFocus) return;
+    if (lastCloseReasonRef.current === "outside") return;
+    (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+  }, [isOpen, returnFocus]);
+  const icon = isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "dbc-muted-text", size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "dbc-muted-text", size: 20 });
+  const setOverlayRef = React__namespace.useCallback(
+    (node) => {
+      assignRef(overlayRef, node);
+    },
+    [overlayRef]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [
+        styles__default.default.container,
+        fullWidth ? styles__default.default.fullWidth : "",
+        fillTrigger ? styles__default.default.fillTrigger : ""
+      ].filter(Boolean).join(" "),
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: [
+              styles__default.default.triggerSlot,
+              fullWidth ? styles__default.default.fullWidth : "",
+              fillTrigger ? styles__default.default.fillTrigger : ""
+            ].filter(Boolean).join(" "),
+            children: Trigger(togglePopover, icon, isOpen)
+          }
+        ),
+        mounted && isOpen && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: resolvedContentId,
+              ref: (node) => {
+                contentRef.current = node;
+                setOverlayRef(node);
+              },
+              className: styles__default.default.content,
+              style: {
+                top: pos.top,
+                left: pos.left,
+                minWidth,
+                width: triggerWidth != null ? `${triggerWidth}px` : void 0,
+                maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+                maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), ${contentMaxHeightPx}px)`,
+                visibility: positioned ? void 0 : "hidden"
+              },
+              "data-cy": dataCy != null ? dataCy : "popover-content",
+              children: typeof children === "function" ? (
+                // eslint-disable-next-line react-hooks/refs
+                children(() => closePopover("api"))
+              ) : children
+            }
+          ),
+          portalTarget != null ? portalTarget : document.body
+        )
+      ]
+    }
+  );
+});
+Popover.displayName = "Popover";
+
+exports.Popover = Popover;

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+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;
+    minWidth?: string;
+    matchTriggerWidth?: boolean;
+    viewportPadding?: number;
+    contentMaxHeightPx?: number;
+    edgeBuffer?: number;
+    dataCy?: string;
+    fullWidth?: boolean;
+    fillTrigger?: boolean;
+    autoFocusContent?: boolean;
+    returnFocus?: boolean;
+    anchorRef?: React.RefObject<HTMLElement | null>;
+    overlayRef?: React.Ref<HTMLDivElement>;
+}
+export interface PopoverHandle {
+    close: () => void;
+    open: () => void;
+    isOpen: () => boolean;
+}
+export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverHandle>>;