@jirawatpyk/aura-react 4.5.0 → 4.6.0

package/dist/esm/Button.js

@@ -2,14 +2,14 @@
 import * as React from "react";
 import { cx, omit } from "./internal.js";
 import { Icon } from "./Icon.js";
-const h = React.createElement;
 const Button = React.forwardRef(function Button2(props, ref) {
-  var variant = props.variant || "primary";
-  var loading = !!props.loading;
-  var rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
-  return h(
+  const variant = props.variant || "primary";
+  const loading = !!props.loading;
+  const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
+  return /* @__PURE__ */ React.createElement(
     "button",
-    Object.assign({}, rest, {
+    {
+      ...rest,
       ref,
       type: props.type || "button",
       className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
@@ -18,10 +18,10 @@ const Button = React.forwardRef(function Button2(props, ref) {
       onClick: loading ? function(e) {
         e.preventDefault();
       } : props.onClick
-    }),
-    loading ? h(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? h(Icon, { name: props.icon }) : null,
+    },
+    loading ? /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }) : props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon }) : null,
     props.children,
-    props.iconRight && !loading ? h(Icon, { name: props.iconRight }) : null
+    props.iconRight && !loading ? /* @__PURE__ */ React.createElement(Icon, { name: props.iconRight }) : null
   );
 });
 export {

package/dist/esm/Checkbox.js

@@ -2,46 +2,54 @@
 import * as React from "react";
 import { cx, omit, useMergedRef, useMaybeControlled } from "./internal.js";
 import { Icon } from "./Icon.js";
-const h = React.createElement;
 const Checkbox = React.forwardRef(function Checkbox2(props, ref) {
-  var own = React.useRef(null), merged = useMergedRef(ref, own);
-  var st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
-  var on = !!st[0];
+  const own = React.useRef(null), merged = useMergedRef(ref, own);
+  const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
+  const on = !!st[0];
   React.useEffect(function() {
     if (own.current) own.current.indeterminate = !!props.indeterminate;
   });
-  var rest = omit(props, ["checked", "defaultChecked", "onChange", "indeterminate", "label", "children", "description", "className", "tabIndex", "disabled"]);
-  var labelled = props.children != null;
-  var descId = props.description && props.id ? props.id + "-desc" : void 0;
-  return h(
+  const rest = omit(props, [
+    "checked",
+    "defaultChecked",
+    "onChange",
+    "indeterminate",
     "label",
-    { className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className), onClick: function(e) {
-      e.stopPropagation();
-    } },
-    h("input", Object.assign({}, rest, {
-      ref: merged,
-      type: "checkbox",
-      className: "aura-check__input",
-      checked: on,
-      tabIndex: props.tabIndex,
-      disabled: props.disabled,
-      "aria-describedby": descId,
-      "aria-label": labelled ? void 0 : props.label,
-      onChange: function(e) {
-        st[1](e.target.checked);
+    "children",
+    "description",
+    "className",
+    "tabIndex",
+    "disabled"
+  ]);
+  const labelled = props.children != null;
+  const descId = props.description && props.id ? props.id + "-desc" : void 0;
+  return /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      className: cx("aura-check", labelled && "aura-check--labelled", props.disabled && "is-disabled", props.className),
+      onClick: function(e) {
+        e.stopPropagation();
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ...rest,
+        ref: merged,
+        type: "checkbox",
+        className: "aura-check__input",
+        checked: on,
+        tabIndex: props.tabIndex,
+        disabled: props.disabled,
+        "aria-describedby": descId,
+        "aria-label": labelled ? void 0 : props.label,
+        onChange: function(e) {
+          st[1](e.target.checked);
+        }
       }
-    })),
-    h(
-      "span",
-      { className: "aura-check__box", "aria-hidden": true },
-      props.indeterminate ? h(Icon, { name: "minus", size: 12, strokeWidth: 3 }) : on ? h(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null
     ),
-    labelled ? h(
-      "span",
-      { className: "aura-check__text" },
-      h("span", { className: "aura-check__label" }, props.children),
-      props.description ? h("span", { className: "aura-check__desc", id: descId }, props.description) : null
-    ) : null
+    /* @__PURE__ */ React.createElement("span", { className: "aura-check__box", "aria-hidden": true }, props.indeterminate ? /* @__PURE__ */ React.createElement(Icon, { name: "minus", size: 12, strokeWidth: 3 }) : on ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null),
+    labelled ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-check__label" }, props.children), props.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-check__desc", id: descId }, props.description) : null) : null
   );
 });
 export {

package/dist/esm/Combobox.js

@@ -5,7 +5,6 @@ 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";
-const h = React.createElement;
 function norm(s) {
   return String(s == null ? "" : s).normalize("NFC").toLocaleLowerCase("th");
 }
@@ -13,72 +12,91 @@ function toOpt(o) {
   return typeof o === "object" ? o : { value: String(o), label: String(o) };
 }
 function defaultFilter(option, query) {
-  var q = norm(query).trim();
+  const q = norm(query).trim();
   if (!q) return true;
   return norm(option.label).indexOf(q) >= 0 || !!option.description && norm(option.description).indexOf(q) >= 0 || (option.keywords || []).some(function(k) {
     return norm(k).indexOf(q) >= 0;
   });
 }
 const Combobox = React.forwardRef(function Combobox2(props, ref) {
-  var t = useStrings();
-  var auto = uid(), id = props.id || auto, listId = id + "-list";
-  var options = (props.options || []).map(toOpt);
-  var st = useMaybeControlled(props.value, props.defaultValue == null ? null : props.defaultValue, props.onChange);
-  var value = st[0], setValue = st[1];
-  var selected = options.filter(function(o) {
+  const t = useStrings();
+  const auto = uid(), id = props.id || auto, listId = id + "-list";
+  const options = (props.options || []).map(toOpt);
+  const st = useMaybeControlled(
+    props.value,
+    props.defaultValue == null ? null : props.defaultValue,
+    props.onChange
+  );
+  const value = st[0], setValue = st[1];
+  const selected = options.filter(function(o) {
     return o.value === value;
   })[0] || null;
-  var openState = React.useState(false), open = openState[0], setOpen = openState[1];
-  var qState = React.useState(null), query = qState[0], setQuery = qState[1];
-  var aState = React.useState(0), active = aState[0], setActive = aState[1];
-  var posState = React.useState(null);
-  var inputRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef), boxRef = React.useRef(null), listRef = React.useRef(null);
-  var mounted = useMounted();
-  var limit = props.limit || 200;
-  var filter = props.filter || defaultFilter;
-  var shown = props.onSearch || query == null ? options : options.filter(function(o) {
+  const openState = React.useState(false), open = openState[0], setOpen = openState[1];
+  const qState = React.useState(null), query = qState[0], setQuery = qState[1];
+  const aState = React.useState(0), active = aState[0], setActive = aState[1];
+  const posState = React.useState(null);
+  const inputRef = React.useRef(null), inputMerged = useMergedRef(ref, inputRef), boxRef = React.useRef(null), listRef = React.useRef(null);
+  const mounted = useMounted();
+  const limit = props.limit || 200;
+  const filter = props.filter || defaultFilter;
+  let shown = props.onSearch || query == null ? options : options.filter(function(o) {
     return filter(o, query);
   });
-  var more = shown.length > limit;
+  const more = shown.length > limit;
   shown = shown.slice(0, limit);
-  var activeIdx = Math.min(active, shown.length - 1);
+  const activeIdx = Math.min(active, shown.length - 1);
   function place() {
     if (!boxRef.current) return;
-    var r = boxRef.current.getBoundingClientRect();
-    var maxH = 320, below = window.innerHeight - r.bottom - 8, up = below < 200 && r.top > below;
-    posState[1]({ left: r.left, width: r.width, top: up ? void 0 : r.bottom + 4, bottom: up ? window.innerHeight - r.top + 4 : void 0, maxHeight: Math.min(maxH, (up ? r.top : below) - 8) });
+    const r = boxRef.current.getBoundingClientRect();
+    const maxH = 320, below = window.innerHeight - r.bottom - 8, up = below < 200 && r.top > below;
+    posState[1]({
+      left: r.left,
+      width: r.width,
+      top: up ? void 0 : r.bottom + 4,
+      bottom: up ? window.innerHeight - r.top + 4 : void 0,
+      maxHeight: Math.min(maxH, (up ? r.top : below) - 8)
+    });
   }
-  useIsoLayoutEffect(function() {
-    if (open) place();
-  }, [open, shown.length]);
-  React.useEffect(function() {
-    if (!open) return;
-    function outside(e) {
-      if (boxRef.current && boxRef.current.contains(e.target)) return;
-      if (listRef.current && listRef.current.contains(e.target)) return;
-      close(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="' + activeIdx + '"]');
-    if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
-  }, [activeIdx, open]);
+  useIsoLayoutEffect(
+    function() {
+      if (open) place();
+    },
+    [open, shown.length]
+  );
+  React.useEffect(
+    function() {
+      if (!open) return;
+      function outside(e) {
+        if (boxRef.current && boxRef.current.contains(e.target)) return;
+        if (listRef.current && listRef.current.contains(e.target)) return;
+        close(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;
+      const el = listRef.current.querySelector('[data-idx="' + activeIdx + '"]');
+      if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
+    },
+    [activeIdx, open]
+  );
   function openList() {
     if (!open && !props.disabled && !props.readOnly) {
       setOpen(true);
-      var i = selected ? shown.indexOf(selected) : 0;
+      const i = selected ? shown.indexOf(selected) : 0;
       setActive(i < 0 ? 0 : i);
     }
   }
@@ -94,7 +112,7 @@ const Combobox = React.forwardRef(function Combobox2(props, ref) {
     if (inputRef.current) inputRef.current.focus();
   }
   function onKeyDown(e) {
-    var k = e.key;
+    const k = e.key;
     if (k === "ArrowDown") {
       e.preventDefault();
       if (!open) openList();
@@ -126,62 +144,60 @@ const Combobox = React.forwardRef(function Combobox2(props, ref) {
       if (open) close();
     }
   }
-  var text = query != null ? query : selected ? selected.label : "";
-  var optId = function(i) {
+  const text = query != null ? query : selected ? selected.label : "";
+  const optId = function(i) {
     return id + "-opt-" + i;
   };
-  var list = open && mounted && posState[0] ? createPortal(
-    h(
-      "div",
-      { ref: listRef, className: "aura-combo__popover", style: posState[0] },
-      h(
-        "ul",
-        { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" },
-        props.loading ? h("li", { className: "aura-combo__note", role: "presentation" }, h(Icon, { name: "loader-circle", className: "aura-spin" }), props.loadingText || t.searching) : !shown.length ? h("li", { className: "aura-combo__note", role: "presentation" }, props.emptyText || t.noMatches) : shown.map(function(o, i) {
-          var isSel = selected && o.value === selected.value;
-          return h(
-            "li",
-            {
-              key: o.value,
-              id: optId(i),
-              role: "option",
-              "data-idx": i,
-              "aria-selected": isSel,
-              "aria-disabled": o.disabled || void 0,
-              className: cx("aura-combo__option", i === activeIdx && "is-active", isSel && "is-selected", o.disabled && "is-disabled"),
-              onPointerDown: function(e) {
-                e.preventDefault();
-              },
-              onClick: function() {
-                choose(o);
-              },
-              onPointerMove: function() {
-                if (activeIdx !== i) setActive(i);
-              }
-            },
-            o.icon ? h(Icon, { name: o.icon }) : null,
-            h(
-              "span",
-              { className: "aura-combo__text" },
-              h("span", { className: "aura-combo__label" }, o.label),
-              o.description ? h("span", { className: "aura-combo__desc" }, o.description) : null
-            ),
-            isSel ? h(Icon, { name: "check", className: "aura-combo__check" }) : null
-          );
-        }),
-        more && !props.loading ? h("li", { className: "aura-combo__note", role: "presentation" }, t.keepTyping((props.options || []).length)) : null
-      )
-    ),
+  const list = open && mounted && posState[0] ? createPortal(
+    /* @__PURE__ */ React.createElement("div", { ref: listRef, className: "aura-combo__popover", style: posState[0] }, /* @__PURE__ */ React.createElement("ul", { id: listId, role: "listbox", "aria-label": props.label, className: "aura-combo__list" }, props.loading ? /* @__PURE__ */ React.createElement("li", { className: "aura-combo__note", role: "presentation" }, /* @__PURE__ */ React.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), props.loadingText || t.searching) : !shown.length ? /* @__PURE__ */ React.createElement("li", { className: "aura-combo__note", role: "presentation" }, props.emptyText || t.noMatches) : shown.map(function(o, i) {
+      const isSel = selected && o.value === selected.value;
+      return /* @__PURE__ */ React.createElement(
+        "li",
+        {
+          key: o.value,
+          id: optId(i),
+          role: "option",
+          "data-idx": i,
+          "aria-selected": isSel,
+          "aria-disabled": o.disabled || void 0,
+          className: cx(
+            "aura-combo__option",
+            i === activeIdx && "is-active",
+            isSel && "is-selected",
+            o.disabled && "is-disabled"
+          ),
+          onPointerDown: function(e) {
+            e.preventDefault();
+          },
+          onClick: function() {
+            choose(o);
+          },
+          onPointerMove: function() {
+            if (activeIdx !== i) setActive(i);
+          }
+        },
+        o.icon ? /* @__PURE__ */ React.createElement(Icon, { name: o.icon }) : null,
+        /* @__PURE__ */ React.createElement("span", { className: "aura-combo__text" }, /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label" }, o.label), o.description ? /* @__PURE__ */ React.createElement("span", { className: "aura-combo__desc" }, o.description) : null),
+        isSel ? /* @__PURE__ */ React.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
+      );
+    }), more && !props.loading ? /* @__PURE__ */ React.createElement("li", { className: "aura-combo__note", role: "presentation" }, t.keepTyping((props.options || []).length)) : null)),
     document.body
   ) : null;
-  return h(
+  return /* @__PURE__ */ React.createElement(
     Field,
-    { id, label: props.label, hint: props.hint, error: props.error, required: props.required, optional: props.optional, disabled: props.disabled, className: props.className },
-    h(
-      "div",
-      { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open") },
-      h(Icon, { name: props.icon || "search", className: "aura-input__icon" }),
-      h("input", {
+    {
+      id,
+      label: props.label,
+      hint: props.hint,
+      error: props.error,
+      required: props.required,
+      optional: props.optional,
+      disabled: props.disabled,
+      className: props.className
+    },
+    /* @__PURE__ */ React.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo has-icon", open && "is-open") }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || "search", className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
+      "input",
+      {
         ref: inputMerged,
         id,
         type: "text",
@@ -215,8 +231,10 @@ const Combobox = React.forwardRef(function Combobox2(props, ref) {
             setQuery(null);
           }, 0);
         }
-      }),
-      props.clearable !== false && value != null && !props.disabled ? h("button", {
+      }
+    ), props.clearable !== false && value != null && !props.disabled ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
         type: "button",
         className: "aura-combo__clear",
         "aria-label": t.clear(props.label),
@@ -226,28 +244,28 @@ const Combobox = React.forwardRef(function Combobox2(props, ref) {
           setQuery(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) close();
-            else {
-              openList();
-              inputRef.current && inputRef.current.focus();
-            }
-          }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "x" })
+    ) : null, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-hidden": true,
+        className: "aura-combo__toggle",
+        onPointerDown: function(e) {
+          e.preventDefault();
         },
-        h(Icon, { name: "chevron-down" })
-      )
-    ),
+        onClick: function() {
+          if (open) close();
+          else {
+            openList();
+            inputRef.current && inputRef.current.focus();
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down" })
+    )),
     list
   );
 });