@homebound/beam 3.42.4 → 3.44.0

package/dist/Css.json

@@ -2,7 +2,7 @@
   "increment": 8,
   "breakpoints": {"ifPrint":"@media print","ifSm":"@media screen and (max-width: 599px)","ifMd":"@media screen and (min-width: 600px) and (max-width: 1024px)","ifSmOrMd":"@media screen and (max-width: 1024px)","ifMdAndUp":"@media screen and (min-width: 600px)","ifMdAndDown":"@media screen and (max-width: 1024px)","ifLg":"@media screen and (min-width: 1025px)","ifMdOrLg":"@media screen and (min-width: 600px)"},
   "typography": ["xs2","xs2Sb","xs","xsSb","sm","smSb","md","mdSb","lg","xl","xl2"],
-  "tokens": {"ButtonCautionDisabledBg":"--b-button-caution-disabled-bg","ButtonCautionDisabledFg":"--b-button-caution-disabled-fg","ButtonDangerDisabledBg":"--b-button-danger-disabled-bg","ButtonDangerDisabledFg":"--b-button-danger-disabled-fg","ButtonGhostDisabledFg":"--b-button-ghost-disabled-fg","ButtonGhostFg":"--b-button-ghost-fg","ButtonPrimaryDisabledBg":"--b-button-primary-disabled-bg","ButtonPrimaryDisabledFg":"--b-button-primary-disabled-fg","ButtonTertiaryFg":"--b-button-tertiary-fg","ButtonTertiaryFgPressed":"--b-button-tertiary-fg-pressed","Danger":"--b-danger","DangerPressed":"--b-danger-pressed","EnvBrandDev":"--b-env-brand-dev","EnvBrandLocalProd":"--b-env-brand-local-prod","EnvBrandProd":"--b-env-brand-prod","EnvBrandQa":"--b-env-brand-qa","FieldBgDefault":"--b-field-bg-default","FieldBgDisabled":"--b-field-bg-disabled","FieldBgHover":"--b-field-bg-hover","FieldBorderDefault":"--b-field-border-default","FieldBorderError":"--b-field-border-error","FieldBorderFocus":"--b-field-border-focus","FieldBorderHover":"--b-field-border-hover","FieldTextDisabled":"--b-field-text-disabled","FocusRingInset":"--b-focus-ring-inset","FocusRingMuted":"--b-focus-ring-muted","ListRowBgHover":"--b-list-row-bg-hover","LoaderFill":"--b-loader-fill","LoaderSpinner":"--b-loader-spinner","LoaderTrack":"--b-loader-track","MenuItemBgHover":"--b-menu-item-bg-hover","NavItemBgActive":"--b-nav-item-bg-active","NavItemBgHover":"--b-nav-item-bg-hover","NavItemBgPressed":"--b-nav-item-bg-pressed","NavText":"--b-nav-text","NavTextActive":"--b-nav-text-active","NavTextDisabled":"--b-nav-text-disabled","NavTextFocusVisible":"--b-nav-text-focus-visible","NavTextPressed":"--b-nav-text-pressed","NeutralFillHoverStrong":"--b-neutral-fill-hover-strong","NeutralFillHoverSubtle":"--b-neutral-fill-hover-subtle","NeutralFillPressed":"--b-neutral-fill-pressed","NeutralSurfacePressed":"--b-neutral-surface-pressed","OnPrimary":"--b-on-primary","OnSurface":"--b-on-surface","OnSurfaceMuted":"--b-on-surface-muted","OnSurfaceSubtle":"--b-on-surface-subtle","PopoverSurface":"--b-popover-surface","Primary":"--b-primary","PrimaryHover":"--b-primary-hover","PrimaryPressed":"--b-primary-pressed","Scrim":"--b-scrim","SelectionIndicator":"--b-selection-indicator","StatusSuccessFg":"--b-status-success-fg","Surface":"--b-surface","SurfaceSeparator":"--b-surface-separator","SurfaceSubtle":"--b-surface-subtle","TextDisabled":"--b-text-disabled","TextHelper":"--b-text-helper","TextLabel":"--b-text-label","TextLinkDefault":"--b-text-link-default","TextLinkDisabled":"--b-text-link-disabled","TextLinkHover":"--b-text-link-hover","TextLinkPressed":"--b-text-link-pressed","TextPlaceholder":"--b-text-placeholder","TextSelection":"--b-text-selection"},
+  "tokens": {"ButtonCautionDisabledBg":"--b-button-caution-disabled-bg","ButtonCautionDisabledFg":"--b-button-caution-disabled-fg","ButtonDangerDisabledBg":"--b-button-danger-disabled-bg","ButtonDangerDisabledFg":"--b-button-danger-disabled-fg","ButtonGhostDisabledFg":"--b-button-ghost-disabled-fg","ButtonGhostFg":"--b-button-ghost-fg","ButtonPrimaryDisabledBg":"--b-button-primary-disabled-bg","ButtonPrimaryDisabledFg":"--b-button-primary-disabled-fg","ButtonTertiaryFg":"--b-button-tertiary-fg","ButtonTertiaryFgPressed":"--b-button-tertiary-fg-pressed","Danger":"--b-danger","DangerPressed":"--b-danger-pressed","EnvBrandDev":"--b-env-brand-dev","EnvBrandLocalProd":"--b-env-brand-local-prod","EnvBrandProd":"--b-env-brand-prod","EnvBrandQa":"--b-env-brand-qa","FieldBgDefault":"--b-field-bg-default","FieldBgDisabled":"--b-field-bg-disabled","FieldBgHover":"--b-field-bg-hover","FieldBorderDefault":"--b-field-border-default","FieldBorderError":"--b-field-border-error","FieldBorderFocus":"--b-field-border-focus","FieldBorderHover":"--b-field-border-hover","FieldTextDisabled":"--b-field-text-disabled","FocusRingInset":"--b-focus-ring-inset","FocusRingMuted":"--b-focus-ring-muted","ListRowBgHover":"--b-list-row-bg-hover","LoaderFill":"--b-loader-fill","LoaderSpinner":"--b-loader-spinner","LoaderTrack":"--b-loader-track","MenuItemBgHover":"--b-menu-item-bg-hover","NavItemBgActive":"--b-nav-item-bg-active","NavItemBgHover":"--b-nav-item-bg-hover","NavItemBgPressed":"--b-nav-item-bg-pressed","NavText":"--b-nav-text","NavTextActive":"--b-nav-text-active","NavTextDisabled":"--b-nav-text-disabled","NavTextFocusVisible":"--b-nav-text-focus-visible","NavTextPressed":"--b-nav-text-pressed","NeutralFillHoverStrong":"--b-neutral-fill-hover-strong","NeutralFillHoverSubtle":"--b-neutral-fill-hover-subtle","NeutralFillPressed":"--b-neutral-fill-pressed","NeutralSurfacePressed":"--b-neutral-surface-pressed","OnPrimary":"--b-on-primary","OnSurface":"--b-on-surface","OnSurfaceMuted":"--b-on-surface-muted","OnSurfaceSubtle":"--b-on-surface-subtle","OnSurfaceDisabled":"--b-on-surface-disabled","OnSurfaceRaisedHover":"--b-on-surface-raised-hover","OnSurfaceRaisedPressed":"--b-on-surface-raised-pressed","PopoverSurface":"--b-popover-surface","Primary":"--b-primary","PrimaryHover":"--b-primary-hover","PrimaryPressed":"--b-primary-pressed","Scrim":"--b-scrim","SelectionIndicator":"--b-selection-indicator","StatusSuccessFg":"--b-status-success-fg","Surface":"--b-surface","SurfaceRaised":"--b-surface-raised","SurfaceRaisedHover":"--b-surface-raised-hover","SurfaceRaisedPressed":"--b-surface-raised-pressed","SurfaceDisabled":"--b-surface-disabled","SurfaceSeparator":"--b-surface-separator","SurfaceSubtle":"--b-surface-subtle","TextDisabled":"--b-text-disabled","TextHelper":"--b-text-helper","TextLabel":"--b-text-label","TextLinkDefault":"--b-text-link-default","TextLinkDisabled":"--b-text-link-disabled","TextLinkHover":"--b-text-link-hover","TextLinkPressed":"--b-text-link-pressed","TextPlaceholder":"--b-text-placeholder","TextSelection":"--b-text-selection"},
   "abbreviations": {
     "ba": {"kind":"static","defs":{"borderStyle":"solid","borderWidth":"1px"}},
     "bt": {"kind":"static","defs":{"borderTopStyle":"solid","borderTopWidth":"1px"}},

package/dist/index.cjs

@@ -428,6 +428,9 @@ var Tokens = /* @__PURE__ */ ((Tokens2) => {
   Tokens2["OnSurface"] = "--b-on-surface";
   Tokens2["OnSurfaceMuted"] = "--b-on-surface-muted";
   Tokens2["OnSurfaceSubtle"] = "--b-on-surface-subtle";
+  Tokens2["OnSurfaceDisabled"] = "--b-on-surface-disabled";
+  Tokens2["OnSurfaceRaisedHover"] = "--b-on-surface-raised-hover";
+  Tokens2["OnSurfaceRaisedPressed"] = "--b-on-surface-raised-pressed";
   Tokens2["PopoverSurface"] = "--b-popover-surface";
   Tokens2["Primary"] = "--b-primary";
   Tokens2["PrimaryHover"] = "--b-primary-hover";
@@ -436,6 +439,10 @@ var Tokens = /* @__PURE__ */ ((Tokens2) => {
   Tokens2["SelectionIndicator"] = "--b-selection-indicator";
   Tokens2["StatusSuccessFg"] = "--b-status-success-fg";
   Tokens2["Surface"] = "--b-surface";
+  Tokens2["SurfaceRaised"] = "--b-surface-raised";
+  Tokens2["SurfaceRaisedHover"] = "--b-surface-raised-hover";
+  Tokens2["SurfaceRaisedPressed"] = "--b-surface-raised-pressed";
+  Tokens2["SurfaceDisabled"] = "--b-surface-disabled";
   Tokens2["SurfaceSeparator"] = "--b-surface-separator";
   Tokens2["SurfaceSubtle"] = "--b-surface-subtle";
   Tokens2["TextDisabled"] = "--b-text-disabled";
@@ -5827,7 +5834,8 @@ function IconButton(props) {
     download = false,
     forceFocusStyles = false,
     label,
-    preventTooltip = false
+    preventTooltip = false,
+    __storyState
   } = props;
   const isDisabled = !!disabled;
   const ariaProps = {
@@ -5838,20 +5846,25 @@ function IconButton(props) {
   };
   const ref = useGetRef(buttonRef);
   const {
-    buttonProps
+    buttonProps,
+    isPressed: isPressedFromEvents
   } = (0, import_react_aria2.useButton)({
     ...ariaProps,
     onPress: typeof onPress === "string" ? noop : onPress,
     elementType: typeof onPress === "string" ? "a" : "button"
   }, ref);
+  const isPressed = __storyState?.pressed ?? isPressedFromEvents;
+  const isPressing = isPressed || active;
   const {
     focusProps,
-    isFocusVisible
+    isFocusVisible: isFocusVisibleFromEvents
   } = (0, import_react_aria2.useFocusRing)(ariaProps);
   const {
     hoverProps,
-    isHovered
+    isHovered: isHoveredFromEvents
   } = (0, import_react_aria2.useHover)(ariaProps);
+  const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
+  const isFocusVisible = __storyState?.focusVisible ?? isFocusVisibleFromEvents;
   const testIds = useTestIds(props, icon);
   const isCircle = variant === "circle";
   const isOutline = variant === "outline";
@@ -5868,7 +5881,7 @@ function IconButton(props) {
       ...base,
       ...isHovered && hover,
       ...(isFocusVisible || forceFocusStyles) && focus,
-      ...active && pressed,
+      ...isPressing && pressed,
       ...isDisabled && iconButtonStylesDisabled,
       ...bgColor && {
         backgroundColor: ["bgColor_var", {
@@ -5876,7 +5889,7 @@ function IconButton(props) {
         }]
       }
     };
-  }, [isHovered, isFocusVisible, isDisabled, compact, isCircle, isOutline, active, bgColor, forceFocusStyles]);
+  }, [isHovered, isFocusVisible, isDisabled, compact, isCircle, isOutline, isPressing, bgColor, forceFocusStyles]);
   const iconColor = isCircle ? circleIconColor : defaultIconColor;
   const buttonAttrs = {
     ...testIds,
@@ -5887,7 +5900,7 @@ function IconButton(props) {
     ...(0, import_runtime9.mergeProps)(typeof onPress === "string" ? navLink : void 0, void 0, styles),
     "aria-label": label
   };
-  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, color: color || (isDisabled ? "--b-text-disabled" /* TextDisabled */ : isCircle && (isHovered || active || isFocusVisible) ? defaultIconColor : iconColor), bgColor, inc: compact ? 2 : isCircle ? 2.5 : inc });
+  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, color: color || (isDisabled ? "--b-on-surface-disabled" /* OnSurfaceDisabled */ : isOutline && isPressing ? "--b-on-surface-raised-pressed" /* OnSurfaceRaisedPressed */ : isOutline && isHovered ? "--b-on-surface-raised-hover" /* OnSurfaceRaisedHover */ : isCircle && (isHovered || active || isFocusVisible) ? defaultIconColor : iconColor), bgColor, inc: compact ? 2 : isCircle ? 2.5 : inc });
   return maybeTooltip({
     title: resolveTooltip(disabled ?? (preventTooltip ? void 0 : label), tooltip),
     placement: "top",
@@ -5908,7 +5921,10 @@ var iconButtonStylesReset = {
   transition: "transition"
 };
 var iconButtonStylesDisabled = {
-  cursor: "cursorNotAllowed"
+  cursor: "cursorNotAllowed",
+  backgroundColor: ["bgColor_var", {
+    "--backgroundColor": "var(--b-surface-disabled)"
+  }]
 };
 var variantStyles = {
   default: {
@@ -5983,26 +5999,28 @@ var variantStyles = {
       borderRadius: "br8",
       width: "w_42px",
       height: "h_40px",
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-surface)"
-      }],
       borderColor: "bcGray300",
       borderStyle: "bss",
       borderWidth: "bw1",
       display: "df",
       justifyContent: "jcc",
-      alignItems: "aic"
+      alignItems: "aic",
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface-raised)"
+      }]
     },
     hover: {
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-neutral-fill-hover-strong)"
+        "--backgroundColor": "var(--b-surface-raised-hover)"
       }]
     },
     focus: {
       boxShadow: "bshFocus"
     },
     pressed: {
-      backgroundColor: "bgGray200"
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface-raised-pressed)"
+      }]
     }
   }
 };
@@ -20984,7 +21002,7 @@ function FilterPanelOpen({
   }), children: [
     groupBy && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(SelectField, { label: "Group by", labelStyle: "inline", sizeToContent: true, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }),
     filterControls,
-    activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...tid.clearBtn })
+    activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
   ] });
 }
 function FilterPanelClosed({
@@ -21009,7 +21027,7 @@ function FilterPanelClosed({
     } : {}
   }), children: [
     chips,
-    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...tid.clearBtn })
+    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
   ] });
 }
 function buildFilterControls(filterImpls, filter, setFilter, testId) {
@@ -21053,7 +21071,9 @@ function GridTableLayoutActionsComponent(props) {
     api,
     withCardView,
     view,
-    setView
+    setView,
+    clearFilters,
+    searchApi
   } = props;
   const testId = useTestIds(props, "gridTableLayoutActions");
   const {
@@ -21084,6 +21104,17 @@ function GridTableLayoutActionsComponent(props) {
     setSearchValue(v ?? "");
     handleSearchDebounced(v ?? "");
   }, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(Icon, { icon: "search", color: "rgba(100, 100, 100, 1)" /* Gray700 */ }) });
+  if (searchApi) {
+    searchApi.current = {
+      clear: () => {
+        handleSearchDebounced.cancel();
+        setSearchValue("");
+        setQueryParams({
+          search: void 0
+        }, "replaceIn");
+      }
+    };
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df fdc gap1 pb2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { ...(0, import_runtime79.trussProps)({
       display: "df",
@@ -21110,7 +21141,7 @@ function GridTableLayoutActionsComponent(props) {
       ] })
     ] }),
     sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "pl3 pr3", children: searchTextField }),
-    hasFilters && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: () => setFilter?.({}) })
+    hasFilters && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
 var _GridTableLayoutActions = (0, import_react107.memo)(GridTableLayoutActionsComponent);
@@ -21274,8 +21305,13 @@ function GridTableLayoutComponent(props) {
   const filterSearchProps = (0, import_react110.useMemo)(() => layoutState?.search ? {
     onSearch: layoutState.setSearchString
   } : void 0, [layoutState?.search, layoutState?.setSearchString]);
-  const emptyState = (0, import_react110.useMemo)(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback), [layoutEmptyFallback, layoutState, tableProps]);
-  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView });
+  const searchApiRef = (0, import_react110.useRef)();
+  const clearFilters = (0, import_react110.useCallback)(() => {
+    layoutState?.clearFilters();
+    searchApiRef.current?.clear();
+  }, [layoutState]);
+  const emptyState = (0, import_react110.useMemo)(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters), [layoutEmptyFallback, layoutState, tableProps, clearFilters]);
+  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView, clearFilters, searchApi: searchApiRef });
   const cardAs = withCardView && view === "card" ? "card" : void 0;
   const tableBody = /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_jsx_runtime152.Fragment, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(GridTable, { ...tableProps, ...cardAs ? {
     as: cardAs
@@ -21365,7 +21401,7 @@ function useGridTableLayoutState({
     clearFilters
   };
 }
-function composeEmptyState(tableProps, layoutState, layoutEmptyFallback) {
+function composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters) {
   const tableEmptyState = "emptyState" in tableProps ? tableProps.emptyState : void 0;
   const tableEmptyFallback = "emptyFallback" in tableProps ? tableProps.emptyFallback : void 0;
   const filteringActive = layoutState?.filteringActive ?? false;
@@ -21373,7 +21409,7 @@ function composeEmptyState(tableProps, layoutState, layoutEmptyFallback) {
   return {
     title: tableEmptyState?.title ?? tableEmptyFallback ?? layoutEmptyFallback,
     description: tableEmptyState?.description ?? (filteringActive ? filterEmptyDescription : void 0),
-    actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Button, { label: "Clear Filters", variant: "tertiary", onClick: layoutState.clearFilters, "data-testid": "clearFilters" }) : void 0)
+    actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Button, { label: "Clear Filters", variant: "tertiary", onClick: clearFilters, "data-testid": "clearFilters" }) : void 0)
   };
 }
 function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
@@ -23568,7 +23604,9 @@ function Navbar(props) {
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
   return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(ContrastScope, { children: /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("nav", { ...(0, import_runtime100.trussProps)({
-    backgroundColor: "bgGray800",
+    backgroundColor: ["bgColor_var", {
+      "--backgroundColor": "var(--b-surface-raised)"
+    }],
     flexShrink: "fs0",
     display: "df",
     alignItems: "aic",