@homebound/beam 2.413.0-alpha.6 → 2.414.0-alpha.1

package/dist/index.cjs

@@ -7575,7 +7575,7 @@ var nonKindGridColumnKeys = [
   "isAction",
   "id",
   "canHide",
-  "initVisible",
+  "initHidden",
   "expandColumns",
   "initExpanded",
   "hideOnExpand",
@@ -8635,10 +8635,10 @@ function RowImpl(props) {
     const maybeSticky = (isGridCellContent(maybeContent) && maybeContent.sticky || column2.sticky) ?? void 0;
     const maybeStickyColumnStyles = maybeSticky && columnSizes ? {
       ...Css.sticky.z(zIndices.stickyColumns).bgWhite.$,
-      ...maybeSticky === "left" ? Css.left(columnIndex === 0 ? 0 : `calc(${columnSizes.slice(0, columnIndex).join(" + ")})`).$ : {},
-      ...maybeSticky === "right" ? Css.right(
-        columnIndex + 1 === columnSizes.length ? 0 : `calc(${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")})`
-      ).$ : {}
+      // For flex layouts, all sticky columns should have left/right: 0
+      // The flex layout handles their adjacency based on their widths
+      ...maybeSticky === "left" ? Css.left(0).$ : {},
+      ...maybeSticky === "right" ? Css.right(0).$ : {}
     } : {};
     minStickyLeftOffset += maybeSticky === "left" ? parseInt(columnSizes[columnIndex].replace("px", ""), 10) : 0;
     const cellId = `${row.kind}_${row.id}_${column2.id}`;
@@ -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