@jirawatpyk/aura-react 4.7.2 → 4.8.0

package/dist/esm/Accordion.js

@@ -0,0 +1,66 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, uid, useMaybeControlled } from "./internal.js";
+const h = React.createElement;
+const Accordion = React.forwardRef(function Accordion2(props, ref) {
+  const auto = uid(), base = props.id || auto;
+  const multiple = props.type === "multiple";
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue != null ? props.defaultValue : multiple ? [] : null,
+    props.onChange
+  );
+  const open = multiple ? st[0] || [] : st[0] ? [st[0]] : [];
+  const HT = "h" + (props.headingLevel || 3);
+  const items = props.items || [];
+  function toggle(id) {
+    const isOpen = open.indexOf(id) >= 0;
+    if (multiple)
+      st[1](
+        isOpen ? open.filter(function(x) {
+          return x !== id;
+        }) : open.concat([id])
+      );
+    else st[1](isOpen ? props.collapsible === false ? id : null : id);
+  }
+  function onKey(e) {
+    const btns = Array.prototype.slice.call(
+      e.currentTarget.querySelectorAll(
+        ":scope > .aura-accordion__item > .aura-accordion__heading > button:not([disabled])"
+      )
+    );
+    let i = btns.indexOf(document.activeElement), k = e.key, n = null;
+    if (i < 0) return;
+    if (k === "ArrowDown") n = btns[(i + 1) % btns.length];
+    else if (k === "ArrowUp") n = btns[(i - 1 + btns.length) % btns.length];
+    else if (k === "Home") n = btns[0];
+    else if (k === "End") n = btns[btns.length - 1];
+    if (n) {
+      e.preventDefault();
+      n.focus();
+    }
+  }
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey }, items.map(function(it) {
+    const on = open.indexOf(it.id) >= 0, bid = base + "-btn-" + it.id, pid = base + "-panel-" + it.id;
+    return /* @__PURE__ */ React.createElement("div", { key: it.id, className: cx("aura-accordion__item", on && "is-open") }, /* @__PURE__ */ React.createElement(HT, { className: "aura-accordion__heading" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        id: bid,
+        "aria-expanded": on,
+        "aria-controls": pid,
+        disabled: it.disabled,
+        onClick: function() {
+          toggle(it.id);
+        }
+      },
+      it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
+      /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__title" }, it.title, it.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-accordion__desc" }, it.description) : null),
+      /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
+    )), /* @__PURE__ */ React.createElement("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content));
+  }));
+});
+export {
+  Accordion
+};

package/dist/esm/Alert.js

@@ -0,0 +1,31 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+const ALERT_ICON = {
+  info: "info",
+  success: "circle-check",
+  warning: "triangle-alert",
+  danger: "circle-alert"
+};
+const Alert = React.forwardRef(function Alert2(props, ref) {
+  const t = useStrings();
+  const tone = props.tone || "info";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cx("aura-alert", "aura-alert--" + tone, props.className),
+      role: tone === "danger" || tone === "warning" ? "alert" : "status"
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: ALERT_ICON[tone], className: "aura-alert__icon" }),
+    /* @__PURE__ */ React.createElement("div", { className: "aura-alert__body" }, props.title ? /* @__PURE__ */ React.createElement("p", { className: "aura-alert__title" }, props.title) : null, props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__text" }, props.children) : null, props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-alert__action" }, props.action) : null),
+    props.onDismiss ? /* @__PURE__ */ React.createElement(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
+  );
+});
+export {
+  ALERT_ICON,
+  Alert
+};

package/dist/esm/AppShell.js

@@ -0,0 +1,55 @@
+'use client';
+import * as React from "react";
+import { Drawer } from "./Dialog.js";
+import { IconButton } from "./IconButton.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+import { useBreakpoint } from "./responsive.js";
+const AppShell = React.forwardRef(function AppShell2(props, ref) {
+  const t = useStrings();
+  const bp = useBreakpoint();
+  const compact = bp === "base" || bp === "sm" || bp === "md";
+  const st = React.useState(false), open = st[0], setOpen = st[1];
+  React.useEffect(
+    function() {
+      if (!compact) setOpen(false);
+    },
+    [compact]
+  );
+  const navEl = props.nav;
+  const nav = props.nav && React.isValidElement(props.nav) && compact ? React.cloneElement(navEl, {
+    onChange: function(id) {
+      if (navEl.props.onChange) navEl.props.onChange(id);
+      setOpen(false);
+    },
+    className: cx(navEl.props.className, "is-in-drawer")
+  }) : props.nav;
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", compact && "is-compact", props.className) }, !compact ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, nav) : null, compact ? /* @__PURE__ */ React.createElement(
+    Drawer,
+    {
+      open,
+      onClose: function() {
+        setOpen(false);
+      },
+      side: "left",
+      size: "nav",
+      "aria-label": props.navLabel || t.navigation,
+      dismissible: true
+    },
+    nav
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      icon: "menu",
+      label: props.menuLabel || t.openNav,
+      size: "md",
+      onClick: function() {
+        setOpen(true);
+      },
+      "aria-expanded": open
+    }
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__bar-content" }, props.header)) : null, /* @__PURE__ */ React.createElement("main", { className: "aura-shell__content", id: props.mainId || "main" }, props.children)));
+});
+export {
+  AppShell
+};

package/dist/esm/Avatar.js

@@ -0,0 +1,39 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+const AVATAR_TONES = ["progress", "ready", "neutral", "warning"];
+function initials(name) {
+  const parts = String(name || "?").trim().split(/\s+/);
+  return ((parts[0] || "?")[0] + (parts.length > 1 ? parts[parts.length - 1][0] : parts[0][1] || "")).toUpperCase();
+}
+const Avatar = React.forwardRef(function Avatar2(props, ref) {
+  const size = props.size || "md", errState = React.useState(false);
+  let hash = 0;
+  String(props.name || "").split("").forEach(function(ch) {
+    hash = hash * 31 + ch.charCodeAt(0) >>> 0;
+  });
+  const tone = AVATAR_TONES[hash % AVATAR_TONES.length];
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref,
+      className: cx("aura-avatar", "aura-avatar--" + size, "aura-avatar--" + tone, props.className),
+      role: "img",
+      "aria-label": props.name + (props.status ? ", " + props.status : "")
+    },
+    props.src && !errState[0] ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: props.src,
+        alt: "",
+        onError: function() {
+          errState[1](true);
+        }
+      }
+    ) : /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, initials(props.name)),
+    props.status === "online" ? /* @__PURE__ */ React.createElement("span", { className: "aura-avatar__status", "aria-hidden": true }) : null
+  );
+});
+export {
+  Avatar
+};

package/dist/esm/Badge.js

@@ -0,0 +1,26 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx, omit, tone } from "./internal.js";
+const Badge = React.forwardRef(function Badge2(props, ref) {
+  const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ...rest,
+      ref,
+      className: cx(
+        "aura-badge",
+        "aura-badge--" + tone(props.tone),
+        props.variant === "solid" && "is-solid",
+        props.variant === "outline" && "is-outline",
+        props.className
+      )
+    },
+    props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon, size: 12 }) : null,
+    props.children
+  );
+});
+export {
+  Badge
+};

package/dist/esm/Breadcrumb.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+const Breadcrumb = React.forwardRef(function Breadcrumb2(props, ref) {
+  const t = useStrings();
+  const items = props.items || [];
+  return /* @__PURE__ */ React.createElement("nav", { ref, "aria-label": props.label || t.breadcrumb, className: cx("aura-crumbs", props.className) }, /* @__PURE__ */ React.createElement("ol", null, items.map(function(it, i) {
+    const last = i === items.length - 1;
+    return /* @__PURE__ */ React.createElement("li", { key: i }, last ? /* @__PURE__ */ React.createElement("span", { "aria-current": "page", className: "aura-crumbs__current" }, it.label) : it.href ? /* @__PURE__ */ React.createElement("a", { href: it.href, onClick: it.onClick }, it.label) : /* @__PURE__ */ React.createElement("button", { type: "button", onClick: it.onClick }, it.label), last ? null : /* @__PURE__ */ React.createElement(Icon, { name: "chevron-right", size: 12, className: "aura-crumbs__sep" }));
+  })));
+});
+export {
+  Breadcrumb
+};

package/dist/esm/Card.js

@@ -0,0 +1,26 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+const h = React.createElement;
+const Card = React.forwardRef(function Card2(props, ref) {
+  const creative = props.variant === "creative";
+  return h(
+    props.as || "section",
+    {
+      ref,
+      className: cx(
+        "aura-card",
+        creative && "aura-card--creative",
+        props.interactive && "is-interactive",
+        props.className
+      ),
+      "aria-labelledby": props.title && props.titleId ? props.titleId : void 0
+    },
+    props.title || props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__head" }, /* @__PURE__ */ React.createElement("div", { className: "aura-card__heading" }, props.title ? h("h" + (props.headingLevel || 3), { className: "aura-card__title", id: props.titleId }, props.title) : null, props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-card__desc" }, props.description) : null), props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__actions" }, props.actions) : null) : null,
+    props.children ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__body" }, props.children) : null,
+    props.footer ? /* @__PURE__ */ React.createElement("div", { className: "aura-card__foot" }, props.footer) : null
+  );
+});
+export {
+  Card
+};

package/dist/esm/Combobox.js

@@ -4,7 +4,7 @@ import { useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
 import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
-import { Field } from "./forms.js";
+import { Field } from "./Field.js";
 function norm(s) {
   return String(s == null ? "" : s).normalize("NFC").toLocaleLowerCase("th");
 }

package/dist/esm/Container.js

@@ -0,0 +1,18 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+const h = React.createElement;
+const Container = React.forwardRef(function Container2(props, ref) {
+  return h(
+    props.as || "div",
+    {
+      ref,
+      className: cx("aura-container", props.size === "narrow" && "is-narrow", props.className),
+      style: props.style
+    },
+    props.children
+  );
+});
+export {
+  Container
+};

package/dist/esm/DatePicker.js

@@ -5,7 +5,7 @@ import { createPortal } from "react-dom";
 import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, trapTab, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { Field } from "./forms.js";
+import { Field } from "./Field.js";
 const ERA = /^พ\.ศ\.\s?|\s?(BE|พ\.ศ\.)$/g;
 const pad = function(n) {
   return (n < 10 ? "0" : "") + n;

package/dist/esm/Dialog.js

@@ -4,7 +4,7 @@ import { useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
 import { cx, uid, useMergedRef } from "./internal.js";
 import { IconButton } from "./IconButton.js";
-import { useModal } from "./overlay.js";
+import { useModal } from "./useModal.js";
 const Dialog = React.forwardRef(function Dialog2(props, ref) {
   const t = useStrings();
   const own = React.useRef(null), merged = useMergedRef(ref, own), titleId = uid(), descId = uid();

package/dist/esm/EmptyState.js

@@ -0,0 +1,22 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx } from "./internal.js";
+const h = React.createElement;
+const EmptyState = React.forwardRef(function EmptyState2(props, ref) {
+  const HT = "h" + (props.headingLevel || 3);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className)
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
+    /* @__PURE__ */ React.createElement(HT, { className: "aura-empty__title" }, props.title),
+    props.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-empty__text" }, props.description) : null,
+    props.action ? /* @__PURE__ */ React.createElement("div", { className: "aura-empty__action" }, props.action) : null
+  );
+});
+export {
+  EmptyState
+};

package/dist/esm/Field.js

@@ -0,0 +1,46 @@
+'use client';
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { cx } from "./internal.js";
+import { useStrings } from "./locale.js";
+const h = React.createElement;
+const Field = React.forwardRef(function Field2(props, ref) {
+  const t = useStrings();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cx("aura-field", props.error && "is-invalid", props.disabled && "is-disabled", props.className)
+    },
+    props.label ? h(
+      props.labelAs || "label",
+      { className: "aura-field__label", htmlFor: props.labelAs ? void 0 : props.id, id: props.labelId },
+      props.label,
+      props.required ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
+      props.optional ? /* @__PURE__ */ React.createElement("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
+    ) : null,
+    props.children,
+    props.error ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__error", id: props.id + "-error" }, /* @__PURE__ */ React.createElement(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? /* @__PURE__ */ React.createElement("p", { className: "aura-field__hint", id: props.id + "-hint" }, props.hint) : null
+  );
+});
+function describedBy(id, p) {
+  return p.error ? id + "-error" : p.hint ? id + "-hint" : void 0;
+}
+const FIELD_KEYS = [
+  "label",
+  "hint",
+  "error",
+  "required",
+  "optional",
+  "icon",
+  "className",
+  "id",
+  "suffix",
+  "options",
+  "placeholder"
+];
+export {
+  FIELD_KEYS,
+  Field,
+  describedBy
+};

package/dist/esm/FileUpload.js

@@ -4,7 +4,7 @@ import { cx, uid, useMaybeControlled, useMergedRef } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { Field } from "./forms.js";
+import { Field } from "./Field.js";
 function formatBytes(n) {
   if (n == null) return "";
   if (n < 1024) return n + " B";

package/dist/esm/Grid.js

@@ -0,0 +1,21 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+import { respVars, space } from "./responsive.js";
+const h = React.createElement;
+const Grid = React.forwardRef(function Grid2(props, ref) {
+  const style = Object.assign(
+    {},
+    respVars("aura-grid-gap", props.gap == null ? 6 : props.gap, space),
+    props.minItemWidth ? { gridTemplateColumns: "repeat(auto-fill, minmax(min(" + props.minItemWidth + "px, 100%), 1fr))" } : respVars("aura-grid-cols", props.columns || 1),
+    props.style
+  );
+  return h(
+    props.as || "div",
+    { ref, className: cx("aura-grid-layout", props.minItemWidth && "is-auto", props.className), style },
+    props.children
+  );
+});
+export {
+  Grid
+};

package/dist/esm/Pagination.js

@@ -0,0 +1,94 @@
+'use client';
+import * as React from "react";
+import { IconButton } from "./IconButton.js";
+import { cx, useMaybeControlled } from "./internal.js";
+import { useStrings } from "./locale.js";
+function pageList(page, count, sib) {
+  let out = [], lo = Math.max(2, page - sib), hi = Math.min(count - 1, page + sib);
+  if (page - sib <= 3) {
+    lo = 2;
+    hi = Math.min(count - 1, Math.max(hi, 3 + 2 * sib));
+  }
+  if (page + sib >= count - 2) {
+    hi = count - 1;
+    lo = Math.max(2, Math.min(lo, count - 2 - 2 * sib));
+  }
+  out.push(1);
+  if (lo === 3) out.push(2);
+  else if (lo > 3) out.push("\u2026a");
+  for (let i = lo; i <= hi; i++) out.push(i);
+  if (hi === count - 2) out.push(count - 1);
+  else if (hi < count - 2) out.push("\u2026b");
+  if (count > 1) out.push(count);
+  return out;
+}
+const Pagination = React.forwardRef(function Pagination2(props, ref) {
+  const t = useStrings();
+  const count = Math.max(1, props.pageCount || 1);
+  const st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
+  const page = Math.min(count, Math.max(1, st[0]));
+  function go(p) {
+    if (p >= 1 && p <= count && p !== page) st[1](p);
+  }
+  const link = props.getHref;
+  function item(p, label, extra) {
+    const common = Object.assign(
+      {
+        className: cx("aura-page", p === page && "is-current"),
+        "aria-current": p === page ? "page" : void 0,
+        "aria-label": t.pageN(p)
+      },
+      extra
+    );
+    return link ? /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: link(p),
+        onClick: function(e) {
+          if (props.onChange) {
+            e.preventDefault();
+            go(p);
+          }
+        },
+        ...common
+      },
+      label
+    ) : /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: function() {
+          go(p);
+        },
+        ...common
+      },
+      label
+    );
+  }
+  return /* @__PURE__ */ React.createElement("nav", { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      icon: "chevron-left",
+      label: t.prevPage,
+      disabled: page <= 1,
+      onClick: function() {
+        go(page - 1);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement("ol", { className: "aura-pagination__list" }, pageList(page, count, props.siblingCount == null ? 1 : props.siblingCount).map(function(p) {
+    return typeof p === "number" ? /* @__PURE__ */ React.createElement("li", { key: p }, item(p, p)) : /* @__PURE__ */ React.createElement("li", { key: p, className: "aura-pagination__gap", "aria-hidden": true }, "\u2026");
+  })), /* @__PURE__ */ React.createElement("span", { className: "aura-pagination__compact", "aria-hidden": true }, t.page(page, count)), /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      icon: "chevron-right",
+      label: t.nextPage,
+      disabled: page >= count,
+      onClick: function() {
+        go(page + 1);
+      }
+    }
+  ));
+});
+export {
+  Pagination
+};

package/dist/esm/Popover.js

@@ -0,0 +1,131 @@
+'use client';
+import * as React from "react";
+import { IconButton } from "./IconButton.js";
+import {
+  FOCUSABLE,
+  cx,
+  trapTab,
+  uid,
+  useIsoLayoutEffect,
+  useMaybeControlled,
+  useMergedRef,
+  useMounted
+} from "./internal.js";
+import { useStrings } from "./locale.js";
+import { createPortal } from "react-dom";
+function position(anchor, pop, placement) {
+  const r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
+  let side = (placement || "bottom-start").split("-")[0], align = (placement || "bottom-start").split("-")[1] || "start";
+  if (side === "bottom" && r.bottom + gap + ph > vh - 8 && r.top - gap - ph > 8) side = "top";
+  else if (side === "top" && r.top - gap - ph < 8 && r.bottom + gap + ph < vh - 8) side = "bottom";
+  const top = side === "top" ? r.top - gap - ph : r.bottom + gap;
+  const left = align === "end" ? r.right - pw : align === "center" ? r.left + r.width / 2 - pw / 2 : r.left;
+  return { top: Math.max(8, top), left: Math.max(8, Math.min(left, vw - pw - 8)), side };
+}
+const Popover = React.forwardRef(function Popover2(props, ref) {
+  const t = useStrings();
+  const auto = uid(), id = props.id || auto;
+  const st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
+  const open = !!st[0];
+  const wrap = React.useRef(null), pop = React.useRef(null), popMerged = useMergedRef(ref, pop);
+  const pos = React.useState(null), mounted = useMounted();
+  function trigger() {
+    return wrap.current && (wrap.current.querySelector('button, [role="button"], a, input') || wrap.current.firstElementChild);
+  }
+  function close(restore) {
+    st[1](false);
+    if (restore) {
+      const tr = trigger();
+      if (tr && tr.focus) tr.focus();
+    }
+  }
+  useIsoLayoutEffect(
+    function() {
+      if (!open || !pop.current || !trigger()) return;
+      function place() {
+        if (pop.current && trigger()) pos[1](position(trigger(), pop.current, props.placement));
+      }
+      place();
+      window.addEventListener("resize", place);
+      window.addEventListener("scroll", place, true);
+      return function() {
+        window.removeEventListener("resize", place);
+        window.removeEventListener("scroll", place, true);
+      };
+    },
+    [open, mounted, props.placement]
+  );
+  React.useEffect(
+    function() {
+      if (!open || !mounted) return;
+      if (props.autoFocus !== false && pop.current) {
+        const f = pop.current.querySelector("[data-autofocus]") || pop.current.querySelector(FOCUSABLE);
+        (f || pop.current).focus();
+      }
+      function outside(e) {
+        if (pop.current && pop.current.contains(e.target)) return;
+        if (wrap.current && wrap.current.contains(e.target)) return;
+        close(false);
+      }
+      document.addEventListener("pointerdown", outside, true);
+      return function() {
+        document.removeEventListener("pointerdown", outside, true);
+      };
+    },
+    [open, mounted]
+  );
+  const child = React.Children.only(props.trigger);
+  const panel = open && mounted ? createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: popMerged,
+        id,
+        role: "dialog",
+        "aria-modal": false,
+        "aria-label": props.title ? void 0 : props.label,
+        "aria-labelledby": props.title ? id + "-title" : void 0,
+        tabIndex: -1,
+        className: cx("aura-popover", pos[0] && "is-" + pos[0].side, props.className),
+        style: Object.assign(
+          { top: pos[0] ? pos[0].top : -9999, left: pos[0] ? pos[0].left : -9999 },
+          props.width ? { width: props.width } : null
+        ),
+        onKeyDown: function(e) {
+          if (e.key === "Escape") {
+            e.stopPropagation();
+            close(true);
+          } else trapTab(e, pop.current);
+        }
+      },
+      props.title ? /* @__PURE__ */ React.createElement("div", { className: "aura-popover__head" }, /* @__PURE__ */ React.createElement("p", { className: "aura-popover__title", id: id + "-title" }, props.title), /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          icon: "x",
+          label: t.close,
+          onClick: function() {
+            close(true);
+          }
+        }
+      )) : null,
+      /* @__PURE__ */ React.createElement("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({
+        close: function() {
+          close(true);
+        }
+      }) : props.children)
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ React.createElement("span", { ref: wrap, className: "aura-popover-anchor" }, React.cloneElement(child, {
+    onClick: function(e) {
+      if (child.props.onClick) child.props.onClick(e);
+      st[1](!open);
+    },
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    "aria-controls": open ? id : void 0
+  }), panel);
+});
+export {
+  Popover
+};