@jirawatpyk/aura-react 4.4.1

package/dist/esm/feedback.js

@@ -0,0 +1,192 @@
+'use client';
+import * as React from "react";
+import { useStrings, useAuraLocale } from "./locale.js";
+import { createPortal } from "react-dom";
+import { cx, uid, useMounted, useIsoLayoutEffect, useMergedRef } from "./internal.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+const h = React.createElement;
+var ALERT_ICON = { info: "info", success: "circle-check", warning: "triangle-alert", danger: "circle-alert" };
+const Alert = React.forwardRef(function Alert2(props, ref) {
+  var t = useStrings();
+  var tone = props.tone || "info";
+  return h(
+    "div",
+    {
+      ref,
+      className: cx("aura-alert", "aura-alert--" + tone, props.className),
+      role: tone === "danger" || tone === "warning" ? "alert" : "status"
+    },
+    h(Icon, { name: ALERT_ICON[tone], className: "aura-alert__icon" }),
+    h(
+      "div",
+      { className: "aura-alert__body" },
+      props.title ? h("p", { className: "aura-alert__title" }, props.title) : null,
+      props.children ? h("div", { className: "aura-alert__text" }, props.children) : null,
+      props.action ? h("div", { className: "aura-alert__action" }, props.action) : null
+    ),
+    props.onDismiss ? h(IconButton, { icon: "x", label: t.dismiss, className: "aura-alert__close", onClick: props.onDismiss }) : null
+  );
+});
+var toastState = { list: [], subs: [], n: 0 };
+function emitToasts() {
+  toastState.subs.forEach(function(f) {
+    f(toastState.list.slice());
+  });
+}
+function toast(opts) {
+  if (typeof opts === "string") opts = { title: opts };
+  var id = opts.id || "t" + ++toastState.n;
+  toastState.list = toastState.list.filter(function(t) {
+    return t.id !== id;
+  }).concat([Object.assign({ tone: "info" }, opts, { id })]).slice(-3);
+  emitToasts();
+  return id;
+}
+toast.dismiss = function(id) {
+  toastState.list = toastState.list.filter(function(t) {
+    return t.id !== id;
+  });
+  emitToasts();
+};
+function ToastItem(props) {
+  var str = useStrings();
+  var t = props.toast, timer = React.useRef(null), left = React.useRef(t.duration || 5e3), since = React.useRef(0);
+  function start() {
+    if (left.current === Infinity) return;
+    since.current = Date.now();
+    timer.current = setTimeout(function() {
+      toast.dismiss(t.id);
+    }, left.current);
+  }
+  function pause() {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+      left.current -= Date.now() - since.current;
+    }
+  }
+  React.useEffect(function() {
+    start();
+    return pause;
+  }, []);
+  return h(
+    "div",
+    {
+      className: cx("aura-toast", "aura-toast--" + t.tone),
+      role: t.tone === "danger" ? "alert" : "status",
+      onMouseEnter: pause,
+      onMouseLeave: start,
+      onFocus: pause,
+      onBlur: start
+    },
+    h(Icon, { name: ALERT_ICON[t.tone] || "info", className: "aura-toast__icon" }),
+    h(
+      "div",
+      { className: "aura-toast__body" },
+      h("p", { className: "aura-toast__title" }, t.title),
+      t.description ? h("p", { className: "aura-toast__text" }, t.description) : null
+    ),
+    t.action ? h("button", {
+      type: "button",
+      className: "aura-toast__action",
+      onClick: function() {
+        t.action.onClick && t.action.onClick();
+        toast.dismiss(t.id);
+      }
+    }, t.action.label) : null,
+    h(IconButton, { icon: "x", label: str.dismissToast, className: "aura-toast__close", onClick: function() {
+      toast.dismiss(t.id);
+    } })
+  );
+}
+function Toaster(props) {
+  var t = useStrings();
+  var mounted = useMounted();
+  var s = React.useState(toastState.list);
+  React.useEffect(function() {
+    toastState.subs.push(s[1]);
+    return function() {
+      toastState.subs = toastState.subs.filter(function(f) {
+        return f !== s[1];
+      });
+    };
+  }, []);
+  if (!mounted) return null;
+  return createPortal(h(
+    "div",
+    { className: cx("aura-toaster", props && props.position === "top" && "is-top"), role: "region", "aria-live": "polite", "aria-label": t.notifications },
+    s[0].map(function(t2) {
+      return h(ToastItem, { key: t2.id, toast: t2 });
+    })
+  ), document.body);
+}
+const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
+  var id = uid(), st = React.useState(false), open = props.open !== void 0 ? props.open : st[0], set = st[1];
+  var anchor = React.useRef(null), anchorMerged = useMergedRef(ref, anchor), tip = React.useRef(null), timer = React.useRef(null);
+  var pos = React.useState(null);
+  function show(now) {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(function() {
+      set(true);
+    }, now ? 0 : props.delay == null ? 400 : props.delay);
+  }
+  function hide() {
+    clearTimeout(timer.current);
+    set(false);
+  }
+  useIsoLayoutEffect(function() {
+    if (!open || !anchor.current || !tip.current) return;
+    var r = anchor.current.getBoundingClientRect(), t = tip.current.getBoundingClientRect();
+    var side = props.side || "top", top = side === "top" ? r.top - t.height - 8 : r.bottom + 8;
+    if (side === "top" && top < 8) top = r.bottom + 8;
+    var left = Math.max(8, Math.min(r.left + r.width / 2 - t.width / 2, window.innerWidth - t.width - 8));
+    pos[1]({ top, left });
+  }, [open]);
+  React.useEffect(function() {
+    if (!open) return;
+    function esc(e) {
+      if (e.key === "Escape") hide();
+    }
+    document.addEventListener("keydown", esc);
+    return function() {
+      document.removeEventListener("keydown", esc);
+    };
+  }, [open]);
+  var child = React.Children.only(props.children);
+  var trigger = h(
+    "span",
+    {
+      ref: anchorMerged,
+      className: "aura-tooltip-anchor",
+      onMouseEnter: function() {
+        show(false);
+      },
+      onMouseLeave: hide,
+      onFocus: function() {
+        show(true);
+      },
+      onBlur: hide
+    },
+    React.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] })
+  );
+  return h(
+    React.Fragment,
+    null,
+    trigger,
+    open ? createPortal(h("div", {
+      ref: tip,
+      id,
+      role: "tooltip",
+      className: "aura-tooltip",
+      style: { top: pos[0] ? pos[0].top : -9999, left: pos[0] ? pos[0].left : -9999 }
+    }, props.content), document.body) : null
+  );
+});
+export {
+  ALERT_ICON,
+  Alert,
+  Toaster,
+  Tooltip,
+  toast
+};

package/dist/esm/forms.js

@@ -0,0 +1,181 @@
+'use client';
+import * as React from "react";
+import { useStrings } from "./locale.js";
+import { cx, omit, useMaybeControlled, uid } from "./internal.js";
+import { Icon } from "./Icon.js";
+const h = React.createElement;
+const Field = React.forwardRef(function Field2(props, ref) {
+  var t = useStrings();
+  return h(
+    "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 ? h("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null,
+      props.optional ? h("span", { className: "aura-field__opt" }, " (" + t.optional + ")") : null
+    ) : null,
+    props.children,
+    props.error ? h("p", { className: "aura-field__error", id: props.id + "-error" }, h(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? h("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;
+}
+var FIELD_KEYS = ["label", "hint", "error", "required", "optional", "icon", "className", "id", "suffix", "options", "placeholder"];
+const TextField = React.forwardRef(function TextField2(props, ref) {
+  var auto = uid(), id = props.id || auto;
+  var rest = omit(props, FIELD_KEYS);
+  return h(
+    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",
+      { className: cx("aura-input", props.icon && "has-icon", props.suffix && "has-suffix") },
+      props.icon ? h(Icon, { name: props.icon, className: "aura-input__icon" }) : null,
+      h("input", Object.assign({ type: "text" }, rest, {
+        ref,
+        id,
+        className: "aura-input__control",
+        placeholder: props.placeholder,
+        required: props.required,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props)
+      })),
+      props.suffix ? h("span", { className: "aura-input__suffix" }, props.suffix) : null
+    )
+  );
+});
+const Textarea = React.forwardRef(function Textarea2(props, ref) {
+  var auto = uid(), id = props.id || auto;
+  var rest = omit(props, FIELD_KEYS);
+  return h(
+    Field,
+    { id, label: props.label, hint: props.hint, error: props.error, required: props.required, optional: props.optional, disabled: props.disabled, className: props.className },
+    h("textarea", Object.assign({ rows: 4 }, rest, {
+      ref,
+      id,
+      className: "aura-input aura-textarea",
+      placeholder: props.placeholder,
+      required: props.required,
+      "aria-invalid": props.error ? true : void 0,
+      "aria-describedby": describedBy(id, props)
+    }))
+  );
+});
+const Select = React.forwardRef(function Select2(props, ref) {
+  var auto = uid(), id = props.id || auto;
+  var rest = omit(props, FIELD_KEYS.concat(["children"]));
+  var opts = (props.options || []).map(function(o) {
+    var v = typeof o === "object" ? o : { value: o, label: o };
+    return h("option", { key: v.value, value: v.value, disabled: v.disabled }, v.label);
+  });
+  if (props.placeholder) opts.unshift(h("option", { key: "__ph", value: "", disabled: true }, props.placeholder));
+  var extra = props.value === void 0 && props.defaultValue === void 0 && props.placeholder ? { defaultValue: "" } : {};
+  return h(
+    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",
+      { className: cx("aura-input aura-select", props.icon && "has-icon") },
+      props.icon ? h(Icon, { name: props.icon, className: "aura-input__icon" }) : null,
+      h("select", Object.assign(extra, rest, {
+        ref,
+        id,
+        className: "aura-input__control",
+        required: props.required,
+        "aria-invalid": props.error ? true : void 0,
+        "aria-describedby": describedBy(id, props)
+      }), opts, props.children),
+      h(Icon, { name: "chevron-down", className: "aura-select__chevron" })
+    )
+  );
+});
+const RadioGroup = React.forwardRef(function RadioGroup2(props, ref) {
+  var auto = uid(), id = props.id || auto;
+  var st = useMaybeControlled(props.value, props.defaultValue, props.onChange);
+  var name = props.name || id;
+  return h(
+    "fieldset",
+    {
+      ref,
+      className: cx("aura-field aura-radio-group", props.error && "is-invalid", props.className),
+      "aria-describedby": describedBy(id, props),
+      "aria-invalid": props.error ? true : void 0,
+      disabled: props.disabled
+    },
+    props.label ? h("legend", { className: "aura-field__label" }, props.label, props.required ? h("span", { className: "aura-field__req", "aria-hidden": true }, " *") : null) : null,
+    h(
+      "div",
+      { className: cx("aura-radio-group__list", props.orientation === "horizontal" && "is-horizontal") },
+      (props.options || []).map(function(o) {
+        var v = typeof o === "object" ? o : { value: o, label: o };
+        return h(
+          "label",
+          { key: v.value, className: cx("aura-choice", v.disabled && "is-disabled") },
+          h("input", {
+            type: "radio",
+            className: "aura-radio",
+            name,
+            value: v.value,
+            disabled: v.disabled,
+            checked: st[0] === v.value,
+            onChange: function() {
+              st[1](v.value);
+            }
+          }),
+          h(
+            "span",
+            { className: "aura-choice__text" },
+            h("span", { className: "aura-choice__label" }, v.label),
+            v.description ? h("span", { className: "aura-choice__desc" }, v.description) : null
+          )
+        );
+      })
+    ),
+    props.error ? h("p", { className: "aura-field__error", id: id + "-error" }, h(Icon, { name: "circle-alert", size: 14 }), props.error) : props.hint ? h("p", { className: "aura-field__hint", id: id + "-hint" }, props.hint) : null
+  );
+});
+const Switch = React.forwardRef(function Switch2(props, ref) {
+  var auto = uid(), id = props.id || auto;
+  var st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
+  var on = !!st[0];
+  return h(
+    "div",
+    { className: cx("aura-switch-row", props.disabled && "is-disabled", props.className) },
+    h(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "switch",
+        id,
+        "aria-checked": on,
+        disabled: props.disabled,
+        "aria-labelledby": props.label ? id + "-label" : void 0,
+        "aria-label": props.label ? void 0 : props["aria-label"],
+        "aria-describedby": props.description ? id + "-desc" : void 0,
+        className: cx("aura-switch", on && "is-on"),
+        onClick: function() {
+          st[1](!on);
+        }
+      },
+      h("span", { className: "aura-switch__thumb" })
+    ),
+    props.label ? h(
+      "span",
+      { className: "aura-choice__text" },
+      h("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label),
+      props.description ? h("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null
+    ) : null
+  );
+});
+export {
+  Field,
+  RadioGroup,
+  Select,
+  Switch,
+  TextField,
+  Textarea
+};

package/dist/esm/index.js

@@ -0,0 +1,89 @@
+'use client';
+import { Icon, iconNames, ICONS } from "./Icon.js";
+import { Button } from "./Button.js";
+import { IconButton } from "./IconButton.js";
+import { Menu } from "./Menu.js";
+import { DropdownMenu } from "./DropdownMenu.js";
+import { Checkbox } from "./Checkbox.js";
+import { StatusPill, statusTone } from "./StatusPill.js";
+import { Field, TextField, Textarea, Select, RadioGroup, Switch } from "./forms.js";
+import { Combobox, defaultFilter } from "./Combobox.js";
+import { DatePicker, DateRangePicker, Calendar, formatDate, parseDate } from "./DatePicker.js";
+import { Alert, Toaster, toast, Tooltip } from "./feedback.js";
+import { Dialog, Drawer } from "./Dialog.js";
+import { DataTable } from "./DataTable.js";
+import { Card, Tabs, SideNav, Breadcrumb, Avatar } from "./layout.js";
+import { Stack, Grid, Container, AppShell, useBreakpoint, useResponsive, breakpoints } from "./layout2.js";
+import { Surface } from "./Surface.js";
+import { AuraProvider, useAuraLocale, STRINGS } from "./locale.js";
+import { Stat } from "./Stat.js";
+import { TimePicker, parseTime } from "./TimePicker.js";
+import { FileUpload, formatBytes } from "./FileUpload.js";
+import { createTheme, contrast, scale } from "./theme.js";
+import { ThemeStyle } from "./ThemeStyle.js";
+import { Badge, Tag, Progress, Skeleton, EmptyState, Pagination, Accordion, Popover } from "./extra.js";
+export {
+  Accordion,
+  Alert,
+  AppShell,
+  AuraProvider,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  Calendar,
+  Card,
+  Checkbox,
+  Combobox,
+  Container,
+  DataTable,
+  DatePicker,
+  DateRangePicker,
+  Dialog,
+  Drawer,
+  DropdownMenu,
+  EmptyState,
+  Field,
+  FileUpload,
+  Grid,
+  ICONS,
+  Icon,
+  IconButton,
+  Menu,
+  Pagination,
+  Popover,
+  Progress,
+  RadioGroup,
+  STRINGS,
+  Select,
+  SideNav,
+  Skeleton,
+  Stack,
+  Stat,
+  StatusPill,
+  Surface,
+  Switch,
+  Tabs,
+  Tag,
+  TextField,
+  Textarea,
+  ThemeStyle,
+  TimePicker,
+  Toaster,
+  Tooltip,
+  scale as brandScale,
+  breakpoints,
+  defaultFilter as comboboxFilter,
+  contrast,
+  createTheme,
+  formatBytes,
+  formatDate,
+  iconNames,
+  parseDate,
+  parseTime,
+  statusTone,
+  toast,
+  useAuraLocale,
+  useBreakpoint,
+  useResponsive
+};

package/dist/esm/internal.js

@@ -0,0 +1,84 @@
+'use client';
+import * as React from "react";
+const h = React.createElement;
+function cx() {
+  return Array.prototype.filter.call(arguments, Boolean).join(" ");
+}
+function omit(src, keys) {
+  var out = {};
+  for (var k in src) if (Object.prototype.hasOwnProperty.call(src, k) && keys.indexOf(k) < 0) out[k] = src[k];
+  return out;
+}
+function useMaybeControlled(value, initial, onChange) {
+  var s = React.useState(initial);
+  var controlled = value !== void 0;
+  return [controlled ? value : s[0], function(next) {
+    if (!controlled) s[1](next);
+    if (onChange) onChange(next);
+  }];
+}
+var collator = typeof Intl !== "undefined" ? new Intl.Collator(["th", "en"], { numeric: true, sensitivity: "base" }) : null;
+function compare(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return collator ? collator.compare(String(a), String(b)) : String(a).localeCompare(String(b));
+}
+const uid = React.useId || function() {
+  const r = React.useRef(null);
+  if (!r.current) r.current = "aura-" + Math.random().toString(36).slice(2, 9);
+  return r.current;
+};
+var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function noopSubscribe() {
+  return function() {
+  };
+}
+function yes() {
+  return true;
+}
+function no() {
+  return false;
+}
+function useMounted() {
+  return React.useSyncExternalStore(noopSubscribe, yes, no);
+}
+var useIsoLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function trapTab(e, container) {
+  if (e.key !== "Tab" || !container) return;
+  var list = Array.prototype.filter.call(container.querySelectorAll(FOCUSABLE), function(el) {
+    return el.tabIndex >= 0 && el.offsetParent !== null;
+  });
+  if (!list.length) return;
+  var first = list[0], last = list[list.length - 1];
+  if (e.shiftKey && document.activeElement === first) {
+    e.preventDefault();
+    last.focus();
+  } else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault();
+    first.focus();
+  }
+}
+function useMergedRef(a, b) {
+  return React.useCallback(function(node) {
+    [a, b].forEach(function(r) {
+      if (!r) return;
+      if (typeof r === "function") r(node);
+      else r.current = node;
+    });
+  }, [a, b]);
+}
+export {
+  FOCUSABLE,
+  collator,
+  compare,
+  cx,
+  omit,
+  trapTab,
+  uid,
+  useIsoLayoutEffect,
+  useMaybeControlled,
+  useMergedRef,
+  useMounted
+};