@jirawatpyk/aura-react 5.42.0 → 5.43.0

package/README.md

@@ -186,6 +186,10 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **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`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.43 — Chamber-OS addendum 50 (#148)
+
+- **FilterBar `collapseBelow` with no search** (#148): below the breakpoint the Filters button fills the row it would otherwise sit at the end of, its label centred (an activity timeline with filters and no search). With a search it stays beside it, as in 5.42. From the breakpoint up nothing changes. Remove a stand-in such as `[&_.aura-filterbar__more]:flex-1`.
+
 ## 5.42 — Chamber-OS addendum 49 (#146–147)
 
 - **Fields no longer widen a phone at a large default font** (#147, a 5.40 regression): an `<input>`'s 20-character size grew with the browser's font size, so at a 32px default FilterBar's search measured ~450px and a 390px page scrolled sideways; so did a TextField, Combobox, DatePicker or NumberField in a grid cell or flex row without `min-width: 0`. The text box now never asks for more than the room it gets (`.aura-input` has `min-width: 0` and its control a percentage width, so its smallest size is zero) while its natural width is unchanged. At the 16px default a page lays out as in 5.41 unless a field was already wider than its room: we compared every Storybook story at 390 and 1280px pixel for pixel, and the only differences are fields that used to stick out of their grid cell or row, which now fit (a touch-height Combobox in a 390px FilterBar, a time-zone field in a two-column grid). A row of nowrap Buttons or a SegmentedControl can still be wider than a phone at 32px; give such rows `wrap` (Stack) or `fullWidth`.

package/dist/aura.bundle.js

@@ -5421,7 +5421,7 @@ window.Aura = (() => {
       /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__row" }, collapse ? (
         /* 5.42: the search and the Filters button share a row of their own below the breakpoint (count and actions
          * wrap under them); from the breakpoint up this box is display: contents and the bar is as before. */
-        /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__lead" }, searchBox, more)
+        /* @__PURE__ */ React31.createElement("div", { className: cx("aura-filterbar__lead", !hasSearch && "is-alone") }, searchBox, more)
       ) : searchBox, hasChildren && !open ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__controls" }, props.children) : null, /* @__PURE__ */ React31.createElement("span", { className: "aura-filterbar__spacer" }), count != null ? /* @__PURE__ */ React31.createElement("span", { className: "aura-filterbar__count", "aria-live": "polite" }, count) : null, props.actions ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__actions" }, props.actions) : null),
       filters.length || props.onClearAll && anything ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__chips" }, filters.map(function(f) {
         return /* @__PURE__ */ React31.createElement(Tag, { key: f.id, onRemove: f.onRemove }, f.label);

package/dist/cjs/index.cjs

@@ -5403,7 +5403,7 @@ var FilterBar = React31.forwardRef(function FilterBar2(props, ref) {
     /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__row" }, collapse ? (
       /* 5.42: the search and the Filters button share a row of their own below the breakpoint (count and actions
        * wrap under them); from the breakpoint up this box is display: contents and the bar is as before. */
-      /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__lead" }, searchBox, more)
+      /* @__PURE__ */ React31.createElement("div", { className: cx("aura-filterbar__lead", !hasSearch && "is-alone") }, searchBox, more)
     ) : searchBox, hasChildren && !open ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__controls" }, props.children) : null, /* @__PURE__ */ React31.createElement("span", { className: "aura-filterbar__spacer" }), count != null ? /* @__PURE__ */ React31.createElement("span", { className: "aura-filterbar__count", "aria-live": "polite" }, count) : null, props.actions ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__actions" }, props.actions) : null),
     filters.length || props.onClearAll && anything ? /* @__PURE__ */ React31.createElement("div", { className: "aura-filterbar__chips" }, filters.map(function(f) {
       return /* @__PURE__ */ React31.createElement(Tag, { key: f.id, onRemove: f.onRemove }, f.label);

package/dist/esm/FilterBar.js

@@ -168,7 +168,7 @@ const FilterBar = React.forwardRef(function FilterBar2(props, ref) {
     /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__row" }, collapse ? (
       /* 5.42: the search and the Filters button share a row of their own below the breakpoint (count and actions
        * wrap under them); from the breakpoint up this box is display: contents and the bar is as before. */
-      /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__lead" }, searchBox, more)
+      /* @__PURE__ */ React.createElement("div", { className: cx("aura-filterbar__lead", !hasSearch && "is-alone") }, searchBox, more)
     ) : searchBox, hasChildren && !open ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__controls" }, props.children) : null, /* @__PURE__ */ React.createElement("span", { className: "aura-filterbar__spacer" }), count != null ? /* @__PURE__ */ React.createElement("span", { className: "aura-filterbar__count", "aria-live": "polite" }, count) : null, props.actions ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__actions" }, props.actions) : null),
     filters.length || props.onClearAll && anything ? /* @__PURE__ */ React.createElement("div", { className: "aura-filterbar__chips" }, filters.map(function(f) {
       return /* @__PURE__ */ React.createElement(Tag, { key: f.id, onRemove: f.onRemove }, f.label);

package/dist/styles.css

@@ -1814,12 +1814,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-filterbar--collapse-sm > .aura-filterbar__row > .aura-filterbar__controls { display: none; }
   .aura-filterbar--collapse-sm .aura-filterbar__lead { display: flex; flex: 1 1 100%; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); }
   .aura-filterbar--collapse-sm .aura-filterbar__more { display: inline-flex; }
+  .aura-filterbar--collapse-sm .aura-filterbar__lead.is-alone > .aura-filterbar__more { flex: 1 1 auto; } /* 5.43 (Chamber-OS 148): no search, the button takes the row */
   .aura-filterbar--collapse-sm .aura-filterbar__search { flex: 1 1 0; min-width: 0; max-width: none; }
 }
 @media (max-width: 767.98px) {
   .aura-filterbar--collapse-md > .aura-filterbar__row > .aura-filterbar__controls { display: none; }
   .aura-filterbar--collapse-md .aura-filterbar__lead { display: flex; flex: 1 1 100%; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); }
   .aura-filterbar--collapse-md .aura-filterbar__more { display: inline-flex; }
+  .aura-filterbar--collapse-md .aura-filterbar__lead.is-alone > .aura-filterbar__more { flex: 1 1 auto; }
   .aura-filterbar--collapse-md .aura-filterbar__search { flex: 1 1 0; min-width: 0; max-width: none; }
 }
 /* The sheet: one control per row at full width, labels showing; a toggle Tag or a Button keeps its own width. */

package/dist/styles.layer.css

@@ -1816,12 +1816,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-filterbar--collapse-sm > .aura-filterbar__row > .aura-filterbar__controls { display: none; }
   .aura-filterbar--collapse-sm .aura-filterbar__lead { display: flex; flex: 1 1 100%; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); }
   .aura-filterbar--collapse-sm .aura-filterbar__more { display: inline-flex; }
+  .aura-filterbar--collapse-sm .aura-filterbar__lead.is-alone > .aura-filterbar__more { flex: 1 1 auto; } /* 5.43 (Chamber-OS 148): no search, the button takes the row */
   .aura-filterbar--collapse-sm .aura-filterbar__search { flex: 1 1 0; min-width: 0; max-width: none; }
 }
 @media (max-width: 767.98px) {
   .aura-filterbar--collapse-md > .aura-filterbar__row > .aura-filterbar__controls { display: none; }
   .aura-filterbar--collapse-md .aura-filterbar__lead { display: flex; flex: 1 1 100%; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); }
   .aura-filterbar--collapse-md .aura-filterbar__more { display: inline-flex; }
+  .aura-filterbar--collapse-md .aura-filterbar__lead.is-alone > .aura-filterbar__more { flex: 1 1 auto; }
   .aura-filterbar--collapse-md .aura-filterbar__search { flex: 1 1 0; min-width: 0; max-width: none; }
 }
 /* The sheet: one control per row at full width, labels showing; a toggle Tag or a Button keeps its own width. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.42.0",
+  "version": "5.43.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",