@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 +12 -5
- package/dist/aura.bundle.js +40 -33
- package/dist/cjs/index.cjs +40 -33
- package/dist/esm/DataTable.js +24 -5
- package/dist/esm/DatePicker.js +2 -19
- package/dist/esm/Tabs.js +3 -2
- package/dist/esm/Tooltip.js +1 -1
- package/dist/esm/dates.js +11 -7
- package/dist/index.d.ts +6 -6
- package/dist/server/index.cjs +12 -15
- package/dist/server/index.d.ts +5 -4
- package/dist/server/index.js +12 -15
- package/dist/styles.css +4 -1
- package/dist/styles.layer.css +4 -1
- package/package.json +1 -1
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@
|
|
13
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jirawatpyk/aura-react@
|
|
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@
|
|
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()`
|
|
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
|
|
package/dist/aura.bundle.js
CHANGED
|
@@ -124,7 +124,7 @@ window.Aura = (() => {
|
|
|
124
124
|
contrast: () => contrast,
|
|
125
125
|
createTheme: () => createTheme,
|
|
126
126
|
formatBytes: () => formatBytes,
|
|
127
|
-
formatDate: () =>
|
|
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 || "
|
|
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
|
|
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
|
|
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 &&
|
|
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(
|
|
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(
|
|
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 =
|
|
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
|
},
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -105,7 +105,7 @@ __export(index_exports, {
|
|
|
105
105
|
contrast: () => contrast,
|
|
106
106
|
createTheme: () => createTheme,
|
|
107
107
|
formatBytes: () => formatBytes,
|
|
108
|
-
formatDate: () =>
|
|
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 || "
|
|
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
|
|
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
|
|
1750
|
+
return toISO(now);
|
|
1757
1751
|
}
|
|
1758
1752
|
}
|
|
1759
|
-
|
|
1760
|
-
|
|
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 &&
|
|
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(
|
|
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(
|
|
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 =
|
|
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
|
},
|
package/dist/esm/DataTable.js
CHANGED
|
@@ -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 &&
|
|
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(
|
|
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(
|
|
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) {
|
package/dist/esm/DatePicker.js
CHANGED
|
@@ -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 =
|
|
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
|
},
|
package/dist/esm/Tooltip.js
CHANGED
|
@@ -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 || "
|
|
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
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
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): `
|
|
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;
|
package/dist/server/index.cjs
CHANGED
|
@@ -27,7 +27,7 @@ __export(server_exports, {
|
|
|
27
27
|
contrast: () => contrast,
|
|
28
28
|
createTheme: () => createTheme,
|
|
29
29
|
formatBytes: () => formatBytes,
|
|
30
|
-
formatDate: () =>
|
|
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 || "
|
|
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
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
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
|
-
}
|
package/dist/server/index.d.ts
CHANGED
|
@@ -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): `
|
|
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,
|
package/dist/server/index.js
CHANGED
|
@@ -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 || "
|
|
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
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
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
|
-
|
|
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;
|
package/dist/styles.layer.css
CHANGED
|
@@ -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