@homebound/beam 3.20.1 → 3.21.1

package/dist/index.cjs

@@ -5888,7 +5888,12 @@ var iconButtonOutline = {
   borderRadius: "br8",
   width: "w_48px",
   height: "h_40px",
-  borderColor: "bcGray300",
+  backgroundColor: ["bgColor_var", {
+    "--backgroundColor": "var(--b-surface)"
+  }],
+  borderColor: ["bc_var", {
+    "--borderColor": "var(--b-surface-separator)"
+  }],
   borderStyle: "bss",
   borderWidth: "bw1",
   display: "df",
@@ -19325,7 +19330,7 @@ function invertSpacing(value) {
 }
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
-var import_utils117 = require("@react-aria/utils");
+var import_utils120 = require("@react-aria/utils");
 var import_react103 = __toESM(require("react"), 1);
 
 // src/components/ButtonMenu.tsx
@@ -19444,6 +19449,12 @@ var DateFilter = class extends BaseFilter {
   dehydrate(value) {
     return value ? { op: value.op, value: dehydratePlainDate(value.value) } : void 0;
   }
+  formatSelectedFilterLabel(value) {
+    const { operations, getOperationValue, getOperationLabel } = this.props;
+    const operation = operations.find((o) => getOperationValue(o) === value.op);
+    const opLabel = operation ? getOperationLabel(operation) : String(value.op);
+    return `${opLabel} ${formatDate(value.value, "date")}`;
+  }
   render(value, setValue, tid, inModal, vertical) {
     const { label, operations, getOperationValue, getOperationLabel, defaultValue } = this.props;
     return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, { children: [
@@ -19511,6 +19522,10 @@ var DateRangeFilter = class extends BaseFilter {
       value: value.value ? { from: dehydratePlainDate(value.value.from), to: dehydratePlainDate(value.value.to) } : void 0
     } : void 0;
   }
+  formatSelectedFilterLabel(value) {
+    const formatted = formatDateRange(value.value, "date");
+    return formatted ? formatted : void 0;
+  }
   render(value, setValue, tid, inModal, vertical) {
     const { label, placeholderText, disabledDays, testFieldLabel, defaultValue } = this.props;
     return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
@@ -19552,12 +19567,34 @@ function hydrateDateRange(value) {
   return { from: hydratedFrom, to: hydratedTo };
 }
 
+// src/components/Filters/selectedFilterLabelUtils.ts
+function resolveOptionSelectedFilterLabel(optionsOrLoad, getOptionValue, getOptionLabel, value) {
+  const options = initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, void 0, false, false);
+  const match = options.find((o) => getOptionValue(o) === value);
+  return match ? getOptionLabel(match) : String(value);
+}
+function resolveTreeSelectedFilterLabel(optionsOrLoad, getOptionValue, getOptionLabel, value) {
+  const options = resolveNestedOptions(optionsOrLoad);
+  const match = options.flatMap(flattenOptions).find((o) => getOptionValue(o) === value);
+  return match ? getOptionLabel(match) : String(value);
+}
+function resolveNestedOptions(optionsOrLoad) {
+  if (Array.isArray(optionsOrLoad)) {
+    return optionsOrLoad;
+  }
+  return optionsOrLoad.current ?? [];
+}
+
 // src/components/Filters/MultiFilter.tsx
 var import_jsx_runtime131 = require("react/jsx-runtime");
 function multiFilter(props) {
   return (key) => new MultiFilter(key, props);
 }
 var MultiFilter = class extends BaseFilter {
+  formatSelectedFilterLabel(value) {
+    const { options, getOptionValue, getOptionLabel } = this.props;
+    return resolveOptionSelectedFilterLabel(options, getOptionValue, getOptionLabel, value);
+  }
   render(value, setValue, tid, inModal, vertical) {
     if (inModal && Array.isArray(this.props.options) && this.props.options.length > 0 && this.props.options.length <= 8) {
       const { disabledOptions } = this.props;
@@ -19611,6 +19648,10 @@ function numberRangeFilter(props) {
   return (key) => new NumberRangeFilter(key, props);
 }
 var NumberRangeFilter = class extends BaseFilter {
+  formatSelectedFilterLabel(value) {
+    const parts = [value.min, value.max].filter((n) => n !== void 0);
+    return parts.length > 0 ? parts.join(" \u2013 ") : void 0;
+  }
   render(value, setValue, tid, inModal, vertical) {
     const {
       label,
@@ -19685,6 +19726,10 @@ function singleFilter(props) {
 }
 var allOption = {};
 var SingleFilter = class extends BaseFilter {
+  formatSelectedFilterLabel(value) {
+    const { options, getOptionValue, getOptionLabel } = this.props;
+    return resolveOptionSelectedFilterLabel(options, getOptionValue, getOptionLabel, value);
+  }
   render(value, setValue, tid, inModal, vertical) {
     const {
       label,
@@ -19721,6 +19766,10 @@ function treeFilter(props) {
   return (key) => new TreeFilter(key, props);
 }
 var TreeFilter = class extends BaseFilter {
+  formatSelectedFilterLabel(value) {
+    const { options, getOptionValue, getOptionLabel } = this.props;
+    return resolveTreeSelectedFilterLabel(options, getOptionValue, getOptionLabel, value);
+  }
   render(value, setValue, tid, inModal, vertical) {
     const { defaultValue, nothingSelectedText, filterBy = "root", ...props } = this.props;
     return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
@@ -19748,6 +19797,11 @@ function booleanFilter(props) {
   return (key) => new BooleanFilter(key, props);
 }
 var BooleanFilter = class extends BaseFilter {
+  formatSelectedFilterLabel(value) {
+    const { options = defaultBooleanOptions } = this.props;
+    const match = options.find(([optionValue]) => optionValue === value);
+    return match ? match[1] : String(value);
+  }
   render(value, setValue, tid, inModal, vertical) {
     const { options = defaultBooleanOptions, label, defaultValue, ...props } = this.props;
     return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
@@ -19786,6 +19840,10 @@ function checkboxFilter(props) {
   });
 }
 var CheckboxFilter = class extends BaseFilter {
+  formatSelectedFilterLabel(value) {
+    const { onValue = true } = this.props;
+    return value === onValue ? this.label : void 0;
+  }
   render(value, setValue, tid, inModal, vertical) {
     const { defaultValue, onValue = true, offValue = void 0, ...props } = this.props;
     return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
@@ -19940,6 +19998,10 @@ function toggleFilter(props) {
   });
 }
 var ToggleFilter = class extends BaseFilter {
+  formatSelectedFilterLabel(value) {
+    const { onValue = true } = this.props;
+    return value === onValue ? this.label : void 0;
+  }
   render(value, setValue, tid, inModal, vertical) {
     const { defaultValue, onValue = true, offValue = void 0, ...props } = this.props;
     return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
@@ -20034,24 +20096,11 @@ function FilterDropdownMenu(props) {
         opacity: "o0"
       } : {}
     }), children: searchTextField }),
-    sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Button, { label: "", "aria-label": "Search", icon: "search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, variant: "secondaryBlack", ...testId.searchButton }),
-    hasFilters && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Button, { label: sm ? "" : "Filter", "aria-label": "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "df aic gap1", children: [
+    sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(IconButton, { variant: "outline", icon: "search", label: "Search", onClick: () => setSearchIsOpen(!searchIsOpen), active: searchIsOpen, ...testId.searchButton }),
+    sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(IconButton, { variant: "outline", icon: "filter", label: "Filter", active: isOpen, onClick: () => setIsOpen(!isOpen), ...testId.button }),
+    !sm && hasFilters && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "df aic gap1", children: [
       activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(CountBadge, { count: activeFilterCount }),
-      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Icon, { xss: {
-        ...sm ? {
-          position: "absolute",
-          overflow: "oh",
-          clip: "cli_inset_50",
-          clipPath: "clp_none",
-          border: "bd_0",
-          height: "h_1px",
-          margin: "m_neg1px",
-          width: "w_1px",
-          padding: "p_0",
-          whiteSpace: "wsnw",
-          opacity: "o0"
-        } : {}
-      }, icon: isOpen ? "chevronUp" : "chevronDown" })
+      /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Icon, { icon: isOpen ? "chevronUp" : "chevronDown" })
     ] }), variant: "secondaryBlack", onClick: () => setIsOpen(!isOpen), active: isOpen, ...testId.button }),
     searchIsOpen && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { ...(0, import_runtime75.trussProps)({
       width: "w100",
@@ -20084,30 +20133,32 @@ function FilterChips({
   onClear,
   testId
 }) {
-  const chips = safeEntries(filterImpls).flatMap(([key]) => {
-    const value = filter[key];
-    if (!isDefined(value)) return [];
-    if (Array.isArray(value)) {
-      return value.map((item) => {
-        const chipKey = `${String(key)}_${item}`;
-        const newArray = value.filter((v) => v !== item);
-        return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(ToggleChip, { text: titleCase(String(item)), onClick: () => onChange(updateFilter(filter, key, newArray.length > 0 ? newArray : void 0)), ...testId[`chip_${chipKey}`] }, chipKey);
-      });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(ToggleChip, { text: titleCase(String(value)), onClick: () => onChange(updateFilter(filter, key, void 0)), ...testId[`chip_${String(key)}`] }, String(key));
-  });
+  const chips = safeEntries(filterImpls).flatMap(([key, f]) => chipsForFilterKey(key, f, filter, onChange, testId));
   if (chips.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "df gap1 fww aic order_1", children: [
     chips,
     /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...testId.clearBtn })
   ] });
 }
+function chipsForFilterKey(key, f, filter, onChange, testId) {
+  const value = filter[key];
+  if (!isDefined(value)) return [];
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => {
+      const label2 = f.formatSelectedFilterLabel(item);
+      if (!isDefined(label2)) return [];
+      const chipKey = `${String(key)}_${item}`;
+      const newArray = value.filter((v) => v !== item);
+      return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(ToggleChip, { text: label2, onClick: () => onChange(updateFilter(filter, key, newArray.length > 0 ? newArray : void 0)), ...testId[`chip_${chipKey}`] }, chipKey);
+    });
+  }
+  const label = f.formatSelectedFilterLabel(value);
+  if (!isDefined(label)) return [];
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(ToggleChip, { text: label, onClick: () => onChange(updateFilter(filter, key, void 0)), ...testId[`chip_${String(key)}`] }, String(key));
+}
 function buildFilterImpls(filterDefs) {
   return Object.fromEntries(safeEntries(filterDefs).map(([key, fn]) => [key, fn(key)]));
 }
-function titleCase(str) {
-  return str.split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
-}
 function getActiveFilterCount(filter) {
   return safeKeys(filter).filter((key) => filter[key] !== void 0).length;
 }
@@ -20587,7 +20638,7 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
       tableWrapper.style.removeProperty(beamTableActionsHeightVar);
     }
   }, [enabled, tableActionsRef, tableWrapperRef]);
-  (0, import_utils117.useResizeObserver)({
+  (0, import_utils120.useResizeObserver)({
     ref: tableActionsRef,
     onResize: enabled ? syncHeightVar : noop
   });
@@ -21223,7 +21274,7 @@ var import_react111 = require("react");
 var import_react_aria49 = require("react-aria");
 
 // src/components/Tag.tsx
-var import_utils124 = require("@react-aria/utils");
+var import_utils127 = require("@react-aria/utils");
 var import_react110 = require("react");
 var import_runtime83 = require("@homebound/truss/runtime");
 var import_jsx_runtime158 = require("react/jsx-runtime");
@@ -21239,7 +21290,7 @@ function Tag(props) {
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = (0, import_react110.useState)(false);
   const ref = (0, import_react110.useRef)(null);
-  (0, import_utils124.useResizeObserver)({
+  (0, import_utils127.useResizeObserver)({
     ref,
     onResize: () => {
       if (ref.current) {
@@ -21964,7 +22015,7 @@ function HomeboundLogo(props) {
 }
 
 // src/components/MaxLines.tsx
-var import_utils132 = require("@react-aria/utils");
+var import_utils135 = require("@react-aria/utils");
 var import_react120 = require("react");
 var import_runtime92 = require("@homebound/truss/runtime");
 var import_jsx_runtime167 = require("react/jsx-runtime");
@@ -21975,7 +22026,7 @@ function MaxLines({
   const elRef = (0, import_react120.useRef)(null);
   const [hasMore, setHasMore] = (0, import_react120.useState)(false);
   const [expanded, setExpanded] = (0, import_react120.useState)(false);
-  (0, import_utils132.useLayoutEffect)(() => {
+  (0, import_utils135.useLayoutEffect)(() => {
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
@@ -21986,7 +22037,7 @@ function MaxLines({
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
-  (0, import_utils132.useResizeObserver)({
+  (0, import_utils135.useResizeObserver)({
     ref: elRef,
     onResize
   });
@@ -22010,7 +22061,7 @@ function MaxLines({
 var import_change_case8 = require("change-case");
 
 // src/components/AppNav/AppNavGroup.tsx
-var import_utils134 = require("@react-aria/utils");
+var import_utils137 = require("@react-aria/utils");
 var import_change_case7 = require("change-case");
 var import_react123 = require("react");
 
@@ -22253,7 +22304,7 @@ function AppNavGroupDisclosure(props) {
       setContentHeight(`${contentEl.scrollHeight}px`);
     }
   }, [expanded, contentEl]);
-  (0, import_utils134.useResizeObserver)({
+  (0, import_utils137.useResizeObserver)({
     ref: contentRef,
     onResize
   });
@@ -22866,7 +22917,7 @@ function PageHeader2(props) {
 }
 
 // src/components/ScrollShadows.tsx
-var import_utils142 = require("@react-aria/utils");
+var import_utils145 = require("@react-aria/utils");
 var import_react126 = require("react");
 var import_runtime100 = require("@homebound/truss/runtime");
 var import_jsx_runtime177 = require("react/jsx-runtime");
@@ -22955,7 +23006,7 @@ function ScrollShadows(props) {
     setShowEndShadow(start + boxSize < end);
   }, [horizontal]);
   const onResize = (0, import_react126.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
-  (0, import_utils142.useResizeObserver)({
+  (0, import_utils145.useResizeObserver)({
     ref: scrollRef,
     onResize
   });
@@ -23864,7 +23915,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-var import_utils149 = require("@react-aria/utils");
+var import_utils152 = require("@react-aria/utils");
 var import_react134 = require("react");
 function useMeasuredHeight(ref, enabled) {
   const [height, setHeight] = (0, import_react134.useState)(0);
@@ -23873,7 +23924,7 @@ function useMeasuredHeight(ref, enabled) {
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  (0, import_utils149.useResizeObserver)({ ref, onResize: syncElementHeight });
+  (0, import_utils152.useResizeObserver)({ ref, onResize: syncElementHeight });
   (0, import_react134.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);