@jirawatpyk/aura-react 5.0.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.
@@ -1757,12 +1757,16 @@ 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);
1760
+ try {
1761
+ return new Intl.DateTimeFormat("en-CA", {
1762
+ timeZone,
1763
+ year: "numeric",
1764
+ month: "2-digit",
1765
+ day: "2-digit"
1766
+ }).format(now);
1767
+ } catch (e) {
1768
+ return toISO(now);
1769
+ }
1766
1770
  }
1767
1771
 
1768
1772
  // src/DatePicker.tsx
@@ -1785,7 +1789,7 @@ window.Aura = (() => {
1785
1789
  var Calendar = React17.forwardRef(function Calendar2(props, ref) {
1786
1790
  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
1787
1791
  const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
1788
- 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);
1789
1793
  const today = fromISO(todayISO);
1790
1794
  const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
1791
1795
  const start = fromISO(props.start), end = fromISO(props.end);
@@ -3106,7 +3110,7 @@ window.Aura = (() => {
3106
3110
  };
3107
3111
  let top, left;
3108
3112
  if (side === "top" || side === "bottom") {
3109
- top = side === "top" ? r.top - t.height - gap : r.bottom + gap;
3113
+ top = clampY(side === "top" ? r.top - t.height - gap : r.bottom + gap);
3110
3114
  left = clampX(r.left + r.width / 2 - t.width / 2);
3111
3115
  } else {
3112
3116
  left = side === "left" ? r.left - t.width - gap : r.right + gap;
@@ -3333,6 +3337,12 @@ window.Aura = (() => {
3333
3337
  const measure = !!props.stackBelow || columns.some(function(c) {
3334
3338
  return c.hideBelow != null;
3335
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
+ );
3336
3346
  React28.useEffect(
3337
3347
  function() {
3338
3348
  if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
@@ -3345,14 +3355,14 @@ window.Aura = (() => {
3345
3355
  ro.disconnect();
3346
3356
  };
3347
3357
  },
3348
- [measure]
3358
+ [measure, levelShape]
3349
3359
  );
3350
3360
  const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
3351
3361
  useIsoLayoutEffect(
3352
3362
  function() {
3353
- if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
3363
+ if (measure && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
3354
3364
  },
3355
- [measure]
3365
+ [measure, levelShape]
3356
3366
  );
3357
3367
  const hideLevels = [];
3358
3368
  columns.forEach(function(c) {
@@ -3613,6 +3623,7 @@ window.Aura = (() => {
3613
3623
  function focusCell(r, c) {
3614
3624
  r = Math.max(0, Math.min(r, nRows));
3615
3625
  c = Math.max(0, Math.min(c, nCols - 1));
3626
+ if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
3616
3627
  activeState[1]({ r, c });
3617
3628
  pending.current = { r, c };
3618
3629
  if (virtual && r > 0) {
@@ -4172,7 +4183,9 @@ window.Aura = (() => {
4172
4183
  } else {
4173
4184
  const bodyRows = body = [];
4174
4185
  if (virtual && start > 0)
4175
- 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
+ );
4176
4189
  for (let ri = start; ri < end; ri++) {
4177
4190
  (function(r, i) {
4178
4191
  const k = r[rowKey], isSel = !!selSet[k];
@@ -4203,7 +4216,17 @@ window.Aura = (() => {
4203
4216
  })(pageRows[ri], ri);
4204
4217
  }
4205
4218
  if (virtual && end < pageRows.length)
4206
- 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
+ );
4207
4230
  }
4208
4231
  let foot = null;
4209
4232
  function pagerButton(dir) {
@@ -4438,7 +4461,7 @@ window.Aura = (() => {
4438
4461
  className: cx("aura-tabs aura-tabs--links", props.className)
4439
4462
  },
4440
4463
  /* @__PURE__ */ React30.createElement("div", { className: "aura-tabs__list" }, items2.map(function(t) {
4441
- const on = current2 && t.id === current2.id;
4464
+ const on = t.id === st[0];
4442
4465
  const inner = [
4443
4466
  t.icon ? /* @__PURE__ */ React30.createElement(Icon, { key: "i", name: t.icon }) : null,
4444
4467
  t.label,
@@ -4451,7 +4474,8 @@ window.Aura = (() => {
4451
4474
  href: t.href,
4452
4475
  className: cx("aura-tab", on && "is-active"),
4453
4476
  "aria-current": on ? "page" : void 0,
4454
- onClick: function() {
4477
+ onClick: function(e) {
4478
+ if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
4455
4479
  st[1](t.id);
4456
4480
  }
4457
4481
  },
@@ -1739,12 +1739,16 @@ 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);
1742
+ try {
1743
+ return new Intl.DateTimeFormat("en-CA", {
1744
+ timeZone,
1745
+ year: "numeric",
1746
+ month: "2-digit",
1747
+ day: "2-digit"
1748
+ }).format(now);
1749
+ } catch (e) {
1750
+ return toISO(now);
1751
+ }
1748
1752
  }
1749
1753
 
1750
1754
  // src/DatePicker.tsx
@@ -1767,7 +1771,7 @@ function useFormatDate() {
1767
1771
  var Calendar = React17.forwardRef(function Calendar2(props, ref) {
1768
1772
  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
1769
1773
  const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
1770
- 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);
1771
1775
  const today = fromISO(todayISO);
1772
1776
  const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
1773
1777
  const start = fromISO(props.start), end = fromISO(props.end);
@@ -3088,7 +3092,7 @@ var Tooltip = React26.forwardRef(function Tooltip2(props, ref) {
3088
3092
  };
3089
3093
  let top, left;
3090
3094
  if (side === "top" || side === "bottom") {
3091
- top = side === "top" ? r.top - t.height - gap : r.bottom + gap;
3095
+ top = clampY(side === "top" ? r.top - t.height - gap : r.bottom + gap);
3092
3096
  left = clampX(r.left + r.width / 2 - t.width / 2);
3093
3097
  } else {
3094
3098
  left = side === "left" ? r.left - t.width - gap : r.right + gap;
@@ -3315,6 +3319,12 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
3315
3319
  const measure = !!props.stackBelow || columns.some(function(c) {
3316
3320
  return c.hideBelow != null;
3317
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
+ );
3318
3328
  React28.useEffect(
3319
3329
  function() {
3320
3330
  if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
@@ -3327,14 +3337,14 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
3327
3337
  ro.disconnect();
3328
3338
  };
3329
3339
  },
3330
- [measure]
3340
+ [measure, levelShape]
3331
3341
  );
3332
3342
  const stacked = !!props.stackBelow && boxWidth[0] != null && below(boxWidth[0], props.stackBelow);
3333
3343
  useIsoLayoutEffect(
3334
3344
  function() {
3335
- if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
3345
+ if (measure && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
3336
3346
  },
3337
- [measure]
3347
+ [measure, levelShape]
3338
3348
  );
3339
3349
  const hideLevels = [];
3340
3350
  columns.forEach(function(c) {
@@ -3595,6 +3605,7 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
3595
3605
  function focusCell(r, c) {
3596
3606
  r = Math.max(0, Math.min(r, nRows));
3597
3607
  c = Math.max(0, Math.min(c, nCols - 1));
3608
+ if (stacked && r === 0 && nRows > 0 && !(selectable && c === 0)) r = 1;
3598
3609
  activeState[1]({ r, c });
3599
3610
  pending.current = { r, c };
3600
3611
  if (virtual && r > 0) {
@@ -4154,7 +4165,9 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
4154
4165
  } else {
4155
4166
  const bodyRows = body = [];
4156
4167
  if (virtual && start > 0)
4157
- 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
+ );
4158
4171
  for (let ri = start; ri < end; ri++) {
4159
4172
  (function(r, i) {
4160
4173
  const k = r[rowKey], isSel = !!selSet[k];
@@ -4185,7 +4198,17 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
4185
4198
  })(pageRows[ri], ri);
4186
4199
  }
4187
4200
  if (virtual && end < pageRows.length)
4188
- 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
+ );
4189
4212
  }
4190
4213
  let foot = null;
4191
4214
  function pagerButton(dir) {
@@ -4420,7 +4443,7 @@ var Tabs = React30.forwardRef(function Tabs2(props, ref) {
4420
4443
  className: cx("aura-tabs aura-tabs--links", props.className)
4421
4444
  },
4422
4445
  /* @__PURE__ */ React30.createElement("div", { className: "aura-tabs__list" }, items2.map(function(t) {
4423
- const on = current2 && t.id === current2.id;
4446
+ const on = t.id === st[0];
4424
4447
  const inner = [
4425
4448
  t.icon ? /* @__PURE__ */ React30.createElement(Icon, { key: "i", name: t.icon }) : null,
4426
4449
  t.label,
@@ -4433,7 +4456,8 @@ var Tabs = React30.forwardRef(function Tabs2(props, ref) {
4433
4456
  href: t.href,
4434
4457
  className: cx("aura-tab", on && "is-active"),
4435
4458
  "aria-current": on ? "page" : void 0,
4436
- onClick: function() {
4459
+ onClick: function(e) {
4460
+ if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
4437
4461
  st[1](t.id);
4438
4462
  }
4439
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) {
@@ -41,7 +41,7 @@ function useFormatDate() {
41
41
  const Calendar = React.forwardRef(function Calendar2(props, ref) {
42
42
  const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
43
43
  const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
44
- 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);
45
45
  const today = fromISO(todayISO);
46
46
  const min = fromISO(props.min === "today" ? todayISO : props.min), max = fromISO(props.max === "today" ? todayISO : props.max);
47
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
@@ -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
  }
@@ -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
@@ -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
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": "5.0.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",