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

package/dist/taco.cjs

@@ -25275,7 +25275,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,
@@ -25292,6 +25292,7 @@ const useCombobox = (props, ref) => {
     onSearch,
     readOnly,
     value,
+    valueRenderer,
     ...otherProps
   } = props;
   const inputRef = useMergedRef(ref);
@@ -25299,9 +25300,19 @@ const useCombobox = (props, ref) => {
   const listRef = React__namespace.useRef(null);
   const [open, setOpen] = React__namespace.useState(false);
   const listId = React__namespace.useMemo(() => nanoid(), []);
+  const flattenedData = useFlattenedData(unfilteredData);
+  const convertToInputValue = React__namespace.useCallback(
+    (val) => {
+      if (valueRenderer) {
+        const option = findByValue(flattenedData, val);
+        return valueRenderer(option);
+      }
+      return defaultConvertToInputValue(val);
+    },
+    [valueRenderer, flattenedData]
+  );
   const [inputValue, setInputValue] = React__namespace.useState(convertToInputValue(value));
   const shouldFilterData = !onSearch && (!inline || inline && inputValue !== convertToInputValue(value));
-  const flattenedData = useFlattenedData(unfilteredData);
   const data = React__namespace.useMemo(
     () => shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData,
     [shouldFilterData, inputValue, flattenedData]
@@ -25335,8 +25346,11 @@ const useCombobox = (props, ref) => {
     }
   }, [data]);
   React__namespace.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__namespace.useEffect(() => {
@@ -25347,7 +25361,7 @@ const useCombobox = (props, ref) => {
     }
   }, [inputValue]);
   React__namespace.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) {
@@ -25364,14 +25378,34 @@ const useCombobox = (props, ref) => {
       setCurrentIndex(void 0);
     }
   }, [open]);
+  const findOption = React__namespace.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) {