npm - @jirawatpyk/aura-react - Versions diffs - 4.15.0 → 4.16.0 - Mend

@jirawatpyk/aura-react 4.15.0 → 4.16.0

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.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -41,13 +41,15 @@ npm i @jirawatpyk/aura-react @jirawatpyk/aura-tokens   # React 18 or 19; import
 npm i @aura/react@npm:@jirawatpyk/aura-react @aura/tokens@npm:@jirawatpyk/aura-tokens
 ```
+React 18.3 and 19 are both tested: the dev dependencies pin 18, and CI switches the whole workspace to 19 (`node scripts/use-react.mjs 19 && npm install`) and runs every suite again — contrast, token lint, SSR, types, build, hydration with 0 warnings, layout before hydration, the three pilot pages and Storybook (axe + behaviour).
 Public on npmjs; internal projects can use GitHub Packages instead ([repository README](https://github.com/Jirawatpyk/Aura-design#use-it-in-a-project)).
 ```tsx
 // app root (once)
 import '@aura/tokens/aura.css'; // tokens (light + dark)
 import '@aura/react/styles.css'; // component styles
-// fonts: Google Fonts <link> tags in <head>, or '@aura/tokens/aura-fonts.css'
+// fonts: '@jirawatpyk/aura-tokens/aura-fonts.local.css' (self-hosted, CSP font-src 'self'), next/font, or Google Fonts — see the tokens README
 import { AuraProvider, AppShell, SideNav, DataTable, DatePicker } from '@aura/react';
@@ -74,7 +76,7 @@ export default function Root() {
 ## Components (49)
-Actions: Button, IconButton, Menu, DropdownMenu, Tag · Forms: TextField, PasswordField, Textarea, NumberField, Select, RadioGroup, Checkbox, Switch, SegmentedControl, Combobox (one value, or `multiple`), FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `useFormatDate`, `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, FormErrorSummary, Toaster/`toast()` (+ `.success/.error/.warning/.info/.loading`), Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, FilterBar, Stat · Navigation: Command (⌘K palette) · Layout: AppShell, Container, Stack, Grid, Accordion, Pagination, Card, Tabs, Stepper, SideNav, Breadcrumb, Avatar, Surface, Icon · Theme: ColorSchemeToggle, ColorSchemeScript, `useColorScheme`, ThemeStyle/`createTheme` · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`, `useDensity`.
+Actions: Button (`ghost`, `size="sm"`), IconButton, Menu, DropdownMenu, Tag · Forms: TextField, PasswordField, Textarea, NumberField, Select, RadioGroup, Checkbox, Switch, SegmentedControl, Combobox (one value, or `multiple`), FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `useFormatDate`, `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, FormErrorSummary, Toaster/`toast()` (+ `.success/.error/.warning/.info/.loading`), Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, FilterBar, Stat · Navigation: Command (⌘K palette) · Layout: AppShell, Container, Stack, Grid, Accordion, Pagination, Card, Tabs, Stepper, SideNav, Breadcrumb, Avatar, Surface, Icon · Theme: ColorSchemeToggle, ColorSchemeScript, `useColorScheme`, ThemeStyle/`createTheme` · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`, `useDensity`.
 ## Router links, Swedish, motion
@@ -123,7 +125,7 @@ toast.error('Could not save');               // danger = role="alert"; the rest
 ## Phones and touch
-Under 640px every text control uses 16px text (iOS Safari doesn't zoom). On touch screens (`pointer: coarse`) IconButton keeps its 32px look with a 44px hit area, and Radio, Checkbox and Switch rows are at least 44px with the whole row as the target. `<Button fullWidth>` fills its row and wraps long Thai or Swedish labels.
+Under 640px every text control uses 16px text (iOS Safari doesn't zoom). On touch screens (`pointer: coarse`) IconButton and `<Button size="sm">` keep their 32px look with a 44px hit area, and Radio, Checkbox and Switch rows are at least 44px with the whole row as the target. `<Button fullWidth>` fills its row and wraps long Thai or Swedish labels.
 ## Light and dark
@@ -159,6 +161,12 @@ Values are ISO strings (`2026-09-18`); with `locale="th"` display is Thai with B
 Portals (Dialog, Drawer, menus, pickers, toasts) wait until after hydration; `useBreakpoint()` returns `lg` on the server and corrects on the client through `useSyncExternalStore`, so there are no hydration mismatches. `npm run test:ssr` renders every component with `react-dom/server` (ESM and CJS builds).
+Layout is right before hydration (4.16). AppShell's sidebar-or-drawer switch is CSS (a 1024px media query), so a phone gets the menu button from the server's HTML. A DataTable with `stackBelow` renders cards and grid together until it has measured itself, and a container query shows the right one. It supports `stackBelow` 360, 400, 480, 520, 560, 600, 640, 720, 768, 800, 900, 960 and 1024; other widths stack once JavaScript runs. `npm run test:layout` loads both at 390 and 1280px with JavaScript off, then hydrated, and requires CLS 0. Columns with `hideBelow` still settle after hydration.
+## TypeScript
+Every optional prop takes `undefined` (4.16), so apps on `exactOptionalPropertyTypes` can write `hint={t.hint}` or `icon={x ?? undefined}`. `types-test/exact-optional.tsx` checks every exported component against the published declarations under `strict`, `exactOptionalPropertyTypes` and `noUncheckedIndexedAccess`.
 ## Scripts
 ```bash

package/dist/aura.bundle.js CHANGED Viewed

@@ -661,7 +661,8 @@ window.Aura = (() => {
       "disabled",
       "linkComponent",
       "href",
-      "fullWidth"
+      "fullWidth",
+      "size"
     ]);
     const Tag3 = disabled ? "a" : Link;
     return /* @__PURE__ */ React4.createElement(
@@ -673,7 +674,13 @@ window.Aura = (() => {
         role: disabled ? "link" : void 0,
         "aria-disabled": disabled || void 0,
         tabIndex: disabled ? -1 : props.tabIndex,
-        className: cx("aura-btn", "aura-btn--" + variant, props.fullWidth && "aura-btn--full", props.className),
+        className: cx(
+          "aura-btn",
+          "aura-btn--" + variant,
+          props.size === "sm" && "aura-btn--sm",
+          props.fullWidth && "aura-btn--full",
+          props.className
+        ),
         onClick: disabled ? void 0 : props.onClick
       },
       props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
@@ -699,7 +706,8 @@ window.Aura = (() => {
         "iconRight",
         "loading",
         "onClick",
-        "fullWidth"
+        "fullWidth",
+        "size"
       ]);
       return /* @__PURE__ */ React4.createElement(
         "button",
@@ -710,6 +718,7 @@ window.Aura = (() => {
           className: cx(
             "aura-btn",
             "aura-btn--" + variant,
+            props.size === "sm" && "aura-btn--sm",
             props.fullWidth && "aura-btn--full",
             loading && "is-loading",
             props.className
@@ -3097,6 +3106,7 @@ window.Aura = (() => {
     { key: "owner", label: "OWNER" }
   ];
   var SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
+  var STACK_WIDTHS = [360, 400, 480, 520, 560, 600, 640, 720, 768, 800, 900, 960, 1024];
   var ROW_H_DEFAULT = 48;
   var OVERSCAN = 8;
   var FLEX_MIN = 160;
@@ -3163,6 +3173,7 @@ window.Aura = (() => {
     const measure = !!props.stackBelow || columns.some(function(c) {
       return c.hideBelow != null;
     });
+    const dual = !!props.stackBelow && boxWidth[0] == null && STACK_WIDTHS.indexOf(props.stackBelow) >= 0;
     React28.useEffect(
       function() {
         if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
@@ -3174,9 +3185,15 @@ window.Aura = (() => {
           ro.disconnect();
         };
       },
-      [measure]
+      [measure, dual]
     );
     const stacked = !!props.stackBelow && boxWidth[0] != null && boxWidth[0] < props.stackBelow;
+    useIsoLayoutEffect(
+      function() {
+        if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
+      },
+      [measure]
+    );
     function tooNarrow(c) {
       if (c.hideBelow == null || boxWidth[0] == null || stacked) return false;
       const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
@@ -3988,7 +4005,7 @@ window.Aura = (() => {
     } else if (height && rows.length && !loading) {
       foot = /* @__PURE__ */ React28.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React28.createElement("span", null, t.rowCount(shownTotal)), selectable && selected.length ? /* @__PURE__ */ React28.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React28.createElement("span", null));
     }
-    if (stacked) {
+    function renderStacked(wrapRefArg) {
       const titleCol = vis[0], pillCol = vis.filter(function(c) {
         return c.pill && c !== titleCol;
       })[0];
@@ -4052,7 +4069,7 @@ window.Aura = (() => {
       return /* @__PURE__ */ React28.createElement(
         "div",
         {
-          ref: wrapMerged,
+          ref: wrapRefArg,
           "data-density": props.density,
           className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
           role: "region",
@@ -4073,15 +4090,16 @@ window.Aura = (() => {
         foot
       );
     }
+    if (stacked) return renderStacked(wrapMerged);
     const scrollStyle = {
       scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
       scrollPaddingTop: ROW_H + "px"
     };
     if (height) scrollStyle.height = height + "px";
-    return /* @__PURE__ */ React28.createElement(
+    const gridEl = /* @__PURE__ */ React28.createElement(
       "div",
       {
-        ref: wrapMerged,
+        ref: dual ? void 0 : wrapMerged,
         "data-density": props.density,
         className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
       },
@@ -4137,6 +4155,8 @@ window.Aura = (() => {
         }
       ) : null
     );
+    if (!dual) return gridEl;
+    return /* @__PURE__ */ React28.createElement("div", { ref: wrapMerged, className: "aura-table-dual", "data-stack-below": props.stackBelow }, renderStacked(void 0), gridEl);
   });
   // src/Card.tsx
@@ -4598,26 +4618,25 @@ window.Aura = (() => {
   var AppShell = React38.forwardRef(function AppShell2(props, ref) {
     const t = useStrings();
     const bp = useBreakpoint();
-    const compact = bp === "base" || bp === "sm" || bp === "md";
+    const wide = bp === "lg" || bp === "xl";
     const st = React38.useState(false), open = st[0], setOpen = st[1];
     React38.useEffect(
       function() {
-        if (!compact) setOpen(false);
+        if (wide) setOpen(false);
       },
-      [compact]
+      [wide]
     );
-    const navEl = props.nav;
-    const nav = props.nav && React38.isValidElement(props.nav) && compact ? React38.cloneElement(navEl, {
+    const navEl = props.nav && React38.isValidElement(props.nav) ? props.nav : null;
+    const drawerNav = navEl ? React38.cloneElement(navEl, {
       onChange: function(id) {
         if (navEl.props.onChange) navEl.props.onChange(id);
         setOpen(false);
       },
       className: cx(navEl.props.className, "is-in-drawer"),
-      /* The drawer is already full-size: never a rail, no collapse button. */
       collapsed: false,
       collapsible: false
     }) : props.nav;
-    return /* @__PURE__ */ React38.createElement("div", { ref, className: cx("aura-shell", compact && "is-compact", props.className) }, !compact ? /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__nav" }, nav) : null, compact ? /* @__PURE__ */ React38.createElement(
+    return /* @__PURE__ */ React38.createElement("div", { ref, className: cx("aura-shell", props.className) }, props.nav ? /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__nav" }, props.nav) : null, props.nav ? /* @__PURE__ */ React38.createElement(
       Drawer,
       {
         open,
@@ -4629,10 +4648,11 @@ window.Aura = (() => {
         "aria-label": props.navLabel || t.navigation,
         dismissible: true
       },
-      nav
-    ) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React38.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React38.createElement(
+      drawerNav
+    ) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React38.createElement("header", { className: cx("aura-shell__bar", !props.header && "aura-shell__bar--menu-only") }, props.nav ? /* @__PURE__ */ React38.createElement(
       IconButton,
       {
+        className: "aura-shell__menu",
         icon: "menu",
         label: props.menuLabel || t.openNav,
         size: "md",
@@ -5668,7 +5688,10 @@ window.Aura = (() => {
         rows
       );
     }
-    const style = { width: props.width, height: props.height };
+    const style = {
+      width: props.width,
+      height: props.height
+    };
     if (v === "circle") {
       style.width = style.height = props.size || props.width || 40;
     }

package/dist/cjs/index.cjs CHANGED Viewed

@@ -643,7 +643,8 @@ function ButtonLink(props, ref, Link) {
     "disabled",
     "linkComponent",
     "href",
-    "fullWidth"
+    "fullWidth",
+    "size"
   ]);
   const Tag3 = disabled ? "a" : Link;
   return /* @__PURE__ */ React4.createElement(
@@ -655,7 +656,13 @@ function ButtonLink(props, ref, Link) {
       role: disabled ? "link" : void 0,
       "aria-disabled": disabled || void 0,
       tabIndex: disabled ? -1 : props.tabIndex,
-      className: cx("aura-btn", "aura-btn--" + variant, props.fullWidth && "aura-btn--full", props.className),
+      className: cx(
+        "aura-btn",
+        "aura-btn--" + variant,
+        props.size === "sm" && "aura-btn--sm",
+        props.fullWidth && "aura-btn--full",
+        props.className
+      ),
       onClick: disabled ? void 0 : props.onClick
     },
     props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
@@ -681,7 +688,8 @@ var Button = React4.forwardRef(
       "iconRight",
       "loading",
       "onClick",
-      "fullWidth"
+      "fullWidth",
+      "size"
     ]);
     return /* @__PURE__ */ React4.createElement(
       "button",
@@ -692,6 +700,7 @@ var Button = React4.forwardRef(
         className: cx(
           "aura-btn",
           "aura-btn--" + variant,
+          props.size === "sm" && "aura-btn--sm",
           props.fullWidth && "aura-btn--full",
           loading && "is-loading",
           props.className
@@ -3079,6 +3088,7 @@ var DEFAULT_COLUMNS = [
   { key: "owner", label: "OWNER" }
 ];
 var SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
+var STACK_WIDTHS = [360, 400, 480, 520, 560, 600, 640, 720, 768, 800, 900, 960, 1024];
 var ROW_H_DEFAULT = 48;
 var OVERSCAN = 8;
 var FLEX_MIN = 160;
@@ -3145,6 +3155,7 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
   const measure = !!props.stackBelow || columns.some(function(c) {
     return c.hideBelow != null;
   });
+  const dual = !!props.stackBelow && boxWidth[0] == null && STACK_WIDTHS.indexOf(props.stackBelow) >= 0;
   React28.useEffect(
     function() {
       if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
@@ -3156,9 +3167,15 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
         ro.disconnect();
       };
     },
-    [measure]
+    [measure, dual]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && boxWidth[0] < props.stackBelow;
+  useIsoLayoutEffect(
+    function() {
+      if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
+    },
+    [measure]
+  );
   function tooNarrow(c) {
     if (c.hideBelow == null || boxWidth[0] == null || stacked) return false;
     const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
@@ -3970,7 +3987,7 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
   } else if (height && rows.length && !loading) {
     foot = /* @__PURE__ */ React28.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React28.createElement("span", null, t.rowCount(shownTotal)), selectable && selected.length ? /* @__PURE__ */ React28.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React28.createElement("span", null));
   }
-  if (stacked) {
+  function renderStacked(wrapRefArg) {
     const titleCol = vis[0], pillCol = vis.filter(function(c) {
       return c.pill && c !== titleCol;
     })[0];
@@ -4034,7 +4051,7 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
     return /* @__PURE__ */ React28.createElement(
       "div",
       {
-        ref: wrapMerged,
+        ref: wrapRefArg,
         "data-density": props.density,
         className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
         role: "region",
@@ -4055,15 +4072,16 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
       foot
     );
   }
+  if (stacked) return renderStacked(wrapMerged);
   const scrollStyle = {
     scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
     scrollPaddingTop: ROW_H + "px"
   };
   if (height) scrollStyle.height = height + "px";
-  return /* @__PURE__ */ React28.createElement(
+  const gridEl = /* @__PURE__ */ React28.createElement(
     "div",
     {
-      ref: wrapMerged,
+      ref: dual ? void 0 : wrapMerged,
       "data-density": props.density,
       className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
     },
@@ -4119,6 +4137,8 @@ var DataTable = React28.forwardRef(function DataTable2(props, ref) {
       }
     ) : null
   );
+  if (!dual) return gridEl;
+  return /* @__PURE__ */ React28.createElement("div", { ref: wrapMerged, className: "aura-table-dual", "data-stack-below": props.stackBelow }, renderStacked(void 0), gridEl);
 });
 // src/Card.tsx
@@ -4580,26 +4600,25 @@ var React38 = __toESM(require("react"), 1);
 var AppShell = React38.forwardRef(function AppShell2(props, ref) {
   const t = useStrings();
   const bp = useBreakpoint();
-  const compact = bp === "base" || bp === "sm" || bp === "md";
+  const wide = bp === "lg" || bp === "xl";
   const st = React38.useState(false), open = st[0], setOpen = st[1];
   React38.useEffect(
     function() {
-      if (!compact) setOpen(false);
+      if (wide) setOpen(false);
     },
-    [compact]
+    [wide]
   );
-  const navEl = props.nav;
-  const nav = props.nav && React38.isValidElement(props.nav) && compact ? React38.cloneElement(navEl, {
+  const navEl = props.nav && React38.isValidElement(props.nav) ? props.nav : null;
+  const drawerNav = navEl ? React38.cloneElement(navEl, {
     onChange: function(id) {
       if (navEl.props.onChange) navEl.props.onChange(id);
       setOpen(false);
     },
     className: cx(navEl.props.className, "is-in-drawer"),
-    /* The drawer is already full-size: never a rail, no collapse button. */
     collapsed: false,
     collapsible: false
   }) : props.nav;
-  return /* @__PURE__ */ React38.createElement("div", { ref, className: cx("aura-shell", compact && "is-compact", props.className) }, !compact ? /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__nav" }, nav) : null, compact ? /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React38.createElement("div", { ref, className: cx("aura-shell", props.className) }, props.nav ? /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__nav" }, props.nav) : null, props.nav ? /* @__PURE__ */ React38.createElement(
     Drawer,
     {
       open,
@@ -4611,10 +4630,11 @@ var AppShell = React38.forwardRef(function AppShell2(props, ref) {
       "aria-label": props.navLabel || t.navigation,
       dismissible: true
     },
-    nav
-  ) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React38.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React38.createElement(
+    drawerNav
+  ) : null, /* @__PURE__ */ React38.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React38.createElement("header", { className: cx("aura-shell__bar", !props.header && "aura-shell__bar--menu-only") }, props.nav ? /* @__PURE__ */ React38.createElement(
     IconButton,
     {
+      className: "aura-shell__menu",
       icon: "menu",
       label: props.menuLabel || t.openNav,
       size: "md",
@@ -5650,7 +5670,10 @@ var Skeleton = React47.forwardRef(function Skeleton2(props, ref) {
       rows
     );
   }
-  const style = { width: props.width, height: props.height };
+  const style = {
+    width: props.width,
+    height: props.height
+  };
   if (v === "circle") {
     style.width = style.height = props.size || props.width || 40;
   }

package/dist/esm/AppShell.js CHANGED Viewed

@@ -8,26 +8,25 @@ import { useBreakpoint } from "./responsive.js";
 const AppShell = React.forwardRef(function AppShell2(props, ref) {
   const t = useStrings();
   const bp = useBreakpoint();
-  const compact = bp === "base" || bp === "sm" || bp === "md";
+  const wide = bp === "lg" || bp === "xl";
   const st = React.useState(false), open = st[0], setOpen = st[1];
   React.useEffect(
     function() {
-      if (!compact) setOpen(false);
+      if (wide) setOpen(false);
     },
-    [compact]
+    [wide]
   );
-  const navEl = props.nav;
-  const nav = props.nav && React.isValidElement(props.nav) && compact ? React.cloneElement(navEl, {
+  const navEl = props.nav && React.isValidElement(props.nav) ? props.nav : null;
+  const drawerNav = navEl ? React.cloneElement(navEl, {
     onChange: function(id) {
       if (navEl.props.onChange) navEl.props.onChange(id);
       setOpen(false);
     },
     className: cx(navEl.props.className, "is-in-drawer"),
-    /* The drawer is already full-size: never a rail, no collapse button. */
     collapsed: false,
     collapsible: false
   }) : props.nav;
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", compact && "is-compact", props.className) }, !compact ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, nav) : null, compact ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-shell", props.className) }, props.nav ? /* @__PURE__ */ React.createElement("div", { className: "aura-shell__nav" }, props.nav) : null, props.nav ? /* @__PURE__ */ React.createElement(
     Drawer,
     {
       open,
@@ -39,10 +38,11 @@ const AppShell = React.forwardRef(function AppShell2(props, ref) {
       "aria-label": props.navLabel || t.navigation,
       dismissible: true
     },
-    nav
-  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__main" }, props.header || compact ? /* @__PURE__ */ React.createElement("header", { className: "aura-shell__bar" }, compact ? /* @__PURE__ */ React.createElement(
+    drawerNav
+  ) : null, /* @__PURE__ */ React.createElement("div", { className: "aura-shell__main" }, props.header || props.nav ? /* @__PURE__ */ React.createElement("header", { className: cx("aura-shell__bar", !props.header && "aura-shell__bar--menu-only") }, props.nav ? /* @__PURE__ */ React.createElement(
     IconButton,
     {
+      className: "aura-shell__menu",
       icon: "menu",
       label: props.menuLabel || t.openNav,
       size: "md",

package/dist/esm/Button.js CHANGED Viewed

@@ -15,7 +15,8 @@ function ButtonLink(props, ref, Link) {
     "disabled",
     "linkComponent",
     "href",
-    "fullWidth"
+    "fullWidth",
+    "size"
   ]);
   const Tag = disabled ? "a" : Link;
   return /* @__PURE__ */ React.createElement(
@@ -27,7 +28,13 @@ function ButtonLink(props, ref, Link) {
       role: disabled ? "link" : void 0,
       "aria-disabled": disabled || void 0,
       tabIndex: disabled ? -1 : props.tabIndex,
-      className: cx("aura-btn", "aura-btn--" + variant, props.fullWidth && "aura-btn--full", props.className),
+      className: cx(
+        "aura-btn",
+        "aura-btn--" + variant,
+        props.size === "sm" && "aura-btn--sm",
+        props.fullWidth && "aura-btn--full",
+        props.className
+      ),
       onClick: disabled ? void 0 : props.onClick
     },
     props.icon ? /* @__PURE__ */ React.createElement(Icon, { name: props.icon }) : null,
@@ -53,7 +60,8 @@ const Button = React.forwardRef(
       "iconRight",
       "loading",
       "onClick",
-      "fullWidth"
+      "fullWidth",
+      "size"
     ]);
     return /* @__PURE__ */ React.createElement(
       "button",
@@ -64,6 +72,7 @@ const Button = React.forwardRef(
         className: cx(
           "aura-btn",
           "aura-btn--" + variant,
+          props.size === "sm" && "aura-btn--sm",
           props.fullWidth && "aura-btn--full",
           loading && "is-loading",
           props.className

package/dist/esm/DataTable.js CHANGED Viewed

@@ -15,6 +15,7 @@ const DEFAULT_COLUMNS = [
   { key: "owner", label: "OWNER" }
 ];
 const SKELETON_WIDTHS = ["72%", "56%", "84%", "44%", "64%"];
+const STACK_WIDTHS = [360, 400, 480, 520, 560, 600, 640, 720, 768, 800, 900, 960, 1024];
 const ROW_H_DEFAULT = 48, OVERSCAN = 8, FLEX_MIN = 160;
 const DataTable = React.forwardRef(function DataTable2(props, ref) {
   const t = useStrings();
@@ -79,6 +80,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   const measure = !!props.stackBelow || columns.some(function(c) {
     return c.hideBelow != null;
   });
+  const dual = !!props.stackBelow && boxWidth[0] == null && STACK_WIDTHS.indexOf(props.stackBelow) >= 0;
   React.useEffect(
     function() {
       if (!measure || !wrapRef.current || typeof ResizeObserver === "undefined") return;
@@ -90,9 +92,15 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
         ro.disconnect();
       };
     },
-    [measure]
+    [measure, dual]
   );
   const stacked = !!props.stackBelow && boxWidth[0] != null && boxWidth[0] < props.stackBelow;
+  useIsoLayoutEffect(
+    function() {
+      if (measure && boxWidth[0] == null && wrapRef.current) boxWidth[1](wrapRef.current.getBoundingClientRect().width);
+    },
+    [measure]
+  );
   function tooNarrow(c) {
     if (c.hideBelow == null || boxWidth[0] == null || stacked) return false;
     const px = typeof c.hideBelow === "number" ? c.hideBelow : BP[c.hideBelow];
@@ -904,7 +912,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
   } else if (height && rows.length && !loading) {
     foot = /* @__PURE__ */ React.createElement("div", { className: "aura-table__foot" }, /* @__PURE__ */ React.createElement("span", null, t.rowCount(shownTotal)), selectable && selected.length ? /* @__PURE__ */ React.createElement("span", null, t.selectedCount(selected.length)) : /* @__PURE__ */ React.createElement("span", null));
   }
-  if (stacked) {
+  function renderStacked(wrapRefArg) {
     const titleCol = vis[0], pillCol = vis.filter(function(c) {
       return c.pill && c !== titleCol;
     })[0];
@@ -968,7 +976,7 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        ref: wrapMerged,
+        ref: wrapRefArg,
         "data-density": props.density,
         className: cx("aura-table aura-table--stacked", refreshing && "is-refreshing", props.className),
         role: "region",
@@ -989,15 +997,16 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       foot
     );
   }
+  if (stacked) return renderStacked(wrapMerged);
   const scrollStyle = {
     scrollPaddingLeft: "calc(var(--aura-space-6)" + selW + " + " + acc + "px)",
     scrollPaddingTop: ROW_H + "px"
   };
   if (height) scrollStyle.height = height + "px";
-  return /* @__PURE__ */ React.createElement(
+  const gridEl = /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref: wrapMerged,
+      ref: dual ? void 0 : wrapMerged,
       "data-density": props.density,
       className: cx("aura-table", scrolledX[0] && "is-scrolled-x", refreshing && "is-refreshing", props.className)
     },
@@ -1053,6 +1062,8 @@ const DataTable = React.forwardRef(function DataTable2(props, ref) {
       }
     ) : null
   );
+  if (!dual) return gridEl;
+  return /* @__PURE__ */ React.createElement("div", { ref: wrapMerged, className: "aura-table-dual", "data-stack-below": props.stackBelow }, renderStacked(void 0), gridEl);
 });
 export {
   DataTable

package/dist/esm/Skeleton.js CHANGED Viewed

@@ -18,7 +18,10 @@ const Skeleton = React.forwardRef(function Skeleton2(props, ref) {
       rows
     );
   }
-  const style = { width: props.width, height: props.height };
+  const style = {
+    width: props.width,
+    height: props.height
+  };
   if (v === "circle") {
     style.width = style.height = props.size || props.width || 40;
   }