[UIK-3428][stories] fixed visible setting for autosuggest after clear query and typing the new one

semcore/select/package.json

@@ -8,7 +8,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "pnpm semcore-builder --source=js && pnpm vite build"
+    "build": "pnpm semcore-builder --source=js,ts && pnpm vite build"
   },
   "exports": {
     "types": "./lib/types/index.d.ts",

semcore/select/src/components/AutoSuggest/AutoSuggest.tsx

@@ -0,0 +1,146 @@
+import type { Intergalactic } from '@semcore/core';
+import { Component, createComponent, Root } from '@semcore/core';
+import Input from '@semcore/input';
+import Spin from '@semcore/spin';
+import React from 'react';
+
+import type { NSAutoSuggest } from './AutoSuggest.type';
+import { Highlight } from './Highlight';
+import Select from '../../index';
+
+class AutoSuggestRoot extends Component<
+  Intergalactic.InternalTypings.InferComponentProps<NSAutoSuggest.Component>,
+  [],
+  { value: string },
+  {},
+  NSAutoSuggest.State,
+  NSAutoSuggest.DefaultProps
+> {
+  static defaultProps: NSAutoSuggest.DefaultProps = {
+    defaultValue: '',
+  };
+
+  private abortController: AbortController | undefined;
+  private changeDebounce = 0;
+
+  state: NSAutoSuggest.State = {
+    isVisible: false,
+    highlightedIndex: -1,
+    suggestions: [],
+    openOnChanges: true,
+    isLoading: false,
+  };
+
+  protected uncontrolledProps() {
+    return {
+      value: (value: string) => {
+        return value;
+      },
+    };
+  }
+
+  handleChange = (value: string) => {
+    if (this.changeDebounce) {
+      clearTimeout(this.changeDebounce);
+    }
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+
+    if (value !== this.asProps.value && this.state.openOnChanges) {
+      const { suggestions } = this.asProps;
+
+      if (!Array.isArray(suggestions)) {
+        this.setState({ isLoading: true });
+      }
+
+      this.changeDebounce = setTimeout(async () => {
+        this.handleChangeVisible(true);
+
+        if (Array.isArray(suggestions)) {
+          const filteredSuggestions = value === '' ? [] : suggestions.filter((breed) => breed.toLowerCase().includes(value.toLowerCase()));
+
+          this.setState({ suggestions: filteredSuggestions });
+        } else {
+          this.abortController = new AbortController();
+          const abortSignal = this.abortController.signal;
+
+          const filteredSuggestions = await suggestions(value, abortSignal);
+          this.setState({ suggestions: filteredSuggestions, isLoading: false });
+        }
+      }, 300);
+    }
+  };
+
+  handleChangeVisible = (isVisible: boolean) => {
+    this.setState({ isVisible });
+  };
+
+  handleChangeHighlightedIndex = (index: number | null) => {
+    this.setState({ highlightedIndex: index ?? -1 });
+  };
+
+  handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!e.key.startsWith('Array')) {
+      this.setState({ highlightedIndex: -1 });
+    }
+    if (e.key === 'Escape' && this.state.isVisible) {
+      this.setState({ openOnChanges: false });
+    }
+  };
+
+  handleChangeSelect = (value: string) => {
+    this.handlers.value(value);
+  };
+
+  handleFocus = () => {
+    const { value } = this.asProps;
+    this.setState({ openOnChanges: true, isVisible: value === '' });
+  };
+
+  handleBlur = () => {
+    this.handleChangeVisible(false);
+  };
+
+  render() {
+    const { value } = this.asProps;
+    const { isVisible, highlightedIndex, suggestions, isLoading } = this.state;
+
+    return (
+      <Select
+        interaction='none'
+        visible={isVisible}
+        onVisibleChange={this.handleChangeVisible}
+        highlightedIndex={highlightedIndex}
+        onHighlightedIndexChange={this.handleChangeHighlightedIndex}
+        defaultHighlightedIndex={null}
+      >
+        <Select.Trigger tag={Input} onFocus={this.handleFocus} onBlur={this.handleBlur}>
+          <Root
+            render={Input.Value}
+            value={value}
+            role='combobox'
+            placeholder='Start typing for options'
+            onChange={this.handleChange}
+            onKeyDown={this.handleKeyDown}
+            autoComplete='off'
+          />
+          {isLoading && (
+            <Input.Addon tag={Spin} size='l' />
+          )}
+        </Select.Trigger>
+        {suggestions.length > 0 && (
+          <Select.Menu>
+            {suggestions.map((option) => (
+              <Select.Option value={option} key={option} selected={false} onClick={() => this.handleChangeSelect(option)}>
+                <Highlight highlight={value}>{option}</Highlight>
+              </Select.Option>
+            ))}
+          </Select.Menu>
+        )}
+      </Select>
+    );
+  }
+}
+
+export const AutoSuggest = createComponent<NSAutoSuggest.Component, typeof AutoSuggestRoot>(AutoSuggestRoot);

semcore/select/src/components/AutoSuggest/AutoSuggest.type.ts

@@ -0,0 +1,29 @@
+import type { Intergalactic } from '@semcore/core';
+
+declare namespace NSAutoSuggest {
+  type Suggestion = string;
+
+  type Props = {
+    value?: string;
+    onChange?: (value: string) => void;
+    suggestions: Suggestion[] | ((value: string, signal: AbortSignal) => Promise<Suggestion[]>);
+  };
+
+  type State = {
+    isVisible: boolean;
+    highlightedIndex: number;
+    suggestions: Suggestion[];
+    openOnChanges: boolean;
+    isLoading: boolean;
+  };
+
+  type DefaultProps = {
+    defaultValue: string;
+  };
+
+  type Component = Intergalactic.Component<'input', Props>;
+}
+
+export {
+  NSAutoSuggest,
+};

semcore/select/src/components/AutoSuggest/Highlight.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+type HighlightProps = {
+  highlight: string;
+  children: string;
+};
+
+export function Highlight({ highlight, children }: HighlightProps) {
+  let html = children;
+  if (highlight) {
+    try {
+      const re = new RegExp(highlight.toLowerCase(), 'g');
+      html = html.replace(
+        re,
+        `<span style="font-weight: bold; padding: 2px 0">${highlight}</span>`,
+      );
+    } catch (e) {}
+  }
+  return <span dangerouslySetInnerHTML={{ __html: html }} />;
+}

semcore/select/src/index.d.ts

@@ -16,6 +16,8 @@ import type Input from '@semcore/input';
 import type { Text } from '@semcore/typography';
 import type React from 'react';
 
+import { NSAutoSuggest } from './components/AutoSuggest/AutoSuggest.type.ts';
+
 export type SelectInputSearch = InputValueProps & {};
 
 export type OptionValue = string | number;
@@ -170,5 +172,7 @@ declare const wrapSelect: <PropsExtending extends {}>(
   ) => React.ReactNode,
 ) => IntergalacticSelectComponent<PropsExtending>;
 
-export { InputSearch, wrapSelect };
+declare const AutoSuggest = NSAutoSuggest.Component;
+
+export { InputSearch, wrapSelect, AutoSuggest };
 export default Select;

semcore/select/src/index.js

@@ -1,3 +1,4 @@
 export { default as InputSearch } from './InputSearch';
 export { default } from './Select';
 export * from './Select';
+export { AutoSuggest } from './components/AutoSuggest/AutoSuggest';