@homebound/beam 2.413.0-alpha.4 → 2.413.0

package/dist/index.cjs

@@ -7575,7 +7575,7 @@ var nonKindGridColumnKeys = [
   "isAction",
   "id",
   "canHide",
-  "initVisible",
+  "initHidden",
   "expandColumns",
   "initExpanded",
   "hideOnExpand",
@@ -8834,7 +8834,7 @@ function TextFieldBase(props) {
   const fieldStyles = {
     container: Css.df.fdc.w100.maxw(fieldMaxWidth).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$,
     inputWrapper: {
-      ...Css[typeScale].df.aic.br8.pxPx(textFieldBasePadding).w100.bgColor(bgColor).gray900.if(contrast && !inputStylePalette).white.if(labelStyle === "left").w(labelLeftFieldWidth).$,
+      ...Css[typeScale].df.aic.br4.pxPx(textFieldBasePadding).w100.bgColor(bgColor).gray900.if(contrast && !inputStylePalette).white.if(labelStyle === "left").w(labelLeftFieldWidth).$,
       // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
       // This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
       // To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
@@ -12855,13 +12855,13 @@ function SelectToggle({ id, disabled }) {
 // src/components/Table/utils/columns.tsx
 var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
 function column(columnDef) {
-  return { canHide: true, initVisible: true, ...columnDef };
+  return { canHide: true, initHidden: false, ...columnDef };
 }
 function dateColumn(columnDef) {
-  return { canHide: true, initVisible: true, ...columnDef, align: "left" };
+  return { canHide: true, initHidden: false, ...columnDef, align: "left" };
 }
 function numericColumn(columnDef) {
-  return { canHide: true, initVisible: true, ...columnDef, align: "right" };
+  return { canHide: true, initHidden: false, ...columnDef, align: "right" };
 }
 function actionColumn(columnDef) {
   return { clientSideSort: false, ...columnDef, align: "center", isAction: true, wrapAction: false };
@@ -13057,7 +13057,7 @@ var ColumnState = class {
   constructor(states, storage, column2) {
     this.states = states;
     this.column = column2;
-    this.visible = storage.wasVisible(column2.id) ?? (column2.canHide ? column2.initVisible ?? false : true);
+    this.visible = storage.wasVisible(column2.id) ?? (column2.canHide ? !(column2.initHidden ?? true) : true);
     if (this.visible && (storage.wasExpanded(column2.id) ?? column2.initExpanded)) {
       this.expanded = true;
       this.doExpand();
@@ -16247,14 +16247,27 @@ function Toast() {
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 var import_react90 = require("react");
 var import_react_router_dom4 = require("react-router-dom");
-var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime124 = (
+  // Adding index to key to prevent rendering issues when multiple items have the same label
+  require("@emotion/react/jsx-runtime")
+);
 function PageHeaderBreadcrumbs({ breadcrumb }) {
   const tids = useTestIds({}, "pageHeaderBreadcrumbs");
-  const breadcrumbs = Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb];
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { css: Css.df.aic.mbPx(4).$, ...tids, children: breadcrumbs.map((breadcrumb2, i) => /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_react90.Fragment, { children: [
-    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { css: Css.smSb.gray700.mr1.ml1.$, children: "/" }),
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_router_dom4.Link, { to: breadcrumb2.href, css: Css.smSb.gray700.onHover.gray900.$, className: "navLink", ...tids.navLink, children: breadcrumb2.label })
-  ] }, `bc-${breadcrumb2.label}`)) });
+  const breadcrumbs = (0, import_react90.useMemo)(() => Array.isArray(breadcrumb) ? breadcrumb : [breadcrumb], [breadcrumb]);
+  const [collapsed, setCollapsed] = (0, import_react90.useState)(true);
+  function renderBreadcrumb(bc, index, hideDivisor) {
+    return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_react90.Fragment, { children: [
+      index > 0 && !hideDivisor && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { css: Css.smSb.gray700.mx1.myPx(2).$, children: "/" }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_router_dom4.Link, { to: bc.href, css: Css.smSb.gray700.onHover.gray900.$, className: "navLink", ...tids.navLink, children: bc.label }),
+      bc.right
+    ] }, `${bc.label}-${index}`);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { css: Css.df.aic.mbPx(4).$, children: breadcrumbs.length > 3 && collapsed ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+    renderBreadcrumb(breadcrumbs[0], 0),
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("button", { ...tids.expand, css: Css.gray700.pxPx(8).$, onClick: () => setCollapsed(false), children: "..." }),
+    renderBreadcrumb(breadcrumbs[breadcrumbs.length - 2], breadcrumbs.length - 2, true),
+    renderBreadcrumb(breadcrumbs[breadcrumbs.length - 1], breadcrumbs.length - 1)
+  ] }) : breadcrumbs.map((bc, i) => renderBreadcrumb(bc, i)) });
 }
 
 // src/components/Layout/FormPageLayout.tsx
@@ -16567,6 +16580,7 @@ var DateFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
           SelectField,
           {
+            compact: true,
             sizeToContent: true,
             options: [
               // Always show the 'Any' option
@@ -16589,6 +16603,7 @@ var DateFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
           DateField,
           {
+            compact: true,
             labelStyle: "inline",
             value: value?.value ? new Date(value.value) : /* @__PURE__ */ new Date(),
             label: "Date",
@@ -16615,6 +16630,7 @@ var DateRangeFilter = class extends BaseFilter {
       /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         DateRangeField,
         {
+          compact: true,
           labelStyle: "inline",
           isRangeFilterField: true,
           placeholder: placeholderText,
@@ -16668,6 +16684,7 @@ var MultiFilter = class extends BaseFilter {
       MultiSelectField,
       {
         ...props,
+        compact: !vertical,
         label: this.label,
         values: value || [],
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -16732,6 +16749,7 @@ var NumberRangeFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
           NumberField,
           {
+            compact: true,
             sizeToContent: !inModal,
             labelStyle: "inline",
             clearable: true,
@@ -16749,6 +16767,7 @@ var NumberRangeFilter = class extends BaseFilter {
         /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
           NumberField,
           {
+            compact: true,
             sizeToContent: !inModal,
             labelStyle: "inline",
             clearable: true,
@@ -16793,6 +16812,7 @@ var SingleFilter = class extends BaseFilter {
         options,
         getOptionValue: (o) => o === allOption ? void 0 : getOptionValue(o),
         getOptionLabel: (o) => o === allOption ? nothingSelectedText ?? "All" : getOptionLabel(o),
+        compact: !vertical,
         value,
         label: this.label,
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -16819,6 +16839,7 @@ var TreeFilter = class extends BaseFilter {
         ...props,
         label: this.label,
         values: value,
+        compact: !vertical,
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
         sizeToContent: !inModal && !vertical,
         onSelect: (options) => {
@@ -16844,6 +16865,7 @@ var BooleanFilter = class extends BaseFilter {
       SelectField,
       {
         ...props,
+        compact: !vertical,
         label: this.label,
         value: String(value),
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
@@ -16993,6 +17015,7 @@ function Filters(props) {
     SelectField,
     {
       label: "Group by",
+      compact: !vertical,
       labelStyle: !vertical ? "inline" : "above",
       sizeToContent: !vertical,
       options: groupBy.options,
@@ -17016,7 +17039,6 @@ function Filters(props) {
           Button,
           {
             label: "More Filters",
-            size: "md",
             endAdornment: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(CountBadge, { count: numModalFilters, hideIfZero: true }),
             variant: "secondary",
             onClick: () => openModal({
@@ -17026,7 +17048,7 @@ function Filters(props) {
             ...testId.moreFiltersBtn
           }
         ),
-        Object.keys(filter).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
+        Object.keys(filter).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn }) })
       ]
     }
   );
@@ -17123,6 +17145,7 @@ function FilterDropdownMenu(props) {
         SelectField,
         {
           label: "Group by",
+          compact: true,
           labelStyle: "inline",
           sizeToContent: true,
           options: groupBy.options,
@@ -17133,7 +17156,7 @@ function FilterDropdownMenu(props) {
         }
       ),
       renderFilters(),
-      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn })
+      activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => onChange({}), ...testId.clearBtn })
     ] }),
     !isOpen && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
       FilterChips,
@@ -17185,7 +17208,7 @@ function FilterChips({
   if (chips.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { css: Css.df.gap1.fww.aic.order(1).$, children: [
     chips,
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", size: "md", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
+    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
   ] });
 }
 function buildFilterImpls(filterDefs) {