@jirawatpyk/aura-react 4.18.0 → 4.20.0

package/dist/esm/DatePicker.js

@@ -13,20 +13,38 @@ import {
   dateText,
   defaultCalendar,
   fmt,
-  formatDate,
+  formatDate as formatDateBase,
   fromISO,
   localeTag,
   parseDate,
   same,
-  toISO
+  toISO,
+  todayIn
 } from "./dates.js";
-import { formatDate as formatDate2, parseDate as parseDate2 } from "./dates.js";
+import { parseDate as parseDate2 } from "./dates.js";
+let warnedNoLocale = false;
+function isDev() {
+  try {
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function formatDate(iso, opts) {
+  if (!warnedNoLocale && !(opts && opts.locale) && isDev()) {
+    warnedNoLocale = true;
+    console.warn(
+      "[AURA] formatDate() was called without a locale. It shows Thai with Buddhist-era years today; in 5.0 it will show English with Gregorian years, like '@jirawatpyk/aura-react/server'. Pass { locale: 'th' } to keep Thai, or use useFormatDate() in components."
+    );
+  }
+  return formatDateBase(iso, opts);
+}
 function useFormatDate() {
   const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
   return React.useCallback(
     function(iso, opts) {
       const o = opts || {}, loc = o.locale || locale;
-      return formatDate(
+      return formatDateBase(
         iso,
         Object.assign({}, o, {
           locale: loc,
@@ -40,9 +58,9 @@ function useFormatDate() {
 const Calendar = React.forwardRef(function Calendar2(props, ref) {
   const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
   const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
-  let today = /* @__PURE__ */ new Date();
-  today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-  const min = fromISO(props.min), max = fromISO(props.max);
+  const todayISO = props.today || todayIn(props.timeZone || ctx.timeZone);
+  const today = fromISO(todayISO);
+  const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
   const start = fromISO(props.start), end = fromISO(props.end);
   const focusState = React.useState(fromISO(props.focus) || start || today);
   const focusDate = focusState[0], setFocus = focusState[1];
@@ -428,6 +446,8 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
           weekStartsOn: props.weekStartsOn,
           min: props.min,
           max: props.max,
+          timeZone: props.timeZone,
+          today: props.today,
           isDateDisabled: props.isDateDisabled,
           start: st[0],
           focus: st[0],
@@ -456,7 +476,7 @@ const DatePicker = React.forwardRef(function DatePicker2(props, ref) {
       boxRef,
       inputRef: inputMerged,
       open: pop.open,
-      display: formatDate(st[0], { locale, calendar }),
+      display: formatDateBase(st[0], { locale, calendar }),
       placeholder: props.placeholder || dt.datePlaceholder,
       hasValue: st[0] != null,
       clearable: props.clearable,
@@ -490,8 +510,8 @@ const DateRangePicker = React.forwardRef(
     const o = { locale, calendar };
     function show(r) {
       if (!r.start) return "";
-      if (!r.end) return formatDate(r.start, o) + " \u2013";
-      return formatDate(r.start, o) + " \u2013 " + formatDate(r.end, o);
+      if (!r.end) return formatDateBase(r.start, o) + " \u2013";
+      return formatDateBase(r.start, o) + " \u2013 " + formatDateBase(r.end, o);
     }
     function commit(text) {
       const parts = String(text).split(/\s[–-]\s|\s*–\s*/);
@@ -544,6 +564,8 @@ const DateRangePicker = React.forwardRef(
             weekStartsOn: props.weekStartsOn,
             min: props.min,
             max: props.max,
+            timeZone: props.timeZone,
+            today: props.today,
             isDateDisabled: props.isDateDisabled,
             start: draft[0] || v.start,
             end: draft[0] ? null : v.end,
@@ -594,7 +616,7 @@ export {
   Calendar,
   DatePicker,
   DateRangePicker,
-  formatDate2 as formatDate,
+  formatDate,
   parseDate2 as parseDate,
   useFormatDate
 };

package/dist/esm/DropdownMenu.js

@@ -23,6 +23,7 @@ const DropdownMenu = React.forwardRef(function DropdownMenu2(props, ref) {
       anchor,
       label: props.label,
       items: props.items,
+      linkComponent: props.linkComponent,
       onClose: function(restore) {
         setAnchor(null);
         if (restore && typeof anchor.focus === "function") anchor.focus();

package/dist/esm/Menu.js

@@ -3,12 +3,14 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import { cx, useIsoLayoutEffect, useMounted, useMergedRef } from "./internal.js";
 import { Icon } from "./Icon.js";
+import { useLinkComponent } from "./locale.js";
 const Menu = React.forwardRef(function Menu2(props, ref) {
   const own = React.useRef(null), merged = useMergedRef(ref, own);
   const posState = React.useState(null);
   const pos = posState[0], setPos = posState[1];
   const items = props.items || [];
   const mounted = useMounted();
+  const Link = useLinkComponent(props.linkComponent);
   useIsoLayoutEffect(
     function() {
       const a = props.anchor, m = own.current;
@@ -69,6 +71,63 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
     }
     e.stopPropagation();
   }
+  function groupItems(list) {
+    const out = [];
+    list.forEach(function(it, i) {
+      const g = it.type === "radio" && it.group ? it.group : null;
+      const last = out[out.length - 1];
+      if (last && last.group === g && g !== null) last.items.push({ it, i });
+      else out.push({ group: g, items: [{ it, i }] });
+    });
+    return out;
+  }
+  function renderItem(it, i) {
+    if (it.separator) return /* @__PURE__ */ React.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
+    const isRadio = it.type === "radio";
+    const isCheck = !isRadio && it.checked !== void 0;
+    const lead = isRadio ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__radio", it.checked && "is-on") }) : isCheck ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" });
+    const body = [
+      /* @__PURE__ */ React.createElement(React.Fragment, { key: "l" }, lead),
+      /* @__PURE__ */ React.createElement("span", { key: "t", className: "aura-menu__label" }, it.label),
+      it.hint ? /* @__PURE__ */ React.createElement("span", { key: "h", className: "aura-menu__hint" }, it.hint) : null
+    ];
+    const cls = cx("aura-menu__item", it.tone === "danger" && "aura-menu__item--danger");
+    if (it.href && !it.disabled)
+      return /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          key: i,
+          href: it.href,
+          target: it.target,
+          rel: it.target === "_blank" ? "noreferrer" : void 0,
+          tabIndex: -1,
+          role: "menuitem",
+          className: cls,
+          onClick: function() {
+            if (it.onSelect) it.onSelect();
+            props.onClose(false);
+          }
+        },
+        body
+      );
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: i,
+        type: "button",
+        tabIndex: -1,
+        disabled: it.disabled,
+        role: isRadio ? "menuitemradio" : isCheck ? "menuitemcheckbox" : "menuitem",
+        "aria-checked": isRadio || isCheck ? !!it.checked : void 0,
+        className: cls,
+        onClick: function() {
+          if (it.onSelect) it.onSelect();
+          if (!it.keepOpen) props.onClose(true);
+        }
+      },
+      body
+    );
+  }
   const el = /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -79,28 +138,11 @@ const Menu = React.forwardRef(function Menu2(props, ref) {
       onKeyDown,
       style: { top: pos ? pos.top : -9999, left: pos ? pos.left : -9999 }
     },
-    items.map(function(it, i) {
-      if (it.separator) return /* @__PURE__ */ React.createElement("div", { key: "s" + i, role: "separator", className: "aura-menu__sep" });
-      const isCheck = it.checked !== void 0;
-      return /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          key: i,
-          type: "button",
-          tabIndex: -1,
-          disabled: it.disabled,
-          role: isCheck ? "menuitemcheckbox" : "menuitem",
-          "aria-checked": isCheck ? !!it.checked : void 0,
-          className: "aura-menu__item",
-          onClick: function() {
-            it.onSelect();
-            if (!it.keepOpen) props.onClose(true);
-          }
-        },
-        isCheck ? /* @__PURE__ */ React.createElement("span", { className: cx("aura-menu__check", it.checked && "is-on") }, it.checked ? /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, strokeWidth: 3 }) : null) : it.icon ? /* @__PURE__ */ React.createElement(Icon, { name: it.icon }) : /* @__PURE__ */ React.createElement("span", { className: "aura-menu__blank" }),
-        /* @__PURE__ */ React.createElement("span", { className: "aura-menu__label" }, it.label),
-        it.hint ? /* @__PURE__ */ React.createElement("span", { className: "aura-menu__hint" }, it.hint) : null
-      );
+    groupItems(items).map(function(block, bi) {
+      const rendered = block.items.map(function(x) {
+        return renderItem(x.it, x.i);
+      });
+      return block.group ? /* @__PURE__ */ React.createElement("div", { key: "g" + bi, role: "group", "aria-label": block.group, className: "aura-menu__group" }, rendered) : /* @__PURE__ */ React.createElement(React.Fragment, { key: "f" + bi }, rendered);
     })
   );
   return mounted ? createPortal(el, document.body) : null;

package/dist/esm/Separator.js

@@ -0,0 +1,20 @@
+'use client';
+import * as React from "react";
+import { cx } from "./internal.js";
+const Separator = React.forwardRef(function Separator2(props, ref) {
+  const vertical = props.orientation === "vertical";
+  const decorative = props.decorative !== false;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cx("aura-separator", vertical && "aura-separator--vertical", props.className),
+      role: decorative ? "none" : "separator",
+      "aria-orientation": !decorative && vertical ? "vertical" : void 0,
+      style: props.spacing != null ? { ["--aura-separator-space"]: "var(--aura-space-" + props.spacing + ")" } : void 0
+    }
+  );
+});
+export {
+  Separator
+};

package/dist/esm/Table.js

@@ -0,0 +1,79 @@
+'use client';
+import * as React from "react";
+import { cx, uid, useIsoLayoutEffect } from "./internal.js";
+const Table = React.forwardRef(function Table2(props, ref) {
+  const { caption, captionHidden, density, className, children, ...rest } = props;
+  const capId = uid();
+  const wrap = React.useRef(null);
+  const sc = React.useState(false), scrolls = sc[0];
+  useIsoLayoutEffect(function() {
+    const el = wrap.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    function check() {
+      sc[1](el.scrollWidth > el.clientWidth + 1);
+    }
+    check();
+    const ro = new ResizeObserver(check);
+    ro.observe(el);
+    return function() {
+      ro.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: wrap,
+      className: "aura-tbl-wrap",
+      "data-density": density,
+      tabIndex: scrolls ? 0 : void 0,
+      role: scrolls ? "region" : void 0,
+      "aria-labelledby": scrolls && caption != null ? capId : void 0
+    },
+    /* @__PURE__ */ React.createElement("table", { ref, className: cx("aura-tbl", className), ...rest }, caption != null ? /* @__PURE__ */ React.createElement("caption", { id: capId, className: cx("aura-tbl__caption", captionHidden && "aura-sr-only") }, caption) : null, children)
+  );
+});
+function section(tag, cls) {
+  const C = React.forwardRef(function TableSection(props, ref) {
+    const { className, ...rest } = props;
+    return React.createElement(tag, Object.assign({ ref, className: cx(cls, className) }, rest));
+  });
+  return C;
+}
+const THead = section("thead", "aura-tbl__head");
+THead.displayName = "THead";
+const TBody = section("tbody", "aura-tbl__body");
+TBody.displayName = "TBody";
+const TFoot = section("tfoot", "aura-tbl__foot");
+TFoot.displayName = "TFoot";
+const Tr = React.forwardRef(function Tr2(props, ref) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ React.createElement("tr", { ref, className: cx("aura-tbl__row", className), ...rest });
+});
+function cellClass(base, p) {
+  const align = p.align || (p.numeric ? "end" : void 0);
+  return cx(
+    base,
+    align === "end" && "is-end",
+    align === "center" && "is-center",
+    p.numeric && "is-numeric",
+    p.mono && "aura-table__mono",
+    p.className
+  );
+}
+const Th = React.forwardRef(function Th2(props, ref) {
+  const { align, numeric, mono, className, scope, ...rest } = props;
+  return /* @__PURE__ */ React.createElement("th", { ref, scope: scope || "col", className: cellClass("aura-tbl__th", props), ...rest });
+});
+const Td = React.forwardRef(function Td2(props, ref) {
+  const { align, numeric, mono, className, scope, ...rest } = props;
+  return /* @__PURE__ */ React.createElement("td", { ref, className: cellClass("aura-tbl__td", props), ...rest });
+});
+export {
+  TBody,
+  TFoot,
+  THead,
+  Table,
+  Td,
+  Th,
+  Tr
+};

package/dist/esm/Tabs.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
 import { cx, uid, useMaybeControlled } from "./internal.js";
+import { useLinkComponent } from "./locale.js";
 const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const items = props.tabs || [], base = uid();
   const st = useMaybeControlled(
@@ -13,6 +14,40 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
   const current = items.filter(function(t) {
     return t.id === st[0];
   })[0] || items[0];
+  const Link = useLinkComponent(props.linkComponent);
+  const asLinks = items.length > 0 && items.every(function(t) {
+    return !!t.href;
+  });
+  if (asLinks)
+    return /* @__PURE__ */ React.createElement(
+      "nav",
+      {
+        ref,
+        "aria-label": props.label,
+        className: cx("aura-tabs aura-tabs--links", props.className)
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "aura-tabs__list" }, items.map(function(t) {
+        const on = current && t.id === current.id;
+        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(
+          Link,
+          {
+            key: t.id,
+            href: t.href,
+            className: cx("aura-tab", on && "is-active"),
+            "aria-current": on ? "page" : void 0,
+            onClick: function() {
+              st[1](t.id);
+            }
+          },
+          inner
+        );
+      }))
+    );
   function go(i) {
     const enabled = items.filter(function(t2) {
       return !t2.disabled;

package/dist/esm/Toaster.js

@@ -6,11 +6,19 @@ import { IconButton } from "./IconButton.js";
 import { cx, useMounted } from "./internal.js";
 import { useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
+const MAX_VISIBLE = 3;
 const toastState = {
   list: [],
+  queue: [],
   subs: [],
   n: 0
 };
+function promote() {
+  while (toastState.list.length < MAX_VISIBLE && toastState.queue.length) {
+    toastState.list = toastState.list.concat([toastState.queue[0]]);
+    toastState.queue = toastState.queue.slice(1);
+  }
+}
 function emitToasts() {
   toastState.subs.forEach(function(f) {
     f(toastState.list.slice());
@@ -18,18 +26,24 @@ function emitToasts() {
 }
 function show(opts) {
   const id = opts.id || "t" + ++toastState.n;
-  const at = toastState.list.findIndex(function(t) {
+  const byId = function(t) {
     return t.id === id;
-  });
+  };
+  const at = toastState.list.findIndex(byId), queued = toastState.queue.findIndex(byId);
+  const prev = at >= 0 ? toastState.list[at] : queued >= 0 ? toastState.queue[queued] : null;
   const entry = Object.assign({ tone: "info" }, opts, {
     id,
     loading: !!opts.loading,
-    rev: at >= 0 ? toastState.list[at].rev + 1 : 0
+    rev: prev ? prev.rev + 1 : 0
   });
   if (at >= 0) {
     toastState.list = toastState.list.slice();
     toastState.list[at] = entry;
-  } else toastState.list = toastState.list.concat([entry]).slice(-3);
+  } else if (queued >= 0) {
+    toastState.queue = toastState.queue.slice();
+    toastState.queue[queued] = entry;
+  } else if (toastState.list.length < MAX_VISIBLE) toastState.list = toastState.list.concat([entry]);
+  else toastState.queue = toastState.queue.concat([entry]);
   emitToasts();
   return id;
 }
@@ -51,9 +65,12 @@ toast.loading = function(title, opts) {
   );
 };
 toast.dismiss = function(id) {
-  toastState.list = toastState.list.filter(function(t) {
+  const keep = function(t) {
     return t.id !== id;
-  });
+  };
+  toastState.list = toastState.list.filter(keep);
+  toastState.queue = toastState.queue.filter(keep);
+  promote();
   emitToasts();
 };
 function ToastItem(props) {

package/dist/esm/Tooltip.js

@@ -23,9 +23,27 @@ const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
     function() {
       if (!open || !anchor.current || !tip.current) return;
       const r = anchor.current.getBoundingClientRect(), t = tip.current.getBoundingClientRect();
-      let side = props.side || "top", top = side === "top" ? r.top - t.height - 8 : r.bottom + 8;
-      if (side === "top" && top < 8) top = r.bottom + 8;
-      const left = Math.max(8, Math.min(r.left + r.width / 2 - t.width / 2, window.innerWidth - t.width - 8));
+      const vw = window.innerWidth, vh = window.innerHeight, gap = 8, m = 8;
+      let side = props.side || "top";
+      if (side === "top" && r.top - t.height - gap < m && r.bottom + gap + t.height <= vh - m) side = "bottom";
+      else if (side === "bottom" && r.bottom + gap + t.height > vh - m && r.top - t.height - gap >= m) side = "top";
+      else if (side === "left" && r.left - t.width - gap < m && r.right + gap + t.width <= vw - m) side = "right";
+      else if (side === "right" && r.right + gap + t.width > vw - m && r.left - t.width - gap >= m) side = "left";
+      const clampX = function(x) {
+        return Math.max(m, Math.min(x, vw - t.width - m));
+      };
+      const clampY = function(y) {
+        return Math.max(m, Math.min(y, vh - t.height - m));
+      };
+      let top, left;
+      if (side === "top" || side === "bottom") {
+        top = side === "top" ? r.top - t.height - gap : r.bottom + gap;
+        left = clampX(r.left + r.width / 2 - t.width / 2);
+      } else {
+        left = side === "left" ? r.left - t.width - gap : r.right + gap;
+        left = clampX(left);
+        top = clampY(r.top + r.height / 2 - t.height / 2);
+      }
       pos[1]({ top, left });
     },
     [open]

package/dist/esm/dates.js

@@ -141,6 +141,16 @@ function parseDate(text) {
   const dt = new Date(y, mo - 1, d);
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
+function todayIn(timeZone) {
+  const now = /* @__PURE__ */ new Date();
+  if (!timeZone) return toISO(now);
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(now);
+}
 export {
   DATE_TEXT,
   ERA,
@@ -160,5 +170,6 @@ export {
   pad,
   parseDate,
   same,
-  toISO
+  toISO,
+  todayIn
 };

package/dist/esm/index.js

@@ -14,6 +14,7 @@ import { RadioGroup } from "./RadioGroup.js";
 import { Switch } from "./Switch.js";
 import { Combobox, defaultFilter } from "./Combobox.js";
 import { DatePicker, DateRangePicker, Calendar, formatDate, parseDate, useFormatDate } from "./DatePicker.js";
+import { todayIn } from "./dates.js";
 import { Alert } from "./Alert.js";
 import { Toaster, toast } from "./Toaster.js";
 import { PasswordField } from "./PasswordField.js";
@@ -32,6 +33,10 @@ import { Stack } from "./Stack.js";
 import { Grid } from "./Grid.js";
 import { Container } from "./Container.js";
 import { AppShell } from "./AppShell.js";
+import { ActionBar } from "./ActionBar.js";
+import { Separator } from "./Separator.js";
+import { Table, THead, TBody, TFoot, Tr, Th, Td } from "./Table.js";
+import { BottomNav } from "./BottomNav.js";
 import { useBreakpoint, useResponsive, breakpoints } from "./responsive.js";
 import { Surface } from "./Surface.js";
 import { AuraProvider, useAuraLocale, useDensity, STRINGS } from "./locale.js";
@@ -54,11 +59,13 @@ import { Stepper } from "./Stepper.js";
 import { SegmentedControl } from "./SegmentedControl.js";
 export {
   Accordion,
+  ActionBar,
   Alert,
   AppShell,
   AuraProvider,
   Avatar,
   Badge,
+  BottomNav,
   Breadcrumb,
   Button,
   Calendar,
@@ -94,6 +101,7 @@ export {
   STRINGS,
   SegmentedControl,
   Select,
+  Separator,
   SideNav,
   Skeleton,
   Stack,
@@ -102,14 +110,21 @@ export {
   Stepper,
   Surface,
   Switch,
+  TBody,
+  TFoot,
+  THead,
+  Table,
   Tabs,
   Tag,
+  Td,
   TextField,
   Textarea,
+  Th,
   ThemeStyle,
   TimePicker,
   Toaster,
   Tooltip,
+  Tr,
   scale as brandScale,
   breakpoints,
   colorSchemeScript,
@@ -123,6 +138,7 @@ export {
   parseTime,
   statusTone,
   toast,
+  todayIn,
   useAuraLocale,
   useBreakpoint,
   useColorScheme,

package/dist/esm/locale.js

@@ -5,6 +5,7 @@ const LocaleContext = React.createContext(null);
 function AuraProvider(props) {
   const outer = React.useContext(LocaleContext);
   const density = props.density || outer && outer.density || null;
+  const timeZone = props.timeZone || outer && outer.timeZone || null;
   const value = React.useMemo(
     function() {
       const base = props.locale && STRINGS[props.locale] || STRINGS.en;
@@ -13,10 +14,11 @@ function AuraProvider(props) {
         calendar: props.calendar || null,
         strings: props.strings ? Object.assign({}, base, props.strings) : base,
         linkComponent: props.linkComponent || null,
-        density
+        density,
+        timeZone
       };
     },
-    [props.locale, props.calendar, props.strings, props.linkComponent, density]
+    [props.locale, props.calendar, props.strings, props.linkComponent, density, timeZone]
   );
   return /* @__PURE__ */ React.createElement(LocaleContext.Provider, { value }, props.density ? /* @__PURE__ */ React.createElement("div", { className: "aura-density", "data-density": props.density }, props.children) : props.children);
 }

package/dist/esm/strings.js

@@ -76,6 +76,7 @@ const STRINGS = {
     },
     prevPage: "Previous page",
     nextPage: "Next page",
+    totals: "Totals",
     rowCount: function(c) {
       return n(c) + " rows";
     },
@@ -189,6 +190,7 @@ const STRINGS = {
     },
     prevPage: "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
     nextPage: "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B",
+    totals: "\u0E23\u0E27\u0E21",
     rowCount: function(c) {
       return n(c) + " \u0E41\u0E16\u0E27";
     },
@@ -302,6 +304,7 @@ const STRINGS = {
     },
     prevPage: "F\xF6reg\xE5ende sida",
     nextPage: "N\xE4sta sida",
+    totals: "Summa",
     rowCount: function(c) {
       return nsv(c) + " rader";
     },