@economic/taco 3.0.0-test-breaking-change.0 → 3.0.0-value-renderer.0

package/dist/taco.d.ts

@@ -655,6 +655,8 @@ declare type ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'o
     onSearch?: (query: string) => void | Promise<void>;
     /** Value of the input in combobox */
     value?: ComboboxValue;
+    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */
+    valueRenderer?: (option: ComboboxItem | undefined) => string;
 };
 
 export declare type ComboboxItem = ScrollableListItem;

package/dist/taco.js

@@ -25257,7 +25257,7 @@ const filterData = (data, value = "") => {
   return data.filter(({ value: value2 }) => filteredOptionValues.has(value2));
 };
 const debouncer = debounce$2((f2) => f2(), 200);
-const convertToInputValue = (value) => String(value ?? "");
+const defaultConvertToInputValue = (value) => String(value ?? "");
 const useCombobox = (props, ref) => {
   const {
     "aria-label": ariaLabel,
@@ -25274,6 +25274,7 @@ const useCombobox = (props, ref) => {
     onSearch,
     readOnly,
     value,
+    valueRenderer,
     ...otherProps
   } = props;
   const inputRef = useMergedRef(ref);
@@ -25281,9 +25282,19 @@ const useCombobox = (props, ref) => {
   const listRef = React.useRef(null);
   const [open, setOpen] = React.useState(false);
   const listId = React.useMemo(() => nanoid(), []);
+  const flattenedData = useFlattenedData(unfilteredData);
+  const convertToInputValue = React.useCallback(
+    (val) => {
+      if (valueRenderer) {
+        const option = findByValue(flattenedData, val);
+        return valueRenderer(option);
+      }
+      return defaultConvertToInputValue(val);
+    },
+    [valueRenderer, flattenedData]
+  );
   const [inputValue, setInputValue] = React.useState(convertToInputValue(value));
   const shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
-  const flattenedData = useFlattenedData(unfilteredData);
   const data = React.useMemo(
     () => shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData,
     [shouldFilterData, inputValue, flattenedData]
@@ -25317,8 +25328,11 @@ const useCombobox = (props, ref) => {
     }
   }, [data]);
   React.useEffect(() => {
-    if (value !== void 0 && value !== inputValue) {
-      setInputValue(convertToInputValue(value));
+    if (value !== void 0) {
+      const renderedValue = convertToInputValue(value);
+      if (renderedValue !== inputValue) {
+        setInputValue(renderedValue);
+      }
     }
   }, [value]);
   React.useEffect(() => {
@@ -25329,7 +25343,7 @@ const useCombobox = (props, ref) => {
     }
   }, [inputValue]);
   React.useEffect(() => {
-    const isCurrentValue = value !== void 0 && value !== null && inputValue === String(value);
+    const isCurrentValue = value !== void 0 && value !== null && inputValue === convertToInputValue(value);
     if (inputValue && data.length && !isCurrentValue) {
       setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
       if (!open) {
@@ -25346,14 +25360,34 @@ const useCombobox = (props, ref) => {
       setCurrentIndex(void 0);
     }
   }, [open]);
+  const findOption = React.useCallback(
+    (inputVal) => {
+      const itemByValue = findByValue(flattenedData, inputVal);
+      if (itemByValue) {
+        return itemByValue;
+      }
+      if (valueRenderer) {
+        return flattenedData.find((option) => valueRenderer(option) === inputVal);
+      }
+      return void 0;
+    },
+    [flattenedData, valueRenderer]
+  );
   const handleInputBlur = (event) => {
     event.persist();
     if (listRef.current && event.relatedTarget === listRef.current) {
       event.preventDefault();
       return;
     }
-    if (onChange && event.target.value !== String(value)) {
-      const item = findByValue(flattenedData, event.target.value);
+    const item = findOption(event.target.value);
+    if (item && item.value === value) {
+      setInputValue(convertToInputValue(value));
+      if (props.onBlur) {
+        props.onBlur(event);
+      }
+      return;
+    }
+    if (onChange && event.target.value !== convertToInputValue(value)) {
       event.detail = sanitizeItem(item);
       const parents = getOptionParents(flattenedData, item == null ? void 0 : item.path);
       if (parents !== null && parents.length > 0) {