@homebound/beam 3.32.0 → 3.33.1

package/dist/index.d.cts

@@ -8,7 +8,7 @@ import { VirtuosoHandle, ListRange } from 'react-virtuoso';
 import { AriaButtonProps } from '@react-types/button';
 import { MenuTriggerState } from 'react-stately';
 import { FieldState, ListFieldState, ObjectState } from '@homebound/form-state';
-import { NumberFieldAria } from '@react-aria/numberfield';
+import { NumberFieldAria } from 'react-aria';
 
 /** Given a type X, and the user's proposed type T, only allow keys in X and nothing else. */
 type Only<X, T> = X & Record<Exclude<keyof T, keyof X | "__kind">, never>;
@@ -7221,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

@@ -8,7 +8,7 @@ import { VirtuosoHandle, ListRange } from 'react-virtuoso';
 import { AriaButtonProps } from '@react-types/button';
 import { MenuTriggerState } from 'react-stately';
 import { FieldState, ListFieldState, ObjectState } from '@homebound/form-state';
-import { NumberFieldAria } from '@react-aria/numberfield';
+import { NumberFieldAria } from 'react-aria';
 
 /** Given a type X, and the user's proposed type T, only allow keys in X and nothing else. */
 type Only<X, T> = X & Record<Exclude<keyof T, keyof X | "__kind">, never>;
@@ -7221,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

@@ -7720,8 +7720,8 @@ function MenuSectionImpl(props) {
 }
 
 // src/inputs/internal/MenuSearchField.tsx
-import { useTextField } from "@react-aria/textfield";
 import { useRef as useRef11 } from "react";
+import { useTextField } from "react-aria";
 
 // src/inputs/TextFieldBase.tsx
 import { useState as useState11 } from "react";
@@ -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 })
       }
     )
   ] });