@homebound/beam 3.31.2 → 3.33.0

package/dist/index.cjs

@@ -12102,7 +12102,8 @@ function TreeOption(props) {
   const {
     item,
     state,
-    allowCollapsing = true
+    allowCollapsing = true,
+    disabledReason
   } = props;
   const leveledOption = item.value;
   if (!leveledOption) return null;
@@ -12159,43 +12160,47 @@ function TreeOption(props) {
       }]
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("li", { ...hoverProps, onClick: (e) => {
-    if (!isGroup) return;
-    e.preventDefault();
-    e.stopPropagation();
-    toggleCollapsed();
-  }, ...(0, import_runtime37.trussProps)({
-    ...{
-      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__ */ (0, import_jsx_runtime52.jsx)("span", { className: "w_18px fs0 df aic", children: canCollapse && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { onClick: (e) => {
+  return maybeTooltip({
+    title: !isGroup ? disabledReason : void 0,
+    placement: "right",
+    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("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__ */ (0, import_jsx_runtime52.jsx)(Icon, { icon: collapsedKeys.includes(item.key) ? "triangleRight" : "triangleDown", inc: 2 }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "df aic gap1 h100 fg1 pt1 pb1 pr2", ref, ...optionProps, "data-label": item.textValue, children: [
-      !isGroup && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StyledCheckbox, { isDisabled, isSelected, isIndeterminate, ...tid[item.key.toString()] }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "pl1", children: item.rendered })
+    }, ...(0, import_runtime37.trussProps)({
+      ...{
+        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__ */ (0, import_jsx_runtime52.jsx)("span", { className: "w_18px fs0 df aic", children: canCollapse && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("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__ */ (0, import_jsx_runtime52.jsx)(Icon, { icon: collapsedKeys.includes(item.key) ? "triangleRight" : "triangleDown", inc: 2 }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "df aic gap1 h100 fg1 pt1 pb1 pr2", ref, ...optionProps, "data-label": item.textValue, children: [
+        !isGroup && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StyledCheckbox, { isDisabled, isSelected, isIndeterminate, ...tid[item.key.toString()] }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "pl1", children: item.rendered })
+      ] })
     ] })
-  ] });
+  });
 }
 function hasSelectedChildren(childOption, state, getOptionValue) {
   if (childOption.children && childOption.children.length > 0) {
@@ -12293,7 +12298,8 @@ function VirtualizedOptions(props) {
               {
                 item,
                 state,
-                allowCollapsing
+                allowCollapsing,
+                disabledReason: disabledOptionsWithReasons[item.key]
               },
               item.key
             );
@@ -12874,7 +12880,7 @@ function TreeSelectFieldBase(props) {
         onClose: () => state.toggle(),
         isOpen: state.isOpen,
         minWidth: 320,
-        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(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__ */ (0, import_jsx_runtime57.jsx)(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 })
       }
     )
   ] });
@@ -22305,10 +22311,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 {
@@ -22316,7 +22323,7 @@ function EnvironmentBanner(props) {
     badgeLabel,
     message,
     tooltip
-  } = getEnvironmentBannerConfig(env, impersonating);
+  } = getEnvironmentBannerConfig(env, impersonating, showProdWarning);
   const bgColorVar = maybeCssVar(bgColor);
   return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("div", { ...(0, import_runtime90.trussProps)({
     flexShrink: "fs0",
@@ -22359,7 +22366,7 @@ function EnvironmentBanner(props) {
         ] })
       ] }),
       impersonating != null && /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("span", { className: "df aic gap2 fw6 fz_12px lh_16px white fs0", ...tid.impersonating, children: [
-        env !== "prod" && /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("span", { children: [
+        (env !== "prod" || showProdWarning) && /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("span", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "dn mdandup_dib", children: "Impersonating \xA0" }),
           impersonating.name
         ] }),
@@ -22368,10 +22375,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 {
@@ -22387,9 +22394,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}`,
@@ -24612,7 +24626,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`