From 7ade9058c511d4be93991602b1ce27fd51d0b9c1 Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Thu, 5 Mar 2026 12:59:14 +0100
Subject: [PATCH 1/3] [website] added some notes about how ellipsis works

---
 website/docs/utils/ellipsis/ellipsis-code.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/website/docs/utils/ellipsis/ellipsis-code.md b/website/docs/utils/ellipsis/ellipsis-code.md
index e7409b0bbf..cfca20ea29 100644
--- a/website/docs/utils/ellipsis/ellipsis-code.md
+++ b/website/docs/utils/ellipsis/ellipsis-code.md
@@ -11,6 +11,14 @@ To use the default settings, use `ellipsis={true}`.
 
 Ellipsis can be enabled in all other components that are based on Text, such as [Button.Text](../../components/button/button-api#button-text), [Link.Text](../../components/link/link-api#link-text), [Card.Title](../../components/card/card-api#card-title), and so on. To find out which components support the `ellipsis` property, refer to the API documentation.
 
+Because of performance, we don't observe chnages in the `Text` children property. So, if you have some dynamically changed children in the `Text` component, you should set `observerChildrenMutations=true` to the ellipsis settings. 
+Also, you can set uniq key on the `Text`, depends on children content.
+
+::: tip
+For some reason, for the `FilterTrigger.Text` right now works only key property.
+:::
+
+
 ::: sandbox
 
 <script lang="tsx">
@@ -66,6 +74,8 @@ You can truncate paragraphs of text with ellipsis using the `maxLine` property.
 
 Note that `maxLine` can only be used with `cropPosition: end`, and the hint is automatically disabled in this case.
 
+To enable hint for multiline cropped text, set some `hintProps` or just enable it via `hintProps={true}`.
+
 ::: sandbox
 
 <script lang="tsx">

From cb8b59e101ceeafdce09b8cf46bd183572fbd2d1 Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Thu, 5 Mar 2026 15:41:20 +0100
Subject: [PATCH 2/3] [website] added some notes about how ellipsis works

---
 website/docs/utils/ellipsis/ellipsis-code.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/docs/utils/ellipsis/ellipsis-code.md b/website/docs/utils/ellipsis/ellipsis-code.md
index cfca20ea29..30b0c526c0 100644
--- a/website/docs/utils/ellipsis/ellipsis-code.md
+++ b/website/docs/utils/ellipsis/ellipsis-code.md
@@ -11,7 +11,7 @@ To use the default settings, use `ellipsis={true}`.
 
 Ellipsis can be enabled in all other components that are based on Text, such as [Button.Text](../../components/button/button-api#button-text), [Link.Text](../../components/link/link-api#link-text), [Card.Title](../../components/card/card-api#card-title), and so on. To find out which components support the `ellipsis` property, refer to the API documentation.
 
-Because of performance, we don't observe chnages in the `Text` children property. So, if you have some dynamically changed children in the `Text` component, you should set `observerChildrenMutations=true` to the ellipsis settings. 
+Because of performance, we don't observe chnages in the `Text` children property. So, if you have some dynamically changed children in the `Text` component, you should set `observerChildrenMutations=true` to the ellipsis settings.
 Also, you can set uniq key on the `Text`, depends on children content.
 
 ::: tip

From 4e02859629cf5de8ac2fab91c0916b0cbc79f723 Mon Sep 17 00:00:00 2001
From: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
Date: Wed, 11 Mar 2026 19:06:25 +0400
Subject: [PATCH 3/3] [docs] added example

---
 .../ellipsis/docs/ellipsis.stories.tsx        |  5 +++
 .../ellipsis/docs/examples/filter-trigger.tsx | 41 +++++++++++++++++++
 website/docs/utils/ellipsis/ellipsis-code.md  | 28 +++++++++----
 3 files changed, 65 insertions(+), 9 deletions(-)
 create mode 100644 stories/components/base-components/ellipsis/docs/examples/filter-trigger.tsx

diff --git a/stories/components/base-components/ellipsis/docs/ellipsis.stories.tsx b/stories/components/base-components/ellipsis/docs/ellipsis.stories.tsx
index 453680524e..90b0438c16 100644
--- a/stories/components/base-components/ellipsis/docs/ellipsis.stories.tsx
+++ b/stories/components/base-components/ellipsis/docs/ellipsis.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import BasicUsageExample from './examples/basic_usage';
+import FilterTriggerExample from './examples/filter-trigger';
 import MultipleUseExample from './examples/multiple_use';
 import NoHintWithMultilineExample from './examples/no_hint_with_multiline';
 import WithRequiredLastSymbolsExample from './examples/with_required_last_symbols';
@@ -18,6 +19,10 @@ export const MultipleUse: StoryObj = {
   render: MultipleUseExample,
 };
 
+export const FilterTrigger: StoryObj = {
+  render: FilterTriggerExample,
+};
+
 export const NoHintWithMultiline: StoryObj = {
   render: NoHintWithMultilineExample,
 };
diff --git a/stories/components/base-components/ellipsis/docs/examples/filter-trigger.tsx b/stories/components/base-components/ellipsis/docs/examples/filter-trigger.tsx
new file mode 100644
index 0000000000..31aa83dcd1
--- /dev/null
+++ b/stories/components/base-components/ellipsis/docs/examples/filter-trigger.tsx
@@ -0,0 +1,41 @@
+import { FilterTrigger } from '@semcore/ui/base-trigger';
+import Select from '@semcore/ui/select';
+import React from 'react';
+
+const Demo = () => {
+  const [material, setMaterial] = React.useState([]);
+
+  return (
+    <>
+      <Select onChange={setMaterial} multiselect>
+        <Select.Trigger
+          tag={FilterTrigger}
+          placeholder='Material'
+          aria-label='Material'
+        >
+          <FilterTrigger.Text
+            wMax={80}
+            ellipsis={{ cropPosition: 'middle' }}
+            key={material.length}
+          >
+            <span aria-hidden='true'>Material: </span>
+            {material.length === 1 ? material : `${material.length} selected`}
+          </FilterTrigger.Text>
+        </Select.Trigger>
+
+        <Select.Menu aria-label='Material'>
+          {materials.map((option, idx) => (
+            <Select.Option value={option} key={idx}>
+              <Select.Option.Checkbox />
+              {option}
+            </Select.Option>
+          ))}
+        </Select.Menu>
+      </Select>
+    </>
+  );
+};
+
+const materials = ['Glass', 'Metal', 'Paper', 'Wood'];
+
+export default Demo;
diff --git a/website/docs/utils/ellipsis/ellipsis-code.md b/website/docs/utils/ellipsis/ellipsis-code.md
index 30b0c526c0..254efb91c9 100644
--- a/website/docs/utils/ellipsis/ellipsis-code.md
+++ b/website/docs/utils/ellipsis/ellipsis-code.md
@@ -11,14 +11,6 @@ To use the default settings, use `ellipsis={true}`.
 
 Ellipsis can be enabled in all other components that are based on Text, such as [Button.Text](../../components/button/button-api#button-text), [Link.Text](../../components/link/link-api#link-text), [Card.Title](../../components/card/card-api#card-title), and so on. To find out which components support the `ellipsis` property, refer to the API documentation.
 
-Because of performance, we don't observe chnages in the `Text` children property. So, if you have some dynamically changed children in the `Text` component, you should set `observerChildrenMutations=true` to the ellipsis settings.
-Also, you can set uniq key on the `Text`, depends on children content.
-
-::: tip
-For some reason, for the `FilterTrigger.Text` right now works only key property.
-:::
-
-
 ::: sandbox
 
 <script lang="tsx">
@@ -74,7 +66,7 @@ You can truncate paragraphs of text with ellipsis using the `maxLine` property.
 
 Note that `maxLine` can only be used with `cropPosition: end`, and the hint is automatically disabled in this case.
 
-To enable hint for multiline cropped text, set some `hintProps` or just enable it via `hintProps={true}`.
+To enable hint for cropped multiline text, set some `hintProps` or just enable it via `hintProps={true}`.
 
 ::: sandbox
 
@@ -95,3 +87,21 @@ You can customize the hint that appears on hover/focus by using the `hintProps`
 </script>
 
 :::
+
+## FilterTrigger (dynamic children)
+
+Due to performance considerations, we don't observe changes in the `Text` children property. So, if you have some dynamically changing children in the `Text` component, you should set `observerChildrenMutations={true}` in the ellipsis settings.
+
+Alternatively, you can set a unique `key` on the `Text`, depending on the children content.
+
+::: tip
+For some reason, only setting the `key` property works for `FilterTrigger.Text` right now.
+:::
+
+::: sandbox
+
+<script lang="tsx">
+  export Demo from 'stories/components/base-components/ellipsis/docs/examples/filter-trigger.tsx';
+</script>
+
+:::