@snack-uikit/search 0.4.13-preview-85c5f47b.0

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -0,0 +1,128 @@
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, KeyboardEvent, useCallback, useRef, useState } from 'react';
+
+import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
+
+import { PRIVATE_SEARCH_TEST_IDS, Size, TEST_IDS } from '../../constants';
+import { SearchDecorator } from '../SearchDecorator';
+import { SearchPrivate, SearchPrivateProps } from '../SearchPrivate';
+import styles from './styles.module.scss';
+
+export type SearchAutocompleteProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
+  /**
+   * Элементы выпадающие в Droplist в режиме Autocomplete.
+   *
+   * На нажатие 'Space', 'Enter' или клике по элементу будет вызываться onSubmit.
+   */
+  options: Pick<ItemSingleProps, 'option' | 'description' | 'tagLabel' | 'icon' | 'caption' | 'avatar'>[];
+  /** Внешний бордер */
+  outline?: boolean;
+};
+
+export const SearchAutocomplete = forwardRef<HTMLInputElement, SearchAutocompleteProps>(function SearchAutocomplete(
+  {
+    size = Size.S,
+    value,
+    onChange,
+    placeholder,
+    options = [],
+    loading,
+    outline,
+    onSubmit,
+    onFocus,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const scrollRef = useRef<HTMLElement>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const {
+    firstElementRefCallback,
+    handleDroplistFocusLeave,
+    handleDroplistItemClick,
+    handleTriggerKeyDown,
+    handleDroplistItemKeyDown,
+    triggerElementRef,
+  } = Droplist.useKeyboardNavigation<HTMLInputElement>({
+    setDroplistOpen: setIsOpen,
+    triggerType: Droplist.useKeyboardNavigation.triggerTypes.Input,
+  });
+
+  const handleOptionKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+
+      // ignoring special keys (tab, arrows, backspace and etc.)
+      if (event.key.length === 1) {
+        triggerElementRef.current?.focus();
+        scrollRef.current?.scroll(0, 0);
+      }
+    },
+    [triggerElementRef, scrollRef],
+  );
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    handleTriggerKeyDown(e);
+
+    if (e.key.length === 1) {
+      setIsOpen(true);
+    }
+  };
+
+  return (
+    <div className={cn(styles.wrap, className)} {...rest}>
+      <Droplist
+        open={Boolean(triggerElementRef.current?.value) && isOpen && options.length > 0}
+        firstElementRefCallback={firstElementRefCallback}
+        useScroll
+        size={size}
+        onFocusLeave={handleDroplistFocusLeave}
+        onOpenChange={setIsOpen}
+        data-test-id={TEST_IDS.droplist}
+        triggerClassName={styles.triggerClassName}
+        scrollRef={scrollRef}
+        triggerRef={triggerElementRef}
+        triggerElement={
+          <SearchDecorator
+            size={size}
+            outline={outline || undefined}
+            focused={(isOpen && Boolean(triggerElementRef.current?.value)) || undefined}
+            data-test-id={TEST_IDS.decorator}
+          >
+            <SearchPrivate
+              loading={loading}
+              value={value}
+              onChange={onChange}
+              onSubmit={onSubmit}
+              placeholder={placeholder}
+              ref={mergeRefs(ref, triggerElementRef)}
+              onKeyDown={onKeyDown}
+              onFocus={onFocus}
+              size={size}
+              data-test-id={PRIVATE_SEARCH_TEST_IDS.field}
+            />
+          </SearchDecorator>
+        }
+      >
+        {options.map(item => (
+          <Droplist.ItemSingle
+            {...item}
+            key={item.option}
+            onClick={e => {
+              handleDroplistItemClick(e);
+              onChange?.(item.option);
+              onSubmit?.(item.option);
+              triggerElementRef.current?.blur();
+            }}
+            onKeyDown={e => handleDroplistItemKeyDown(e, handleOptionKeyDown)}
+            data-test-id={TEST_IDS.option}
+          />
+        ))}
+      </Droplist>
+    </div>
+  );
+});

package/src/components/SearchAutocomplete/index.ts

@@ -0,0 +1 @@
+export * from './SearchAutocomplete';

package/src/components/SearchAutocomplete/styles.module.scss

@@ -0,0 +1,13 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-search';
+
+.triggerClassName {
+  --offset: #{$space-drop-list-drop-offset};
+
+  display: flex;
+  flex-grow: 1;
+}
+
+.wrap {
+  display: flex;
+}
+

package/src/components/SearchDecorator/SearchDecorator.tsx

@@ -0,0 +1,39 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { Size } from '../../constants';
+import { SearchProps } from '../Search';
+import styles from './styles.module.scss';
+
+export type SearchDecoratorProps = WithSupportProps<
+  {
+    children: ReactNode;
+    focused?: boolean;
+    className?: string;
+  } & Pick<SearchProps, 'outline' | 'size'>
+>;
+
+export function SearchDecorator({
+  children,
+  outline,
+  size = Size.S,
+  focused,
+  className,
+  ...rest
+}: SearchDecoratorProps) {
+  return (
+    <div
+      className={cn(styles.decorator, className)}
+      data-outline={outline || undefined}
+      data-size={size}
+      data-focused={focused || undefined}
+      {...extractSupportProps(rest)}
+    >
+      {children}
+    </div>
+  );
+}
+
+SearchDecorator.sizes = Size;

package/src/components/SearchDecorator/index.ts

@@ -0,0 +1 @@
+export * from './SearchDecorator';

package/src/components/SearchDecorator/styles.module.scss

@@ -0,0 +1,41 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-search';
+@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+
+$sizes: 's', 'm', 'l';
+
+.decorator {
+  display: flex;
+  flex: 1 0 auto;
+  align-items: center;
+
+  box-sizing: border-box;
+
+  background-color: $sys-neutral-background1-level;
+  border-color: transparent;
+  border-style: solid;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($search, $size);
+    }
+  }
+
+  &[data-outline] {
+    border-color: $sys-neutral-decor-default;
+  }
+
+  &:hover {
+    background-color: $sys-neutral-background2-level;
+    border-color: $sys-primary-decor-hovered;
+  }
+
+  &:focus-within,
+  &[data-focused] {
+    @include outline-var($container-focused-m);
+
+    background-color: $sys-neutral-background2-level;
+    border-color: $sys-primary-accent-default;
+    outline-color: $sys-primary-decor-activated;
+  }
+}
+

package/src/components/SearchFieldText/SearchFieldText.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+
+import { PRIVATE_SEARCH_TEST_IDS, Size } from '../../constants';
+import { SearchDecorator } from '../SearchDecorator';
+import { SearchPrivate, SearchPrivateProps } from '../SearchPrivate';
+
+export type SearchTextFieldProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
+  /** Внешний бордер */
+  outline?: boolean;
+};
+
+export const SearchFieldText = forwardRef<HTMLInputElement, SearchTextFieldProps>(function SearchFieldText(
+  { value, onChange, onBlur, onFocus, size = Size.S, outline, loading, placeholder, onSubmit, className, ...rest },
+  ref,
+) {
+  return (
+    <SearchDecorator outline={outline} size={size} className={className} {...rest}>
+      <SearchPrivate
+        ref={ref}
+        size={size}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onSubmit={onSubmit}
+        placeholder={placeholder}
+        loading={loading}
+        data-test-id={PRIVATE_SEARCH_TEST_IDS.field}
+      />
+    </SearchDecorator>
+  );
+});

package/src/components/SearchFieldText/index.ts

@@ -0,0 +1 @@
+export * from './SearchFieldText';

package/src/components/SearchPrivate/SearchPrivate.tsx

@@ -0,0 +1,130 @@
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { FocusEvent, forwardRef, KeyboardEvent, useCallback, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { SearchSVG } from '@snack-uikit/icons';
+import {
+  InputPrivate,
+  InputPrivateProps,
+  moveCursorToEnd,
+  useButtonNavigation,
+  useClearButton,
+} from '@snack-uikit/input-private';
+import { Sun } from '@snack-uikit/loaders';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { PRIVATE_SEARCH_TEST_IDS, Size } from '../../constants';
+import styles from './styles.module.scss';
+
+export type SearchPrivateProps = WithSupportProps<
+  {
+    /** Размер */
+    size?: Size;
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Колбек на подтверждение поиска по строке */
+    onSubmit?(value: string): void;
+    /** CSS-класс */
+    className?: string;
+  } & Pick<Partial<InputPrivateProps>, 'value' | 'onChange' | 'placeholder' | 'onFocus' | 'onBlur' | 'onKeyDown'>
+>;
+
+const SearchPrivateComponent = forwardRef<HTMLInputElement, SearchPrivateProps>(function SearchPrivate(
+  {
+    size = Size.S,
+    value: valueProp = '',
+    onChange: onChangeProp,
+    loading,
+    placeholder,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    onSubmit,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const [value, onValueChange] = useUncontrolledProp(valueProp, '', onChangeProp);
+
+  const localRef = useRef<HTMLInputElement>(null);
+  const clearButtonRef = useRef<HTMLButtonElement>(null);
+
+  const showClearButton = Boolean(value);
+
+  const onClear = () => {
+    onValueChange('');
+
+    localRef.current?.focus();
+  };
+
+  const clearButtonSettings = useClearButton({
+    clearButtonRef,
+    showClearButton,
+    size,
+    onClear,
+  });
+
+  const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+    inputRef: localRef,
+    buttons: useMemo(() => [clearButtonSettings], [clearButtonSettings]),
+    readonly: false,
+    submitKeys: ['Enter', 'Space'],
+  });
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      onKeyDown && onKeyDown(e);
+      onInputKeyDown(e);
+
+      if (e.key === 'Enter' && localRef.current?.value) {
+        onSubmit && onSubmit(localRef.current.value);
+        // TODO: think about remove blur behavior
+        localRef.current?.blur();
+      }
+    },
+    [onInputKeyDown, onKeyDown, onSubmit],
+  );
+
+  const handleOnFocus = useCallback(
+    (e: FocusEvent<HTMLInputElement, Element>) => {
+      onFocus && onFocus(e);
+      moveCursorToEnd(localRef.current);
+    },
+    [onFocus],
+  );
+
+  return (
+    <div className={cn(styles.container, className)} {...extractSupportProps(rest)} data-size={size}>
+      <span className={styles.prefix}>
+        {loading ? (
+          <Sun data-test-id={PRIVATE_SEARCH_TEST_IDS.iconSun} />
+        ) : (
+          <SearchSVG data-test-id={PRIVATE_SEARCH_TEST_IDS.iconSearch} />
+        )}
+      </span>
+
+      <InputPrivate
+        value={value}
+        onChange={onValueChange}
+        onKeyDown={handleKeyDown}
+        onFocus={handleOnFocus}
+        onBlur={onBlur}
+        tabIndex={inputTabIndex}
+        ref={mergeRefs(ref, localRef)}
+        placeholder={placeholder}
+        type={InputPrivate.types.Text}
+        data-test-id={PRIVATE_SEARCH_TEST_IDS.input}
+      />
+
+      <span className={styles.postfix}>{buttons}</span>
+    </div>
+  );
+});
+
+export const SearchPrivate = SearchPrivateComponent as typeof SearchPrivateComponent & {
+  sizes: typeof Size;
+};
+
+SearchPrivate.sizes = Size;

package/src/components/SearchPrivate/index.ts

@@ -0,0 +1 @@
+export * from './SearchPrivate';

package/src/components/SearchPrivate/styles.module.scss

@@ -0,0 +1,43 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-search';
+@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+
+$sizes: 's', 'm', 'l';
+
+.container {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  box-sizing: border-box; 
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($search-private, $size);
+
+      input {
+        @include composite-var($theme-variables, 'sans', 'body', $size);
+
+        cursor: text;
+      }
+
+      svg {
+        width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+        height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
+}
+
+.prefix {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  color: $sys-neutral-text-light;
+}
+
+.postfix {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: $space-fields-postfix-gap;
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Search';
+export * from './SearchPrivate';

package/src/constants.ts

@@ -0,0 +1,20 @@
+export enum Size {
+  S = 's',
+  M = 'm',
+  L = 'l',
+}
+
+export const TEST_IDS = {
+  main: 'search',
+  decorator: 'search__decorator',
+  droplist: 'search__droplist',
+  option: 'search__option',
+};
+
+export const PRIVATE_SEARCH_TEST_IDS = {
+  field: 'search__field',
+  input: 'search__field-input',
+  iconSun: 'search__icon-sun',
+  iconSearch: 'search__icon-search',
+  buttonClearValue: 'button-clear-value',
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';