@homebound/beam 3.23.0 → 3.24.0

package/dist/index.d.cts

@@ -1219,6 +1219,18 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     float(value: Properties["float"]): CssBuilder<T & {
         float: csstype.Property.Float | undefined;
     }, S>;
+    /** Sets `fontStyle: "italic"`. */
+    get fsyi(): CssBuilder<T & {
+        fontStyle: csstype.Property.FontStyle | undefined;
+    }, S>;
+    /** Sets `fontStyle: "normal"`. */
+    get fsynm(): CssBuilder<T & {
+        fontStyle: csstype.Property.FontStyle | undefined;
+    }, S>;
+    /** Sets `fontStyle: value`. */
+    fsy(value: Properties["fontStyle"]): CssBuilder<T & {
+        fontStyle: csstype.Property.FontStyle | undefined;
+    }, S>;
     /** Sets `fontWeight: "normal"`. */
     get fwn(): CssBuilder<T & {
         fontWeight: csstype.Property.FontWeight | undefined;
@@ -6708,6 +6720,22 @@ type ComboBoxBaseProps<O, V extends Value> = {
     hideErrorMessage?: boolean;
     multiline?: boolean;
     onSearch?: (search: string) => void;
+    /**
+     * Called when the user explicitly selects the synthetic add-new row from the dropdown.
+     * Only supported on single-select fields.
+     *
+     * While the user types, a pseudo-option (e.g. `Add "my value"`) appears at the bottom of the
+     * filtered list when the trimmed input does not exactly match an existing option label
+     * (case-insensitive). It is not shown when the input is empty, or when the input exactly matches
+     * an existing label (e.g. typing "banana" when "Banana" exists).
+     *
+     * The user must focus that row (e.g. arrow down) and confirm with Enter or click; pressing Enter
+     * on the typed text alone does not invoke this callback.
+     *
+     * This callback does not update the field value or call `onSelect` — callers create the new
+     * option (often async) and set `value` themselves, same as before. Beam cannot auto-select here
+     * because the new option's id typically comes from the caller's save/create logic after this fires.
+     */
     onAddNew?: (v: string) => void;
     /**
      * When true (default), options are sorted alphabetically by their label.

package/dist/index.d.ts

@@ -1219,6 +1219,18 @@ declare class CssBuilder<T extends Properties, S extends StyleKind = "buildtime"
     float(value: Properties["float"]): CssBuilder<T & {
         float: csstype.Property.Float | undefined;
     }, S>;
+    /** Sets `fontStyle: "italic"`. */
+    get fsyi(): CssBuilder<T & {
+        fontStyle: csstype.Property.FontStyle | undefined;
+    }, S>;
+    /** Sets `fontStyle: "normal"`. */
+    get fsynm(): CssBuilder<T & {
+        fontStyle: csstype.Property.FontStyle | undefined;
+    }, S>;
+    /** Sets `fontStyle: value`. */
+    fsy(value: Properties["fontStyle"]): CssBuilder<T & {
+        fontStyle: csstype.Property.FontStyle | undefined;
+    }, S>;
     /** Sets `fontWeight: "normal"`. */
     get fwn(): CssBuilder<T & {
         fontWeight: csstype.Property.FontWeight | undefined;
@@ -6708,6 +6720,22 @@ type ComboBoxBaseProps<O, V extends Value> = {
     hideErrorMessage?: boolean;
     multiline?: boolean;
     onSearch?: (search: string) => void;
+    /**
+     * Called when the user explicitly selects the synthetic add-new row from the dropdown.
+     * Only supported on single-select fields.
+     *
+     * While the user types, a pseudo-option (e.g. `Add "my value"`) appears at the bottom of the
+     * filtered list when the trimmed input does not exactly match an existing option label
+     * (case-insensitive). It is not shown when the input is empty, or when the input exactly matches
+     * an existing label (e.g. typing "banana" when "Banana" exists).
+     *
+     * The user must focus that row (e.g. arrow down) and confirm with Enter or click; pressing Enter
+     * on the typed text alone does not invoke this callback.
+     *
+     * This callback does not update the field value or call `onSelect` — callers create the new
+     * option (often async) and set `value` themselves, same as before. Beam cannot auto-select here
+     * because the new option's id typically comes from the caller's save/create logic after this fires.
+     */
     onAddNew?: (v: string) => void;
     /**
      * When true (default), options are sorted alphabetically by their label.

package/dist/index.js

@@ -1166,6 +1166,19 @@ var CssBuilder = class _CssBuilder {
   float(value) {
     return this.add("float", value);
   }
+  // fontStyle
+  /** Sets `fontStyle: "italic"`. */
+  get fsyi() {
+    return this.add("fontStyle", "italic");
+  }
+  /** Sets `fontStyle: "normal"`. */
+  get fsynm() {
+    return this.add("fontStyle", "normal");
+  }
+  /** Sets `fontStyle: value`. */
+  fsy(value) {
+    return this.add("fontStyle", value);
+  }
   // fontWeight
   /** Sets `fontWeight: "normal"`. */
   get fwn() {
@@ -12441,29 +12454,36 @@ function ComboBoxBase(props) {
   } = props;
   const labelStyle = otherProps.labelStyle ?? fieldProps?.labelStyle ?? "above";
   const getOptionLabel = useCallback10(
-    (o) => unsetLabel && o === unsetOption ? unsetLabel : onAddNew && o === addNewOption ? addNewOption.name : propOptionLabel(o),
+    (o) => unsetLabel && o === unsetOption ? unsetLabel : onAddNew && isAddNewOption(o) ? o.name : propOptionLabel(o),
     // propOptionLabel is basically always a lambda, so don't dep on it
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [unsetLabel]
+    [unsetLabel, onAddNew]
   );
   const getOptionValue = useCallback10(
-    (o) => unsetLabel && o === unsetOption ? void 0 : onAddNew && o === addNewOption ? addNewOption.id : propOptionValue(o),
+    (o) => unsetLabel && o === unsetOption ? void 0 : onAddNew && isAddNewOption(o) ? o.id : propOptionValue(o),
     // propOptionValue is basically always a lambda, so don't dep on it
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [unsetLabel]
+    [unsetLabel, onAddNew]
   );
   const getOptionMenuLabel = useCallback10(
-    (o) => propOptionMenuLabel ? propOptionMenuLabel(o, Boolean(unsetLabel) && o === unsetOption, Boolean(onAddNew) && o === addNewOption) : getOptionLabel(o),
+    (o) => {
+      const isAddNew = Boolean(onAddNew) && isAddNewOption(o);
+      if (propOptionMenuLabel) {
+        return propOptionMenuLabel(o, Boolean(unsetLabel) && o === unsetOption, isAddNew);
+      }
+      const label = getOptionLabel(o);
+      return isAddNew ? /* @__PURE__ */ jsx57("span", { className: "fsyi", children: label }) : label;
+    },
     // propOptionMenuLabel is basically always a lambda, so don't dep on it
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [unsetLabel, getOptionLabel]
+    [unsetLabel, getOptionLabel, onAddNew]
   );
   const options = useMemo16(
-    () => initializeOptions(propOptions, getOptionValue, getOptionLabel, unsetLabel, !!onAddNew, autoSort),
+    () => initializeOptions(propOptions, getOptionValue, getOptionLabel, unsetLabel, autoSort),
     // If the caller is using { current, load, options }, memoize on only `current` and `options` values.
     // ...and don't bother on memoizing on getOptionValue b/c it's basically always a lambda
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    Array.isArray(propOptions) ? [propOptions, unsetLabel, onAddNew, autoSort] : [propOptions.current, propOptions.options, unsetLabel, onAddNew, autoSort]
+    Array.isArray(propOptions) ? [propOptions, unsetLabel, autoSort] : [propOptions.current, propOptions.options, unsetLabel, autoSort]
   );
   const values = useMemo16(() => propValues ?? [], [propValues]);
   const inputStylePalette = useMemo16(() => propsInputStylePalette, [propsInputStylePalette]);
@@ -12485,9 +12505,8 @@ function ComboBoxBase(props) {
   const {
     searchValue
   } = fieldState;
-  const filteredOptions = useMemo16(() => {
-    return !searchValue ? options : options.filter((o) => contains(getOptionLabel(o), searchValue) || o === addNewOption);
-  }, [options, searchValue, getOptionLabel, contains]);
+  const addNewOption = useMemo16(() => getAddNewOption(searchValue, options, getOptionLabel, onAddNew), [searchValue, options, getOptionLabel, onAddNew]);
+  const filteredOptions = useMemo16(() => !searchValue ? options : addNewOption ? [...options.filter((o) => contains(getOptionLabel(o), searchValue)), addNewOption] : options.filter((o) => contains(getOptionLabel(o), searchValue)), [options, searchValue, getOptionLabel, contains, addNewOption]);
   function resetField() {
     setFieldState((prevState) => ({
       ...prevState,
@@ -12578,9 +12597,9 @@ function ComboBoxBase(props) {
           onSelect([], []);
           return;
         }
-        const selectedOption = options.find((o) => valueToKey(getOptionValue(o)) === key);
-        if (selectedOption === addNewOption && onAddNew) {
-          onAddNew(fieldState.inputValue);
+        const selectedOption = filteredOptions.find((o) => valueToKey(getOptionValue(o)) === key);
+        if (onAddNew && isAddNewOption(selectedOption) && fieldState.inputValue) {
+          onAddNew(fieldState.inputValue.trim());
           return;
         }
         onSelect([keyToValue(key)], selectedOption ? [selectedOption] : []);
@@ -12675,7 +12694,7 @@ function ComboBoxBase(props) {
 function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, readOnly) {
   return selectedOptions.length === 1 ? getOptionLabel(selectedOptions[0]) : readOnly && selectedOptions.length > 0 ? selectedOptions.map(getOptionLabel).join(", ") : multiselect && selectedOptions.length === 0 ? nothingSelectedText : "";
 }
-function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetLabel, addNew, autoSort) {
+function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetLabel, autoSort) {
   const result = [];
   if (unsetLabel) {
     result.push(unsetOption);
@@ -12703,9 +12722,6 @@ function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetL
     }
   }
   result.push(...autoSort ? sortOptions(userOptions, getOptionLabel) : userOptions);
-  if (addNew) {
-    result.push(addNewOption);
-  }
   return result;
 }
 function sortOptions(options, getOptionLabel) {
@@ -12716,10 +12732,25 @@ function sortOptions(options, getOptionLabel) {
   });
 }
 var unsetOption = {};
-var addNewOption = {
-  id: "new",
-  name: "Add New"
-};
+var addNewOptionId = "beam_new";
+function isAddNewOption(o) {
+  return typeof o === "object" && o !== null && "id" in o && o.id === addNewOptionId;
+}
+function getAddNewOption(searchValue, options, getOptionLabel, onAddNew) {
+  if (!onAddNew) return void 0;
+  const normalizedSearch = searchValue?.trim().toLowerCase();
+  if (!normalizedSearch) return void 0;
+  const trimmedSearch = searchValue.trim();
+  const matchesExistingOption = options.some((o) => {
+    if (o === unsetOption) return false;
+    return getOptionLabel(o).trim().toLowerCase() === normalizedSearch;
+  });
+  if (matchesExistingOption) return void 0;
+  return {
+    id: addNewOptionId,
+    name: `Add "${trimmedSearch}"`
+  };
+}
 function disabledOptionToKeyedTuple(disabledOption) {
   if (typeof disabledOption === "object" && disabledOption !== null) {
     return [valueToKey(disabledOption.value), disabledOption.reason];
@@ -19164,7 +19195,7 @@ function hydrateDateRange(value) {
 
 // src/components/Filters/selectedFilterLabelUtils.ts
 function resolveOptionSelectedFilterLabel(optionsOrLoad, getOptionValue, getOptionLabel, value) {
-  const options = initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, void 0, false, false);
+  const options = initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, void 0, false);
   const match = options.find((o) => getOptionValue(o) === value);
   return match ? getOptionLabel(match) : String(value);
 }
@@ -20028,7 +20059,7 @@ function GridTableLayoutComponent(props) {
   }, [visibleColumnIds, layoutState]);
   const visibleColumnsStorageKey = layoutState?.persistedColumnsStorageKey;
   const tableActionsEl = /* @__PURE__ */ jsx147(TableActions, { right: (hasHideableColumns || withCardView) && /* @__PURE__ */ jsxs74("div", { className: "df gap1", children: [
-    hasHideableColumns && /* @__PURE__ */ jsx147(EditColumnsButton, { columns, api, tooltip: "Display columns", ...tid.editColumnsButton }),
+    hasHideableColumns && view === "list" && /* @__PURE__ */ jsx147(EditColumnsButton, { columns, api, tooltip: "Display columns", ...tid.editColumnsButton }),
     withCardView && /* @__PURE__ */ jsx147(ViewToggleButton, { view, onChange: setView })
   ] }), xss: {
     paddingTop: "pt3",