fix: remove value expose in favor of formatter

Author: gjulivan

packages/pluggableWidgets/combobox-web/src/Combobox.tsx

@@ -2,12 +2,12 @@ import { createElement, ReactElement } from "react";
 
 import { ComboboxContainerProps } from "../typings/ComboboxProps";
 
+import { MultiSelection } from "./components/MultiSelection/MultiSelection";
+import { Placeholder } from "./components/Placeholder";
+import { SingleSelection } from "./components/SingleSelection/SingleSelection";
 import { SelectionBaseProps } from "./helpers/types";
 import { useActionEvents } from "./hooks/useActionEvents";
 import { useGetSelector } from "./hooks/useGetSelector";
-import { Placeholder } from "./components/Placeholder";
-import { MultiSelection } from "./components/MultiSelection/MultiSelection";
-import { SingleSelection } from "./components/SingleSelection/SingleSelection";
 
 import "./ui/Combobox.scss";
 

packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx

@@ -44,7 +44,14 @@ export function SingleSelection({
 
     const selectedItemCaption = useMemo(
         () => selector.caption.render(selectedItem, "label"),
-        [selectedItem, selector.status, selector.caption.emptyCaption, selector.caption.value?.value]
+        [
+            selectedItem,
+            selector.status,
+            selector.caption,
+            selector.caption.emptyCaption,
+            selector.currentId,
+            selector.caption.formatter
+        ]
     );
 
     return (

packages/pluggableWidgets/combobox-web/src/helpers/Association/AssociationSimpleCaptionsProvider.tsx

@@ -1,11 +1,4 @@
-import {
-    DynamicValue,
-    EditableValue,
-    ListAttributeValue,
-    ListExpressionValue,
-    ListWidgetValue,
-    ObjectItem
-} from "mendix";
+import { DynamicValue, ListAttributeValue, ListExpressionValue, ListWidgetValue, ObjectItem } from "mendix";
 import { ReactNode, createElement } from "react";
 import { OptionsSourceAssociationCustomContentTypeEnum } from "../../../typings/ComboboxProps";
 import { CaptionPlacement, CaptionsProvider } from "../types";
@@ -20,10 +13,9 @@ interface Props {
 
 export class AssociationSimpleCaptionsProvider implements CaptionsProvider {
     private unavailableCaption = "<...>";
-    private formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
+    formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
     protected customContent?: ListWidgetValue;
     protected customContentType: OptionsSourceAssociationCustomContentTypeEnum = "no";
-    value?: DynamicValue<string> | EditableValue<string>;
     emptyCaption = "";
 
     constructor(private optionsMap: Map<string, ObjectItem>) {}
@@ -52,12 +44,12 @@ export class AssociationSimpleCaptionsProvider implements CaptionsProvider {
             return this.unavailableCaption;
         }
 
-        this.value = this.formatter.get(item);
-        if (!this.value || this.value.status === "unavailable") {
+        const captionValue = this.formatter.get(item);
+        if (!captionValue || captionValue.status === "unavailable") {
             return this.unavailableCaption;
         }
 
-        return this.value.value ?? "";
+        return captionValue.value ?? "";
     }
 
     getCustomContent(value: string | null): ReactNode | null {

packages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseCaptionsProvider.tsx

@@ -1,11 +1,4 @@
-import {
-    DynamicValue,
-    EditableValue,
-    ListAttributeValue,
-    ListExpressionValue,
-    ListWidgetValue,
-    ObjectItem
-} from "mendix";
+import { DynamicValue, ListAttributeValue, ListExpressionValue, ListWidgetValue, ObjectItem } from "mendix";
 import { ReactNode, createElement } from "react";
 import { OptionsSourceAssociationCustomContentTypeEnum } from "../../../typings/ComboboxProps";
 import { CaptionPlacement, CaptionsProvider } from "../types";
@@ -22,11 +15,10 @@ interface Props {
 
 export class DatabaseCaptionsProvider implements CaptionsProvider {
     private unavailableCaption = "<...>";
-    private formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
+    formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
     protected customContent?: ListWidgetValue;
     protected customContentType: OptionsSourceAssociationCustomContentTypeEnum = "no";
     attribute?: ListAttributeValue<string | Big>;
-    value?: DynamicValue<string> | EditableValue<string>;
     emptyCaption = "";
     overrideCaption: string | null | undefined = undefined;
 
@@ -63,12 +55,12 @@ export class DatabaseCaptionsProvider implements CaptionsProvider {
         if (!item) {
             return this.unavailableCaption;
         }
-        this.value = this.formatter?.get(item);
-        if (this.value?.status === "unavailable") {
+        const captionValue = this.formatter?.get(item);
+        if (!captionValue || captionValue.status === "unavailable") {
             return this.unavailableCaption;
         }
 
-        return this.value?.value ?? "";
+        return captionValue?.value ?? "";
     }
 
     getCustomContent(value: string | null): ReactNode | null {

packages/pluggableWidgets/combobox-web/src/helpers/types.ts

@@ -1,3 +1,5 @@
+import { ThreeStateCheckBoxEnum } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
+import { ListAttributeValue, ListExpressionValue, ListValue } from "mendix";
 import { ReactNode } from "react";
 import {
     ComboboxContainerProps,
@@ -8,8 +10,6 @@ import {
     SelectedItemsStyleEnum,
     SelectionMethodEnum
 } from "../../typings/ComboboxProps";
-import { ThreeStateCheckBoxEnum } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
-import { DynamicValue, EditableValue, ListValue } from "mendix";
 
 export type Status = "unavailable" | "loading" | "available";
 export type CaptionPlacement = "label" | "options";
@@ -21,7 +21,7 @@ export interface CaptionsProvider {
     get(value: string | null): string;
     render(value: (string | null) | (number | null), placement?: CaptionPlacement, htmlFor?: string): ReactNode;
     emptyCaption: string;
-    value?: DynamicValue<string> | EditableValue<string>;
+    formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
 }
 export interface ValuesProvider<T> {
     get(key: string | null): T | undefined;