@snack-uikit/fields 0.16.1-preview-3bc93fc3.0 → 0.16.1

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -1,20 +1,19 @@
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, KeyboardEventHandler, useMemo, useRef } from 'react';
+import { FocusEvent, forwardRef, KeyboardEvent, KeyboardEventHandler, useMemo, useRef, useState } from 'react';
 
 import { InputPrivate } from '@snack-uikit/input-private';
-import { BaseItemProps, Droplist, ItemProps, SelectionSingleValueType, useFuzzySearch } from '@snack-uikit/list';
+import { Droplist, SelectionSingleValueType, useFuzzySearch } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
-import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
 import styles from './styles.module.scss';
 import { FieldSelectMultipleProps } from './types';
-import { extractListProps, findSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
+import { extractSelectedMultipleOptions, getArrowIcon, transformOptionsToItems } from './utils';
 
 const BASE_MIN_WIDTH = 4;
 
@@ -29,19 +28,24 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
       value: valueProp,
       defaultValue,
       onChange: onChangeProp,
+      loading,
       disabled = false,
       readonly = false,
       searchable = true,
       showClearButton = true,
       onKeyDown: onInputKeyDownProp,
+      label,
+      labelTooltip,
+      labelTooltipPlacement,
+      required = false,
+      hint,
+      showHintIcon,
       validationState = 'default',
+      footer,
       search,
       autocomplete = false,
       prefixIcon,
-      removeByBackspace = false,
-      addOptionByEnter = false,
-      open: openProp,
-      onOpenChange,
+      error,
       ...rest
     },
     ref,
@@ -50,7 +54,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     const inputPlugRef = useRef<HTMLSpanElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
 
-    const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: onOpenChange });
+    const [open, setOpen] = useState<boolean>(false);
     const items = useMemo(() => transformOptionsToItems(options), [options]);
     const [value, setValue] = useValueControl<SelectionSingleValueType[]>({
       value: valueProp,
@@ -58,37 +62,27 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
       onChange: onChangeProp,
     });
 
-    const { selected, itemsWithPlaceholder } = useMemo(() => {
-      const [notSortSelectedOption, placeholder] = findSelectedOptions(items, value);
+    const selectedOption = useMemo(() => {
+      const notSortSelectedOption = extractSelectedMultipleOptions(options, value);
 
-      const selectedWithPlaceholder =
-        notSortSelectedOption || placeholder ? (placeholder ?? []).concat(notSortSelectedOption ?? []) : undefined;
-
-      const selected = selectedWithPlaceholder
-        ? selectedWithPlaceholder.sort((a, b) => {
-            if (b.disabled && !a.disabled) {
-              return 1;
-            }
-
-            if (a.disabled && !b.disabled) {
-              return -1;
-            }
-
-            return 0;
-          })
-        : undefined;
+      if (notSortSelectedOption) {
+        return notSortSelectedOption.sort((a, b) => {
+          if (b.disabled && !a.disabled) {
+            return 1;
+          }
 
-      const placeholderItems: ItemProps[] = placeholder ? placeholder : [];
+          if (a.disabled && !b.disabled) {
+            return -1;
+          }
 
-      return {
-        selected,
-        itemsWithPlaceholder: placeholderItems.concat(items),
-      };
-    }, [items, value]);
+          return 0;
+        });
+      }
+    }, [options, value]);
 
     const { inputValue, onInputValueChange, prevInputValue } = useSearchInput({
       ...search,
-      defaultValue: '',
+      defaultValue: String(selectedOption ?? ''),
     });
 
     const onClear = () => {
@@ -104,7 +98,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
       readonly,
       size,
-      showClearButton: showClearButton && !disabled && !readonly && Boolean(value?.length),
+      showClearButton: showClearButton && Boolean(value),
       showCopyButton: false,
       inputRef: localRef,
       onClear,
@@ -118,23 +112,12 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
 
     const handleItemDelete = useHandleDeleteItem(setValue);
     const handleOnKeyDown = (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLInputElement>) => {
-      if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
-        if (selected?.length && !selected.slice(-1)[0].disabled) {
-          handleItemDelete(selected.pop() as BaseItemProps)();
+      if (e.code === 'Backspace' && inputValue === '') {
+        if (selectedOption?.length && !selectedOption.slice(-1)[0].disabled) {
+          handleItemDelete(selectedOption.pop())();
         }
       }
 
-      if (e.code === 'Enter') {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-
-      if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-        setValue((value: SelectionSingleValueType[]) => (value ?? []).concat(inputValue));
-        onInputValueChange('');
-        prevInputValue.current = '';
-      }
-
       if (!open && prevInputValue.current !== inputValue) {
         setOpen(true);
       }
@@ -145,19 +128,11 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     const handleOpenChange = (open: boolean) => {
       if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
         setOpen(open);
-
         if (!open) {
-          onInputValueChange('');
-          prevInputValue.current = '';
-          if (inputPlugRef.current) {
-            inputPlugRef.current.style.width = BASE_MIN_WIDTH + 'px';
-          }
+          prevInputValue.current = inputValue;
         }
-
         if (open) {
-          if (inputPlugRef.current) {
-            inputPlugRef.current.style.width = 'unset';
-          }
+          prevInputValue.current = '';
         }
       }
     };
@@ -170,33 +145,43 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
       rest?.onBlur?.(e);
     };
 
-    const fuzzySearch = useFuzzySearch(itemsWithPlaceholder);
-    const result =
-      autocomplete || !searchable || prevInputValue.current === inputValue
-        ? itemsWithPlaceholder
-        : fuzzySearch(inputValue);
+    const fuzzySearch = useFuzzySearch(items);
+    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
 
     return (
       <FieldDecorator
         {...extractSupportProps(rest)}
-        {...extractFieldDecoratorProps(rest)}
+        error={error}
+        required={required}
+        readonly={readonly}
+        label={label}
+        labelTooltip={labelTooltip}
+        labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
+        hint={hint}
+        disabled={disabled}
+        showHintIcon={showHintIcon}
         size={size}
         validationState={validationState}
       >
         <Droplist
-          {...extractListProps(rest)}
+          trigger='clickAndFocusVisible'
+          placement='bottom'
+          data-test-id='field-select__list'
           items={result}
           triggerElemRef={localRef}
+          scroll
+          marker
+          footer={footer}
           selection={{
             mode: 'multiple',
             value: value,
             onChange: setValue,
           }}
-          dataFiltered={rest.dataFiltered ?? Boolean(inputValue.length)}
           size={size}
           open={!disabled && !readonly && open}
           onOpenChange={handleOpenChange}
+          loading={loading}
         >
           {({ onKeyDown }) => (
             <FieldContainerPrivate
@@ -212,14 +197,14 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
             >
               <>
                 <div className={styles.contentWrapper} ref={contentRef}>
-                  {selected &&
-                    selected.map(option => (
+                  {selectedOption &&
+                    selectedOption.map(option => (
                       <Tag
                         size={size === 'l' ? 's' : 'xs'}
                         tabIndex={-1}
-                        label={String(option.content.option)}
-                        key={option.id}
-                        onDelete={!option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined}
+                        label={String(option.option)}
+                        key={option.value}
+                        onDelete={!option.disabled && !disabled ? handleItemDelete(option) : undefined}
                       />
                     ))}
 
@@ -239,7 +224,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
                       name={name}
                       type='text'
                       disabled={disabled}
-                      placeholder={!selected || !selected.length ? placeholder : undefined}
+                      placeholder={!selectedOption ? placeholder : undefined}
                       ref={mergeRefs(ref, localRef)}
                       onChange={searchable ? onInputValueChange : undefined}
                       value={searchable ? inputValue : ''}

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -1,18 +1,17 @@
 import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, KeyboardEventHandler, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, KeyboardEvent, KeyboardEventHandler, useEffect, useMemo, useRef, useState } from 'react';
 
 import { InputPrivate } from '@snack-uikit/input-private';
-import { Droplist, ItemProps, SelectionSingleValueType, useFuzzySearch } from '@snack-uikit/list';
+import { Droplist, SelectionSingleValueType, useFuzzySearch } from '@snack-uikit/list';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
-import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
 import styles from './styles.module.scss';
 import { FieldSelectSingleProps } from './types';
-import { extractListProps, findSelectedOption, getArrowIcon, transformOptionsToItems } from './utils';
+import { extractSelectedOptions, getArrowIcon, transformOptionsToItems } from './utils';
 
 export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleProps>(
   (
@@ -25,26 +24,31 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
       value: valueProp,
       defaultValue,
       onChange: onChangeProp,
+      loading,
       disabled = false,
       readonly = false,
       searchable = true,
       showCopyButton = true,
       showClearButton = true,
       onKeyDown: onInputKeyDownProp,
+      label,
+      labelTooltip,
+      labelTooltipPlacement,
       required = false,
+      hint,
+      showHintIcon,
       validationState = 'default',
+      footer,
       search,
       autocomplete = false,
       prefixIcon,
-      addOptionByEnter = false,
-      open: openProp,
-      onOpenChange,
+      error,
       ...rest
     },
     ref,
   ) => {
     const localRef = useRef<HTMLInputElement>(null);
-    const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: onOpenChange });
+    const [open, setOpen] = useState<boolean>(false);
     const [value, setValue] = useValueControl<SelectionSingleValueType>({
       value: valueProp,
       defaultValue,
@@ -52,34 +56,22 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     });
 
     const items = useMemo(() => transformOptionsToItems(options), [options]);
-    const { selected, itemsWithPlaceholder } = useMemo(() => {
-      const [fonded, placeholder] = findSelectedOption(items, value);
-
-      return {
-        selected: fonded ?? placeholder,
-        itemsWithPlaceholder: ((placeholder ? [placeholder] : []) as ItemProps[]).concat(items),
-      };
-    }, [items, value]);
+    const selectedOption = useMemo(() => extractSelectedOptions(options, value), [options, value]);
 
     const { inputValue, onInputValueChange, prevInputValue } = useSearchInput({
       ...search,
-      defaultValue: selected?.content.option ?? '',
+      defaultValue: String(selectedOption ?? ''),
     });
 
     useEffect(() => {
-      if (selected?.content.option && prevInputValue.current !== selected?.content.option) {
-        onInputValueChange(selected.content.option);
-        prevInputValue.current = selected?.content.option;
-      }
-    }, [onInputValueChange, selected?.content.option, prevInputValue]);
+      !open && onInputValueChange(String(selectedOption?.option ?? ''));
+    }, [onInputValueChange, open, selectedOption]);
 
-    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
-      if (!open && selected?.content.option !== inputValue) {
-        onInputValueChange(selected?.content.option ?? '');
-      }
+    useEffect(() => {
+      onInputValueChange(String(selectedOption?.option ?? ''));
 
-      rest?.onBlur?.(e);
-    };
+      prevInputValue.current = String(selectedOption?.option ?? '');
+    }, [prevInputValue, onInputValueChange, selectedOption]);
 
     const onClear = () => {
       setValue('');
@@ -94,11 +86,11 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
       readonly,
       size,
-      showClearButton: showClearButton && !disabled && !readonly && Boolean(value),
+      showClearButton: showClearButton && Boolean(value),
       showCopyButton,
       inputRef: localRef,
       onClear,
-      valueToCopy: selected?.content.option ?? '',
+      valueToCopy: String(selectedOption?.option ?? ''),
     });
 
     const commonHandleOnKeyDown = useHandleOnKeyDown({
@@ -112,15 +104,6 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
         setOpen(true);
       }
 
-      if (e.code === 'Enter') {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-
-      if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-        setValue(inputValue);
-      }
-
       commonHandleOnKeyDown(onKeyDown)(e);
     };
 
@@ -136,34 +119,37 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     const handleOpenChange = (open: boolean) => {
       if (!readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
         setOpen(open);
-
-        if (!open) {
-          onInputValueChange(selected?.content.option ?? '');
-          prevInputValue.current = selected?.content.option ?? '';
-        }
       }
     };
 
-    const fuzzySearch = useFuzzySearch(itemsWithPlaceholder);
-    const result =
-      autocomplete || !searchable || prevInputValue.current === inputValue
-        ? itemsWithPlaceholder
-        : fuzzySearch(inputValue);
+    const fuzzySearch = useFuzzySearch(items);
+    const result = autocomplete ? items : fuzzySearch(prevInputValue.current !== inputValue ? inputValue : '');
 
     return (
       <FieldDecorator
         {...extractSupportProps(rest)}
-        {...extractFieldDecoratorProps(rest)}
-        validationState={validationState}
+        error={error}
         required={required}
         readonly={readonly}
+        label={label}
+        labelTooltip={labelTooltip}
+        labelTooltipPlacement={labelTooltipPlacement}
         labelFor={id}
+        hint={hint}
         disabled={disabled}
+        showHintIcon={showHintIcon}
         size={size}
+        validationState={validationState}
       >
         <Droplist
-          {...extractListProps(rest)}
+          trigger='clickAndFocusVisible'
+          placement='bottom'
+          data-test-id='field-select__list'
           items={result}
+          triggerElemRef={localRef}
+          scroll
+          marker
+          footer={footer}
           selection={{
             mode: 'single',
             value: value,
@@ -172,7 +158,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
           size={size}
           open={open}
           onOpenChange={handleOpenChange}
-          triggerElemRef={localRef}
+          loading={loading}
         >
           {({ onKeyDown }) => (
             <FieldContainerPrivate
@@ -198,7 +184,6 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
                 readonly={!searchable || readonly}
                 data-test-id='field-select__input'
                 onKeyDown={handleOnKeyDown(onKeyDown)}
-                onBlur={handleBlur}
               />
 
               <div className={styles.postfix}>

package/src/components/FieldSelect/hooks.ts

@@ -1,17 +1,13 @@
 import { KeyboardEvent, KeyboardEventHandler, RefObject, useCallback, useMemo, useRef } from 'react';
-import { Handler } from 'uncontrollable';
+import { Handler, useUncontrolledProp } from 'uncontrollable';
 
 import { useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
-import {
-  extractChildIds,
-  isAccordionItemProps,
-  isNextListItemProps,
-  SelectionSingleValueType,
-} from '@snack-uikit/list';
+import { SelectionSingleValueType } from '@snack-uikit/list';
+import { extractChildIds } from '@snack-uikit/list/dist/utils';
 
-import { useCopyButton, useValueControl } from '../../hooks';
-import { ItemWithId, SearchState } from './types';
-import { isBaseOptionProps } from './utils';
+import { useCopyButton } from '../../hooks';
+import { OptionProps, SearchState } from './types';
+import { isAccordionOptionProps, isBaseOptionProps, isNextListOptionProps, transformOptionsToItems } from './utils';
 
 type UseHandleOnKeyDownProps = {
   inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
@@ -99,7 +95,7 @@ export function useButtons({
 }
 
 export function useSearchInput({ value, onChange, defaultValue }: SearchState) {
-  const [inputValue = '', onInputValueChange] = useValueControl<string>({ value, onChange, defaultValue });
+  const [inputValue, onInputValueChange] = useUncontrolledProp<string>(value, defaultValue ?? '', onChange);
 
   const prevInputValue = useRef<string>(inputValue);
 
@@ -108,20 +104,20 @@ export function useSearchInput({ value, onChange, defaultValue }: SearchState) {
 
 export function useHandleDeleteItem(setValue: Handler) {
   return useCallback(
-    (item?: ItemWithId) => () => {
-      if (!item) {
+    (option?: OptionProps) => () => {
+      if (!option) {
         return;
       }
 
-      if (isAccordionItemProps(item) || isNextListItemProps(item)) {
-        const removeIds = extractChildIds({ items: item.items }).concat(item.id ?? '');
+      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(item)) {
-        setValue((value: SelectionSingleValueType[]) => value?.filter(v => v !== item.id));
+      if (isBaseOptionProps(option)) {
+        setValue((value: SelectionSingleValueType[]) => value?.filter(v => v !== option.value));
       }
     },
     [setValue],

package/src/components/FieldSelect/types.ts

@@ -78,30 +78,17 @@ type FiledSelectCommonProps = WithSupportProps<{
   search?: SearchState;
 
   autocomplete?: boolean;
-
-  addOptionByEnter?: boolean;
-
-  open?: boolean;
-  onOpenChange?(open: boolean): void;
-}> &
-  Pick<
-    ListProps,
-    'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'pinTop' | 'pinBottom' | 'dataFiltered'
-  >;
+}>;
 
 export type FieldSelectSingleProps = FieldSelectPrivateProps &
   Omit<SelectionSingleState, 'mode'> &
   WrapperProps &
   FiledSelectCommonProps;
 
-export type FieldSelectMultipleProps = FieldSelectPrivateProps & { removeByBackspace?: boolean } & Omit<
-    SelectionMultipleState,
-    'mode'
-  > &
+export type FieldSelectMultipleProps = FieldSelectPrivateProps &
+  Omit<SelectionMultipleState, 'mode'> &
   Omit<FiledSelectCommonProps, 'showCopyButton'>;
 
 export type FieldSelectProps =
   | (FieldSelectSingleProps & { selection?: 'single' })
   | (FieldSelectMultipleProps & { selection: 'multiple' });
-
-export type ItemWithId = BaseItemProps | AccordionItemProps | NextListItemProps;