[UIK-3428][select] added autosuggest component

semcore/dropdown/src/AbstractDropdown.tsx

@@ -312,10 +312,10 @@ export abstract class AbstractDropdown extends Component<AbstractDDProps, typeof
   }
 
   componentDidUpdate(prevProps: AbstractDDProps) {
-    const { visible } = this.asProps;
+    const { visible, interaction } = this.asProps;
     const visibilityChanged = visible !== prevProps.visible;
 
-    if (visibilityChanged && !visible) {
+    if (visibilityChanged && !visible && interaction !== 'none') {
       this.handlers.highlightedIndex(this.props.defaultHighlightedIndex);
       this.prevHighlightedIndex = null;
       this.highlightedItem = null;

semcore/icon/package.json

@@ -4414,4 +4414,4 @@
       "require": "./lib/ZoomPlus/m/index.js"
     }
   }
-}
+}

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",
@@ -23,6 +23,7 @@
     "@semcore/dropdown": "^17.2.0",
     "@semcore/dropdown-menu": "^17.2.0",
     "@semcore/input": "^17.2.0",
+    "@semcore/spin": "^17.2.0",
     "@semcore/typography": "^17.2.0",
     "classnames": "2.2.6"
   },

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

@@ -0,0 +1,163 @@
+import type { Intergalactic } from '@semcore/core';
+import { Component, createComponent, Root } from '@semcore/core';
+import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
+import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
+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';
+import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
+
+class AutoSuggestRoot extends Component<
+  Intergalactic.InternalTypings.InferComponentProps<NSAutoSuggest.Component>,
+  typeof AutoSuggestRoot.enhance,
+  { value: (value: string) => string },
+  {},
+  NSAutoSuggest.State,
+  NSAutoSuggest.DefaultProps
+> {
+  static defaultProps: NSAutoSuggest.DefaultProps = {
+    defaultValue: '',
+  };
+
+  static enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)] as const;
+
+  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 = window.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, uid, getI18nText } = this.asProps;
+    const { isVisible, highlightedIndex, suggestions, isLoading } = this.state;
+    const id = `${uid}_autosuggest-trigger`;
+
+    const isVisiblePopper = isVisible && (value === '' || suggestions.length > 0 || isLoading);
+
+    return (
+      <Select
+        interaction='none'
+        visible={isVisiblePopper}
+        onVisibleChange={this.handleChangeVisible}
+        highlightedIndex={highlightedIndex}
+        onHighlightedIndexChange={this.handleChangeHighlightedIndex}
+        defaultHighlightedIndex={null}
+      >
+        <Select.Trigger id={id} tag={Input} onFocus={this.handleFocus} onBlur={this.handleBlur}>
+          <Root
+            render={Input.Value}
+            value={value}
+            role='combobox'
+            onChange={this.handleChange}
+            onKeyDown={this.handleKeyDown}
+            autoComplete='off'
+          />
+          {isLoading && (
+            <Input.Addon tag={Spin} size='l' />
+          )}
+        </Select.Trigger>
+        <Select.Popper aria-labelledby={id}>
+          {isLoading
+            ? (<Select.StatusItem state='loading' />)
+            : (
+                <>
+                  {suggestions.length === 0
+                    ? (value.length === 0 && <Select.StatusItem itemsCount={0}>{getI18nText('AutoSuggest.Popper.placeholderText')}</Select.StatusItem>)
+                    : (
+                        <Select.List>
+                          {suggestions.map((option) => (
+                            <Select.Option value={option} key={option} selected={false} onClick={() => this.handleChangeSelect(option)}>
+                              <Highlight highlight={value}>{option}</Highlight>
+                            </Select.Option>
+                          ))}
+                        </Select.List>
+                      )}
+                </>
+              )}
+        </Select.Popper>
+      </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: var(--intergalactic-spacing-05x, 2px) 0">${highlight}</span>`,
+      );
+    } catch (e) {}
+  }
+  return <span dangerouslySetInnerHTML={{ __html: html }} />;
+}

semcore/select/src/index.d.ts

@@ -17,6 +17,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;
@@ -172,5 +174,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';

semcore/select/src/translations/en.json

@@ -2,5 +2,6 @@
   "clearSearch": "Clear search field",
   "selectPlaceholder": "Select option",
   "Select.InputSearch.Value:placeholder": "Search",
-  "Select.InputSearch.Value:aria-label": "Search"
+  "Select.InputSearch.Value:aria-label": "Search",
+  "AutoSuggest.Popper.placeholderText": "Start typing to see options"
 }