@jirawatpyk/aura-react 5.8.0 → 5.10.0

package/dist/esm/Tabs.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { cx, uid, useMaybeControlled } from "./internal.js";
+import { cx, devWarnOnce, omit, uid, useMaybeControlled } from "./internal.js";
 import { useLinkComponent } from "./locale.js";
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
@@ -22,29 +22,68 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
     return t.id === cur;
   })[0] || firstOn || items[0];
   const Link = useLinkComponent(props.linkComponent);
+  const manual = props.activation === "manual";
+  const seg = props.variant === "segmented";
+  const listCls = cx("aura-tabs__list", seg && "aura-segmented", seg && props.fullWidth && "is-full");
+  const tabCls = function(on, extra) {
+    return cx("aura-tab", on && "is-active", seg && "aura-segmented__option", seg && on && "is-selected", extra);
+  };
+  const rootCls = cx("aura-tabs", seg && "aura-tabs--segmented");
+  const [focusId, setFocusId] = React.useState(null);
+  items.forEach(function(t) {
+    const al = t.tabProps && t.tabProps["aria-label"];
+    if (al && al.toLowerCase().indexOf(String(t.label).toLowerCase()) !== 0)
+      devWarnOnce(
+        "tab-label-in-name",
+        'Tabs: tabProps aria-label "' + al + '" should start with the visible label "' + t.label + '" so voice control finds the tab (WCAG 2.5.3 Label in Name).'
+      );
+  });
   if (asLinks)
     return /* @__PURE__ */ React.createElement(
       "nav",
       {
         ref,
         "aria-label": props.label,
-        className: cx("aura-tabs aura-tabs--links", props.className)
+        className: cx(rootCls, "aura-tabs--links", props.className)
       },
-      /* @__PURE__ */ React.createElement("div", { className: "aura-tabs__list" }, items.map(function(t) {
+      /* @__PURE__ */ React.createElement("div", { className: listCls }, items.map(function(t) {
         const on = t.id === cur;
         const inner = [
           t.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: t.icon }) : null,
           t.label,
           t.count != null ? /* @__PURE__ */ React.createElement("span", { key: "c", className: "aura-tab__count" }, t.count) : null
         ];
-        return t.disabled ? /* @__PURE__ */ React.createElement("span", { key: t.id, className: "aura-tab is-disabled", "aria-disabled": true }, inner) : /* @__PURE__ */ React.createElement(
+        const own = omit(t.tabProps || {}, [
+          "type",
+          "disabled",
+          "form",
+          "formAction",
+          "formEncType",
+          "formMethod",
+          "formNoValidate",
+          "formTarget",
+          "name",
+          "value"
+        ]);
+        return t.disabled ? /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            ...omit(own, ["onClick"]),
+            key: t.id,
+            className: cx(tabCls(false), "is-disabled", own.className),
+            "aria-disabled": true
+          },
+          inner
+        ) : /* @__PURE__ */ React.createElement(
           Link,
           {
+            ...own,
             key: t.id,
             href: t.href,
-            className: cx("aura-tab", on && "is-active"),
+            className: tabCls(on, own.className),
             "aria-current": on ? "page" : void 0,
             onClick: function(e) {
+              if (own.onClick) own.onClick(e);
               if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
               st[1](t.id);
             }
@@ -58,19 +97,28 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
       return !t2.disabled;
     });
     const t = enabled[(i + enabled.length) % enabled.length];
-    st[1](t.id);
+    if (manual) setFocusId(t.id);
+    else st[1](t.id);
     if (refs.current[t.id]) refs.current[t.id].focus();
   }
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-tabs", props.className) }, /* @__PURE__ */ React.createElement(
+  const stop = manual && focusId && items.filter(function(t) {
+    return t.id === focusId && !t.disabled;
+  })[0] || current;
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx(rootCls, props.className) }, /* @__PURE__ */ React.createElement(
     "div",
     {
       role: "tablist",
       "aria-label": props.label,
-      className: "aura-tabs__list",
+      className: listCls,
+      onBlur: manual ? function(e) {
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocusId(null);
+      } : void 0,
       onKeyDown: function(e) {
         const enabled = items.filter(function(t) {
           return !t.disabled;
-        }), i = enabled.indexOf(current);
+        }), focused = enabled.filter(function(t) {
+          return refs.current[t.id] === e.target;
+        })[0], i = enabled.indexOf(focused || stop);
         if (e.key === "ArrowRight") {
           e.preventDefault();
           go(i + 1);
@@ -88,22 +136,31 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
     },
     items.map(function(t) {
       const on = current && t.id === current.id;
+      const own = t.tabProps || {};
       return /* @__PURE__ */ React.createElement(
         "button",
         {
+          ...own,
           key: t.id,
           type: "button",
           role: "tab",
           id: base + "-tab-" + t.id,
           "aria-selected": on,
           "aria-controls": base + "-panel-" + t.id,
-          tabIndex: on ? 0 : -1,
+          tabIndex: stop && t.id === stop.id ? 0 : -1,
           disabled: t.disabled,
           ref: function(el) {
             refs.current[t.id] = el;
           },
-          className: cx("aura-tab", on && "is-active"),
-          onClick: function() {
+          className: tabCls(on, own.className),
+          onFocus: manual ? function(e) {
+            if (own.onFocus) own.onFocus(e);
+            setFocusId(t.id);
+          } : own.onFocus,
+          onClick: function(e) {
+            if (own.onClick) own.onClick(e);
+            if (e.defaultPrevented) return;
+            if (manual && current && t.id === current.id) return;
             st[1](t.id);
           }
         },
@@ -112,7 +169,26 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
         t.count != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-tab__count" }, t.count) : null
       );
     })
-  ), current && current.content !== void 0 ? /* @__PURE__ */ React.createElement(
+  ), props.keepMounted ? (
+    /* 5.9: every panel stays in the DOM (same node across switches); the inactive ones are hidden. */
+    items.map(function(t) {
+      if (t.content === void 0) return null;
+      const on = current && t.id === current.id;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: t.id,
+          role: "tabpanel",
+          id: base + "-panel-" + t.id,
+          "aria-labelledby": base + "-tab-" + t.id,
+          tabIndex: 0,
+          hidden: !on,
+          className: "aura-tabs__panel"
+        },
+        t.content
+      );
+    })
+  ) : current && current.content !== void 0 ? /* @__PURE__ */ React.createElement(
     "div",
     {
       role: "tabpanel",

package/dist/esm/Tag.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, omit } from "./internal.js";
 import { useStrings } from "./locale.js";
+import { IconCheck, IconX } from "./icons.js";
 const Tag = React.forwardRef(function Tag2(props, ref) {
   const t = useStrings();
   const selectable = props.onClick != null || props.selected != null;
@@ -22,7 +23,7 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
         disabled: props.disabled,
         className: cx("aura-tag is-selectable", props.selected && "is-selected", props.className)
       },
-      props.selected ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 14 }) : inner[0],
+      props.selected ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), size: 14 }) : inner[0],
       inner[1]
     );
   }
@@ -34,7 +35,7 @@ const Tag = React.forwardRef(function Tag2(props, ref) {
       "aria-label": props.removeLabel || t.remove(typeof props.children === "string" ? props.children : ""),
       onClick: props.onRemove
     },
-    /* @__PURE__ */ React.createElement(Icon, { name: "x", size: 12 })
+    /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null), size: 12 })
   ) : null);
 });
 export {

package/dist/esm/TimePicker.js

@@ -5,6 +5,7 @@ import { cx, uid, useMaybeControlled, useMounted, useIsoLayoutEffect, useMergedR
 import { useStrings } from "./locale.js";
 import { Icon } from "./Icon.js";
 import { Field } from "./Field.js";
+import { IconCheck, IconChevronDown, IconClock, IconX } from "./icons.js";
 function pad(n) {
   return (n < 10 ? "0" : "") + n;
 }
@@ -220,7 +221,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
           }
         },
         /* @__PURE__ */ React.createElement("span", { className: "aura-combo__label" }, s),
-        sel ? /* @__PURE__ */ React.createElement(Icon, { name: "check", className: "aura-combo__check" }) : null
+        sel ? /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconCheck, null), className: "aura-combo__check" }) : null
       );
     }))),
     document.body
@@ -237,7 +238,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
       disabled: props.disabled,
       className: props.className
     },
-    /* @__PURE__ */ React.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React.createElement(Icon, { name: "clock", className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { ref: boxRef, className: cx("aura-input aura-combo aura-time has-icon", open && "is-open") }, /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconClock, null), className: "aura-input__icon" }), /* @__PURE__ */ React.createElement(
       "input",
       {
         ref: inputMerged,
@@ -290,7 +291,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
           if (inputRef.current) inputRef.current.focus();
         }
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: "x" })
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconX, null) })
     ) : null, /* @__PURE__ */ React.createElement(
       "button",
       {
@@ -309,7 +310,7 @@ const TimePicker = React.forwardRef(function TimePicker2(props, ref) {
           }
         }
       },
-      /* @__PURE__ */ React.createElement(Icon, { name: "chevron-down" })
+      /* @__PURE__ */ React.createElement(Icon, { name: /* @__PURE__ */ React.createElement(IconChevronDown, null) })
     )),
     list
   );

package/dist/esm/Toaster.js

@@ -6,6 +6,7 @@ import { IconButton } from "./IconButton.js";
 import { cx, plainClick, useIsoLayoutEffect, useMounted } from "./internal.js";
 import { useLinkComponent, useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
+import { IconInfo, IconLoaderCircle, IconX } from "./icons.js";
 const MAX_VISIBLE = 3;
 const toastState = {
   list: [],
@@ -179,7 +180,7 @@ function ToastItem(props) {
     /* @__PURE__ */ React.createElement(
       Icon,
       {
-        name: t.loading ? "loader-circle" : ALERT_ICON[t.tone] || "info",
+        name: t.loading ? /* @__PURE__ */ React.createElement(IconLoaderCircle, null) : React.createElement(ALERT_ICON[t.tone] || IconInfo),
         className: cx("aura-toast__icon", t.loading && "aura-spin")
       }
     ),
@@ -213,7 +214,7 @@ function ToastItem(props) {
     /* @__PURE__ */ React.createElement(
       IconButton,
       {
-        icon: "x",
+        icon: /* @__PURE__ */ React.createElement(IconX, null),
         label: str.dismissToast,
         className: "aura-toast__close",
         onClick: function() {

package/dist/esm/classes.js

@@ -1,4 +1,3 @@
-'use client';
 function cx() {
   return Array.prototype.filter.call(arguments, Boolean).join(" ");
 }
@@ -13,8 +12,22 @@ const TONES = ["neutral", "accent", "success", "warning", "danger"];
 function tone(t) {
   return TONES.indexOf(t) >= 0 ? t : "neutral";
 }
+const warned = {};
+function devWarnOnce(key, message) {
+  if (warned[key]) return;
+  let dev = false;
+  try {
+    dev = true;
+  } catch (e) {
+    dev = false;
+  }
+  if (!dev) return;
+  warned[key] = true;
+  console.warn("[AURA] " + message);
+}
 export {
   cx,
+  devWarnOnce,
   omit,
   tone
 };

package/dist/esm/colorScheme.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { useStrings } from "./locale.js";
 import { IconButton } from "./IconButton.js";
 import { DropdownMenu } from "./DropdownMenu.js";
+import { IconMoon, IconSun } from "./icons.js";
 import { DEFAULT_KEY, SCHEMES, EVENT, valid, colorSchemeScript } from "./colorSchemeScript.js";
 function ColorSchemeScript(props) {
   return /* @__PURE__ */ React.createElement(
@@ -86,7 +87,13 @@ function ColorSchemeToggle(props) {
     DropdownMenu,
     {
       label,
-      trigger: /* @__PURE__ */ React.createElement(IconButton, { icon: cs.resolved === "dark" ? "moon" : "sun", label: label + ": " + names[cs.scheme] }),
+      trigger: /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          icon: cs.resolved === "dark" ? /* @__PURE__ */ React.createElement(IconMoon, null) : /* @__PURE__ */ React.createElement(IconSun, null),
+          label: label + ": " + names[cs.scheme]
+        }
+      ),
       items: SCHEMES.map(function(s) {
         return {
           label: names[s],

package/dist/esm/display.js

@@ -3,12 +3,22 @@ import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, omit, tone as badgeTone } from "./classes.js";
 import { toneFor } from "./status.js";
+import {
+  IconBan,
+  IconCircle,
+  IconCircleAlert,
+  IconCircleCheck,
+  IconCircleDotDashed,
+  IconInbox,
+  IconInfo,
+  IconTriangleAlert
+} from "./icons.js";
 const h = React.createElement;
 const ALERT_ICON = {
-  info: "info",
-  success: "circle-check",
-  warning: "triangle-alert",
-  danger: "circle-alert"
+  info: IconInfo,
+  success: IconCircleCheck,
+  warning: IconTriangleAlert,
+  danger: IconCircleAlert
 };
 function alertElement(props, ref, close) {
   const tone = props.tone || "info";
@@ -21,7 +31,7 @@ function alertElement(props, ref, close) {
       className: cx("aura-alert", "aura-alert--" + tone, props.className),
       role: props.role || (tone === "danger" || tone === "warning" ? "alert" : "status")
     },
-    /* @__PURE__ */ React.createElement(Icon, { name: props.icon || ALERT_ICON[tone], className: "aura-alert__icon" }),
+    /* @__PURE__ */ React.createElement(Icon, { name: props.icon || h(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),
     close
   );
@@ -60,16 +70,16 @@ function cardElement(props, ref) {
   );
 }
 const PILL_ICON = {
-  neutral: "circle",
-  progress: "circle-dot-dashed",
-  ready: "circle-check",
-  warning: "triangle-alert",
-  blocked: "ban"
+  neutral: IconCircle,
+  progress: IconCircleDotDashed,
+  ready: IconCircleCheck,
+  warning: IconTriangleAlert,
+  blocked: IconBan
 };
 function statusPillElement(props, ref) {
   const tone = props.tone || toneFor(props.children);
   const rest = omit(props, ["tone", "className", "children"]);
-  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone, props.className) }, /* @__PURE__ */ React.createElement(Icon, { name: PILL_ICON[tone] || "circle", size: 12 }), props.children);
+  return /* @__PURE__ */ React.createElement("span", { ...rest, ref, className: cx("aura-pill", "aura-pill--" + tone, props.className) }, /* @__PURE__ */ React.createElement(Icon, { name: h(PILL_ICON[tone] || IconCircle), size: 12 }), props.children);
 }
 function badgeElement(props, ref) {
   const rest = omit(props, ["tone", "variant", "icon", "className", "children"]);
@@ -98,7 +108,7 @@ function emptyStateElement(props, ref) {
       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("span", { className: "aura-empty__icon", "aria-hidden": true }, /* @__PURE__ */ React.createElement(Icon, { name: props.icon || /* @__PURE__ */ React.createElement(IconInbox, null), 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

package/dist/esm/iconSvg.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { cx } from "./classes.js";
+const h = React.createElement;
+const SIZES = { sm: 16, md: 20, lg: 24 };
+function iconSize(size) {
+  return SIZES[size] || size || 16;
+}
+function iconSvg(shapes, props, ref) {
+  const size = iconSize(props.size);
+  const a11y = props.label ? { role: "img", "aria-label": props.label } : { "aria-hidden": true, focusable: "false" };
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: props.strokeWidth || 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cx("aura-icon", props.className),
+      ...a11y
+    },
+    shapes.map(function(s, i) {
+      const attrs = { key: i };
+      for (const k in s[1]) attrs[k === "stroke-width" ? "strokeWidth" : k] = s[1][k];
+      return h(s[0], attrs);
+    })
+  );
+}
+function defineIcon(name, shapes) {
+  const C = React.forwardRef(function AuraIcon(props, ref) {
+    return iconSvg(shapes, props, ref);
+  });
+  C.displayName = "Icon" + name.split("-").map(function(p) {
+    return p.charAt(0).toUpperCase() + p.slice(1);
+  }).join("");
+  return Object.assign(C, { auraShapes: shapes, iconName: name });
+}
+function shapesOf(el) {
+  if (!React.isValidElement(el)) return null;
+  const t = el.type;
+  return typeof t !== "string" && t && t.auraShapes || null;
+}
+export {
+  defineIcon,
+  iconSize,
+  iconSvg,
+  shapesOf
+};