@snack-uikit/fields 0.14.2 → 0.15.0

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -1,133 +1,193 @@
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import mergeRefs from 'merge-refs';
+import { forwardRef, KeyboardEvent, KeyboardEventHandler, useEffect, useMemo, useRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
-import { selectAll } from '@snack-uikit/input-private';
+import { InputPrivate } from '@snack-uikit/input-private';
+import { Droplist, SelectionSingleValueType, useFuzzySearch } from '@snack-uikit/list';
+import { extractSupportProps } from '@snack-uikit/utils';
 
-import { DEFAULT_LOCALE, EMPTY_OPTION, SELECTION_MODE } from './constants';
-import { FieldSelectBase } from './FieldSelectBase';
-import { getDisplayedValue } from './helpers';
-import { useList } from './hooks';
-import { FieldSelectSingleProps, Option } from './types';
+import { FieldContainerPrivate } from '../../helperComponents';
+import { FieldDecorator } from '../FieldDecorator';
+import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
+import styles from './styles.module.scss';
+import { FieldSelectSingleProps } from './types';
+import { extractSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
 
 export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleProps>(
   (
     {
-      value: valueProp,
-      onChange,
+      id,
+      name,
+      placeholder,
+      size = 's',
       options,
+      value: valueProp,
+      defaultValue,
+      onChange: onChangeProp,
+      loading,
       disabled = false,
       readonly = false,
       searchable = true,
+      showCopyButton = true,
+      showClearButton = true,
+      onKeyDown: onInputKeyDownProp,
+      label,
+      labelTooltip,
+      labelTooltipPlacement,
       required = false,
-      locale = DEFAULT_LOCALE,
-      open,
-      onOpenChange,
-      showCopyButton: showCopyButtonProp = true,
-      showClearButton: showClearButtonProp = true,
+      hint,
+      showHintIcon,
+      validationState = 'default',
+      footer,
+      search,
+      autocomplete = false,
+      prefixIcon,
       ...rest
     },
     ref,
   ) => {
-    const selectionMode = SELECTION_MODE.Single;
-    const [value, setValue] = useUncontrolledProp(valueProp, '', onChange);
-    const selected = useMemo(() => options.find(option => option.value === value) ?? EMPTY_OPTION, [options, value]);
-    const displayedValue = getDisplayedValue({ selectionMode, selected });
-    const [inputValue, setInputValue] = useState(selected.label);
-    const showAdditionalButton = Boolean(value && !disabled);
-    const isChecked = useCallback((option: Option) => selected.value === option.value, [selected.value]);
-
-    const {
-      isOpen,
-      setIsOpen,
-      localRef,
-      extendedOptions,
-      onInputKeyDown,
-      onInputValueChange,
-      onButtonKeyDown,
-      clearButtonRef,
-      copyButtonRef,
-      showClearButton,
-      showCopyButton,
-      onDroplistFocusLeave,
-      firstDroplistItemRefCallback,
-    } = useList({
-      open,
-      onOpenChange,
-      disabled,
+    const localRef = useRef<HTMLInputElement>(null);
+    const [open, setOpen] = useState<boolean>(false);
+    const [value, setValue] = useUncontrolledProp<string | number | undefined>(valueProp, defaultValue, onChangeProp);
+
+    const items = useMemo(() => transformOptionsToItems(options), [options]);
+    const selectedOption = useMemo(() => extractSelectedOptions(options, value), [options, value]);
+
+    const { inputValue, onInputValueChange, prevInputValue } = useSearchInput({
+      ...search,
+      defaultValue: String(selectedOption ?? ''),
+    });
+
+    useEffect(() => {
+      !open && onInputValueChange(String(selectedOption?.option ?? ''));
+    }, [onInputValueChange, open, selectedOption]);
+
+    useEffect(() => {
+      onInputValueChange(String(selectedOption?.option ?? ''));
+
+      prevInputValue.current = String(selectedOption?.option ?? '');
+    }, [prevInputValue, onInputValueChange, selectedOption]);
+
+    const onClear = () => {
+      setValue('');
+      onInputValueChange('');
+
+      localRef.current?.focus();
+      setOpen(true);
+    };
+
+    const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
+
+    const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
       readonly,
-      inputValue,
-      setInputValue,
-      searchable,
-      options,
-      isChecked,
-      showCopyButton: showCopyButtonProp,
-      showClearButton: showClearButtonProp,
-      showAdditionalButton,
+      size,
+      showClearButton: showClearButton && Boolean(value),
+      showCopyButton,
+      inputRef: localRef,
+      onClear,
+      valueToCopy: String(selectedOption?.option ?? ''),
+    });
+
+    const commonHandleOnKeyDown = useHandleOnKeyDown({
+      inputKeyDownNavigationHandler,
+      onInputKeyDownProp,
+      setOpen,
     });
 
-    const handleOpenChange = (isOpen: boolean) => {
-      if (isOpen) {
-        searchable && selectAll(localRef.current);
-      } else {
-        setInputValue(displayedValue);
+    const handleOnKeyDown = (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
+      if (!open && prevInputValue.current !== inputValue) {
+        setOpen(true);
       }
 
-      setIsOpen(isOpen);
+      commonHandleOnKeyDown(onKeyDown)(e);
     };
 
-    const handleClear = () => {
-      setValue('');
-      setInputValue('');
-
-      if (required) {
-        localRef.current?.focus();
-        setIsOpen(true);
-      } else {
-        localRef.current?.blur();
-        setIsOpen(false);
+    const handleSelectionChange = (newValue?: SelectionSingleValueType) => {
+      setValue(newValue);
+      localRef.current?.focus();
+
+      if (newValue) {
+        setOpen(false);
       }
     };
 
-    const handleChange = (option: Option) => () => {
-      setValue(option.value);
-      setInputValue(option.label);
-      setIsOpen(false);
-      localRef.current?.focus();
+    const handleOpenChange = (open: boolean) => {
+      if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
+        setOpen(open);
+      }
     };
 
-    useEffect(() => {
-      setInputValue(selected.label);
-    }, [selected]);
+    const fuzzySearch = useFuzzySearch(items);
+    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
 
     return (
-      <FieldSelectBase
-        {...rest}
-        ref={ref}
-        localRef={localRef}
-        selectionMode={selectionMode}
-        options={extendedOptions}
-        selected={selected}
-        disabled={disabled}
-        readonly={readonly}
+      <FieldDecorator
+        {...extractSupportProps(rest)}
         required={required}
-        searchable={searchable}
-        onChange={handleChange}
-        onClear={handleClear}
-        valueToCopy={displayedValue}
-        inputValue={searchable ? inputValue : displayedValue}
-        onInputValueChange={onInputValueChange}
-        onInputKeyDown={onInputKeyDown}
-        clearButtonRef={clearButtonRef}
-        copyButtonRef={copyButtonRef}
-        onButtonKeyDown={onButtonKeyDown}
-        open={isOpen}
-        onOpenChange={handleOpenChange}
-        locale={locale}
-        showCopyButton={showCopyButton}
-        showClearButton={showClearButton}
-        onDroplistFocusLeave={onDroplistFocusLeave}
-        firstDroplistItemRefCallback={firstDroplistItemRefCallback}
-      />
+        readonly={readonly}
+        label={label}
+        labelTooltip={labelTooltip}
+        labelTooltipPlacement={labelTooltipPlacement}
+        labelFor={id}
+        hint={hint}
+        disabled={disabled}
+        showHintIcon={showHintIcon}
+        size={size}
+        validationState={validationState}
+      >
+        <Droplist
+          trigger='clickAndFocusVisible'
+          placement='bottom'
+          data-test-id='field-select__list'
+          items={result}
+          triggerElemRef={localRef}
+          scroll
+          marker
+          footer={footer}
+          selection={{
+            mode: 'single',
+            value: value,
+            onChange: handleSelectionChange,
+          }}
+          size={size}
+          open={open}
+          onOpenChange={handleOpenChange}
+          loading={loading}
+        >
+          {({ onKeyDown }) => (
+            <FieldContainerPrivate
+              className={styles.container}
+              validationState={validationState}
+              disabled={disabled}
+              readonly={readonly}
+              focused={open}
+              variant={'single-line-container'}
+              inputRef={localRef}
+              size={size}
+              prefix={prefixIcon}
+            >
+              <InputPrivate
+                id={id}
+                name={name}
+                type='text'
+                disabled={disabled}
+                placeholder={placeholder}
+                ref={mergeRefs(ref, localRef)}
+                onChange={searchable ? onInputValueChange : undefined}
+                value={inputValue}
+                readonly={!searchable || readonly}
+                data-test-id='field-select__input'
+                onKeyDown={handleOnKeyDown(onKeyDown)}
+              />
+
+              <div className={styles.postfix}>
+                {buttons}
+                <ArrowIcon size={arrowIconSize} className={styles.arrowIcon} />
+              </div>
+            </FieldContainerPrivate>
+          )}
+        </Droplist>
+      </FieldDecorator>
     );
   },
 );

package/src/components/FieldSelect/hooks.ts

@@ -0,0 +1,125 @@
+import { KeyboardEvent, KeyboardEventHandler, RefObject, useCallback, useMemo, useRef } from 'react';
+import { Handler, useUncontrolledProp } from 'uncontrollable';
+
+import { useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
+import { SelectionSingleValueType } from '@snack-uikit/list';
+import { extractChildIds } from '@snack-uikit/list/dist/utils';
+
+import { useCopyButton } from '../../hooks';
+import { OptionProps, SearchState } from './types';
+import { isAccordionOptionProps, isBaseOptionProps, isNextListOptionProps, transformOptionsToItems } from './utils';
+
+type UseHandleOnKeyDownProps = {
+  inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
+  onInputKeyDownProp: KeyboardEventHandler<HTMLInputElement> | undefined;
+  setOpen(open: boolean): void;
+};
+
+export function useHandleOnKeyDown({
+  setOpen,
+  inputKeyDownNavigationHandler,
+  onInputKeyDownProp,
+}: UseHandleOnKeyDownProps) {
+  return useCallback(
+    (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.code === 'Space') {
+        e.stopPropagation();
+      } else {
+        onKeyDown?.(e);
+      }
+
+      if (e.code === 'ArrowUp') {
+        setOpen(false);
+      }
+
+      if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+        e.preventDefault();
+      }
+
+      if (e.key === 'Tab') {
+        setOpen(false);
+      }
+
+      inputKeyDownNavigationHandler(e);
+      onInputKeyDownProp?.(e);
+    },
+    [inputKeyDownNavigationHandler, onInputKeyDownProp, setOpen],
+  );
+}
+
+type UseButtonsProps = {
+  readonly: boolean;
+  showClearButton: boolean;
+  showCopyButton: boolean;
+  size: 's' | 'm' | 'l';
+  onClear(): void;
+  inputRef: RefObject<HTMLInputElement>;
+  valueToCopy?: string;
+};
+
+export function useButtons({
+  readonly,
+  showClearButton,
+  showCopyButton,
+  size,
+  onClear,
+  inputRef,
+  valueToCopy = '',
+}: UseButtonsProps) {
+  const clearButtonRef = useRef<HTMLButtonElement>(null);
+  const copyButtonRef = useRef<HTMLButtonElement>(null);
+
+  const buttonsRefs: (Element | null)[] = [copyButtonRef.current, clearButtonRef.current];
+
+  const clearButtonSettings = useClearButton({
+    clearButtonRef,
+    showClearButton: !readonly && showClearButton,
+    size,
+    onClear,
+  });
+  const copyButtonSettings = useCopyButton({
+    copyButtonRef,
+    showCopyButton: readonly && showCopyButton,
+    size,
+    valueToCopy,
+  });
+  const { onInputKeyDown: inputKeyDownNavigationHandler, buttons } = useButtonNavigation({
+    inputRef,
+    buttons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+    onButtonKeyDown: undefined,
+    readonly,
+    submitKeys: ['Enter', 'Space', 'Tab'],
+  });
+
+  return { buttons, inputKeyDownNavigationHandler, buttonsRefs };
+}
+
+export function useSearchInput({ value, onChange, defaultValue }: SearchState) {
+  const [inputValue, onInputValueChange] = useUncontrolledProp<string>(value, defaultValue ?? '', onChange);
+
+  const prevInputValue = useRef<string>(inputValue);
+
+  return { inputValue, onInputValueChange, prevInputValue };
+}
+
+export function useHandleDeleteItem(setValue: Handler) {
+  return useCallback(
+    (option?: OptionProps) => () => {
+      if (!option) {
+        return;
+      }
+
+      if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+        const removeIds = extractChildIds({ items: transformOptionsToItems(option.options) }).concat(option.value);
+
+        setValue((value: SelectionSingleValueType[]) => value?.filter(v => !removeIds.includes(v ?? '')));
+        return;
+      }
+
+      if (isBaseOptionProps(option)) {
+        setValue((value: SelectionSingleValueType[]) => value?.filter(v => v !== option.value));
+      }
+    },
+    [setValue],
+  );
+}

package/src/components/FieldSelect/index.ts

@@ -1 +1,12 @@
-export * from './FieldSelect';
+export { FieldSelect } from './FieldSelect';
+
+export type {
+  FieldSelectSingleProps,
+  FieldSelectMultipleProps,
+  FieldSelectProps,
+  OptionProps,
+  BaseOptionProps,
+  AccordionOptionProps,
+  NestListOptionProps,
+  GroupOptionProps,
+} from './types';

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

@@ -6,52 +6,48 @@ $containerVariant: 'single-line-container';
 $icons-sizes: (
   's': $icon-xs,
   'm': $icon-s,
-  'l': $icon-s
+  'l': $icon-s,
 );
 
+$base-min-width: 4px;
+
 .triggerClassName {
   --offset: #{$space-drop-list-drop-offset};
-  
-  width: 100%;
-}
-
-
-.scrollContainerS {
-  max-height: 256px;
-}
 
-.scrollContainerM {
-  max-height: 320px;
+  width: 100%;
 }
 
-.scrollContainerL {
-  max-height: 384px;
+.contentWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
 }
 
-.displayValue {
-  pointer-events: none;
+.tagContainer {
+  /* stylelint-disable-next-line declaration-no-important */
+  height: auto !important;
 
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-
-  box-sizing: border-box;
-  height: 100%;
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($fields, 'select-multiple', $size);
 
-  background-color: inherit;
-  border: none;
-  outline: none;
+      .contentWrapper {
+        gap: simple-var($fields, 'select-multiple', $size, 'gap');
+      }
+    }
+  }
 }
 
 .container {
+  position: relative;
   flex: 1 1 0;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
+      .inputPlug {
+        @include composite-var($theme-variables, 'sans', 'body', $size);
+      }
+
       .arrowIcon {
         width: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
         height: simple-var($icons-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
@@ -62,7 +58,11 @@ $icons-sizes: (
         .displayValue {
           $button-width: simple-var($icons-sizes, $size);
           $postfix-width: calc(var(#{$space-fields-postfix-gap}) + $button-width * 2);
-          $margin-right: calc(#{simple-var($fields, $containerVariant, $size, 'padding-right')} + #{simple-var($fields, $containerVariant, $size, 'gap')} + #{$postfix-width});
+          $margin-right: calc(
+            #{simple-var($fields, $containerVariant, $size, 'padding-right')} +
+              #{simple-var($fields, $containerVariant, $size, 'gap')} +
+              #{$postfix-width}
+          );
 
           width: calc(100% - $margin-right);
           margin-right: $margin-right;
@@ -73,15 +73,55 @@ $icons-sizes: (
     }
   }
 
-  &:hover, &:focus-within, &[data-focused] {
+  &:hover,
+  &:focus-within,
+  &[data-focused] {
     .arrowIcon {
       color: $sys-neutral-text-support;
     }
   }
 
-  &[data-disabled], &[data-readonly] {
+  &[data-disabled],
+  &[data-readonly] {
     .arrowIcon {
       color: $sys-neutral-text-disabled;
     }
   }
 }
+
+.inputPlug {
+  content: '';
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  overflow: hidden;
+
+  width: fit-content;
+  max-width: 100%;
+  height: 0;
+}
+
+.inputWrapper {
+  position: relative;
+
+  display: inline-flex;
+  flex: 1;
+
+  min-width: $base-min-width;
+
+  color: transparent;
+
+  &[data-searchable='false'] {
+    width: 0;
+    min-width: 0;
+    max-width: 0;
+  }
+}
+
+.postfix {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: $space-fields-postfix-gap;
+}