@jirawatpyk/aura-react 4.4.1

package/dist/esm/TimePicker.js

@@ -0,0 +1,302 @@
+'use client';
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import { useStrings } from "./locale.js";
+import { Icon } from "./Icon.js";
+import { Field } from "./forms.js";
+const h = React.createElement;
+function pad(n) {
+  return (n < 10 ? "0" : "") + n;
+}
+function toMin(t) {
+  var m = /^(\d{2}):(\d{2})$/.exec(t || "");
+  return m ? +m[1] * 60 + +m[2] : null;
+}
+function fromMin(n) {
+  return pad(Math.floor(n / 60)) + ":" + pad(n % 60);
+}
+function parseTime(text) {
+  var s = String(text || "").trim().toLowerCase().replace(/\s*(น\.?|นาฬิกา)$/, "").trim();
+  var pm = /\s*(pm|p\.m\.)$/.test(s), am = /\s*(am|a\.m\.)$/.test(s);
+  s = s.replace(/\s*(am|pm|a\.m\.|p\.m\.)$/, "");
+  var m = /^(\d{1,2})(?:[:.](\d{2}))?$/.exec(s) || /^(\d{1,2})(\d{2})$/.exec(s);
+  if (!m) return null;
+  var hh = +m[1], mm = m[2] ? +m[2] : 0;
+  if (pm && hh < 12) hh += 12;
+  if (am && hh === 12) hh = 0;
+  if (hh > 23 || mm > 59) return null;
+  return pad(hh) + ":" + pad(mm);
+}
+const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
+  var t = useStrings();
+  var auto = uid(), id = props.id || auto, listId = id + "-list";
+  var st = useMaybeControlled(props.value, props.defaultValue == null ? null : props.defaultValue, props.onChange);
+  var value = st[0];
+  var step = props.step || 30, lo = toMin(props.min) != null ? toMin(props.min) : 0, hi = toMin(props.max) != null ? toMin(props.max) : 24 * 60 - 1;
+  var slots = React.useMemo(function() {
+    var out = [];
+    for (var m = lo; m <= hi; m += step) out.push(fromMin(m));
+    return out;
+  }, [lo, hi, step]);
+  function blocked(v) {
+    var n = toMin(v);
+    return n == null || n < lo || n > hi || props.isTimeDisabled && props.isTimeDisabled(v);
+  }
+  var openState = React.useState(false), open = openState[0], setOpen = openState[1];
+  var editState = React.useState(null), editing = editState[0], setEditing = editState[1];
+  var aState = React.useState(0), active = aState[0], setActive = aState[1];
+  var errState = React.useState(null);
+  var pos = React.useState(null);
+  var boxRef = React.useRef(null), inputRef = React.useRef(null), listRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef);
+  var mounted = useMounted();
+  function nearest(v) {
+    var n = toMin(v);
+    if (n == null) return 0;
+    var best = 0;
+    slots.forEach(function(s, i) {
+      if (Math.abs(toMin(s) - n) < Math.abs(toMin(slots[best]) - n)) best = i;
+    });
+    return best;
+  }
+  function place() {
+    if (!boxRef.current) return;
+    var r = boxRef.current.getBoundingClientRect(), below = window.innerHeight - r.bottom - 8, up = below < 200 && r.top > below;
+    pos[1]({ left: r.left, width: Math.max(r.width, 160), top: up ? void 0 : r.bottom + 4, bottom: up ? window.innerHeight - r.top + 4 : void 0, maxHeight: Math.min(280, (up ? r.top : below) - 8) });
+  }
+  useIsoLayoutEffect(function() {
+    if (open) place();
+  }, [open]);
+  React.useEffect(function() {
+    if (!open) return;
+    function outside(e) {
+      if (boxRef.current && boxRef.current.contains(e.target) || listRef.current && listRef.current.contains(e.target)) return;
+      setOpen(false);
+    }
+    function onScroll(e) {
+      if (!listRef.current || !listRef.current.contains(e.target)) place();
+    }
+    document.addEventListener("pointerdown", outside, true);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", place);
+    return function() {
+      document.removeEventListener("pointerdown", outside, true);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", place);
+    };
+  }, [open]);
+  React.useEffect(function() {
+    if (!open || !listRef.current) return;
+    var el = listRef.current.querySelector('[data-idx="' + active + '"]');
+    if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
+  }, [active, open]);
+  function show() {
+    if (open || props.disabled || props.readOnly) return;
+    setActive(nearest(value || props.suggest || fromMin(lo)));
+    setOpen(true);
+  }
+  function commit(v) {
+    if (v == null) {
+      errState[1](null);
+      st[1](null);
+      return true;
+    }
+    if (blocked(v)) {
+      errState[1](t.timeOutOfRange(fromMin(lo), fromMin(hi)));
+      return false;
+    }
+    errState[1](null);
+    st[1](v);
+    return true;
+  }
+  function choose(i) {
+    var v = slots[i];
+    if (!v || blocked(v)) return;
+    commit(v);
+    setEditing(null);
+    setOpen(false);
+    if (inputRef.current) inputRef.current.focus();
+  }
+  function commitTyped() {
+    if (editing == null) return;
+    var txt = editing.trim();
+    if (!txt) commit(null);
+    else {
+      var v = parseTime(txt);
+      if (v) commit(v);
+      else errState[1](t.timeInvalid);
+    }
+    setEditing(null);
+  }
+  function move(d) {
+    var i = active;
+    for (var k = 0; k < slots.length; k++) {
+      i = Math.min(slots.length - 1, Math.max(0, i + d));
+      if (!blocked(slots[i])) break;
+    }
+    setActive(i);
+  }
+  function onKeyDown(e) {
+    var k = e.key;
+    if (k === "ArrowDown") {
+      e.preventDefault();
+      if (!open) show();
+      else move(1);
+    } else if (k === "ArrowUp") {
+      e.preventDefault();
+      if (!open) show();
+      else move(-1);
+    } else if (k === "Home" && open) {
+      e.preventDefault();
+      setActive(0);
+    } else if (k === "End" && open) {
+      e.preventDefault();
+      setActive(slots.length - 1);
+    } else if (k === "PageDown" && open) {
+      e.preventDefault();
+      move(Math.max(1, Math.round(60 / step)));
+    } else if (k === "PageUp" && open) {
+      e.preventDefault();
+      move(-Math.max(1, Math.round(60 / step)));
+    } else if (k === "Enter") {
+      if (editing != null) {
+        e.preventDefault();
+        commitTyped();
+        setOpen(false);
+      } else if (open) {
+        e.preventDefault();
+        choose(active);
+      }
+    } else if (k === "Escape") {
+      if (open) {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(false);
+        setEditing(null);
+      }
+    } else if (k === "Tab") {
+      if (open) setOpen(false);
+    }
+  }
+  var error = errState[0] || props.error;
+  var list = open && mounted && pos[0] ? createPortal(
+    h(
+      "div",
+      { ref: listRef, className: "aura-combo__popover aura-time__popover", style: pos[0] },
+      h(
+        "ul",
+        { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" },
+        slots.map(function(s, i) {
+          var dis = blocked(s), sel = s === value;
+          return h(
+            "li",
+            {
+              key: s,
+              id: id + "-opt-" + i,
+              role: "option",
+              "data-idx": i,
+              "aria-selected": sel,
+              "aria-disabled": dis || void 0,
+              className: cx("aura-combo__option aura-time__option", i === active && "is-active", sel && "is-selected", dis && "is-disabled"),
+              onPointerDown: function(e) {
+                e.preventDefault();
+              },
+              onClick: function() {
+                choose(i);
+              },
+              onPointerMove: function() {
+                if (active !== i) setActive(i);
+              }
+            },
+            h("span", { className: "aura-combo__label" }, s),
+            sel ? h(Icon, { name: "check", className: "aura-combo__check" }) : null
+          );
+        })
+      )
+    ),
+    document.body
+  ) : null;
+  return h(
+    Field,
+    { id, label: props.label, hint: props.hint, error, required: props.required, optional: props.optional, disabled: props.disabled, className: props.className },
+    h(
+      "div",
+      { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") },
+      h(Icon, { name: "clock", className: "aura-input__icon" }),
+      h("input", {
+        ref: inputMerged,
+        id,
+        type: "text",
+        role: "combobox",
+        inputMode: "numeric",
+        autoComplete: "off",
+        className: "aura-input__control",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        "aria-autocomplete": "none",
+        "aria-activedescendant": open && editing == null ? id + "-opt-" + active : void 0,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? id + "-error" : props.hint ? id + "-hint" : void 0,
+        placeholder: props.placeholder || t.timePlaceholder,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        required: props.required,
+        name: props.name,
+        value: editing != null ? editing : value || "",
+        onChange: function(e) {
+          setEditing(e.target.value);
+          var v = parseTime(e.target.value);
+          if (v) {
+            if (!open) show();
+            setActive(nearest(v));
+          }
+        },
+        onClick: show,
+        onKeyDown,
+        onBlur: function() {
+          setTimeout(function() {
+            if (listRef.current && listRef.current.contains(document.activeElement)) return;
+            commitTyped();
+            setOpen(false);
+          }, 0);
+        }
+      }),
+      props.clearable !== false && value != null && !props.disabled ? h("button", {
+        type: "button",
+        className: "aura-combo__clear",
+        "aria-label": t.clear(props.label),
+        tabIndex: -1,
+        onClick: function() {
+          commit(null);
+          setEditing(null);
+          if (inputRef.current) inputRef.current.focus();
+        }
+      }, h(Icon, { name: "x" })) : null,
+      h(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-hidden": true,
+          className: "aura-combo__toggle",
+          onPointerDown: function(e) {
+            e.preventDefault();
+          },
+          onClick: function() {
+            if (open) setOpen(false);
+            else {
+              show();
+              inputRef.current && inputRef.current.focus();
+            }
+          }
+        },
+        h(Icon, { name: "chevron-down" })
+      )
+    ),
+    list
+  );
+});
+export {
+  TimePicker,
+  parseTime
+};

package/dist/esm/extra.js

@@ -0,0 +1,328 @@
+'use client';
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cx, omit, uid, useMaybeControlled, useMergedRef, useMounted, useIsoLayoutEffect, trapTab, FOCUSABLE } from "./internal.js";
+import { useStrings } from "./locale.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+const h = React.createElement;
+var TONES = ["neutral", "accent", "success", "warning", "danger"];
+function tone(t) {
+  return TONES.indexOf(t) >= 0 ? t : "neutral";
+}
+const Badge = React.forwardRef(function Badge2(props, ref) {
+  var rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
+  return h(
+    "span",
+    Object.assign({}, 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 ? h(Icon, { name: props.icon, size: 12 }) : null,
+    props.children
+  );
+});
+const Tag = React.forwardRef(function Tag2(props, ref) {
+  var t = useStrings();
+  var selectable = props.onClick != null || props.selected != null;
+  var rest = omit(props, ["onRemove", "selected", "icon", "className", "children", "disabled", "removeLabel"]);
+  var inner = [props.icon ? h(Icon, { key: "i", name: props.icon, size: 14 }) : null, h("span", { key: "t", className: "aura-tag__text" }, props.children)];
+  if (selectable) {
+    return h(
+      "button",
+      Object.assign({}, rest, {
+        ref,
+        type: "button",
+        "aria-pressed": !!props.selected,
+        disabled: props.disabled,
+        className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
+      }),
+      props.selected ? h(Icon, { name: "check", size: 14 }) : inner[0],
+      inner[1]
+    );
+  }
+  return h(
+    "span",
+    Object.assign({}, rest, { ref, className: cx("aura-tag", props.disabled && "is-disabled", props.className) }),
+    inner,
+    props.onRemove && !props.disabled ? h(
+      "button",
+      { type: "button", className: "aura-tag__remove", "aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""), onClick: props.onRemove },
+      h(Icon, { name: "x", size: 12 })
+    ) : null
+  );
+});
+const Progress = React.forwardRef(function Progress2(props, ref) {
+  var auto = uid(), id = props.id || auto;
+  var max = props.max || 100, det = props.value != null;
+  var pct = det ? Math.max(0, Math.min(100, props.value / max * 100)) : 0;
+  var shown = props.valueLabel != null ? props.valueLabel : det ? Math.round(pct) + "%" : null;
+  return h(
+    "div",
+    { ref, className: cx("aura-progress", "aura-progress--" + tone(props.tone || "accent"), props.size === "sm" && "is-sm", props.className) },
+    props.label || props.showValue && shown ? h(
+      "div",
+      { className: "aura-progress__head" },
+      props.label ? h("span", { className: "aura-progress__label", id: id + "-label" }, props.label) : h("span"),
+      props.showValue && shown ? h("span", { className: "aura-progress__value" }, shown) : null
+    ) : null,
+    h(
+      "div",
+      {
+        className: cx("aura-progress__track", !det && "is-indeterminate"),
+        role: "progressbar",
+        "aria-labelledby": props.label ? id + "-label" : void 0,
+        "aria-label": props.label ? void 0 : props["aria-label"],
+        "aria-valuemin": det ? 0 : void 0,
+        "aria-valuemax": det ? max : void 0,
+        "aria-valuenow": det ? props.value : void 0,
+        "aria-valuetext": det && props.valueLabel != null ? String(props.valueLabel) : void 0
+      },
+      h("span", { className: "aura-progress__bar", style: det ? { width: pct + "%" } : void 0 })
+    ),
+    props.hint ? h("p", { className: "aura-progress__hint" }, props.hint) : null
+  );
+});
+const Skeleton = React.forwardRef(function Skeleton2(props, ref) {
+  var v = props.variant || "text";
+  if (v === "text" && (props.lines || 1) > 1) {
+    var n = props.lines, rows = [];
+    for (var i = 0; i < n; i++) rows.push(h("span", { key: i, className: "aura-skel aura-skel--text", style: { width: i === n - 1 ? "60%" : "100%" } }));
+    return h("span", { ref, className: cx("aura-skel-lines", props.className), "aria-hidden": true, style: props.width ? { width: props.width } : void 0 }, rows);
+  }
+  var style = { width: props.width, height: props.height };
+  if (v === "circle") {
+    style.width = style.height = props.size || props.width || 40;
+  }
+  return h("span", { ref, "aria-hidden": true, className: cx("aura-skel", "aura-skel--" + v, props.className), style });
+});
+const EmptyState = React.forwardRef(function EmptyState2(props, ref) {
+  var HT = "h" + (props.headingLevel || 3);
+  return h(
+    "div",
+    { ref, className: cx("aura-empty", props.size === "sm" && "is-sm", props.bordered && "is-bordered", props.className) },
+    h("span", { className: "aura-empty__icon", "aria-hidden": true }, h(Icon, { name: props.icon || "inbox", size: props.size === "sm" ? "md" : "lg" })),
+    h(HT, { className: "aura-empty__title" }, props.title),
+    props.description ? h("p", { className: "aura-empty__text" }, props.description) : null,
+    props.action ? h("div", { className: "aura-empty__action" }, props.action) : null
+  );
+});
+function pageList(page, count, sib) {
+  var 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 (var 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) {
+  var t = useStrings();
+  var count = Math.max(1, props.pageCount || 1);
+  var st = useMaybeControlled(props.page, props.defaultPage || 1, props.onChange);
+  var page = Math.min(count, Math.max(1, st[0]));
+  function go(p) {
+    if (p >= 1 && p <= count && p !== page) st[1](p);
+  }
+  var link = props.getHref;
+  function item(p, label, extra) {
+    var 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 ? h("a", Object.assign({ href: link(p), onClick: function(e) {
+      if (props.onChange) {
+        e.preventDefault();
+        go(p);
+      }
+    } }, common), label) : h("button", Object.assign({ type: "button", onClick: function() {
+      go(p);
+    } }, common), label);
+  }
+  return h(
+    "nav",
+    { ref, className: cx("aura-pagination", props.className), "aria-label": props.label || t.pagination },
+    h(IconButton, { icon: "chevron-left", label: t.prevPage, disabled: page <= 1, onClick: function() {
+      go(page - 1);
+    } }),
+    h("ol", { className: "aura-pagination__list" }, pageList(page, count, props.siblingCount == null ? 1 : props.siblingCount).map(function(p) {
+      return typeof p === "number" ? h("li", { key: p }, item(p, p)) : h("li", { key: p, className: "aura-pagination__gap", "aria-hidden": true }, "\u2026");
+    })),
+    h("span", { className: "aura-pagination__compact", "aria-hidden": true }, t.page(page, count)),
+    h(IconButton, { icon: "chevron-right", label: t.nextPage, disabled: page >= count, onClick: function() {
+      go(page + 1);
+    } })
+  );
+});
+const Accordion = React.forwardRef(function Accordion2(props, ref) {
+  var auto = uid(), base = props.id || auto;
+  var multiple = props.type === "multiple";
+  var st = useMaybeControlled(props.value, props.defaultValue != null ? props.defaultValue : multiple ? [] : null, props.onChange);
+  var open = multiple ? st[0] || [] : st[0] ? [st[0]] : [];
+  var HT = "h" + (props.headingLevel || 3);
+  var items = props.items || [];
+  function toggle(id) {
+    var 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) {
+    var btns = Array.prototype.slice.call(e.currentTarget.querySelectorAll(":scope > .aura-accordion__item > .aura-accordion__heading > button:not([disabled])"));
+    var 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 h(
+    "div",
+    { ref, className: cx("aura-accordion", props.className), onKeyDown: onKey },
+    items.map(function(it) {
+      var on = open.indexOf(it.id) >= 0, bid = base + "-btn-" + it.id, pid = base + "-panel-" + it.id;
+      return h(
+        "div",
+        { key: it.id, className: cx("aura-accordion__item", on && "is-open") },
+        h(
+          HT,
+          { className: "aura-accordion__heading" },
+          h(
+            "button",
+            { type: "button", id: bid, "aria-expanded": on, "aria-controls": pid, disabled: it.disabled, onClick: function() {
+              toggle(it.id);
+            } },
+            it.icon ? h(Icon, { name: it.icon, className: "aura-accordion__lead" }) : null,
+            h(
+              "span",
+              { className: "aura-accordion__title" },
+              it.title,
+              it.description ? h("span", { className: "aura-accordion__desc" }, it.description) : null
+            ),
+            h(Icon, { name: "chevron-down", className: "aura-accordion__chevron" })
+          )
+        ),
+        h("div", { id: pid, role: "region", "aria-labelledby": bid, className: "aura-accordion__panel", hidden: !on }, it.content)
+      );
+    })
+  );
+});
+function position(anchor, pop, placement) {
+  var r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, gap = 6;
+  var 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";
+  var top = side === "top" ? r.top - gap - ph : r.bottom + gap;
+  var 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) {
+  var t = useStrings();
+  var auto = uid(), id = props.id || auto;
+  var st = useMaybeControlled(props.open, !!props.defaultOpen, props.onOpenChange);
+  var open = !!st[0];
+  var wrap = React.useRef(null), pop = React.useRef(null), popMerged = useMergedRef(ref, pop);
+  var 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) {
+      var 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) {
+      var 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]);
+  var child = React.Children.only(props.trigger);
+  var panel = open && mounted ? createPortal(
+    h(
+      "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 ? h(
+        "div",
+        { className: "aura-popover__head" },
+        h("p", { className: "aura-popover__title", id: id + "-title" }, props.title),
+        h(IconButton, { icon: "x", label: t.close, onClick: function() {
+          close(true);
+        } })
+      ) : null,
+      h("div", { className: "aura-popover__body" }, typeof props.children === "function" ? props.children({ close: function() {
+        close(true);
+      } }) : props.children)
+    ),
+    document.body
+  ) : null;
+  return h(
+    "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 {
+  Accordion,
+  Badge,
+  EmptyState,
+  Pagination,
+  Popover,
+  Progress,
+  Skeleton,
+  Tag
+};