From 4566cc7b222215e3b4bf8e991cde900fb2a9b771 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Lag=C3=AAdo?= <vinicius.lagedo@vtex.com>
Date: Fri, 27 Sep 2024 01:36:33 -0300
Subject: [PATCH] fix(filter-value): show children text content instead of
 value

Use the inner text from the selected item or from the first selected item instead of the value
property. It makes more sense because the children prop is more related to visual purposal

fix #1505
---
 .../src/components/filter/filter-value.tsx    | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/shoreline/src/components/filter/filter-value.tsx b/packages/shoreline/src/components/filter/filter-value.tsx
index 3cf799b402..117466cd71 100644
--- a/packages/shoreline/src/components/filter/filter-value.tsx
+++ b/packages/shoreline/src/components/filter/filter-value.tsx
@@ -1,5 +1,6 @@
+import { useSelectContext } from '@ariakit/react'
 import type { ComponentPropsWithoutRef } from 'react'
-import { forwardRef } from 'react'
+import { forwardRef, useCallback } from 'react'
 import { useFilterContext } from './filter-context'
 
 const valueSeparator = ': '
@@ -13,14 +14,25 @@ export const FilterValue = forwardRef<HTMLSpanElement, FilterValueProps>(
     const filter = useFilterContext()
     const value = filter?.useState('value')
 
-    const isArray = Array.isArray(value)
-    const isLongArray = isArray && value.length > 1
+    const valueIsArray = Array.isArray(value)
+    const valueIsMultiSelected = valueIsArray && value.length > 1
+
+    const selectContext = useSelectContext()
+    const items = selectContext?.useState('items')
+
+    const getValueText = useCallback(
+      () =>
+        items?.find((item) =>
+          valueIsArray ? item.value === value[0] : item.value === value
+        )?.element?.innerText,
+      [value, valueIsArray, items]
+    )
 
     return (
       <span data-sl-filter-value ref={ref} {...props}>
         {value && value.length > 0 && valueSeparator}
-        {isArray ? value[0] : value}
-        {isLongArray && `${countPrefix}${value.length - 1}`}
+        {getValueText()}
+        {valueIsMultiSelected && `${countPrefix}${value.length - 1}`}
       </span>
     )
   }