fix: recalc state if caseInsensitiveSearch changes

src/ReactUnipika/__stories__/ReactUnipika.stories.tsx

@@ -5,6 +5,7 @@ import {Meta, StoryObj} from '@storybook/react';
 import {ReactUnipika, ReactUnipikaProps} from '../../index';
 
 import data from './data.json';
+import {Button} from '@gravity-ui/uikit';
 
 const meta: Meta<ReactUnipikaProps> = {
     title: 'ReactUnipika',
@@ -25,10 +26,27 @@ export const Yson: StoryObj<ReactUnipikaProps> = {
     },
 };
 
+function WithCaseInsensitiveSearchComponent() {
+    const [caseInsensitiveSearch, setCaseInsensitiveSearch] = React.useState(true);
+    return (
+        <>
+            <Button
+                selected={!caseInsensitiveSearch}
+                onClick={() => {
+                    setCaseInsensitiveSearch((prev) => !prev);
+                }}
+                qa="qa:case-sensitive-button"
+            >
+                {caseInsensitiveSearch ? 'Case insensitive' : 'Case sensitive'}
+            </Button>
+            <ReactUnipika value={data} caseInsensitiveSearch={caseInsensitiveSearch} />
+        </>
+    );
+}
+
 export const WithCaseInsensitiveSearch: StoryObj<ReactUnipikaProps> = {
-    args: {
-        value: data,
-        caseInsensitiveSearch: true,
+    render() {
+        return <WithCaseInsensitiveSearchComponent />;
     },
 };
 

src/ReactUnipika/__tests__/ReactUnipika.visual.test.tsx

@@ -177,3 +177,78 @@ test('ReactUnipika: with error', async ({mount, expectScreenshot, page}) => {
 
     await expectScreenshot({component: page});
 });
+
+test('ReactUnipika: with case insensitive search with matches', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithCaseInsensitiveSearch />, {width: 1280});
+
+    await page.getByTestId('qa:structuredyson:search').locator('input').fill('Attr');
+
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with case insensitive search with matches 2', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.WithCaseInsensitiveSearch />, {width: 1280});
+
+    await page.getByTestId('qa:structuredyson:search').locator('input').fill('attr');
+
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with case insensitive search toggle', async ({mount, page}) => {
+    await mount(<Stories.WithCaseInsensitiveSearch />, {width: 1280});
+
+    await page.getByTestId('qa:structuredyson:search').locator('input').fill('Type_1');
+
+    const visibleHighlightedElements = await page
+        .locator('.g-ru-cell__filtered_highlighted:has-text("type_1")')
+        .filter({hasText: 'Type_1'})
+        .count();
+    if (visibleHighlightedElements !== 1) {
+        throw new Error(
+            `Expected 1 visible highlighted elements with "Type_1", but found ${visibleHighlightedElements}`,
+        );
+    }
+
+    await page.getByTestId('qa:case-sensitive-button').click();
+    const newVisibleHighlightedElements = await page
+        .locator('.g-ru-cell__filtered_highlighted:has-text("type_1")')
+        .filter({hasText: 'Type_1'})
+        .count();
+    if (newVisibleHighlightedElements !== 0) {
+        throw new Error(
+            `Expected 0 visible highlighted elements with "Type_1", but found ${visibleHighlightedElements}`,
+        );
+    }
+});
+
+test('ReactUnipika: with case sensitive search no matches', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.Json />, {width: 1280});
+
+    await page.getByTestId('qa:structuredyson:search').locator('input').fill('Attr');
+
+    await expectScreenshot({component: page});
+});
+
+test('ReactUnipika: with case sensitive search with matches', async ({
+    mount,
+    expectScreenshot,
+    page,
+}) => {
+    await mount(<Stories.Json />, {width: 1280});
+
+    await page.getByTestId('qa:structuredyson:search').locator('input').fill('attr');
+
+    await expectScreenshot({component: page});
+});

src/StructuredYson/StructuredYson.tsx

@@ -49,6 +49,7 @@
     value: Props['value'];
     settings: Props['settings'];
     yson: boolean;
+    caseInsensitiveSearch?: boolean;
     collapsedState: CollapsedState;
     filter: string;
     matchIndex: number;
@@ -116,14 +117,24 @@
 
 export class StructuredYson extends React.PureComponent<Props, State> {
     static getDerivedStateFromProps(props: Props, state: State) {
-        const {value: prevValue, settings: prevSettings, yson: prevYson} = state;
-        const {value, settings} = props;
+        const {
+            value: prevValue,
+            settings: prevSettings,
+            yson: prevYson,
+            caseInsensitiveSearch: prevCaseInsensitiveSearch,
+        } = state;
+        const {value, settings, caseInsensitiveSearch} = props;
         const res: Partial<State> = {};
         const yson = settings.format === 'yson';
-        if (prevSettings !== settings || yson !== prevYson) {
+        if (
+            prevSettings !== settings ||
+            yson !== prevYson ||
+            caseInsensitiveSearch !== prevCaseInsensitiveSearch
+        ) {
             Object.assign<Partial<State>, Partial<State>>(res, {
                 settings,
                 yson,
+                caseInsensitiveSearch,
             });
         }
         if (prevValue !== value || !isEmpty_(res)) {
@@ -133,7 +144,7 @@
                     value,
                     state.collapsedState,
                     state.filter,
-                    props.caseInsensitiveSearch,
+                    caseInsensitiveSearch,
                     settings,
                 ),
             });
@@ -147,13 +158,13 @@
     searchRef = React.createRef<HTMLInputElement>();
 
     getInitialState(): State {
-        const {initiallyCollapsed, value, settings} = this.props;
+        const {initiallyCollapsed, value, settings, caseInsensitiveSearch} = this.props;
         const collapsedState = initiallyCollapsed
             ? this.getFullyCollapsedState(value, settings.format !== 'yson')
             : {};
 
         return {
             value: {} as any, // valid value will be provided from getDerivedStateFromProps call
             flattenResult: {data: [], searchIndex: {}},
             settings: {},
             yson: true,
@@ -163,6 +174,7 @@
             matchIndex: -1,
             matchedRows: [],
             allMatchPaths: [],
+            caseInsensitiveSearch,
         };
     }
 
@@ -182,8 +194,7 @@
         changedState: Partial<Pick<State, 'collapsedState' | 'filter' | 'matchIndex'>>,
         cb?: () => void,
     ) {
-        const {value, settings} = this.state;
-        const {caseInsensitiveSearch} = this.props;
+        const {value, settings, caseInsensitiveSearch} = this.state;
         const {
             collapsedState = this.state.collapsedState,
             matchIndex = this.state.matchIndex,