@homebound/beam 2.405.0 → 2.406.0

package/dist/index.d.cts

@@ -6493,6 +6493,7 @@ interface ComboBoxBaseProps<O, V extends Value> extends BeamFocusableProps, Pres
     /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. `isUnsetOpt` is only defined for single SelectField */
     getOptionMenuLabel?: (opt: O, isUnsetOpt?: boolean, isAddNewOption?: boolean) => string | ReactNode;
     getOptionValue: (opt: O) => V;
+    /** Returns the display label for an option. Used for rendering and for sorting when `autoSort` is enabled. */
     getOptionLabel: (opt: O) => string;
     /** The current value; it can be `undefined`, even if `V` cannot be. */
     values: V[] | undefined;
@@ -6540,6 +6541,11 @@ interface ComboBoxBaseProps<O, V extends Value> extends BeamFocusableProps, Pres
     multiline?: boolean;
     onSearch?: (search: string) => void;
     onAddNew?: (v: string) => void;
+    /**
+     * When true (default), options are sorted alphabetically by their label.
+     * Set to false to maintain the original order of options.
+     */
+    autoSort?: boolean;
 }
 /** Allows lazy-loading select fields, which is useful for pages w/lots of fields the user may not actually use. */
 type OptionsOrLoad<O> = O[] | {

package/dist/index.d.ts

@@ -6493,6 +6493,7 @@ interface ComboBoxBaseProps<O, V extends Value> extends BeamFocusableProps, Pres
     /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. `isUnsetOpt` is only defined for single SelectField */
     getOptionMenuLabel?: (opt: O, isUnsetOpt?: boolean, isAddNewOption?: boolean) => string | ReactNode;
     getOptionValue: (opt: O) => V;
+    /** Returns the display label for an option. Used for rendering and for sorting when `autoSort` is enabled. */
     getOptionLabel: (opt: O) => string;
     /** The current value; it can be `undefined`, even if `V` cannot be. */
     values: V[] | undefined;
@@ -6540,6 +6541,11 @@ interface ComboBoxBaseProps<O, V extends Value> extends BeamFocusableProps, Pres
     multiline?: boolean;
     onSearch?: (search: string) => void;
     onAddNew?: (v: string) => void;
+    /**
+     * When true (default), options are sorted alphabetically by their label.
+     * Set to false to maintain the original order of options.
+     */
+    autoSort?: boolean;
 }
 /** Allows lazy-loading select fields, which is useful for pages w/lots of fields the user may not actually use. */
 type OptionsOrLoad<O> = O[] | {

package/dist/index.js

@@ -10230,6 +10230,7 @@ function ComboBoxBase(props) {
     fullWidth = fieldProps?.fullWidth ?? false,
     onSearch,
     onAddNew,
+    autoSort = true,
     ...otherProps
   } = props;
   const labelStyle = otherProps.labelStyle ?? fieldProps?.labelStyle ?? "above";
@@ -10252,11 +10253,11 @@ function ComboBoxBase(props) {
     [unsetLabel, getOptionLabel]
   );
   const options = useMemo15(
-    () => initializeOptions(propOptions, getOptionValue, unsetLabel, !!onAddNew),
+    () => initializeOptions(propOptions, getOptionValue, getOptionLabel, unsetLabel, !!onAddNew, 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] : [propOptions.current, propOptions.options, unsetLabel, onAddNew]
+    Array.isArray(propOptions) ? [propOptions, unsetLabel, onAddNew, autoSort] : [propOptions.current, propOptions.options, unsetLabel, onAddNew, autoSort]
   );
   const values = useMemo15(() => propValues ?? [], [propValues]);
   const inputStylePalette = useMemo15(() => propsInputStylePalette, [propsInputStylePalette]);
@@ -10476,17 +10477,18 @@ 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, unsetLabel, addNew) {
-  const opts = [];
+function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetLabel, addNew, autoSort) {
+  const result = [];
   if (unsetLabel) {
-    opts.push(unsetOption);
+    result.push(unsetOption);
   }
+  const userOptions = [];
   if (Array.isArray(optionsOrLoad)) {
-    opts.push(...optionsOrLoad);
+    userOptions.push(...optionsOrLoad);
   } else {
     const { options, current } = optionsOrLoad;
     if (options) {
-      opts.push(...options);
+      userOptions.push(...options);
     }
     if (current) {
       const toCheck = Array.isArray(current) ? current : [current];
@@ -10494,15 +10496,23 @@ function initializeOptions(optionsOrLoad, getOptionValue, unsetLabel, addNew) {
         const value = getOptionValue(current2);
         const found = options && options.find((o) => getOptionValue(o) === value);
         if (!found) {
-          opts.push(current2);
+          userOptions.push(current2);
         }
       });
     }
   }
+  result.push(...autoSort ? sortOptions(userOptions, getOptionLabel) : userOptions);
   if (addNew) {
-    opts.push(addNewOption);
+    result.push(addNewOption);
   }
-  return opts;
+  return result;
+}
+function sortOptions(options, getOptionLabel) {
+  return [...options].sort((a, b) => {
+    const labelA = getOptionLabel(a).toLowerCase();
+    const labelB = getOptionLabel(b).toLowerCase();
+    return labelA.localeCompare(labelB);
+  });
 }
 var unsetOption = {};
 var addNewOption = { id: "new", name: "Add New" };
@@ -17255,6 +17265,7 @@ function Pagination(props) {
         options: pageOptions,
         value: pageSize,
         onSelect: (val) => set({ pageNumber: 1, pageSize: val }),
+        autoSort: false,
         ...tid.pageSize
       }
     ) }),