From 0eb7a3b65628db3530fe9ff1494842c7532600ec Mon Sep 17 00:00:00 2001
From: Sean Colsen <colsen.sean@gmail.com>
Date: Mon, 25 Apr 2022 21:40:04 -0400
Subject: [PATCH] Improve getLabel functions

---
 .../fieldset-group/FieldsetGroup.svelte             |  6 ++----
 .../src/component-library/list-box/ListBox.svelte   |  5 ++---
 .../list-box/ListBoxOptions.svelte                  |  3 ++-
 .../src/component-library/list-box/ListBoxTypes.ts  |  5 +++--
 .../src/component-library/select/Select.svelte      | 13 +++++++------
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.svelte b/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.svelte
index 3f2c27dd3e..24ef993e90 100644
--- a/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.svelte
+++ b/mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.svelte
@@ -11,12 +11,10 @@
   export let label: string | undefined = undefined;
 
   export let labelKey = 'label';
-  let customGetLabel: LabelGetter<Option> | undefined = undefined;
-  export { customGetLabel as getLabel };
+  export let getLabel: LabelGetter<Option> = (o: Option) =>
+    defaultGetLabel(o, labelKey);
 
   export let getDisabled: (value: Option | undefined) => boolean = () => false;
-
-  $: getLabel = customGetLabel ?? ((o: Option) => defaultGetLabel(o, labelKey));
 </script>
 
 <fieldset class="fieldset-group" class:inline={isInline} on:change>
diff --git a/mathesar_ui/src/component-library/list-box/ListBox.svelte b/mathesar_ui/src/component-library/list-box/ListBox.svelte
index 5f6f022fc7..eb3f87fd2f 100644
--- a/mathesar_ui/src/component-library/list-box/ListBox.svelte
+++ b/mathesar_ui/src/component-library/list-box/ListBox.svelte
@@ -31,7 +31,8 @@
   export let searchable: DefinedProps['searchable'] = false;
   export let disabled: DefinedProps['disabled'] = false;
   export let labelKey: DefinedProps['labelKey'] = 'label';
-  export let getLabel: DefinedProps['getLabel'] = defaultGetLabel;
+  export let getLabel: DefinedProps['getLabel'] = (option: Option) =>
+    defaultGetLabel(option, labelKey);
   export let checkEquality: DefinedProps['checkEquality'] = (
     opt: Option,
     opt2: Option,
@@ -231,7 +232,6 @@
 
   const staticProps: Writable<ListBoxStaticContextProps<Option>> = writable({
     selectionType,
-    labelKey,
     getLabel,
     searchable,
     disabled,
@@ -240,7 +240,6 @@
   });
   $: staticProps.set({
     selectionType,
-    labelKey,
     getLabel,
     searchable,
     disabled,
diff --git a/mathesar_ui/src/component-library/list-box/ListBoxOptions.svelte b/mathesar_ui/src/component-library/list-box/ListBoxOptions.svelte
index fc9e8dcd0d..bc488ce5d4 100644
--- a/mathesar_ui/src/component-library/list-box/ListBoxOptions.svelte
+++ b/mathesar_ui/src/component-library/list-box/ListBoxOptions.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, getContext, tick } from 'svelte';
+  import StringOrComponent from '../string-or-component/StringOrComponent.svelte';
   import type { ListBoxContext } from './ListBoxTypes';
 
   type Option = $$Generic;
@@ -62,7 +63,7 @@
       class:in-focus={index === $focusedOptionIndex}
       on:click={() => api.pick(option)}
     >
-      <span>{$staticProps.getLabel(option, $staticProps.labelKey)}</span>
+      <StringOrComponent arg={$staticProps.getLabel(option)} />
     </li>
   {/each}
 </ul>
diff --git a/mathesar_ui/src/component-library/list-box/ListBoxTypes.ts b/mathesar_ui/src/component-library/list-box/ListBoxTypes.ts
index 3233f6bff1..b8c8e26bae 100644
--- a/mathesar_ui/src/component-library/list-box/ListBoxTypes.ts
+++ b/mathesar_ui/src/component-library/list-box/ListBoxTypes.ts
@@ -1,10 +1,10 @@
 import type { Readable } from 'svelte/store';
 import type CancellablePromise from '@mathesar-component-library-dir/common/utils/CancellablePromise';
+import type { LabelGetter } from '@mathesar-component-library-dir/common/utils/formatUtils';
 
 export interface ListBoxStaticContextProps<Option> {
   selectionType: 'single' | 'multiple';
-  labelKey: string;
-  getLabel: (value: Option, labelKey?: string) => string;
+  getLabel: LabelGetter<Option>;
   searchable: boolean;
   disabled: boolean;
   checkEquality: (option: Option, optionToCompare: Option) => boolean;
@@ -13,6 +13,7 @@ export interface ListBoxStaticContextProps<Option> {
 
 export interface ListBoxProps<Option>
   extends Partial<ListBoxStaticContextProps<Option>> {
+  labelKey?: string;
   options: Option[] | (() => CancellablePromise<Option[]>);
   value?: Option[];
 }
diff --git a/mathesar_ui/src/component-library/select/Select.svelte b/mathesar_ui/src/component-library/select/Select.svelte
index 3c44aeecfa..7ed2676f9f 100644
--- a/mathesar_ui/src/component-library/select/Select.svelte
+++ b/mathesar_ui/src/component-library/select/Select.svelte
@@ -6,9 +6,11 @@
     ListBoxOptions,
   } from '@mathesar-component-library-dir/list-box';
   import { Dropdown } from '@mathesar-component-library-dir/dropdown';
+  import type { LabelGetter } from '@mathesar-component-library-dir/common/utils/formatUtils';
   import { getLabel as defaultGetLabel } from '@mathesar-component-library-dir/common/utils/formatUtils';
   import type { Appearance } from '@mathesar-component-library-dir/types';
   import { getGloballyUniqueId } from '@mathesar-component-library-dir/common/utils/domUtils';
+  import StringOrComponent from '../string-or-component/StringOrComponent.svelte';
 
   type Option = $$Generic;
 
@@ -23,6 +25,10 @@
    */
   export let labelKey = 'label';
 
+  export let getLabel: LabelGetter<Option | undefined> = (
+    o: Option | undefined,
+  ) => defaultGetLabel(o, labelKey);
+
   /**
    * List of options to select from. Must be an array of SelectOption.
    * @required
@@ -53,11 +59,6 @@
    */
   export let ariaLabel: string | undefined = undefined;
 
-  export let getLabel: (
-    value: Option | undefined,
-    labelKey?: string,
-  ) => string = defaultGetLabel;
-
   /**
    * By default, options will be compared by equality. If you're using objects as
    * options, you can supply a custom function here to compare them.
@@ -119,7 +120,7 @@
     on:keydown={(e) => api.handleKeyDown(e)}
   >
     <svelte:fragment slot="trigger">
-      {getLabel(value, labelKey)}
+      <StringOrComponent arg={getLabel(value)} />
     </svelte:fragment>
 
     <svelte:fragment slot="content">