@homebound/beam 3.31.2 → 3.33.0

package/dist/index.d.cts

@@ -6205,11 +6205,20 @@ type ImpersonatedUser = {
 type EnvironmentBannerProps = {
     env: AppEnvironment;
     impersonating?: ImpersonatedUser;
+    /**
+     * Shows the production warning banner; typically set to `true` only for developers in the consuming app.
+     * Its styling takes precedence over impersonation (red fill + prod warning copy, with impersonation still
+     * shown on the right).
+     */
+    showProdWarning?: boolean;
 };
 /** Environment banner; horizontal/vertical pinning is owned by {@link EnvironmentBannerLayout}. */
 declare function EnvironmentBanner(props: EnvironmentBannerProps): JSX.Element | null;
-/** True when {@link EnvironmentBanner} should display: `dev`, `qa`, `local-prod`, or `prod` while impersonating. */
-declare function shouldShowEnvironmentBanner(env: AppEnvironment, impersonating: ImpersonatedUser | undefined): boolean;
+/**
+ * True when {@link EnvironmentBanner} should display: `dev`, `qa`, `local-prod`, or `prod` while impersonating
+ * or when `showProdWarning` is set (typically only for developers in the consuming app).
+ */
+declare function shouldShowEnvironmentBanner(env: AppEnvironment, impersonating: ImpersonatedUser | undefined, showProdWarning: boolean): boolean;
 /** Fixed banner height (px); {@link EnvironmentBannerLayout} reads this for spacer/CSS var offsets. */
 declare const environmentBannerSizePx = 34;
 
@@ -7212,7 +7221,14 @@ type TreeSelectFieldProps<O, V extends Value> = {
     /** Which selected options to display as chips in the input field when not focused.
      * @default root */
     chipDisplay?: "all" | "leaf" | "root";
-    disabledOptions?: V[];
+    /**
+     * Options to disable. Can be a list of `V` values, or `{ value, reason }` tuples where the
+     * `reason` is shown as a tooltip when the user hovers the disabled option.
+     */
+    disabledOptions?: (V | {
+        value: V;
+        reason: string;
+    })[];
     groupOptions?: V[];
 } & BeamFocusableProps & PresentationFieldProps;
 declare function TreeSelectField<O, V extends Value>(props: TreeSelectFieldProps<O, V>): JSX.Element;

package/dist/index.d.ts

@@ -6205,11 +6205,20 @@ type ImpersonatedUser = {
 type EnvironmentBannerProps = {
     env: AppEnvironment;
     impersonating?: ImpersonatedUser;
+    /**
+     * Shows the production warning banner; typically set to `true` only for developers in the consuming app.
+     * Its styling takes precedence over impersonation (red fill + prod warning copy, with impersonation still
+     * shown on the right).
+     */
+    showProdWarning?: boolean;
 };
 /** Environment banner; horizontal/vertical pinning is owned by {@link EnvironmentBannerLayout}. */
 declare function EnvironmentBanner(props: EnvironmentBannerProps): JSX.Element | null;
-/** True when {@link EnvironmentBanner} should display: `dev`, `qa`, `local-prod`, or `prod` while impersonating. */
-declare function shouldShowEnvironmentBanner(env: AppEnvironment, impersonating: ImpersonatedUser | undefined): boolean;
+/**
+ * True when {@link EnvironmentBanner} should display: `dev`, `qa`, `local-prod`, or `prod` while impersonating
+ * or when `showProdWarning` is set (typically only for developers in the consuming app).
+ */
+declare function shouldShowEnvironmentBanner(env: AppEnvironment, impersonating: ImpersonatedUser | undefined, showProdWarning: boolean): boolean;
 /** Fixed banner height (px); {@link EnvironmentBannerLayout} reads this for spacer/CSS var offsets. */
 declare const environmentBannerSizePx = 34;
 
@@ -7212,7 +7221,14 @@ type TreeSelectFieldProps<O, V extends Value> = {
     /** Which selected options to display as chips in the input field when not focused.
      * @default root */
     chipDisplay?: "all" | "leaf" | "root";
-    disabledOptions?: V[];
+    /**
+     * Options to disable. Can be a list of `V` values, or `{ value, reason }` tuples where the
+     * `reason` is shown as a tooltip when the user hovers the disabled option.
+     */
+    disabledOptions?: (V | {
+        value: V;
+        reason: string;
+    })[];
     groupOptions?: V[];
 } & BeamFocusableProps & PresentationFieldProps;
 declare function TreeSelectField<O, V extends Value>(props: TreeSelectFieldProps<O, V>): JSX.Element;

package/dist/index.js

@@ -11642,7 +11642,8 @@ function TreeOption(props) {
   const {
     item,
     state,
-    allowCollapsing = true
+    allowCollapsing = true,
+    disabledReason
   } = props;
   const leveledOption = item.value;
   if (!leveledOption) return null;
@@ -11699,43 +11700,47 @@ function TreeOption(props) {
       }]
     }
   };
-  return /* @__PURE__ */ jsxs33("li", { ...hoverProps, onClick: (e) => {
-    if (!isGroup) return;
-    e.preventDefault();
-    e.stopPropagation();
-    toggleCollapsed();
-  }, ...trussProps34({
-    ...{
-      display: "df",
-      alignItems: "aic",
-      justifyContent: "jcsb",
-      gap: "gap1",
-      paddingLeft: ["pl_var", {
-        "--paddingLeft": `${16 + level * 8}px`
-      }],
-      minHeight: "mh_42px",
-      outline: "outline0",
-      cursor: "cursorPointer",
-      fontWeight: "fw4",
-      fontSize: "fz_14px",
-      lineHeight: "lh_20px"
-    },
-    ...listItemStyles.item,
-    ...isHovered && (!isDisabled || isGroup) ? listItemStyles.hover : {},
-    ...isFocused && !isGroup ? listItemStyles.focus : {},
-    ...isDisabled && !isGroup ? listItemStyles.disabled : {}
-  }), children: [
-    allowCollapsing && /* @__PURE__ */ jsx52("span", { className: "w_18px fs0 df aic", children: canCollapse && /* @__PURE__ */ jsx52("button", { onClick: (e) => {
+  return maybeTooltip({
+    title: !isGroup ? disabledReason : void 0,
+    placement: "right",
+    children: /* @__PURE__ */ jsxs33("li", { ...hoverProps, onClick: (e) => {
+      if (!isGroup) return;
       e.preventDefault();
       e.stopPropagation();
       toggleCollapsed();
-      return false;
-    }, className: "br4 h_16px w_16px bgTransparent h_bgGray300", ...tid[`collapseToggle_${item.key}`], children: /* @__PURE__ */ jsx52(Icon, { icon: collapsedKeys.includes(item.key) ? "triangleRight" : "triangleDown", inc: 2 }) }) }),
-    /* @__PURE__ */ jsxs33("span", { className: "df aic gap1 h100 fg1 pt1 pb1 pr2", ref, ...optionProps, "data-label": item.textValue, children: [
-      !isGroup && /* @__PURE__ */ jsx52(StyledCheckbox, { isDisabled, isSelected, isIndeterminate, ...tid[item.key.toString()] }),
-      /* @__PURE__ */ jsx52("div", { className: "pl1", children: item.rendered })
+    }, ...trussProps34({
+      ...{
+        display: "df",
+        alignItems: "aic",
+        justifyContent: "jcsb",
+        gap: "gap1",
+        paddingLeft: ["pl_var", {
+          "--paddingLeft": `${16 + level * 8}px`
+        }],
+        minHeight: "mh_42px",
+        outline: "outline0",
+        cursor: "cursorPointer",
+        fontWeight: "fw4",
+        fontSize: "fz_14px",
+        lineHeight: "lh_20px"
+      },
+      ...listItemStyles.item,
+      ...isHovered && (!isDisabled || isGroup) ? listItemStyles.hover : {},
+      ...isFocused && !isGroup ? listItemStyles.focus : {},
+      ...isDisabled && !isGroup ? listItemStyles.disabled : {}
+    }), children: [
+      allowCollapsing && /* @__PURE__ */ jsx52("span", { className: "w_18px fs0 df aic", children: canCollapse && /* @__PURE__ */ jsx52("button", { onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        toggleCollapsed();
+        return false;
+      }, className: "br4 h_16px w_16px bgTransparent h_bgGray300", ...tid[`collapseToggle_${item.key}`], children: /* @__PURE__ */ jsx52(Icon, { icon: collapsedKeys.includes(item.key) ? "triangleRight" : "triangleDown", inc: 2 }) }) }),
+      /* @__PURE__ */ jsxs33("span", { className: "df aic gap1 h100 fg1 pt1 pb1 pr2", ref, ...optionProps, "data-label": item.textValue, children: [
+        !isGroup && /* @__PURE__ */ jsx52(StyledCheckbox, { isDisabled, isSelected, isIndeterminate, ...tid[item.key.toString()] }),
+        /* @__PURE__ */ jsx52("div", { className: "pl1", children: item.rendered })
+      ] })
     ] })
-  ] });
+  });
 }
 function hasSelectedChildren(childOption, state, getOptionValue) {
   if (childOption.children && childOption.children.length > 0) {
@@ -11833,7 +11838,8 @@ function VirtualizedOptions(props) {
               {
                 item,
                 state,
-                allowCollapsing
+                allowCollapsing,
+                disabledReason: disabledOptionsWithReasons[item.key]
               },
               item.key
             );
@@ -12414,7 +12420,7 @@ function TreeSelectFieldBase(props) {
         onClose: () => state.toggle(),
         isOpen: state.isOpen,
         minWidth: 320,
-        children: /* @__PURE__ */ jsx57(ListBox, { ...listBoxProps, positionProps, state, listBoxRef, selectedOptions: fieldState.selectedChipOptions, getOptionLabel, getOptionValue: (o) => valueToKey(getOptionValue(o)), horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true })
+        children: /* @__PURE__ */ jsx57(ListBox, { ...listBoxProps, positionProps, state, listBoxRef, selectedOptions: fieldState.selectedChipOptions, getOptionLabel, getOptionValue: (o) => valueToKey(getOptionValue(o)), horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, disabledOptionsWithReasons, isTree: true })
       }
     )
   ] });
@@ -21845,10 +21851,11 @@ function EnvironmentBanner(props) {
   const {
     env,
     impersonating,
+    showProdWarning = false,
     ...others
   } = props;
   const tid = useTestIds(others, "environmentBanner");
-  if (!shouldShowEnvironmentBanner(env, impersonating)) {
+  if (!shouldShowEnvironmentBanner(env, impersonating, showProdWarning)) {
     return null;
   }
   const {
@@ -21856,7 +21863,7 @@ function EnvironmentBanner(props) {
     badgeLabel,
     message,
     tooltip
-  } = getEnvironmentBannerConfig(env, impersonating);
+  } = getEnvironmentBannerConfig(env, impersonating, showProdWarning);
   const bgColorVar = maybeCssVar(bgColor);
   return /* @__PURE__ */ jsxs84("div", { ...trussProps83({
     flexShrink: "fs0",
@@ -21899,7 +21906,7 @@ function EnvironmentBanner(props) {
         ] })
       ] }),
       impersonating != null && /* @__PURE__ */ jsxs84("span", { className: "df aic gap2 fw6 fz_12px lh_16px white fs0", ...tid.impersonating, children: [
-        env !== "prod" && /* @__PURE__ */ jsxs84("span", { children: [
+        (env !== "prod" || showProdWarning) && /* @__PURE__ */ jsxs84("span", { children: [
           /* @__PURE__ */ jsx166("span", { className: "dn mdandup_dib", children: "Impersonating \xA0" }),
           impersonating.name
         ] }),
@@ -21908,10 +21915,10 @@ function EnvironmentBanner(props) {
     ] })
   ] });
 }
-function shouldShowEnvironmentBanner(env, impersonating) {
-  return env === "dev" || env === "qa" || env === "local-prod" || env === "prod" && isDefined(impersonating);
+function shouldShowEnvironmentBanner(env, impersonating, showProdWarning) {
+  return env === "dev" || env === "qa" || env === "local-prod" || env === "prod" && (isDefined(impersonating) || showProdWarning);
 }
-function getEnvironmentBannerConfig(env, impersonating) {
+function getEnvironmentBannerConfig(env, impersonating, showProdWarning) {
   switch (env) {
     case "dev":
       return {
@@ -21927,9 +21934,16 @@ function getEnvironmentBannerConfig(env, impersonating) {
         message: "You are in the QA Environment",
         tooltip: "You are in the QA Environment. Any changes here will not be reflected in live production data."
       };
-    // Prod env banner should only be displayed when impersonating
+    // Prod banner shows when impersonating or when `showProdWarning` is set. The prod warning takes precedence:
+    // it reuses the red local-prod fill for "live prod data" urgency, while impersonation (if any) still shows
+    // on the right. Impersonation alone keeps its own prod fill and copy.
     case "prod":
-      return {
+      return showProdWarning ? {
+        bgColor: "--b-env-brand-local-prod" /* EnvBrandLocalProd */,
+        badgeLabel: "PROD",
+        message: "You are in the Production Environment",
+        tooltip: "You are in the Production Environment. Any changes here WILL be reflected in live production data."
+      } : {
         bgColor: "--b-env-brand-prod" /* EnvBrandProd */,
         badgeLabel: "PROD",
         message: `You are impersonating ${impersonating?.name}`,
@@ -24160,7 +24174,7 @@ function EnvironmentBannerLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "environmentBannerLayout");
-  const showBanner = environmentBanner != null && shouldShowEnvironmentBanner(environmentBanner.env, environmentBanner.impersonating);
+  const showBanner = environmentBanner != null && shouldShowEnvironmentBanner(environmentBanner.env, environmentBanner.impersonating, environmentBanner.showProdWarning ?? false);
   const bannerHeightPx = showBanner ? environmentBannerSizePx : 0;
   const style = {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`