@homebound/beam 3.23.0 → 3.24.0

package/dist/Css.json

@@ -262,6 +262,9 @@
     "fl": {"kind":"static","defs":{"float":"left"}},
     "fr": {"kind":"static","defs":{"float":"right"}},
     "float": {"kind":"variable","props":["float"],"incremented":false},
+    "fsyi": {"kind":"static","defs":{"fontStyle":"italic"}},
+    "fsynm": {"kind":"static","defs":{"fontStyle":"normal"}},
+    "fsy": {"kind":"variable","props":["fontStyle"],"incremented":false},
     "fwn": {"kind":"static","defs":{"fontWeight":"normal"}},
     "fwb": {"kind":"static","defs":{"fontWeight":"bold"}},
     "fw1": {"kind":"static","defs":{"fontWeight":100}},

package/dist/index.cjs

@@ -1507,6 +1507,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() {
@@ -12886,29 +12899,36 @@ function ComboBoxBase(props) {
   } = props;
   const labelStyle = otherProps.labelStyle ?? fieldProps?.labelStyle ?? "above";
   const getOptionLabel = (0, import_react49.useCallback)(
-    (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 = (0, import_react49.useCallback)(
-    (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 = (0, import_react49.useCallback)(
-    (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__ */ (0, import_jsx_runtime57.jsx)("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 = (0, import_react49.useMemo)(
-    () => 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 = (0, import_react49.useMemo)(() => propValues ?? [], [propValues]);
   const inputStylePalette = (0, import_react49.useMemo)(() => propsInputStylePalette, [propsInputStylePalette]);
@@ -12930,9 +12950,8 @@ function ComboBoxBase(props) {
   const {
     searchValue
   } = fieldState;
-  const filteredOptions = (0, import_react49.useMemo)(() => {
-    return !searchValue ? options : options.filter((o) => contains(getOptionLabel(o), searchValue) || o === addNewOption);
-  }, [options, searchValue, getOptionLabel, contains]);
+  const addNewOption = (0, import_react49.useMemo)(() => getAddNewOption(searchValue, options, getOptionLabel, onAddNew), [searchValue, options, getOptionLabel, onAddNew]);
+  const filteredOptions = (0, import_react49.useMemo)(() => !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,
@@ -13023,9 +13042,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] : []);
@@ -13120,7 +13139,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);
@@ -13148,9 +13167,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) {
@@ -13161,10 +13177,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];
@@ -19609,7 +19640,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);
 }
@@ -20473,7 +20504,7 @@ function GridTableLayoutComponent(props) {
   }, [visibleColumnIds, layoutState]);
   const visibleColumnsStorageKey = layoutState?.persistedColumnsStorageKey;
   const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(TableActions, { right: (hasHideableColumns || withCardView) && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "df gap1", children: [
-    hasHideableColumns && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns", ...tid.editColumnsButton }),
+    hasHideableColumns && view === "list" && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns", ...tid.editColumnsButton }),
     withCardView && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(ViewToggleButton, { view, onChange: setView })
   ] }), xss: {
     paddingTop: "pt3",