@jirawatpyk/aura-react 4.20.0 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -9,11 +9,11 @@ AURA Design System components as a real React package — ES modules, TypeScript
9
9
  One HTML file, no install — the packages are on npmjs, so jsDelivr serves them:
10
10
 
11
11
  ```html
12
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-tokens@4/aura.css" />
13
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@4/dist/styles.css" />
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-tokens@5/aura.css" />
13
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@5/dist/styles.css" />
14
14
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
15
15
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
16
- <script src="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@4/dist/aura.bundle.js"></script>
16
+ <script src="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@5/dist/aura.bundle.js"></script>
17
17
 
18
18
  <div id="root"></div>
19
19
  <script>
@@ -100,7 +100,7 @@ export function Providers({ children, locale }: { children: React.ReactNode; loc
100
100
  // app/layout.tsx (a Server Component): <body><Providers locale="th">{children}</Providers></body>
101
101
  ```
102
102
 
103
- `linkComponent` is used by Button `href`, Breadcrumb, Tabs and Menu items with `href`, BottomNav, Pagination `getHref` (page numbers and, since 4.17, the previous / next arrows), Stat `href`, SideNav and DataTable row/pager links. Each of them also takes its own `linkComponent`, which wins over the provider's. Pass `getHref` from a client component (it's a function too). The Next.js starter does all of this, and CI clicks every AURA link in it to check none triggers a full page load. Only `th` shows Buddhist-era years; `en` and `sv` are Gregorian (`sv` weeks start Monday). **Without a provider, components are English with Gregorian dates** — wrap Thai apps in `<AuraProvider locale="th">`. For dates in your own components use `useFormatDate()` — it follows the provider (`const fmt = useFormatDate(); fmt(iso, { format: 'long' })`). Plain `formatDate()` from the package root has no provider to read and stays Thai unless you pass `locale` (until 5.0); the one in `@jirawatpyk/aura-react/server` defaults to English and Gregorian. Values are always Gregorian ISO dates.
103
+ `linkComponent` is used by Button `href`, Breadcrumb, Tabs and Menu items with `href`, BottomNav, Pagination `getHref` (page numbers and, since 4.17, the previous / next arrows), Stat `href`, SideNav and DataTable row/pager links. Each of them also takes its own `linkComponent`, which wins over the provider's. Pass `getHref` from a client component (it's a function too). The Next.js starter does all of this, and CI clicks every AURA link in it to check none triggers a full page load. Only `th` shows Buddhist-era years; `en` and `sv` are Gregorian (`sv` weeks start Monday). **Without a provider, components are English with Gregorian dates** — wrap Thai apps in `<AuraProvider locale="th">`. For dates in your own components use `useFormatDate()` — it follows the provider (`const fmt = useFormatDate(); fmt(iso, { format: 'long' })`). Plain `formatDate()` has no provider to read: since 5.0 it is English and Gregorian unless you pass `locale`, the same function from the package root and from `@jirawatpyk/aura-react/server`. Values are always Gregorian ISO dates.
104
104
 
105
105
  ## Compact density
106
106
 
@@ -186,6 +186,14 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
186
186
  - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
187
187
  - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
188
188
 
189
+ ## Upgrading to 5.0
190
+
191
+ One breaking change: **`formatDate()` from the package root defaults to English and the Gregorian calendar** (`'2026-09-24'` → `24 Sept 2026`), like `@jirawatpyk/aura-react/server` and `useFormatDate()` without a provider — it is now the same function. Before 5.0 it defaulted to Thai with Buddhist-era years (`24 ก.ย. 2569`), and 4.20 warned in development for every call without a `locale`.
192
+
193
+ - Thai output: pass the locale, `formatDate(iso, { locale: 'th' })`, or in components use `useFormatDate()`, which follows `<AuraProvider locale="th">`.
194
+ - Find the calls to change: search for `formatDate(` without `locale` (`git grep -n "formatDate(" | grep -v locale`), or run 4.20 first and read the warning.
195
+ - Components, pickers and `/server` are unchanged. The CDN path is `@5`.
196
+
189
197
  ## Static tables, separators, tooltips, phone tables before hydration (4.20)
190
198
 
191
199
  ```tsx
@@ -201,7 +209,6 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
201
209
  - **Table** is plain `<table>` markup with DataTable's look: mono header band, hairlines, wrapping text, `numeric` cells right-aligned in tabular figures, a `TFoot` for totals. No sorting, paging or virtual rows — use DataTable for data. If it has to scroll sideways on a phone, its box becomes a focusable region named by the caption.
202
210
  - **Tooltip** `side` also takes `left` and `right`; every side flips when clipped and stays inside the window.
203
211
  - **DataTable on phones before hydration**: `stackBelow` cards and `hideBelow` columns are decided in CSS from the first paint, at any width (up to three distinct `hideBelow` widths per table), and each row is in the HTML once — the cards are the grid's own rows, laid out by a container query. The table sits in a few wrapper `div`s for this; `className` and `ref` go on the outermost. The `.aura-table__card*` classes are gone.
204
- - **`formatDate()` from the package root** warns once in development when called without a `locale`: in 5.0 it becomes English and Gregorian like `/server`. Pass `{ locale: 'th' }` or use `useFormatDate()`.
205
212
 
206
213
  ## Phones and touch
207
214
 
@@ -124,7 +124,7 @@ window.Aura = (() => {
124
124
  contrast: () => contrast,
125
125
  createTheme: () => createTheme,
126
126
  formatBytes: () => formatBytes,
127
- formatDate: () => formatDate2,
127
+ formatDate: () => formatDate,
128
128
  iconNames: () => iconNames,
129
129
  parseDate: () => parseDate,
130
130
  parseTime: () => parseTime,
@@ -1714,7 +1714,7 @@ window.Aura = (() => {
1714
1714
  const o = opts || {}, d = fromISO(iso);
1715
1715
  if (!d) return "";
1716
1716
  const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
1717
- const loc = o.locale || "th";
1717
+ const loc = o.locale || "en";
1718
1718
  return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
1719
1719
  }
1720
1720
  var MONTHS = null;
@@ -1757,32 +1757,19 @@ window.Aura = (() => {
1757
1757
  function todayIn(timeZone) {
1758
1758
  const now = /* @__PURE__ */ new Date();
1759
1759
  if (!timeZone) return toISO(now);
1760
- return new Intl.DateTimeFormat("en-CA", {
1761
- timeZone,
1762
- year: "numeric",
1763
- month: "2-digit",
1764
- day: "2-digit"
1765
- }).format(now);
1766
- }
1767
-
1768
- // src/DatePicker.tsx
1769
- var warnedNoLocale = false;
1770
- function isDev() {
1771
1760
  try {
1772
- return true;
1761
+ return new Intl.DateTimeFormat("en-CA", {
1762
+ timeZone,
1763
+ year: "numeric",
1764
+ month: "2-digit",
1765
+ day: "2-digit"
1766
+ }).format(now);
1773
1767
  } catch (e) {
1774
- return false;
1775
- }
1776
- }
1777
- function formatDate2(iso, opts) {
1778
- if (!warnedNoLocale && !(opts && opts.locale) && isDev()) {
1779
- warnedNoLocale = true;
1780
- console.warn(
1781
- "[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."
1782
- );
1768
+ return toISO(now);
1783
1769
  }
1784
- return formatDate(iso, opts);
1785
1770
  }
1771
+
1772
+ // src/DatePicker.tsx
1786
1773
  function useFormatDate() {
1787
1774
  const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
1788
1775
  return React17.useCallback(
@@ -1802,7 +1789,7 @@ window.Aura = (() => {
1802
1789
  var Calendar = React17.forwardRef(function Calendar2(props, ref) {
1803
1790
  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
1804
1791
  const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
1805
- const todayISO = props.today || todayIn(props.timeZone || ctx.timeZone);
1792
+ const todayISO = (props.today && fromISO(props.today) ? props.today : null) || todayIn(props.timeZone || ctx.timeZone);
1806
1793
  const today = fromISO(todayISO);
1807
1794
  const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
1808
1795
  const start = fromISO(props.start), end = fromISO(props.end);
@@ -3123,7 +3110,7 @@ window.Aura = (() => {
3123
3110
  };
3124
3111
  let top, left;
3125
3112
  if (side === "top" || side === "bottom") {
3126
- top = side === "top" ? r.top - t.height - gap : r.bottom + gap;
3113
+ top = clampY(side === "top" ? r.top - t.height - gap : r.bottom + gap);
3127
3114
  left = clampX(r.left + r.width / 2 - t.width / 2);
3128
3115
  } else {
3129
3116
  left = side === "left" ? r.left - t.width - gap : r.right + gap;
@@ -3350,6 +3337,12 @@ window.Aura = (() => {
3350
3337
  const measure = !!props.stackBelow || columns.some(function(c) {
3351
3338
  return c.hideBelow != null;
3352
3339
  });
3340
+ const levelShape = (props.stackBelow ? "s" : "") + Math.min(
3341
+ MAX_HIDE_LEVELS,
3342
+ columns.map(hidePx).filter(function(px, i, a) {
3343
+ return px != null && a.indexOf(px) === i;
3344
+ }).length
3345
+ );
3353
3346
  React28.useEffect(
3354
3347
  function() {
3355
3348
  if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
@@ -3362,14 +3355,14 @@ window.Aura = (() => {
3362
3355
  ro.disconnect();
3363
3356
  };
3364
3357
  },
3365
- [measure]
3358
+ [measure, levelShape]
3366
3359
  );
3367
3360
  const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
3368
3361
  useIsoLayoutEffect(
3369
3362
  function() {
3370
- if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
3363
+ if (measure && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
3371
3364
  },
3372
- [measure]
3365
+ [measure, levelShape]
3373
3366
  );
3374
3367
  const hideLevels = [];
3375
3368
  columns.forEach(function(c) {
@@ -3630,6 +3623,7 @@ window.Aura = (() => {
3630
3623
  function focusCell(r, c) {
3631
3624
  r = Math.max(0, Math.min(r, nRows));
3632
3625
  c = Math.max(0, Math.min(c, nCols - 1));
3626
+ if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
3633
3627
  activeState[1]({ r, c });
3634
3628
  pending.current = { r, c };
3635
3629
  if (virtual && r > 0) {
@@ -4189,7 +4183,9 @@ window.Aura = (() => {
4189
4183
  } else {
4190
4184
  const bodyRows = body = [];
4191
4185
  if (virtual && start > 0)
4192
- bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
4186
+ bodyRows.push(
4187
+ /* @__PURE__ */ React28.createElement("div", { key: "__top", className: "aura-table__spacer", style: { height: start * ROW_H + "px" }, "aria-hidden": true })
4188
+ );
4193
4189
  for (let ri = start; ri < end; ri++) {
4194
4190
  (function(r, i) {
4195
4191
  const k = r[rowKey], isSel = !!selSet[k];
@@ -4220,7 +4216,17 @@ window.Aura = (() => {
4220
4216
  })(pageRows[ri], ri);
4221
4217
  }
4222
4218
  if (virtual && end < pageRows.length)
4223
- bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
4219
+ bodyRows.push(
4220
+ /* @__PURE__ */ React28.createElement(
4221
+ "div",
4222
+ {
4223
+ key: "__bot",
4224
+ className: "aura-table__spacer",
4225
+ style: { height: (pageRows.length - end) * ROW_H + "px" },
4226
+ "aria-hidden": true
4227
+ }
4228
+ )
4229
+ );
4224
4230
  }
4225
4231
  let foot = null;
4226
4232
  function pagerButton(dir) {
@@ -4455,7 +4461,7 @@ window.Aura = (() => {
4455
4461
  className: cx("aura-tabs aura-tabs--links", props.className)
4456
4462
  },
4457
4463
  /* @__PURE__ */ React30.createElement("div", { className: "aura-tabs__list" }, items2.map(function(t) {
4458
- const on = current2 && t.id === current2.id;
4464
+ const on = t.id === st[0];
4459
4465
  const inner = [
4460
4466
  t.icon ? /* @__PURE__ */ React30.createElement(Icon, { key: "i", name: t.icon }) : null,
4461
4467
  t.label,
@@ -4468,7 +4474,8 @@ window.Aura = (() => {
4468
4474
  href: t.href,
4469
4475
  className: cx("aura-tab", on && "is-active"),
4470
4476
  "aria-current": on ? "page" : void 0,
4471
- onClick: function() {
4477
+ onClick: function(e) {
4478
+ if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
4472
4479
  st[1](t.id);
4473
4480
  }
4474
4481
  },
@@ -105,7 +105,7 @@ __export(index_exports, {
105
105
  contrast: () => contrast,
106
106
  createTheme: () => createTheme,
107
107
  formatBytes: () => formatBytes,
108
- formatDate: () => formatDate2,
108
+ formatDate: () => formatDate,
109
109
  iconNames: () => iconNames,
110
110
  parseDate: () => parseDate,
111
111
  parseTime: () => parseTime,
@@ -1696,7 +1696,7 @@ function formatDate(iso, opts) {
1696
1696
  const o = opts || {}, d = fromISO(iso);
1697
1697
  if (!d) return "";
1698
1698
  const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
1699
- const loc = o.locale || "th";
1699
+ const loc = o.locale || "en";
1700
1700
  return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
1701
1701
  }
1702
1702
  var MONTHS = null;
@@ -1739,32 +1739,19 @@ function parseDate(text) {
1739
1739
  function todayIn(timeZone) {
1740
1740
  const now = /* @__PURE__ */ new Date();
1741
1741
  if (!timeZone) return toISO(now);
1742
- return new Intl.DateTimeFormat("en-CA", {
1743
- timeZone,
1744
- year: "numeric",
1745
- month: "2-digit",
1746
- day: "2-digit"
1747
- }).format(now);
1748
- }
1749
-
1750
- // src/DatePicker.tsx
1751
- var warnedNoLocale = false;
1752
- function isDev() {
1753
1742
  try {
1754
- return process.env.NODE_ENV !== "production";
1743
+ return new Intl.DateTimeFormat("en-CA", {
1744
+ timeZone,
1745
+ year: "numeric",
1746
+ month: "2-digit",
1747
+ day: "2-digit"
1748
+ }).format(now);
1755
1749
  } catch (e) {
1756
- return false;
1750
+ return toISO(now);
1757
1751
  }
1758
1752
  }
1759
- function formatDate2(iso, opts) {
1760
- if (!warnedNoLocale && !(opts && opts.locale) && isDev()) {
1761
- warnedNoLocale = true;
1762
- console.warn(
1763
- "[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."
1764
- );
1765
- }
1766
- return formatDate(iso, opts);
1767
- }
1753
+
1754
+ // src/DatePicker.tsx
1768
1755
  function useFormatDate() {
1769
1756
  const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
1770
1757
  return React17.useCallback(
@@ -1784,7 +1771,7 @@ function useFormatDate() {
1784
1771
  var Calendar = React17.forwardRef(function Calendar2(props, ref) {
1785
1772
  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
1786
1773
  const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
1787
- const todayISO = props.today || todayIn(props.timeZone || ctx.timeZone);
1774
+ const todayISO = (props.today && fromISO(props.today) ? props.today : null) || todayIn(props.timeZone || ctx.timeZone);
1788
1775
  const today = fromISO(todayISO);
1789
1776
  const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
1790
1777
  const start = fromISO(props.start), end = fromISO(props.end);
@@ -3105,7 +3092,7 @@ var Tooltip = React26.forwardRef(function Tooltip2(props, ref) {
3105
3092
  };
3106
3093
  let top, left;
3107
3094
  if (side === "top" || side === "bottom") {
3108
- top = side === "top" ? r.top - t.height - gap : r.bottom + gap;
3095
+ top = clampY(side === "top" ? r.top - t.height - gap : r.bottom + gap);
3109
3096
  left = clampX(r.left + r.width / 2 - t.width / 2);
3110
3097
  } else {
3111
3098
  left = side === "left" ? r.left - t.width - gap : r.right + gap;
@@ -3332,6 +3319,12 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
3332
3319
  const measure = !!props.stackBelow || columns.some(function(c) {
3333
3320
  return c.hideBelow != null;
3334
3321
  });
3322
+ const levelShape = (props.stackBelow ? "s" : "") + Math.min(
3323
+ MAX_HIDE_LEVELS,
3324
+ columns.map(hidePx).filter(function(px, i, a) {
3325
+ return px != null && a.indexOf(px) === i;
3326
+ }).length
3327
+ );
3335
3328
  React28.useEffect(
3336
3329
  function() {
3337
3330
  if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
@@ -3344,14 +3337,14 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
3344
3337
  ro.disconnect();
3345
3338
  };
3346
3339
  },
3347
- [measure]
3340
+ [measure, levelShape]
3348
3341
  );
3349
3342
  const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
3350
3343
  useIsoLayoutEffect(
3351
3344
  function() {
3352
- if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
3345
+ if (measure && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
3353
3346
  },
3354
- [measure]
3347
+ [measure, levelShape]
3355
3348
  );
3356
3349
  const hideLevels = [];
3357
3350
  columns.forEach(function(c) {
@@ -3612,6 +3605,7 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
3612
3605
  function focusCell(r, c) {
3613
3606
  r = Math.max(0, Math.min(r, nRows));
3614
3607
  c = Math.max(0, Math.min(c, nCols - 1));
3608
+ if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
3615
3609
  activeState[1]({ r, c });
3616
3610
  pending.current = { r, c };
3617
3611
  if (virtual && r > 0) {
@@ -4171,7 +4165,9 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
4171
4165
  } else {
4172
4166
  const bodyRows = body = [];
4173
4167
  if (virtual && start > 0)
4174
- bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
4168
+ bodyRows.push(
4169
+ /* @__PURE__ */ React28.createElement("div", { key: "__top", className: "aura-table__spacer", style: { height: start * ROW_H + "px" }, "aria-hidden": true })
4170
+ );
4175
4171
  for (let ri = start; ri < end; ri++) {
4176
4172
  (function(r, i) {
4177
4173
  const k = r[rowKey], isSel = !!selSet[k];
@@ -4202,7 +4198,17 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
4202
4198
  })(pageRows[ri], ri);
4203
4199
  }
4204
4200
  if (virtual && end < pageRows.length)
4205
- bodyRows.push(/* @__PURE__ */ React28.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
4201
+ bodyRows.push(
4202
+ /* @__PURE__ */ React28.createElement(
4203
+ "div",
4204
+ {
4205
+ key: "__bot",
4206
+ className: "aura-table__spacer",
4207
+ style: { height: (pageRows.length - end) * ROW_H + "px" },
4208
+ "aria-hidden": true
4209
+ }
4210
+ )
4211
+ );
4206
4212
  }
4207
4213
  let foot = null;
4208
4214
  function pagerButton(dir) {
@@ -4437,7 +4443,7 @@ var Tabs = React30.forwardRef(function Tabs2(props, ref) {
4437
4443
  className: cx("aura-tabs aura-tabs--links", props.className)
4438
4444
  },
4439
4445
  /* @__PURE__ */ React30.createElement("div", { className: "aura-tabs__list" }, items2.map(function(t) {
4440
- const on = current2 && t.id === current2.id;
4446
+ const on = t.id === st[0];
4441
4447
  const inner = [
4442
4448
  t.icon ? /* @__PURE__ */ React30.createElement(Icon, { key: "i", name: t.icon }) : null,
4443
4449
  t.label,
@@ -4450,7 +4456,8 @@ var Tabs = React30.forwardRef(function Tabs2(props, ref) {
4450
4456
  href: t.href,
4451
4457
  className: cx("aura-tab", on && "is-active"),
4452
4458
  "aria-current": on ? "page" : void 0,
4453
- onClick: function() {
4459
+ onClick: function(e) {
4460
+ if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
4454
4461
  st[1](t.id);
4455
4462
  }
4456
4463
  },
@@ -99,6 +99,12 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
99
99
  const measure = !!props.stackBelow || columns.some(function(c) {
100
100
  return c.hideBelow != null;
101
101
  });
102
+ const levelShape = (props.stackBelow ? "s" : "") + Math.min(
103
+ MAX_HIDE_LEVELS,
104
+ columns.map(hidePx).filter(function(px, i, a) {
105
+ return px != null && a.indexOf(px) === i;
106
+ }).length
107
+ );
102
108
  React.useEffect(
103
109
  function() {
104
110
  if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
@@ -111,14 +117,14 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
111
117
  ro.disconnect();
112
118
  };
113
119
  },
114
- [measure]
120
+ [measure, levelShape]
115
121
  );
116
122
  const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
117
123
  useIsoLayoutEffect(
118
124
  function() {
119
- if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
125
+ if (measure && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
120
126
  },
121
- [measure]
127
+ [measure, levelShape]
122
128
  );
123
129
  const hideLevels = [];
124
130
  columns.forEach(function(c) {
@@ -379,6 +385,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
379
385
  function focusCell(r, c) {
380
386
  r = Math.max(0, Math.min(r, nRows));
381
387
  c = Math.max(0, Math.min(c, nCols - 1));
388
+ if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
382
389
  activeState[1]({ r, c });
383
390
  pending.current = { r, c };
384
391
  if (virtual && r > 0) {
@@ -938,7 +945,9 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
938
945
  } else {
939
946
  const bodyRows = body = [];
940
947
  if (virtual && start > 0)
941
- bodyRows.push(/* @__PURE__ */ React.createElement("div", { key: "__top", style: { height: start * ROW_H + "px" }, "aria-hidden": true }));
948
+ bodyRows.push(
949
+ /* @__PURE__ */ React.createElement("div", { key: "__top", className: "aura-table__spacer", style: { height: start * ROW_H + "px" }, "aria-hidden": true })
950
+ );
942
951
  for (let ri = start; ri < end; ri++) {
943
952
  (function(r, i) {
944
953
  const k = r[rowKey], isSel = !!selSet[k];
@@ -969,7 +978,17 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
969
978
  })(pageRows[ri], ri);
970
979
  }
971
980
  if (virtual && end < pageRows.length)
972
- bodyRows.push(/* @__PURE__ */ React.createElement("div", { key: "__bot", style: { height: (pageRows.length - end) * ROW_H + "px" }, "aria-hidden": true }));
981
+ bodyRows.push(
982
+ /* @__PURE__ */ React.createElement(
983
+ "div",
984
+ {
985
+ key: "__bot",
986
+ className: "aura-table__spacer",
987
+ style: { height: (pageRows.length - end) * ROW_H + "px" },
988
+ "aria-hidden": true
989
+ }
990
+ )
991
+ );
973
992
  }
974
993
  let foot = null;
975
994
  function pagerButton(dir) {
@@ -21,24 +21,7 @@ import {
21
21
  toISO,
22
22
  todayIn
23
23
  } from "./dates.js";
24
- import { parseDate as parseDate2 } from "./dates.js";
25
- let warnedNoLocale = false;
26
- function isDev() {
27
- try {
28
- return true;
29
- } catch (e) {
30
- return false;
31
- }
32
- }
33
- function formatDate(iso, opts) {
34
- if (!warnedNoLocale && !(opts && opts.locale) && isDev()) {
35
- warnedNoLocale = true;
36
- console.warn(
37
- "[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."
38
- );
39
- }
40
- return formatDateBase(iso, opts);
41
- }
24
+ import { formatDate, parseDate as parseDate2 } from "./dates.js";
42
25
  function useFormatDate() {
43
26
  const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
44
27
  return React.useCallback(
@@ -58,7 +41,7 @@ function useFormatDate() {
58
41
  const Calendar = React.forwardRef(function Calendar2(props, ref) {
59
42
  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
60
43
  const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
61
- const todayISO = props.today || todayIn(props.timeZone || ctx.timeZone);
44
+ const todayISO = (props.today && fromISO(props.today) ? props.today : null) || todayIn(props.timeZone || ctx.timeZone);
62
45
  const today = fromISO(todayISO);
63
46
  const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
64
47
  const start = fromISO(props.start), end = fromISO(props.end);
package/dist/esm/Tabs.js CHANGED
@@ -27,7 +27,7 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
27
27
  className: cx("aura-tabs aura-tabs--links", props.className)
28
28
  },
29
29
  /* @__PURE__ */ React.createElement("div", { className: "aura-tabs__list" }, items.map(function(t) {
30
- const on = current && t.id === current.id;
30
+ const on = t.id === st[0];
31
31
  const inner = [
32
32
  t.icon ? /* @__PURE__ */ React.createElement(Icon, { key: "i", name: t.icon }) : null,
33
33
  t.label,
@@ -40,7 +40,8 @@ const Tabs = React.forwardRef(function Tabs2(props, ref) {
40
40
  href: t.href,
41
41
  className: cx("aura-tab", on && "is-active"),
42
42
  "aria-current": on ? "page" : void 0,
43
- onClick: function() {
43
+ onClick: function(e) {
44
+ if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
44
45
  st[1](t.id);
45
46
  }
46
47
  },
@@ -37,7 +37,7 @@ const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
37
37
  };
38
38
  let top, left;
39
39
  if (side === "top" || side === "bottom") {
40
- top = side === "top" ? r.top - t.height - gap : r.bottom + gap;
40
+ top = clampY(side === "top" ? r.top - t.height - gap : r.bottom + gap);
41
41
  left = clampX(r.left + r.width / 2 - t.width / 2);
42
42
  } else {
43
43
  left = side === "left" ? r.left - t.width - gap : r.right + gap;
package/dist/esm/dates.js CHANGED
@@ -101,7 +101,7 @@ function formatDate(iso, opts) {
101
101
  const o = opts || {}, d = fromISO(iso);
102
102
  if (!d) return "";
103
103
  const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
104
- const loc = o.locale || "th";
104
+ const loc = o.locale || "en";
105
105
  return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
106
106
  }
107
107
  let MONTHS = null;
@@ -144,12 +144,16 @@ function parseDate(text) {
144
144
  function todayIn(timeZone) {
145
145
  const now = /* @__PURE__ */ new Date();
146
146
  if (!timeZone) return toISO(now);
147
- return new Intl.DateTimeFormat("en-CA", {
148
- timeZone,
149
- year: "numeric",
150
- month: "2-digit",
151
- day: "2-digit"
152
- }).format(now);
147
+ try {
148
+ return new Intl.DateTimeFormat("en-CA", {
149
+ timeZone,
150
+ year: "numeric",
151
+ month: "2-digit",
152
+ day: "2-digit"
153
+ }).format(now);
154
+ } catch (e) {
155
+ return toISO(now);
156
+ }
153
157
  }
154
158
  export {
155
159
  DATE_TEXT,
package/dist/index.d.ts CHANGED
@@ -171,7 +171,7 @@ export interface DataTableProps {
171
171
  onPinnedColumnsChange?: ((keys: string[]) => void) | undefined;
172
172
  /** `compact` = 40px rows (48px on touch screens). Default: the surrounding density. */
173
173
  density?: "comfortable" | "compact" | undefined;
174
- /** Table width in px below which rows render as stacked cards (phones). Try 640. It follows the table's own width, not the window. Since 4.20 the cards are the same markup as the grid, laid out by a container query, so any width is right before hydration and each row is in the HTML once. */
174
+ /** Table width in px below which rows render as stacked cards (phones). Try 640. It follows the table's own width, not the window. Since 4.20 the cards are the same markup as the grid, laid out by a container query, so any width is right before hydration and each row is in the HTML once. With `height` (virtual rows) the server can only send the first screenful; the rest of the cards arrive on hydration. */
175
175
  stackBelow?: number | undefined;
176
176
  className?: string | undefined;
177
177
  }
@@ -745,7 +745,7 @@ export interface SegmentedControlProps {
745
745
  /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
746
746
  export type ISODate = string;
747
747
  export interface DateDisplayOptions {
748
- /** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `th` unless given. */
748
+ /** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `en` unless given (5.0; `th` before). */
749
749
  locale?: "th" | "en" | "sv" | undefined;
750
750
  /** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
751
751
  calendar?: "buddhist" | "gregory" | undefined;
@@ -1227,14 +1227,14 @@ export declare const Combobox: ComboboxComponent;
1227
1227
  export type FormatDateOptions = DateDisplayOptions & {
1228
1228
  format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions | undefined;
1229
1229
  };
1230
+ /** Format an ISO date for display: "18 Sept 2026" by default (English, Gregorian — 5.0); `{ locale: 'th' }` gives
1231
+ * "18 ก.ย. 2569" (Buddhist era), `{ locale: 'sv' }` "18 sep. 2026". The same function from the package root and from
1232
+ * `/server`. In components, `useFormatDate()` follows the AuraProvider's locale instead. */
1233
+ export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
1230
1234
  /** Parse typed text: dd/mm/yyyy (Buddhist years ≥ 2400 are converted), d-m-yyyy, d.m.yyyy, yyyy-mm-dd or '18 ก.ย. 2569' / '18 Sep 2026'. */
1231
1235
  export declare function parseDate(text: string | null | undefined): ISODate | null;
1232
1236
  /** Today as an ISO date in an IANA time zone (e.g. `Asia/Bangkok`), or in the runtime's own zone without one. (4.19) */
1233
1237
  export declare function todayIn(timeZone?: string | null): ISODate;
1234
- /** Format an ISO date for display. Without a `locale` it is Thai with Buddhist-era years **until 5.0, which makes it
1235
- * English and Gregorian** like `@jirawatpyk/aura-react/server` and `useFormatDate()`. Pass `{ locale }` (or use
1236
- * `useFormatDate()` in components) so the switch changes nothing for you; a call without one warns once in development. */
1237
- export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
1238
1238
  /** formatDate bound to the nearest AuraProvider: its locale and calendar (English, Gregorian without one).
1239
1239
  * Options you pass still win. Use it in components; plain formatDate() stays for code outside React. */
1240
1240
  export declare function useFormatDate(): (iso: ISODate | null | undefined, opts?: FormatDateOptions) => string;
@@ -27,7 +27,7 @@ __export(server_exports, {
27
27
  contrast: () => contrast,
28
28
  createTheme: () => createTheme,
29
29
  formatBytes: () => formatBytes,
30
- formatDate: () => formatDate2,
30
+ formatDate: () => formatDate,
31
31
  fromISO: () => fromISO,
32
32
  parseDate: () => parseDate,
33
33
  parseTime: () => parseTime,
@@ -73,7 +73,7 @@ function formatDate(iso, opts) {
73
73
  const o = opts || {}, d = fromISO(iso);
74
74
  if (!d) return "";
75
75
  const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
76
- const loc = o.locale || "th";
76
+ const loc = o.locale || "en";
77
77
  return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
78
78
  }
79
79
  var MONTHS = null;
@@ -116,12 +116,16 @@ function parseDate(text) {
116
116
  function todayIn(timeZone) {
117
117
  const now = /* @__PURE__ */ new Date();
118
118
  if (!timeZone) return toISO(now);
119
- return new Intl.DateTimeFormat("en-CA", {
120
- timeZone,
121
- year: "numeric",
122
- month: "2-digit",
123
- day: "2-digit"
124
- }).format(now);
119
+ try {
120
+ return new Intl.DateTimeFormat("en-CA", {
121
+ timeZone,
122
+ year: "numeric",
123
+ month: "2-digit",
124
+ day: "2-digit"
125
+ }).format(now);
126
+ } catch (e) {
127
+ return toISO(now);
128
+ }
125
129
  }
126
130
 
127
131
  // src/text.ts
@@ -796,10 +800,3 @@ function colorSchemeScript(options) {
796
800
 
797
801
  // src/breakpoints.ts
798
802
  var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
799
-
800
- // src/server.ts
801
- function formatDate2(iso, opts) {
802
- const o = Object.assign({}, opts);
803
- if (!o.locale) o.locale = "en";
804
- return formatDate(iso, o);
805
- }
@@ -4,7 +4,7 @@ export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
4
4
  /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
5
5
  export type ISODate = string;
6
6
  export interface DateDisplayOptions {
7
- /** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `th` unless given. */
7
+ /** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `en` unless given (5.0; `th` before). */
8
8
  locale?: "th" | "en" | "sv" | undefined;
9
9
  /** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
10
10
  calendar?: "buddhist" | "gregory" | undefined;
@@ -42,6 +42,10 @@ export type FormatDateOptions = DateDisplayOptions & {
42
42
  };
43
43
  export declare function toISO(d: Date | null | undefined): ISODate | null;
44
44
  export declare function fromISO(s: ISODate | null | undefined): Date | null;
45
+ /** Format an ISO date for display: "18 Sept 2026" by default (English, Gregorian — 5.0); `{ locale: 'th' }` gives
46
+ * "18 ก.ย. 2569" (Buddhist era), `{ locale: 'sv' }` "18 sep. 2026". The same function from the package root and from
47
+ * `/server`. In components, `useFormatDate()` follows the AuraProvider's locale instead. */
48
+ export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
45
49
  /** Parse typed text: dd/mm/yyyy (Buddhist years ≥ 2400 are converted), d-m-yyyy, d.m.yyyy, yyyy-mm-dd or '18 ก.ย. 2569' / '18 Sep 2026'. */
46
50
  export declare function parseDate(text: string | null | undefined): ISODate | null;
47
51
  /** Today as an ISO date in an IANA time zone (e.g. `Asia/Bangkok`), or in the runtime's own zone without one. (4.19) */
@@ -162,9 +166,6 @@ export declare const breakpoints: {
162
166
  lg: 1024;
163
167
  xl: 1280;
164
168
  };
165
- /** Format an ISO date for display: "24 Sept 2026" by default (English, Gregorian); `{ locale: 'th' }` gives
166
- * "24 ก.ย. 2569", `{ locale: 'sv' }` "24 sep. 2026". Options as in the package root's formatDate. */
167
- export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
168
169
 
169
170
  export {
170
171
  scale as brandScale,
@@ -34,7 +34,7 @@ function formatDate(iso, opts) {
34
34
  const o = opts || {}, d = fromISO(iso);
35
35
  if (!d) return "";
36
36
  const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
37
- const loc = o.locale || "th";
37
+ const loc = o.locale || "en";
38
38
  return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
39
39
  }
40
40
  var MONTHS = null;
@@ -77,12 +77,16 @@ function parseDate(text) {
77
77
  function todayIn(timeZone) {
78
78
  const now = /* @__PURE__ */ new Date();
79
79
  if (!timeZone) return toISO(now);
80
- return new Intl.DateTimeFormat("en-CA", {
81
- timeZone,
82
- year: "numeric",
83
- month: "2-digit",
84
- day: "2-digit"
85
- }).format(now);
80
+ try {
81
+ return new Intl.DateTimeFormat("en-CA", {
82
+ timeZone,
83
+ year: "numeric",
84
+ month: "2-digit",
85
+ day: "2-digit"
86
+ }).format(now);
87
+ } catch (e) {
88
+ return toISO(now);
89
+ }
86
90
  }
87
91
 
88
92
  // src/text.ts
@@ -757,13 +761,6 @@ function colorSchemeScript(options) {
757
761
 
758
762
  // src/breakpoints.ts
759
763
  var breakpoints = { sm: 640, md: 768, lg: 1024, xl: 1280 };
760
-
761
- // src/server.ts
762
- function formatDate2(iso, opts) {
763
- const o = Object.assign({}, opts);
764
- if (!o.locale) o.locale = "en";
765
- return formatDate(iso, o);
766
- }
767
764
  export {
768
765
  STRINGS,
769
766
  scale as brandScale,
@@ -772,7 +769,7 @@ export {
772
769
  contrast,
773
770
  createTheme,
774
771
  formatBytes,
775
- formatDate2 as formatDate,
772
+ formatDate,
776
773
  fromISO,
777
774
  parseDate,
778
775
  parseTime,
package/dist/styles.css CHANGED
@@ -1365,6 +1365,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1365
1365
  @media (max-width: 767.98px) { :root:has(.aura-bottomnav--below-md) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
1366
1366
  @media (max-width: 1023.98px) { :root:has(.aura-bottomnav--below-lg) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
1367
1367
  @media (max-width: 1279.98px) { :root:has(.aura-bottomnav--below-xl) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
1368
+ /* Toasts clear a BottomNav wherever it shows (phones and tablets). */
1369
+ .aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-6) + var(--aura-bottomnav-offset, 0px)); }
1368
1370
  @media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-4) + var(--aura-bottomnav-offset, 0px)); } }
1369
1371
 
1370
1372
  /* ---------- 4.19: ActionBar ---------- */
@@ -1459,7 +1461,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1459
1461
  margin-bottom: var(--aura-space-1);
1460
1462
  padding: 0; line-height: normal;
1461
1463
  }
1462
- .aura-table__td[data-hide] { display: block; }
1464
+ .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
1465
+ .aura-table__spacer { display: none; }
1463
1466
  .aura-table__td[data-label]::before {
1464
1467
  content: attr(data-label); content: attr(data-label) / '';
1465
1468
  display: block; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start;
@@ -1367,6 +1367,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1367
1367
  @media (max-width: 767.98px) { :root:has(.aura-bottomnav--below-md) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
1368
1368
  @media (max-width: 1023.98px) { :root:has(.aura-bottomnav--below-lg) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
1369
1369
  @media (max-width: 1279.98px) { :root:has(.aura-bottomnav--below-xl) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
1370
+ /* Toasts clear a BottomNav wherever it shows (phones and tablets). */
1371
+ .aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-6) + var(--aura-bottomnav-offset, 0px)); }
1370
1372
  @media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-4) + var(--aura-bottomnav-offset, 0px)); } }
1371
1373
 
1372
1374
  /* ---------- 4.19: ActionBar ---------- */
@@ -1461,7 +1463,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1461
1463
  margin-bottom: var(--aura-space-1);
1462
1464
  padding: 0; line-height: normal;
1463
1465
  }
1464
- .aura-table__td[data-hide] { display: block; }
1466
+ .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
1467
+ .aura-table__spacer { display: none; }
1465
1468
  .aura-table__td[data-label]::before {
1466
1469
  content: attr(data-label); content: attr(data-label) / '';
1467
1470
  display: block; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jirawatpyk/aura-react",
3
- "version": "4.20.0",
3
+ "version": "5.0.1",
4
4
  "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
5
5
  "license": "MIT",
6
6
  "type": "module",