@homebound/beam 2.132.2 → 2.133.0

package/dist/components/Table/RowState.js

@@ -126,19 +126,19 @@ class RowState {
     }
     // Should be called in an Observer/useComputed to trigger re-renders
     isCollapsed(id) {
-        return this.collapsedRows.has(id) || this.collapsedRows.has("header");
+        return this.collapsedRows.has(id);
     }
     toggleCollapsed(id) {
         const collapsedIds = [...this.collapsedRows.values()];
         // We have different behavior when going from expand/collapse all.
         if (id === "header") {
-            const isAllCollapsed = collapsedIds[0] === "header";
+            const isAllCollapsed = collapsedIds.includes("header");
             if (isAllCollapsed) {
                 // Expand all means keep `collapsedIds` empty
                 collapsedIds.splice(0, collapsedIds.length);
             }
             else {
-                // Otherwise push `header` on the list as a hint that we're in the collapsed-all state
+                // Otherwise push `header` to the list as a hint that we're in the collapsed-all state
                 collapsedIds.push("header");
                 // Find all non-leaf rows so that toggling "all collapsed" -> "all not collapsed" opens
                 // the parent rows of any level.
@@ -164,6 +164,16 @@ class RowState {
             else {
                 collapsedIds.splice(i, 1);
             }
+            // If all rows have been expanded individually, but the 'header' was collapsed, then remove the header from the collapsedIds so it reverts to the expanded state
+            if (collapsedIds.length === 1 && collapsedIds[0] === "header") {
+                collapsedIds.splice(0, 1);
+            }
+            else {
+                // If every top level child has been collapsed, then push "header" into the array to be considered collapsed as well.
+                if (this.rows.every((maybeParent) => (maybeParent.children ? collapsedIds.includes(maybeParent.id) : true))) {
+                    collapsedIds.push("header");
+                }
+            }
         }
         this.collapsedRows.replace(collapsedIds);
         if (this.persistCollapse) {

package/dist/components/ToggleChips.js

@@ -8,7 +8,7 @@ const useTestIds_1 = require("../utils/useTestIds");
 /** Renders a list of `Chip`s, with wrapping & appropriate margin between each `Chip`. */
 function ToggleChips(props) {
     const { values, getLabel, onRemove, xss } = props;
-    const tid = (0, useTestIds_1.useTestIds)(props, "chip");
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...Css_1.Css.df.add({ flexWrap: "wrap" }).my1.$, xss } }, { children: values.map((value, i) => ((0, jsx_runtime_1.jsx)(ToggleChip_1.ToggleChip, Object.assign({ text: getLabel(value), onClick: () => onRemove(value), xss: Css_1.Css.mr1.mb1.$ }, tid), i))) }), void 0));
+    const tid = (0, useTestIds_1.useTestIds)(props, "toggleChips");
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...Css_1.Css.df.add("flexWrap", "wrap").gap1.$, ...xss } }, tid, { children: values.map((value) => ((0, jsx_runtime_1.jsx)(ToggleChip_1.ToggleChip, Object.assign({ text: getLabel(value), onClick: () => onRemove(value) }, tid.chip), getLabel(value)))) }), void 0));
 }
 exports.ToggleChips = ToggleChips;

package/dist/forms/BoundCheckboxGroupField.d.ts

@@ -6,5 +6,6 @@ export declare type BoundCheckboxGroupFieldProps = Omit<CheckboxGroupProps, "val
     onChange?: (values: string[]) => void;
     label?: string;
 };
-/** Wraps `TextField` and binds it to a form field. */
+/** Wraps `CheckboxGroup` and binds it to a form field.
+ * To make the field agnostic to the order of selected values, add `strictOrder: false` to the field's ObjectConfig */
 export declare function BoundCheckboxGroupField(props: BoundCheckboxGroupFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/forms/BoundCheckboxGroupField.js

@@ -6,7 +6,8 @@ const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
 const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
-/** Wraps `TextField` and binds it to a form field. */
+/** Wraps `CheckboxGroup` and binds it to a form field.
+ * To make the field agnostic to the order of selected values, add `strictOrder: false` to the field's ObjectConfig */
 function BoundCheckboxGroupField(props) {
     const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.132.2",
+  "version": "2.133.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -32,7 +32,7 @@
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\""
   },
   "dependencies": {
-    "@homebound/form-state": "2.13.0",
+    "@homebound/form-state": "2.14.0",
     "@internationalized/number": "^3.0.3",
     "@react-aria/utils": "^3.11.3",
     "@react-hook/resize-observer": "^1.2.2",
@@ -116,6 +116,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-chain": "^1.1.5",
+    "jest-watch-typeahead": "^0.6.5",
     "mobx": "^6.3.2",
     "mobx-react": "^7.2.0",
     "prettier": "^2.2.1",